// ФСК Долеви — Site sections
const { useState, useMemo } = React;

/* ============================================
   LANGUAGE
   ============================================ */
const LANG = window.location.pathname.startsWith('/en') ? 'en' : 'bg';

const T = {
  bg: {
    topbar: {
      hours: 'пон–пет · 09:00 – 18:00',
      location: 'Пазарджик · обслужване в цяла България',
    },
    ticker: {
      label: 'Срокове',
      items: [
        { d: '14 май',  t: 'Декларация ДДС за април' },
        { d: '14 май',  t: 'VIES декларация · вътреобщностни доставки' },
        { d: '25 май',  t: 'Осигуровки · самоосигуряващи се' },
        { d: '14 юни',  t: 'Интрастат · пристигания и изпращания' },
        { d: '30 юни',  t: 'Годишен финансов отчет · публикуване' },
        { d: '15 юли',  t: 'Авансов корпоративен данък · второ тримесечие' },
        { d: '14 авг',  t: 'Декларация ДДС за юли' },
        { d: '31 окт',  t: 'Деклариране на лихви по заеми' },
      ],
    },
    nav: {
      services: 'Услуги', pricing: 'Цени', about: 'За нас',
      clients: 'Клиенти', faq: 'Въпроси', contact: 'Контакти',
      cta: 'Безплатна консултация',
      logoSub: 'Финансово-Счетоводна Кантора',
    },
    hero: {
      eyebrow: 'Акредитирана счетоводна кантора · 30 години опит',
      h1: ['Финансови и счетоводни услуги — ', 'навсякъде', ' в България.'],
      lede: 'Работим физически и онлайн с компании от цялата страна. Личен подход, отговор в същия работен ден.',
      cta1: 'Запишете се за консултация', cta2: 'Вижте пакетите',
      statsLabels: ['опит', 'клиенти', 'онлайн', 'отговор'],
    },
    months: ['яну','фев','мар','апр','май','юни','юли','авг','сеп','окт','ное','дек'],
    deadlines: {
      label: 'Предстоящи срокове', title: 'Не пропускайте',
      items: ['ДДС декларация','VIES декларация','Декларация ЗДДФЛ','Год. декларация по ЗКПО','Подаване на ГФО','Публикуване на ГФО'],
    },
    trust: [
      { num: <>30<sup>г.</sup></>, label: 'години опит в счетоводството' },
      { num: <>100<sup>+</sup></>, label: 'клиенти от цялата страна' },
      { num: <>100<sup>%</sup></>, label: 'взаимно доверие' },
      { num: '<1ч',               label: 'гарантирано време за отговор' },
    ],
    services: {
      eyebrow: '01 Какво правим',
      title: ['Нашите ', 'услуги.'],
      list: [
        { n:'01', title:'Текущо счетоводство',        desc:'Месечно осчетоводяване, банкови операции, складови операции и контрол на първични документи.',                                                                                tags:['СС8','НСС','МСС','банка','каса'] },
        { n:'02', title:'ТРЗ и личен състав',          desc:'Заплати, осигуровки, болнични, отпуски, граждански договори и електронни трудови досиета.',                                                                                 tags:['РЗ','НАП','НОИ','фишове'] },
        { n:'03', title:'Данъчни консултации',         desc:'Преди да направите сделката, не след нея. Превенция, оптимизация, представителство при ревизии и проверки.',                                                                 tags:['ЗДДС','ЗКПО','ЗДДФЛ','СИДДО'] },
        { n:'04', title:'Годишно приключване',         desc:'Годишен финансов отчет, годишна данъчна декларация, статистика, публикуване в Търговския регистър.',                                                                         tags:['ГФО','ГДД','НСИ'] },
        { n:'05', title:'ДДС и Интрастат',             desc:'Регистрация по ДДС, месечни декларации, VIES, Интрастат.',                                                                                                                   tags:['ДДС','VIES','OSS'] },
        { n:'06', title:'Регистрация на фирми',        desc:'ЕООД, ООД, ЕТ, клонове, представителства. Подготовка на документи за нотариус и банкова сметка — на едно място.',                                                     tags:['ТР','БУЛСТАТ','нотариус'] },
        { n:'07', title:'Анализи и доклади',           desc:'Месечни управленски отчети на разбираем език. Парични потоци, прогнози и ясна картина на финансовото състояние на бизнеса.',                                                 tags:['P&L','cashflow','KPI'] },
        { n:'08', title:'Финансов директор под наем',  desc:'За компании, твърде малки за щатен финансов директор и твърде големи без такъв. Бюджетиране, анализ, банкови преговори.',                                                   tags:['бюджет','прогноза','банки'] },
        { n:'09', title:'Отчетност на публични дружества', desc:'Изготвяне и публикуване на финансови отчети за публични дружества съгласно изискванията на КФН и приложимите счетоводни стандарти.',                                    tags:['КФН','МСС','ГФО'] },
        { n:'10', title:'Консултации по банкови сделки',   desc:'Независима финансова консултация при потребителски, бизнес и ипотечни кредити. Анализ на условия, сравнение на оферти и преговори с банки.',                             tags:['кредити','ипотека','бизнес'] },
      ],
    },
    pricing: {
      eyebrow: '02 Пакети',
      title: ['', 'Месечен абонамент,', ' според нуждите на вашия бизнес.'],
      perMonth: '/ мес',
      note: ['Всеки пакет е ориентировъчен — окончателната такса се определя след разговор и зависи от конкретната дейност и обем. ', 'Свържете се с нас', ' за персонализирана оферта.'],
      pkgs: [
        { name:'Стартов',  price:'50–100',  features:['Осчетоводяване','Подаване на декларации','Годишно приключване','До 1 служител','Представителство при ревизии','Имейл поддръжка','Пълна конфиденциалност'] },
        { name:'Бизнес',   price:'150–350', features:['ДДС обслужване','VIES декларации','Банкови операции','ТРЗ и личен състав','До 3 служители','Представителство при ревизии','Месечни финансови справки','Приоритетна комуникация','Пълна конфиденциалност'] },
        { name:'Разширен', price:'500–800', features:['Пълна финансова администрация','ДДС и международно данъчно обслужване','ТРЗ — неограничен брой служители','Бюджетиране и финансови прогнози','Месечни управленски отчети','Cash flow проследяване','Виртуален финансов директор','Представителство при ревизии','Комуникация с банки и институции','Приоритетно обслужване','Пълна конфиденциалност'] },
      ],
    },
    about: {
      eyebrow: '03 За нас',
      title: ['Нашият ', 'екип.'],
      p1: 'ФСК Долеви има 30-годишен опит във финансовите и счетоводни услуги. Зад всяко досие стои екип от счетоводители, банкови експерти и финансови анализатори — специалисти с дългогодишен опит като главни счетоводители, бивши банкови директори и правни експерти.',
      p2: 'Обслужваме компании от всички бизнес сектори — от търговия и производство до изцяло онлайн бизнеси.',
      quote: '„Намираме решения преди проблемът да е станал скъп."',
      quoteName: 'Боряна Долева · Главен счетоводител',
      teamLabel: 'Нашите водещи специалисти.',
      team: [
        { name:'Боряна Долева', role:'Главен счетоводител',  photo:'/Photos/Боряна.JPG?v=2' },
        { name:'Борис Долев',   role:'Финансов анализатор',  photo:'/Photos/Борис.JPG?v=2' },
        { name:'Мирослава Шотева', role:'Адвокат',           photo:'/Photos/Мирослава.jpg?v=2' },
      ],
    },
    testimonials: {
      eyebrow: '04 Клиенти',
      title: ['', 'Отзиви', ' от наши клиенти.'],
      items: [
        { quote:'Работим заедно от 27 години. През това време сме минали през много — промени в законодателството, ревизии, разширявания. Винаги са намирали решение.', name:'Бисер Унтов', co:'Мебелсистем АД · Пазарджик', av:'БУ' },
        { quote:'Откакто работим с тях, счетоводството изобщо не ми тежи. Знам, че е в добри ръце и мога да насоча цялото си внимание към бизнеса.', name:'Андон Грозев', co:'Моливник УЕБ ООД · София', av:'АГ' },
        { quote:'Спокоен съм, че годишното приключване и данъчните срокове се случват без да се налага аз да следя. Мога да се фокусирам върху работата си.', name:'Георги Алексиев', co:'Жаргон3Д ЕООД · София', av:'ГА' },
        { quote:'Получавам ясна картина на финансовото състояние всеки месец. Комуникацията е директна и без излишно губене на време.', name:'Стоян Цоклинов', co:'Мура 2С ЕООД · София', av:'СЦ' },
      ],
    },
    faq: {
      eyebrow: '05 Въпроси',
      title: ['Често задавани ', 'въпроси', '.'],
      items: [
        { q:'Може ли да ви посетим лично в офиса?',       a:'Да — приемаме клиенти лично в офиса ни в Пазарджик по предварителна уговорка. Работим и изцяло онлайн: документите се изпращат дигитално, подписваме с електронен подпис, а комуникацията е по имейл или видеовръзка. Вие избирате какво ви е удобно.' },
        { q:'Подписваме ли договор за определен срок?',    a:'Не. Договорът е безсрочен, с 30 дни предизвестие при прекратяване от която и да е страна. Вярваме, че ви задържаме с качеството на услугата, а не с условията на договора.' },
        { q:'Как се определя месечната такса?',            a:'Таксата зависи от обема на документите и от допълнителните услуги, които изисквате — ТРЗ, ДДС регистрация, управленски отчети и др. След кратък разговор изготвяме конкретна оферта за вашия бизнес.' },
        { q:'Предлагате ли услуги на английски език?',     a:'Да. Обслужваме клиенти и на английски — кореспонденция, договори, финансови отчети и комуникация с НАП и НОИ при необходимост.' },
        { q:'Колко отнема прехвърлянето от друга кантора?',a:'В зависимост от обема. Поемаме комуникацията с предишния ви счетоводител, синхронизираме базата и прехвърляме данни в НАП и НОИ. От ваша страна е нужен само един подпис.' },
      ],
    },
    contact: {
      eyebrow: '06 Контакти',
      title: ['Запишете се за ', 'безплатна', ' консултация.'],
      dek: 'Работим изцяло дигитално — консултации по видеовръзка или телефон, без нужда от офис среща. При желание може да се срещнем и лично в офиса ни в Пазарджик.',
      firmName: 'ФСК Долеви ЕООД',
      officeLabel: 'Офис', officeValue: ['ул. Иван Вазов 18, офис 20', 'гр. Пазарджик, България', 'по предварителна уговорка'],
      phoneLabel: 'Телефон',
      emailLabel: 'Имейл',
      hoursLabel: 'Часове', hoursValue: ['Понеделник – Петък', '09:00 – 18:00 ч.'],
      cta: 'Запишете се за консултация',
      mapCta: 'Отвори в Google Maps',
    },
    footer: {
      tagline: 'Акредитирана счетоводна кантора. Обслужваме компании от цялата страна — онлайн или лично в офиса ни в Пазарджик. Над 30 години опит, личен подход.',
      col1: 'Услуги', col1items: ['Счетоводство','ТРЗ','Данъчни консултации','Годишно приключване','Регистрация на фирми'],
      col2: 'Кантора', col2items: ['За нас','Екип','Клиенти','Въпроси','Кариери'],
      col3: 'Контакти',
      copy: '© 2026 ФСК Долеви ЕООД · Пазарджик, България',
      privacy: 'Политика за поверителност',
    },
  },
  en: {
    topbar: {
      hours: 'Mon–Fri · 09:00 – 18:00',
      location: 'serving all Bulgaria',
    },
    ticker: {
      label: 'Deadlines',
      items: [
        { d: '14 May',  t: 'VAT return for April' },
        { d: '14 May',  t: 'VIES declaration · intra-community supplies' },
        { d: '25 May',  t: 'Social contributions · self-employed' },
        { d: '14 Jun',  t: 'Intrastat · arrivals and dispatches' },
        { d: '30 Jun',  t: 'Annual financial report · publication' },
        { d: '15 Jul',  t: 'Advance corporate tax · Q2' },
        { d: '14 Aug',  t: 'VAT return for July' },
        { d: '31 Oct',  t: 'Declaration of loan interest' },
      ],
    },
    nav: {
      services: 'Services', pricing: 'Pricing', about: 'About',
      clients: 'Clients', faq: 'FAQ', contact: 'Contact',
      cta: 'Free Consultation',
      logoSub: 'Financial & Accounting Firm',
    },
    hero: {
      eyebrow: 'Accredited accounting firm · 30 years of experience',
      h1: ['Financial & accounting services — ', 'anywhere', ' in Bulgaria.'],
      lede: 'We work in person and online with companies across Bulgaria. Personal approach, same-day response.',
      cta1: 'Book a free consultation', cta2: 'View packages',
      statsLabels: ['experience', 'clients', 'online', 'response'],
    },
    months: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    deadlines: {
      label: 'Upcoming deadlines', title: "Don't miss",
      items: ['VAT return','VIES declaration','Personal income tax','Annual corporate tax return','Annual financial report filing','Annual financial report publication'],
    },
    trust: [
      { num: <>30<sup>y</sup></>,  label: 'years of accounting experience' },
      { num: <>100<sup>+</sup></>, label: 'clients across Bulgaria' },
      { num: <>100<sup>%</sup></>, label: 'mutual trust' },
      { num: '<1h',                label: 'guaranteed response time' },
    ],
    services: {
      eyebrow: '01 What we do',
      title: ['Our ', 'services.'],
      list: [
        { n:'01', title:'Bookkeeping',              desc:'Monthly accounting, bank transactions, inventory and control of source documents.',                                                                                               tags:['IAS','NFRS','bank','cash'] },
        { n:'02', title:'Payroll & HR',             desc:'Salaries, social contributions, sick leave, vacations, civil contracts and electronic employment records.',                                                                      tags:['payroll','NRA','NSSI'] },
        { n:'03', title:'Tax consulting',           desc:'Before you make the deal, not after. Prevention, optimisation, and representation during audits and inspections.',                                                               tags:['VAT','CIT','PIT','DTT'] },
        { n:'04', title:'Year-end closing',         desc:'Annual financial report, annual tax return, statistics, publication in the Commercial Register.',                                                                               tags:['AFR','tax return','NSI'] },
        { n:'05', title:'VAT & Intrastat',          desc:'VAT registration, monthly returns, VIES, Intrastat.',                                                                                                                           tags:['VAT','VIES','OSS'] },
        { n:'06', title:'Company registration',     desc:'LLC, sole proprietorship, branches, representative offices. Document preparation for notary and bank account — all in one place.',                                                  tags:['CR','BULSTAT','notary'] },
        { n:'07', title:'Reports & analytics',      desc:'Monthly management reports in plain language. Cash flows, forecasts and a clear picture of your business financial position.',                                                  tags:['P&L','cashflow','KPI'] },
        { n:'08', title:'Fractional CFO',           desc:'For companies too small for a full-time CFO and too large without one. Budgeting, analysis, bank negotiations.',                                                               tags:['budget','forecast','banks'] },
        { n:'09', title:'Public company reporting', desc:'Preparation and publication of financial statements for public companies in accordance with Financial Supervision Commission requirements and applicable accounting standards.',                             tags:['FSC','IFRS','AFR'] },
        { n:'10', title:'Banking advisory',         desc:'Independent financial advice on consumer, business and mortgage loans. Conditions analysis, offer comparison and bank negotiations.',                                           tags:['loans','mortgage','business'] },
      ],
    },
    pricing: {
      eyebrow: '02 Packages',
      title: ['', 'Monthly retainer', ' tailored to your business needs.'],
      perMonth: '/ mo',
      note: ['Each package is indicative — the final fee is determined after a conversation and depends on your specific activity and volume. ', 'Contact us', ' for a personalised quote.'],
      pkgs: [
        { name:'Starter',  price:'50–100',  features:['Bookkeeping','Filing of declarations','Year-end closing','Up to 1 employee','Audit representation','Email support','Full confidentiality'] },
        { name:'Business', price:'150–350', features:['VAT services','VIES declarations','Bank transactions','Payroll & HR','Up to 3 employees','Audit representation','Monthly financial reports','Priority communication','Full confidentiality'] },
        { name:'Extended', price:'500–800', features:['Full financial administration','VAT & international tax services','Payroll — unlimited employees','Budgeting & financial forecasts','Monthly management reports','Cash flow tracking','Virtual CFO','Audit representation','Communication with banks & authorities','Priority service','Full confidentiality'] },
      ],
    },
    about: {
      eyebrow: '03 About',
      title: ['Our ', 'team.'],
      p1: 'FSK Dolevi has 30 years of experience in financial and accounting services. Behind every file stands a team of accountants, banking experts and financial analysts — specialists with long-standing experience as chief accountants, ex-bank directors and legal experts.',
      p2: 'We serve companies from all business sectors — from trade and manufacturing to fully online businesses.',
      quote: '"We find solutions before the problem becomes expensive."',
      quoteName: 'Boryana Doleva · Chief Accountant',
      teamLabel: 'Our lead specialists.',
      team: [
        { name:'Boryana Doleva',    role:'Chief Accountant',   photo:'/Photos/Боряна.JPG?v=2' },
        { name:'Boris Dolev',       role:'Financial Analyst',  photo:'/Photos/Борис.JPG?v=2' },
        { name:'Miroslava Shoteva', role:'Attorney',           photo:'/Photos/Мирослава.jpg?v=2' },
      ],
    },
    testimonials: {
      eyebrow: '04 Clients',
      title: ['', 'Reviews', ' from our clients.'],
      items: [
        { quote:"We've been working together for 27 years. We've been through a lot — legislative changes, audits, expansions. They always find a solution.", name:'Biser Untov', co:'Mebelsistem AD · Pazardzhik', av:'BU' },
        { quote:'Since we started working with them, accounting is no longer a burden. I know it is in good hands and I can direct all my attention to the business.', name:'Andon Grozev', co:'Molivnik WEB Ltd · Sofia', av:'AG' },
        { quote:'I feel at ease knowing that the year-end closing and tax deadlines are handled without me having to keep track. I can focus on my work.', name:'Georgi Aleksiev', co:'Jargon3D Ltd · Sofia', av:'GA' },
        { quote:'I get a clear picture of the financial position every month. Communication is direct and without wasted time.', name:'Stoyan Tsoklinov', co:'Mura 2S Ltd · Sofia', av:'SC' },
      ],
    },
    faq: {
      eyebrow: '05 FAQ',
      title: ['Frequently asked ', 'questions', '.'],
      items: [
        { q:'Can we visit you in person?',               a:'Yes — we welcome clients in person at our Pazardzhik office by appointment. We also work fully online: documents are sent digitally, we sign electronically, and communication is by email or video call. You choose what suits you.' },
        { q:'Do we have to sign a fixed-term contract?', a:'No. The contract is open-ended, with 30 days\' notice for termination by either party. We believe we retain you through the quality of our service, not through contract terms.' },
        { q:'How is the monthly fee determined?',        a:'The fee depends on the volume of documents and the additional services you require — payroll, VAT registration, management reports, etc. After a brief conversation we prepare a specific offer for your business.' },
        { q:'Do you provide services in English?',       a:'Yes. We serve clients in English — correspondence, contracts and financial reports.' },
        { q:'How long does a transfer from another firm take?', a:'It depends on the volume. We handle communication with your previous accountant and synchronise the records. All you need to do is sign once.' },
      ],
    },
    contact: {
      eyebrow: '06 Contact',
      title: ['Book a ', 'free', ' consultation.'],
      dek: 'We work fully digitally — consultations by video call or phone, no office meeting required.',
      firmName: 'FSK Dolevi EOOD',
      officeLabel: 'Office', officeValue: ['Ivan Vazov St 18, office 20', 'Pazardzhik, Bulgaria', 'by appointment'],
      phoneLabel: 'Phone',
      emailLabel: 'Email',
      hoursLabel: 'Hours', hoursValue: ['Monday – Friday', '09:00 – 18:00'],
      cta: 'Book a consultation',
      mapCta: 'Open in Google Maps',
    },
    footer: {
      tagline: 'Accredited accounting firm. We serve companies across Bulgaria — online or in person at our Pazardzhik office. Over 30 years of experience, personal approach.',
      col1: 'Services', col1items: ['Bookkeeping','Payroll','Tax consulting','Year-end closing','Company registration'],
      col2: 'Firm', col2items: ['About','Team','Clients','FAQ','Careers'],
      col3: 'Contact',
      copy: '© 2026 FSK Dolevi EOOD · Pazardzhik, Bulgaria',
      privacy: 'Privacy Policy',
    },
  },
};

const t = T[LANG];

/* ============================================
   ICONS
   ============================================ */
const Icon = {
  Arrow: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2 7H12M12 7L7.5 2.5M12 7L7.5 11.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  Check: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M2.5 7L5.5 10L11.5 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Phone: () => (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 2h2l1 3-1.5 1a8 8 0 003.5 3.5L9 8l3 1v2c0 .55-.45 1-1 1A10 10 0 012 3c0-.55.45-1 1-1z" stroke="currentColor" strokeWidth="1.3" fill="none"/>
    </svg>
  ),
};

/* ============================================
   TOPBAR
   ============================================ */
function Topbar() {
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <div className="topbar-left">
          <span><Icon.Phone /> &nbsp; +359 886 017 314</span>
          <span>{t.topbar.hours}</span>
        </div>
        <div className="topbar-right">
          <span>{t.topbar.location}</span>
          <div className="lang-toggle">
            <a className={LANG === 'bg' ? 'on' : ''} href="/">BG</a>
            <a className={LANG === 'en' ? 'on' : ''} href="/en/">EN</a>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================
   TICKER
   ============================================ */
function Ticker() {
  const items = t.ticker.items;
  const all = [...items, ...items];
  return (
    <div className="ticker">
      <div className="container ticker-inner">
        <div className="ticker-label">{t.ticker.label}</div>
        <div className="ticker-track">
          <div className="ticker-strip">
            {all.map((it, i) => (
              <span className="ticker-item" key={i}>
                <span className="dot"></span>
                <span className="when">{it.d}</span>
                <span>{it.t}</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================
   NAV
   ============================================ */
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="logo" style={{display:'inline-flex', flexDirection:'row', alignItems:'center', gap:'12px', textDecoration:'none'}}>
          <svg width="22" height="26" viewBox="0 0 22 26" fill="none">
            <rect x="0" y="10" width="5" height="16" fill="var(--cream-500)"/>
            <rect x="8" y="4" width="5" height="22" fill="var(--ink-900)"/>
            <rect x="16" y="0" width="5" height="26" fill="var(--cream-500)" opacity="0.5"/>
          </svg>
          <div style={{display:'flex', flexDirection:'column', gap:'2px'}}>
            <span style={{fontFamily:'var(--font-display)', fontSize:'20px', fontWeight:600, letterSpacing:'-0.01em', color:'var(--ink-900)', lineHeight:1}}>Долеви</span>
            <span style={{fontFamily:'var(--font-mono)', fontSize:'8.5px', letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--cream-500)', lineHeight:1}}>{t.nav.logoSub}</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#services">{t.nav.services}</a>
          <a href="#pricing">{t.nav.pricing}</a>
          <a href="#about">{t.nav.about}</a>
          <a href="#clients">{t.nav.clients}</a>
          <a href="#faq">{t.nav.faq}</a>
          <a href="#contact">{t.nav.contact}</a>
        </div>
        <a href="#contact" className="nav-cta">{t.nav.cta}</a>
      </div>
    </nav>
  );
}

/* ============================================
   HERO
   ============================================ */
function DeadlinesCard() {
  const today = new Date();
  const m = today.getMonth();
  const y = today.getFullYear();
  const MONTHS = t.months;

  const next14 = today.getDate() <= 14
    ? new Date(y, m, 14)
    : new Date(y, m + 1, 14);
  const fmt = d => `${d.getDate()} ${MONTHS[d.getMonth()]}`;

  const [l0,l1,l2,l3,l4,l5] = t.deadlines.items;
  const deadlines = [
    { label: l0, d: next14 },
    { label: l1, d: next14 },
    { label: l2, d: new Date(y + (m >= 4 ? 1 : 0), 3, 30) },
    { label: l3, d: new Date(y + (m >= 6 ? 1 : 0), 5, 30) },
    { label: l4, d: new Date(y + (m >= 6 ? 1 : 0), 5, 30) },
    { label: l5, d: new Date(y + (m >= 9 ? 1 : 0), 8, 30) },
  ].sort((a, b) => a.d - b.d);

  return (
    <aside className="hero-card">
      <div className="hero-card-label">{t.deadlines.label}</div>
      <div className="hero-card-title">{t.deadlines.title}</div>
      {deadlines.map(({ d, label }) => (
        <div className="hero-card-row" key={label}>
          <span className="k">{label}</span>
          <span className="v">{fmt(d)}</span>
        </div>
      ))}
    </aside>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow">
            <span className="bar"></span>
            <span>{t.hero.eyebrow}</span>
          </div>
          <h1>
            {t.hero.h1[0]}<em>{t.hero.h1[1]}</em>{t.hero.h1[2]}
          </h1>
          <p className="hero-lede">{t.hero.lede}</p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-primary">{t.hero.cta1} <Icon.Arrow /></a>
            <a href="#pricing" className="btn btn-ghost">{t.hero.cta2}</a>
          </div>

          <div className="hero-stats">
            <div><div className="trust-num">30<sup>{LANG==='bg'?'г.':'y'}</sup></div><div className="trust-label">{t.hero.statsLabels[0]}</div></div>
            <div><div className="trust-num">240<sup>+</sup></div><div className="trust-label">{t.hero.statsLabels[1]}</div></div>
            <div><div className="trust-num">100%</div><div className="trust-label">{t.hero.statsLabels[2]}</div></div>
            <div><div className="trust-num">&lt;24{LANG==='bg'?'ч':'h'}</div><div className="trust-label">{t.hero.statsLabels[3]}</div></div>
          </div>
        </div>

        <DeadlinesCard />

      </div>
    </section>
  );
}

/* ============================================
   TRUST
   ============================================ */
function Trust() {
  return (
    <section className="trust">
      <div className="container">
      <div className="trust-grid">
        {t.trust.map((cell, i) => (
          <div className="trust-cell" key={i}>
            <div className="trust-num">{cell.num}</div>
            <div className="trust-label">{cell.label}</div>
          </div>
        ))}
      </div>
      </div>
    </section>
  );
}

/* ============================================
   SERVICES
   ============================================ */
function Services() {
  return (
    <section className="section section-alt" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.services.eyebrow.slice(0,2)}</span>{t.services.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.services.title[0]}<em>{t.services.title[1]}</em></h2>
          </div>
        </div>

        <div className="svc-grid">
          {t.services.list.map((s) => (
            <div className="svc" key={s.n}>
              <div className="svc-num">{s.n}</div>
              <div className="svc-body">
                <h3 className="svc-title">{s.title}</h3>
                <p className="svc-desc">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   PRICING
   ============================================ */
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.pricing.eyebrow.slice(0,2)}</span>{t.pricing.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.pricing.title[0]}<em>{t.pricing.title[1]}</em>{t.pricing.title[2]}</h2>
          </div>
        </div>

        <div className="pricing-grid">
          {t.pricing.pkgs.map((p) => (
            <div key={p.name} className="pkg">
              <div className="pkg-name">{p.name}</div>
              <div className="pkg-price">€{p.price}<small> {t.pricing.perMonth}</small></div>
              <div className="pkg-divider" />
              <ul className="pkg-features">
                {p.features.map(f => (
                  <li key={f}><Icon.Check /> <span>{f}</span></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="pricing-note">
          {t.pricing.note[0]}<a href="#contact">{t.pricing.note[1]}</a>{t.pricing.note[2]}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   ABOUT
   ============================================ */
function About() {
  return (
    <section className="section section-alt" id="about">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.about.eyebrow.slice(0,2)}</span>{t.about.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.about.title[0]}<em>{t.about.title[1]}</em></h2>
          </div>
        </div>

        <div className="about-text-row" style={{display:'flex', gap:'48px', alignItems:'flex-start', marginBottom:'48px'}}>
          <div className="about-copy" style={{flex:'1'}}>
            <p>{t.about.p1}</p>
            <p>{t.about.p2}</p>
          </div>
          <div className="about-signature" style={{flex:'1'}}>
            {t.about.quote}
            <small>{t.about.quoteName}</small>
          </div>
        </div>

          <p style={{fontSize:'1rem', letterSpacing:'0.04em', marginBottom:'16px'}}>{t.about.teamLabel}</p>
          <div className="team-photos-row" style={{display:'flex', gap:'16px'}}>
          {t.about.team.map(({name,role,photo}) => (
            <div className="team-card team-photo-card" key={name} style={{flex:'1', height:'380px', border:'none', boxShadow:'none'}}>
              <img src={photo} alt={name} style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'top'}} />
              <div style={{position:'absolute', inset:0, background:'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%)'}} />
              <div className="team-card-info">
                <div className="team-name">{name}</div>
                <div className="team-role">{role}</div>
              </div>
            </div>
          ))}
          </div>
      </div>
    </section>
  );
}

/* ============================================
   TESTIMONIALS
   ============================================ */
function Testimonials() {
  return (
    <section className="section" id="clients">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.testimonials.eyebrow.slice(0,2)}</span>{t.testimonials.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.testimonials.title[0]}<em>{t.testimonials.title[1]}</em>{t.testimonials.title[2]}</h2>
          </div>
        </div>

        <div className="testi-grid">
          {t.testimonials.items.map((item) => (
            <div className="testi" key={item.name}>
              <p className="testi-quote">{item.quote}</p>
              <div className="testi-meta">
                <div className="testi-avatar">{item.av}</div>
                <div className="testi-who">
                  <div className="testi-name">{item.name}</div>
                  <div className="testi-co">{item.co}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

/* ============================================
   FAQ
   ============================================ */
function FAQ() {
  const [open, setOpen] = useState(-1);
  return (
    <section className="section section-alt" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.faq.eyebrow.slice(0,2)}</span>{t.faq.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.faq.title[0]}<em>{t.faq.title[1]}</em>{t.faq.title[2]}</h2>
          </div>
        </div>

        <div className="faq">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   CONTACT
   ============================================ */
function Contact() {
  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow"><span className="num">{t.contact.eyebrow.slice(0,2)}</span>{t.contact.eyebrow.slice(2)}</div>
          </div>
          <div>
            <h2 className="section-title">{t.contact.title[0]}<em>{t.contact.title[1]}</em>{t.contact.title[2]}</h2>
            <p className="section-dek">{t.contact.dek}</p>
          </div>
        </div>

        <div className="contact-grid">
          <div className="contact-left">
            <div className="contact-h">{t.contact.firmName}</div>
            <div className="contact-row">
              <div className="contact-row-label">{t.contact.officeLabel}</div>
              <div className="contact-row-value">
                {t.contact.officeValue[0]}<br/>
                {t.contact.officeValue[1]}<br/>
                <span style={{fontSize: '13px', color: 'var(--ink-500)'}}>{t.contact.officeValue[2]}</span>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">{t.contact.phoneLabel}</div>
              <div className="contact-row-value">
                <a href="tel:+359886017314">+359 886 017 314</a><br/>
                <a href="tel:+359885103207">+359 885 103 207</a><br/>
                <a href="tel:+359888492072">+359 888 492 072</a>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">{t.contact.emailLabel}</div>
              <div className="contact-row-value">
                <a href="mailto:fskdolevi@gmail.com">fskdolevi@gmail.com</a>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">{t.contact.hoursLabel}</div>
              <div className="contact-row-value">
                {t.contact.hoursValue[0]}<br/>
                {t.contact.hoursValue[1]}
              </div>
            </div>
            <button className="btn btn-primary contact-cta">{t.contact.cta} <Icon.Arrow /></button>
            <a
              className="btn btn-ghost contact-map-mobile"
              href="https://maps.google.com/maps?q=ул.+Иван+Вазов+18,+Пазарджик,+България"
              target="_blank"
              rel="noopener noreferrer"
              style={{display:'none', marginTop:'12px'}}
            >{t.contact.mapCta} <Icon.Arrow /></a>
          </div>

          <div className="contact-map" style={{padding:0, overflow:'hidden', position:'relative'}}>
            <div style={{position:'absolute', top:0, left:0, right:0, bottom:0}}>
              <iframe
                title="ФСК Долеви"
                src="https://maps.google.com/maps?q=ул.+Иван+Вазов+18,+Пазарджик,+България&output=embed"
                style={{border:0, display:'block', width:'100%', height:'100%'}}
                allowFullScreen=""
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   FOOTER
   ============================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">ФСК <em style={{fontStyle: 'italic', fontWeight: 400}}>Долеви</em></div>
            <p className="footer-tagline">{t.footer.tagline}</p>
          </div>
          <div>
            <h4>{t.footer.col1}</h4>
            <ul>
              {t.footer.col1items.map(item => <li key={item}><a href="#services">{item}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>{t.footer.col2}</h4>
            <ul>
              <li><a href="#about">{t.footer.col2items[0]}</a></li>
              <li><a href="#about">{t.footer.col2items[1]}</a></li>
              <li><a href="#clients">{t.footer.col2items[2]}</a></li>
              <li><a href="#faq">{t.footer.col2items[3]}</a></li>
              <li><a href="#">{t.footer.col2items[4]}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.col3}</h4>
            <ul>
              <li>+359 886 017 314</li>
              <li>+359 885 103 207</li>
              <li>+359 888 492 072</li>
              <li>fskdolevi@gmail.com</li>
              <li>Ivan Vazov St 18, office 20, Pazardzhik</li>
              <li>Mon–Fri · 09:00–18:00</li>
            </ul>
          </div>
        </div>
        <div className="footer-bot">
          <div>{t.footer.copy}</div>
          <div>{t.footer.privacy}</div>
        </div>
      </div>
    </footer>
  );
}

/* ============================================
   APP
   ============================================ */
function App() {
  const [t, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "variant": "classic",
    "theme": "light",
    "displayFont": "Spectral",
    "bodyFont": "Manrope",
    "palette": "cream-green"
  }/*EDITMODE-END*/);

  // Apply theme + variant
  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.setAttribute('data-variant', t.variant);
    document.documentElement.style.setProperty('--font-display',
      `"${t.displayFont}", Georgia, serif`);
    document.documentElement.style.setProperty('--font-body',
      `"${t.bodyFont}", system-ui, sans-serif`);

    // palette
    const palettes = {
      'cream-green': { g900: '#0b1f3a', g800: '#1a3a6e', g700: '#2558a8', cream: '#f4f7fc', cream2: '#e8eef7' },
      'navy-stone':  { g900: '#0d1d2e', g800: '#143352', g700: '#234d75', cream: '#f0eee8', cream2: '#e2ddd0' },
      'burgundy':    { g900: '#3a1018', g800: '#5e1a26', g700: '#7d2632', cream: '#f5efe8', cream2: '#ebe1d4' },
      'forest-bold': { g900: '#0a1f12', g800: '#0e4d2b', g700: '#1a7547', cream: '#f4f1e7', cream2: '#e9e3d0' },
    };
    const p = palettes[t.palette] || palettes['cream-green'];
    const r = document.documentElement;
    r.style.setProperty('--green-900', p.g900);
    r.style.setProperty('--green-800', p.g800);
    r.style.setProperty('--green-700', p.g700);
    if (t.theme === 'light') {
      r.style.setProperty('--cream-100', p.cream);
      r.style.setProperty('--cream-200', p.cream2);
    }
  }, [t.variant, t.theme, t.displayFont, t.bodyFont, t.palette]);

  return (
    <>
      <Topbar />
      <Nav />
      <Hero />
      <Trust />
      <Services />
      <Pricing />
      <About />
      <Testimonials />
      <FAQ />
      <Contact />
      <Footer />

      <TweaksPanel>
        <TweakSection title="Вариант">
          <TweakRadio
            label="Стил"
            value={t.variant}
            onChange={(v) => setTweak('variant', v)}
            options={[
              { value: 'classic', label: 'Класически' },
              { value: 'modern',  label: 'Модерен' },
            ]}
          />
          <TweakRadio
            label="Режим"
            value={t.theme}
            onChange={(v) => setTweak('theme', v)}
            options={[
              { value: 'light', label: 'Светъл' },
              { value: 'dark',  label: 'Тъмен' },
            ]}
          />
        </TweakSection>

        <TweakSection title="Палитра">
          <TweakColor
            label="Цветова гама"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              { value: 'cream-green', color: ['#0d4f3c', '#f6f3ec', '#ece6d7'] },
              { value: 'navy-stone',  color: ['#143352', '#f0eee8', '#e2ddd0'] },
              { value: 'burgundy',    color: ['#5e1a26', '#f5efe8', '#ebe1d4'] },
              { value: 'forest-bold', color: ['#0e4d2b', '#f4f1e7', '#e9e3d0'] },
            ]}
          />
        </TweakSection>

        <TweakSection title="Шрифтове">
          <TweakSelect
            label="Заглавия"
            value={t.displayFont}
            onChange={(v) => setTweak('displayFont', v)}
            options={[
              { value: 'Spectral', label: 'Spectral (засечен)' },
              { value: 'Cormorant Garamond', label: 'Cormorant (класически)' },
              { value: 'PT Serif', label: 'PT Serif (традиционен)' },
              { value: 'Manrope', label: 'Manrope (sans)' },
              { value: 'Plus Jakarta Sans', label: 'Plus Jakarta (sans)' },
            ]}
          />
          <TweakSelect
            label="Основен текст"
            value={t.bodyFont}
            onChange={(v) => setTweak('bodyFont', v)}
            options={[
              { value: 'Manrope', label: 'Manrope' },
              { value: 'Plus Jakarta Sans', label: 'Plus Jakarta Sans' },
              { value: 'IBM Plex Sans', label: 'IBM Plex Sans' },
              { value: 'Source Sans 3', label: 'Source Sans 3' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

Object.assign(window, {
  App, Topbar, Ticker, Nav, Hero, Trust, Services,
  Pricing, About, Testimonials, FAQ, Contact, Footer
});

ReactDOM.createRoot(document.getElementById('root')).render(<App />);