/* All page sections. Composed in app.jsx. */
const RR = window.Recharts;

/* ============================== HERO ============================== */
function Hero() {
  return (
    <section id="top" className="relative bg-teal-900 text-paper overflow-hidden">
      {/* subtle line graph background */}
      <div className="absolute inset-0 pointer-events-none select-none opacity-[0.55]">
        <svg viewBox="0 0 1440 720" className="absolute inset-0 w-full h-full" preserveAspectRatio="none">
          <defs>
            <pattern id="dots" x="0" y="0" width="32" height="32" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="1" fill="rgba(247,245,240,0.07)"/>
            </pattern>
            <linearGradient id="lineG" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="#C9A961" stopOpacity="0.95"/>
              <stop offset="100%" stopColor="#0F766E" stopOpacity="0.4"/>
            </linearGradient>
          </defs>
          <rect width="1440" height="720" fill="url(#dots)"/>
          {/* hairline grid axes */}
          {[120,240,360,480,600].map(y => (
            <line key={y} x1="0" y1={y} x2="1440" y2={y} stroke="rgba(247,245,240,0.05)"/>
          ))}
          {/* the line itself */}
          <path
            className="draw"
            d="M -20 540 C 120 520 200 560 280 500 S 440 360 560 380 S 760 460 880 320 S 1080 220 1220 240 S 1420 160 1500 140"
            fill="none" stroke="url(#lineG)" strokeWidth="2.2" strokeLinecap="round"
          />
          {/* faint area under */}
          <path
            d="M -20 540 C 120 520 200 560 280 500 S 440 360 560 380 S 760 460 880 320 S 1080 220 1220 240 S 1420 160 1500 140 L 1500 720 L -20 720 Z"
            fill="rgba(15,118,110,0.06)"
          />
          {/* end dot */}
          <circle cx="1220" cy="240" r="4" fill="#C9A961" />
        </svg>
      </div>

      {/* Nav */}
      <nav className="relative z-10 max-w-[1280px] mx-auto px-6 lg:px-10 pt-6 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5 group">
          <span className="grid place-items-center w-9 h-9 rounded-md border border-paper/25 text-paper">
            <Icon.logo size={18}/>
          </span>
          <div className="leading-tight">
            <div className="text-[15px] font-semibold tracking-tightish">ФИНКОЛЛЕГИЯ</div>
            <div className="text-[10.5px] uppercase tracking-[0.22em] text-paper/60 -mt-0.5">финансовые консультанты</div>
          </div>
        </a>
        <div className="hidden md:flex items-center gap-7 text-[13px] text-paper/80">
          <a className="hover:text-paper" href="#problem">Боли</a>
          <a className="hover:text-paper" href="#solution">Решение</a>
          <a className="hover:text-paper" href="#how">Как работаем</a>
          <a className="hover:text-paper" href="#pricing">Тарифы</a>
          <a className="hover:text-paper" href="#contact">Контакты</a>
        </div>
        <Btn as="a" href="#contact" variant="primaryGold" className="hidden sm:inline-flex">
          Бесплатная консультация <Icon.arrow size={16}/>
        </Btn>
      </nav>

      {/* Hero content */}
      <div className="relative z-10 max-w-[1280px] mx-auto px-6 lg:px-10 pt-20 lg:pt-28 pb-24 lg:pb-32">
        <div className="max-w-[920px]">
          <div className="flex items-center gap-3 text-[11px] uppercase tracking-[0.22em] text-paper/65 mb-7">
            <span className="num text-gold/90">01</span>
            <span className="h-px w-8 bg-paper/25"></span>
            <span>ООО «Финколлегия» · Краснодар · ЮФО</span>
          </div>

          <h1 className="font-serif font-light text-[44px] sm:text-[60px] lg:text-[84px] leading-[0.98] tracking-tightest">
            Цифры как опора,<br/>
            <span className="text-gold italic font-light">команда</span> как сила.
          </h1>

          <p className="mt-8 text-[18px] sm:text-[20px] leading-[1.5] text-paper/80 max-w-[640px]">
            Наводим порядок в финансах бизнеса. Строим финансовую модель
            на&nbsp;реальных деньгах — не&nbsp;на&nbsp;бумаге.
          </p>

          <div className="mt-10 flex flex-wrap items-center gap-3">
            <Btn as="a" href="#contact" variant="primaryGold" className="h-12 px-6 text-[14.5px]">
              Бесплатная консультация <Icon.arrow size={16}/>
            </Btn>
            <Btn as="a" href="#how" variant="ghostLight" className="h-12 px-6 text-[14.5px]">
              Как это работает
            </Btn>
          </div>
        </div>

        {/* Hero strip — credible mini-metrics */}
        <div className="mt-16 lg:mt-24 grid grid-cols-2 md:grid-cols-4 gap-y-8 gap-x-10 max-w-[920px] border-t border-paper/15 pt-8">
          {[
            ["1,5 млн ₽",   "минимальный оборот клиента"],
            ["до 50 чел.",  "размер команды"],
            ["3–6 мес.",    "окупаемость работы"],
            ["100%",        "решений на данных"],
          ].map(([n, label]) => (
            <div key={label}>
              <div className="num text-[28px] sm:text-[32px] text-paper tracking-tightish">{n}</div>
              <div className="text-[12px] text-paper/65 mt-1 leading-snug">{label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* scroll cue */}
      <div className="relative z-10 max-w-[1280px] mx-auto px-6 lg:px-10 pb-6 flex items-center justify-between text-[11px] text-paper/50 font-mono">
        <span>↓ прокрутите</span>
        <span className="blink">●&nbsp; live</span>
      </div>
    </section>
  );
}

/* ============================== PROBLEM ============================== */
function Problem() {
  const items = [
    "Продажи есть — а денег нет",
    "Непонятно, сколько можно безопасно вывести из бизнеса",
    "Невозможно спрогнозировать кассовый разрыв",
    "Планы не ставятся или не выполняются",
    "Руководители не отвечают за доход",
    "Сотрудники не знают, за что и перед кем отвечают",
  ];
  return (
    <section id="problem" className="py-24 lg:py-32 bg-paper">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-10 lg:gap-16 mb-14 reveal">
          <div>
            <SectionLabel num="02">Узнаёте себя?</SectionLabel>
            <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
              Шесть симптомов, которые мы&nbsp;слышим на&nbsp;первой встрече.
            </h2>
          </div>
          <p className="text-[16px] lg:text-[17px] text-ink2 leading-[1.65] self-end max-w-[520px]">
            Если хотя бы три из&nbsp;шести — про вас, дело не&nbsp;в&nbsp;продажах
            и&nbsp;не&nbsp;в&nbsp;«плохих сотрудниках». Дело в&nbsp;том, что цифры разрозненны,
            а&nbsp;ответственность за&nbsp;деньги ни&nbsp;за&nbsp;кем не&nbsp;закреплена.
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 reveal">
          {items.map((t, i) => (
            <div key={i} className="group relative px-7 py-8 border-t border-line first:border-l-0
                  sm:border-l sm:[&:nth-child(2n+1)]:border-l-0
                  lg:[&:nth-child(2n+1)]:border-l lg:[&:nth-child(3n+1)]:border-l-0
                  last:border-b sm:[&:nth-last-child(-n+2)]:border-b lg:[&:nth-last-child(-n+3)]:border-b
                  border-line hover:bg-white transition-colors">
              <div className="flex items-start gap-5">
                <div className="num text-[14px] text-mute tnum mt-1">{String(i+1).padStart(2,"0")}</div>
                <div className="flex-1">
                  <p className="text-[18px] lg:text-[19px] leading-[1.35] text-ink tracking-tightish">«{t}»</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== SOLUTION ============================== */
function Solution() {
  return (
    <section id="solution" className="py-24 lg:py-32 bg-white border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="max-w-[760px] mb-16 reveal">
          <SectionLabel num="03">Решение</SectionLabel>
          <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
            Два равнозначных элемента. Без&nbsp;одного из&nbsp;них не&nbsp;работает.
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-line reveal">
          {/* Col 1: модель */}
          <div className="bg-white p-8 lg:p-12">
            <div className="flex items-center gap-3">
              <span className="grid place-items-center w-10 h-10 rounded-md bg-teal-50 text-teal-700">
                <Icon.layers size={20}/>
              </span>
              <span className="num text-mute text-[13px] tnum">А.</span>
            </div>
            <h3 className="mt-6 font-serif text-[28px] lg:text-[32px] leading-tight text-ink tracking-tightish">
              Единая <span className="text-teal-700">финансовая модель</span> на&nbsp;фактических деньгах
            </h3>
            <p className="mt-4 text-[15.5px] text-ink2 leading-[1.65]">
              Не&nbsp;«как должно быть» из&nbsp;управленческого Excel, а&nbsp;то, что&nbsp;уже произошло
              на&nbsp;ваших банковских счетах. Из&nbsp;этого собирается P&amp;L, Баланс, ДДС
              и&nbsp;прогноз на&nbsp;3–6–12 месяцев.
            </p>
            <ul className="mt-7 space-y-3 text-[14.5px] text-ink2">
              {["Подключение к 1С, банкам, Excel — единый источник правды",
                "P&L, Баланс, ДДС обновляются автоматически",
                "Сценарии «что если» считаются за секунды"].map(t => (
                <li key={t} className="flex gap-3"><span className="text-teal-700 mt-0.5"><Icon.check size={18}/></span>{t}</li>
              ))}
            </ul>
          </div>
          {/* Col 2: команда */}
          <div className="bg-white p-8 lg:p-12">
            <div className="flex items-center gap-3">
              <span className="grid place-items-center w-10 h-10 rounded-md bg-teal-50 text-teal-700">
                <Icon.team size={20}/>
              </span>
              <span className="num text-mute text-[13px] tnum">Б.</span>
            </div>
            <h3 className="mt-6 font-serif text-[28px] lg:text-[32px] leading-tight text-ink tracking-tightish">
              Внедрённый <span className="text-teal-700">финсовет руководителей</span>
            </h3>
            <p className="mt-4 text-[15.5px] text-ink2 leading-[1.65]">
              Регулярная встреча команды над одной моделью. Каждый руководитель видит свои цифры,
              отвечает за&nbsp;свой блок и&nbsp;принимает решения на&nbsp;общих данных,
              а&nbsp;не&nbsp;в&nbsp;своей голове.
            </p>
            <ul className="mt-7 space-y-3 text-[14.5px] text-ink2">
              {["Регламент финсовета, повестка, ответственность за доход",
                "Команда сама ставит планы и сама их корректирует",
                "Собственник перестаёт быть единственным «носителем цифр»"].map(t => (
                <li key={t} className="flex gap-3"><span className="text-teal-700 mt-0.5"><Icon.check size={18}/></span>{t}</li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-8 reveal">
          <div className="inline-flex items-center gap-3 text-[12.5px] text-mute font-mono bg-paper/60 border border-line rounded-full px-4 py-2">
            <span className="w-1.5 h-1.5 rounded-full bg-gold"></span>
            модель без команды → красивый отчёт «в стол» · команда без модели → разговоры без опоры
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== HOW IT WORKS (3 steps + dashboard) ============================== */
function HowItWorks() {
  return (
    <section id="how" className="py-24 lg:py-32 bg-paper border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-10 lg:gap-16 mb-16 reveal">
          <div>
            <SectionLabel num="04">Как это работает</SectionLabel>
            <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
              Три шага — от&nbsp;разрозненных файлов к&nbsp;живой модели.
            </h2>
          </div>
          <p className="text-[16px] lg:text-[17px] text-ink2 leading-[1.65] self-end max-w-[520px]">
            На&nbsp;старте мы&nbsp;собираем данные из&nbsp;того, что&nbsp;у&nbsp;вас уже есть —
            никакого нового софта внедрять не&nbsp;нужно. Дальше — финансовая модель,
            в&nbsp;которой можно «крутить» сценарии.
          </p>
        </div>

        {/* 3 steps horizontal flow */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-line border border-line rounded-2xl overflow-hidden reveal">
          {[
            { n:"01", icon:<Icon.filter size={20}/>, title:"Агрегация данных",
              desc:"Собираем выписки из 1С, банков, операционные таблицы из Excel. Очищаем дубли, размечаем по статьям ДДС и P&L.",
              tag:"1С · банки · Excel" },
            { n:"02", icon:<Icon.doc size={20}/>, title:"Отчёты",
              desc:"Формируем три ключевых отчёта: P&L, Баланс, ДДС. Они обновляются автоматически по мере поступления данных.",
              tag:"P&L · Баланс · ДДС" },
            { n:"03", icon:<Icon.spark size={20}/>, title:"Финансовая модель",
              desc:"«Что если?»: меняете параметры — видите прогноз мгновенно. Базовый сценарий vs +20% продаж — за один клик.",
              tag:"сценарии · прогноз 3–6–12 мес." },
          ].map((s, i) => (
            <div key={s.n} className="relative bg-white p-8 lg:p-10">
              <div className="flex items-start justify-between mb-7">
                <span className="grid place-items-center w-11 h-11 rounded-md bg-teal-50 text-teal-700">{s.icon}</span>
                <span className="num text-mute text-[13px] tnum">{s.n}</span>
              </div>
              <h3 className="font-serif text-[22px] lg:text-[24px] leading-tight text-ink tracking-tightish">{s.title}</h3>
              <p className="mt-3 text-[14.5px] text-ink2 leading-[1.6]">{s.desc}</p>
              <div className="mt-6 text-[11px] uppercase tracking-[0.18em] text-mute font-medium">{s.tag}</div>

              {/* arrow connector on md+ */}
              {i < 2 && (
                <div className="hidden md:flex absolute -right-3 top-1/2 -translate-y-1/2 z-10 w-6 h-6 items-center justify-center bg-paper border border-line rounded-full text-teal-700">
                  <Icon.arrow size={12} stroke={2}/>
                </div>
              )}
            </div>
          ))}
        </div>

        {/* === DASHBOARD === */}
        <div id="dashboard" className="mt-20 lg:mt-24 reveal">
          <div className="flex items-end justify-between gap-6 flex-wrap mb-6">
            <div>
              <SectionLabel num="05">Дашборд «Что если?»</SectionLabel>
              <h3 className="mt-4 font-serif text-[28px] lg:text-[40px] leading-[1.08] tracking-tightest text-ink max-w-[680px]">
                Так выглядит ваша модель после второго месяца работы.
              </h3>
            </div>
            <p className="max-w-[420px] text-[14.5px] text-ink2 leading-[1.6]">
              Поиграйте с&nbsp;параметрами справа — графики и&nbsp;KPI пересчитаются мгновенно.
              Это не&nbsp;картинка, это интерактивная модель.
            </p>
          </div>
          <WhatIfDashboard/>
        </div>
      </div>
    </section>
  );
}

/* ============================== REPORTS ============================== */
function Reports() {
  return (
    <section id="reports" className="py-24 lg:py-32 bg-white border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-10 lg:gap-16 mb-14 reveal">
          <div>
            <SectionLabel num="06">Что вы получаете</SectionLabel>
            <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
              Три отчёта, на&nbsp;которых строится управление деньгами.
            </h2>
          </div>
          <p className="text-[16px] lg:text-[17px] text-ink2 leading-[1.65] self-end max-w-[520px]">
            Это управленческие отчёты — не&nbsp;для&nbsp;налоговой, а&nbsp;для&nbsp;того,
            чтобы видеть бизнес как&nbsp;он&nbsp;есть. Обновляются автоматически.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 lg:gap-6 reveal">
          <ReportCard
            abbr="P&L · ОТЧЁТ О ПРИБЫЛЯХ"
            title="Отчёт о прибылях и убытках"
            tagline="Выручка, расходы, прибыль за период. Сколько заработано — и на что потрачено."
            h={170}
            footer={<><span>Чистая прибыль</span><span className="num text-emerald-700 tnum">+982 000 ₽</span></>}
          >
            <PLWaterfall/>
          </ReportCard>
          <ReportCard
            abbr="БАЛАНС · НА ДАТУ"
            title="Баланс"
            tagline="Активы, обязательства, капитал на дату. Реальное финансовое состояние, без украшательств."
            h={170}
            footer={<><span>Собственный капитал</span><span className="num text-teal-700 tnum">5 650 000 ₽</span></>}
          >
            <BalanceMini/>
          </ReportCard>
          <ReportCard
            abbr="ДДС · ДВИЖЕНИЕ СРЕДСТВ"
            title="Движение денежных средств"
            tagline="Приток и отток. Откуда пришли деньги, куда ушли, какая динамика по месяцам."
            h={170}
            footer={<><span>Сальдо за период</span><span className="num text-emerald-700 tnum">+6,7 млн ₽</span></>}
          >
            <DDSMini/>
          </ReportCard>
        </div>
      </div>
    </section>
  );
}

/* ============================== BENEFITS ============================== */
function Benefits() {
  const items = [
    { icon: <Icon.shield size={22}/>,   title: "Контроль",
      text: "Решения на данных, а не на ощущениях. Никаких кассовых разрывов вслепую." },
    { icon: <Icon.compass size={22}/>,  title: "Уверенность",
      text: "Понимание, какие деньги ваши, а какие пока трогать нельзя." },
    { icon: <Icon.pulse size={22}/>,    title: "Прогноз 3–6–12 мес.",
      text: "Поток денег, который не видно в отдельных накладных и платёжках." },
    { icon: <Icon.scales size={22}/>,   title: "Основа для планирования",
      text: "План доходов, расходов, резервов и развития — на цифрах, а не на интуиции." },
  ];
  return (
    <section id="benefits" className="py-24 lg:py-32 bg-paper border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="max-w-[760px] mb-14 reveal">
          <SectionLabel num="07">Что это даёт собственнику</SectionLabel>
          <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
            Четыре вещи, которые появляются у&nbsp;вас после внедрения.
          </h2>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 lg:gap-6 reveal">
          {items.map((it, i) => (
            <div key={it.title} className="bg-white border border-line rounded-2xl p-7 lg:p-8 flex flex-col">
              <div className="flex items-center justify-between">
                <span className="grid place-items-center w-11 h-11 rounded-md border border-teal-200 text-teal-700 bg-teal-50/50">
                  {it.icon}
                </span>
                <span className="num text-mute text-[12px] tnum">0{i+1}</span>
              </div>
              <h3 className="mt-7 font-serif text-[22px] leading-tight text-ink tracking-tightish">{it.title}</h3>
              <p className="mt-3 text-[14.5px] text-ink2 leading-[1.6] flex-1">{it.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== NOT US (dark) ============================== */
function NotUs() {
  const items = [
    { label: "Бухгалтерия и сдача отчётности",
      note:  "Налоги и декларации остаются у вашего бухгалтера — мы не пересекаемся." },
    { label: "Юридический подрядчик",
      note:  "Договоры, споры, регистрации — это к юристам." },
    { label: "Внедрение софта / автоматизация",
      note:  "Не продаём 1С, не пишем интеграции и не «настраиваем CRM»." },
    { label: "«Сделал отчёт и исчез»",
      note:  "Мы работаем в процессе — рядом с руководителями, а не из-за стены." },
  ];
  return (
    <section id="not-us" className="py-24 lg:py-32 bg-teal-950 text-paper relative overflow-hidden">
      <div className="absolute inset-0 dot-grid opacity-50 pointer-events-none"></div>
      <div className="relative max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-10 lg:gap-16 mb-14 reveal">
          <div>
            <SectionLabel dark num="08">Чем мы НЕ являемся</SectionLabel>
            <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.02] tracking-tightest text-paper">
              Четыре вещи, которые мы&nbsp;<span className="text-gold italic font-light">не&nbsp;делаем</span>.
            </h2>
          </div>
          <p className="text-[16px] lg:text-[17px] text-paper/75 leading-[1.65] self-end max-w-[520px]">
            Финколлегия — финансовый партнёр на&nbsp;стороне собственника. Не&nbsp;ещё один аутсорс
            и&nbsp;не&nbsp;подрядчик, который сдаёт «отчёт в&nbsp;стол». Чтобы не&nbsp;было недопонимания —
            честно очерчиваем границы.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-teal-800/40 border border-teal-800/40 rounded-2xl overflow-hidden reveal">
          {items.map((it, i) => (
            <div key={it.label} className="bg-teal-950 p-7 lg:p-9">
              <div className="flex items-start gap-5">
                <span className="grid place-items-center w-9 h-9 rounded-md border border-paper/15 text-danger flex-shrink-0">
                  <Icon.x size={18} stroke={2}/>
                </span>
                <div className="min-w-0">
                  <h3 className="font-serif text-[20px] lg:text-[22px] text-paper leading-tight tracking-tightish">{it.label}</h3>
                  <p className="mt-2 text-[14px] text-paper/65 leading-[1.6]">{it.note}</p>
                </div>
                <span className="num text-paper/30 text-[12px] tnum ml-auto">0{i+1}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================== PRICING ============================== */
function Pricing() {
  const plans = [
    {
      id: "start", name: "Старт", tagline: "Порядок в финансах",
      price: "100 000 ₽", priceNote: "разово",
      term: "2 недели",
      includes: [
        "Сбор данных из 1С, банков, Excel",
        "Формирование P&L, Баланса, ДДС",
        "Базовая финансовая модель",
        "Передача отчётов и инструкций",
      ],
      featured: false,
    },
    {
      id: "implement", name: "Внедрение", tagline: "Обучение + финмодель под бизнес",
      price: "200 000 ₽", priceNote: "разово",
      term: "1 нед. обучения + 6 нед. внедрения",
      includes: [
        "Всё из «Старта»",
        "Обучение команды и руководителей",
        "Запуск регулярного финсовета",
        "Финансовая модель под ваш бизнес",
        "Сценарии «Что если» и прогноз",
      ],
      featured: true,
    },
    {
      id: "support", name: "Поддержка", tagline: "Сопровождение",
      price: "50 000 ₽", priceNote: "/ месяц",
      term: "6 месяцев",
      includes: [
        "Ежемесячное обновление модели",
        "Участие в финсоветах",
        "Консультации по решениям",
        "Корректировка прогнозов",
      ],
      featured: false,
    },
  ];

  return (
    <section id="pricing" className="py-24 lg:py-32 bg-white border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="max-w-[760px] mb-14 reveal">
          <SectionLabel num="09">Тарифы</SectionLabel>
          <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
            Три формата работы. Идут последовательно — или каждый отдельно.
          </h2>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 lg:gap-6 reveal">
          {plans.map(p => (
            <div key={p.id}
                 className={"relative flex flex-col rounded-2xl p-7 lg:p-8 " +
                   (p.featured
                     ? "bg-teal-900 text-paper border border-teal-900 shadow-pop lg:-mt-4 lg:mb-0"
                     : "bg-white border border-line")}>
              {p.featured && (
                <div className="absolute -top-3 left-7 inline-flex items-center gap-1.5 text-[10.5px] uppercase tracking-[0.22em] bg-gold text-teal-950 font-semibold px-3 py-1.5 rounded-full">
                  <span className="w-1.5 h-1.5 rounded-full bg-teal-950"></span>
                  рекомендуем
                </div>
              )}
              <div className="flex items-baseline justify-between">
                <div className="font-serif text-[28px] leading-none tracking-tightish">{p.name}</div>
                <span className={"num text-[12px] tnum " + (p.featured ? "text-paper/55" : "text-mute")}>0{plans.indexOf(p)+1}</span>
              </div>
              <div className={"mt-2 text-[13.5px] " + (p.featured ? "text-paper/75" : "text-ink2")}>{p.tagline}</div>

              <div className="mt-7">
                <div className="flex items-baseline gap-2">
                  <span className={"num text-[40px] lg:text-[44px] tracking-tightest leading-none " + (p.featured ? "text-gold" : "text-ink")}>
                    {p.price}
                  </span>
                  <span className={"text-[13px] " + (p.featured ? "text-paper/60" : "text-mute")}>{p.priceNote}</span>
                </div>
                <div className={"mt-2 text-[12px] uppercase tracking-[0.18em] font-medium " + (p.featured ? "text-paper/55" : "text-mute")}>
                  {p.term}
                </div>
              </div>

              <ul className={"mt-7 space-y-2.5 text-[14px] " + (p.featured ? "text-paper/85" : "text-ink2")}>
                {p.includes.map(line => (
                  <li key={line} className="flex gap-2.5 items-start">
                    <span className={p.featured ? "text-gold mt-0.5" : "text-teal-700 mt-0.5"}><Icon.check size={16}/></span>
                    <span>{line}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-8 pt-6 border-t" style={{ borderColor: p.featured ? "rgba(247,245,240,0.15)" : "#E5DFD2" }}>
                <Btn as="a" href="#contact" variant={p.featured ? "primaryGold" : "ghost"} className="w-full justify-center">
                  Обсудить тариф <Icon.arrow size={16}/>
                </Btn>
              </div>
            </div>
          ))}
        </div>

        {/* Payback callout */}
        <div className="mt-14 lg:mt-16 bg-paper2 border border-line rounded-2xl p-8 lg:p-10 reveal">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-6 lg:gap-12 items-center">
            <div>
              <div className="text-[11px] uppercase tracking-[0.22em] text-teal-700 font-medium mb-2">Окупаемость работы</div>
              <p className="font-serif text-[28px] lg:text-[38px] leading-[1.1] text-ink tracking-tightest max-w-[760px]">
                <span className="text-gold-600">3–6 месяцев</span> — за&nbsp;счёт финансового планирования,
                контроля и&nbsp;вовлечения команды.
              </p>
            </div>
            <div className="flex items-center gap-6 lg:border-l lg:border-line lg:pl-12">
              <div className="text-center">
                <div className="num text-[40px] text-teal-800 tnum leading-none">3</div>
                <div className="text-[11px] uppercase tracking-[0.18em] text-mute mt-1">мес.</div>
                <div className="text-[10.5px] text-mute mt-1 leading-tight">минимум</div>
              </div>
              <span className="w-10 h-px bg-line"></span>
              <div className="text-center">
                <div className="num text-[40px] text-teal-800 tnum leading-none">6</div>
                <div className="text-[11px] uppercase tracking-[0.18em] text-mute mt-1">мес.</div>
                <div className="text-[10.5px] text-mute mt-1 leading-tight">средний срок</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================== WHY NOW ============================== */
function WhyNow() {
  const points = [
    "Чтобы перестать «тушить пожары» и перейти к стратегии развития",
    "Чтобы масштабировать порядок, а не хаос",
    "Чтобы перестать тратить всё, что заработали",
    "Невидимые потери съедают маржу каждый день",
    "Завтра прибыль будет стоить дороже",
  ];
  return (
    <section id="why-now" className="py-24 lg:py-32 bg-paper border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-12 lg:gap-20 items-start">
          <div className="reveal lg:sticky lg:top-10">
            <SectionLabel num="10">Почему сейчас</SectionLabel>
            <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.02] tracking-tightest text-ink">
              Пять причин <span className="text-teal-700 italic font-light">не&nbsp;откладывать</span>.
            </h2>
            <p className="mt-6 text-[15.5px] text-ink2 leading-[1.65] max-w-[420px]">
              Это не&nbsp;манипуляция «сейчас или никогда». Это&nbsp;арифметика: каждый месяц
              без&nbsp;управленческого учёта стоит конкретных денег.
            </p>
          </div>

          <ol className="space-y-px bg-line border border-line rounded-2xl overflow-hidden reveal">
            {points.map((p, i) => (
              <li key={i} className="bg-white px-7 lg:px-10 py-7 lg:py-8 flex items-start gap-7 group hover:bg-paper2/40 transition-colors">
                <div className="num text-[44px] lg:text-[56px] tnum text-teal-300/70 group-hover:text-gold transition-colors leading-none w-[64px] flex-shrink-0">
                  {String(i+1).padStart(2,"0")}
                </div>
                <p className="font-serif text-[20px] lg:text-[26px] leading-[1.25] text-ink tracking-tightish pt-1">
                  {p}
                </p>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ============================== CONTACT ============================== */
function Contact() {
  const [form, setForm] = useState({ name:"", phone:"", turnover:"", task:"", agree: true });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = "Как к вам обращаться?";
    const phoneDigits = form.phone.replace(/\D/g,"");
    if (phoneDigits.length < 10) e.phone = "Нужен телефон для связи";
    if (!form.turnover) e.turnover = "Выберите оборот";
    if (!form.agree) e.agree = "Нужно согласие на обработку";
    return e;
  };

  const submit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) setSent(true);
  };

  if (sent) {
    return (
      <section id="contact" className="py-24 lg:py-32 bg-white border-t border-line">
        <div className="max-w-[760px] mx-auto px-6 lg:px-10 text-center">
          <div className="grid place-items-center w-14 h-14 rounded-full bg-teal-50 text-teal-700 mx-auto">
            <Icon.check size={26} stroke={2}/>
          </div>
          <h2 className="mt-7 font-serif text-[36px] lg:text-[48px] leading-[1.05] tracking-tightest text-ink">
            Заявка принята.
          </h2>
          <p className="mt-5 text-[16px] text-ink2 leading-[1.65]">
            Свяжемся с&nbsp;вами в&nbsp;течение рабочего дня по&nbsp;номеру{" "}
            <span className="num">{form.phone}</span>. До&nbsp;звонка можем посмотреть структуру ваших
            расходов — пришлите выгрузку, если удобно.
          </p>
          <div className="mt-8">
            <Btn as="a" href="#top" variant="ghost"><Icon.arrow size={16} className="rotate-180"/> Наверх</Btn>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="contact" className="py-24 lg:py-32 bg-white border-t border-line">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="max-w-[760px] mb-14 reveal">
          <SectionLabel num="11">Бесплатная консультация</SectionLabel>
          <h2 className="mt-4 font-serif text-[36px] lg:text-[52px] leading-[1.05] tracking-tightest text-ink">
            30 минут разговора — и&nbsp;вы&nbsp;уже понимаете, где деньги.
          </h2>
          <p className="mt-5 text-[16px] text-ink2 leading-[1.65] max-w-[600px]">
            Расскажите коротко о&nbsp;бизнесе. Мы&nbsp;посмотрим структуру выручки и&nbsp;расходов
            и&nbsp;скажем, в&nbsp;каком тарифе вам стартовать — или что&nbsp;вам ещё не&nbsp;нужно.
          </p>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_1fr] gap-px bg-line border border-line rounded-2xl overflow-hidden reveal">
          {/* form */}
          <form onSubmit={submit} className="bg-white p-7 lg:p-10" noValidate>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <Field label="Имя" error={errors.name}>
                <input type="text" className="field w-full bg-paper/40 border border-line rounded-lg px-4 h-11 text-[15px]"
                       placeholder="Алексей" value={form.name}
                       onChange={(e) => setForm({...form, name: e.target.value})}/>
              </Field>
              <Field label="Телефон" error={errors.phone}>
                <input type="tel" className="field w-full bg-paper/40 border border-line rounded-lg px-4 h-11 text-[15px] num tnum"
                       placeholder="+7 (___) ___-__-__" value={form.phone}
                       onChange={(e) => setForm({...form, phone: e.target.value})}/>
              </Field>
              <Field label="Оборот компании" error={errors.turnover}>
                <select className="field w-full bg-paper/40 border border-line rounded-lg px-3 h-11 text-[15px] appearance-none bg-no-repeat"
                        style={{ backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234A7A7D' stroke-width='1.5'%3E%3Cpath d='m3 4 3 3 3-3'/%3E%3C/svg%3E\")",
                                 backgroundPosition: "right 14px center" }}
                        value={form.turnover}
                        onChange={(e) => setForm({...form, turnover: e.target.value})}>
                  <option value="">Выберите…</option>
                  <option>1,5 — 5 млн ₽ / мес</option>
                  <option>5 — 15 млн ₽ / мес</option>
                  <option>15 — 30 млн ₽ / мес</option>
                  <option>30+ млн ₽ / мес</option>
                </select>
              </Field>
              <Field label="Telegram (если удобно)" optional>
                <input type="text" className="field w-full bg-paper/40 border border-line rounded-lg px-4 h-11 text-[15px]"
                       placeholder="@username"
                       onChange={(e) => setForm({...form, tg: e.target.value})}/>
              </Field>
            </div>
            <div className="mt-5">
              <Field label="Кратко о задаче" optional>
                <textarea rows="4" className="field w-full bg-paper/40 border border-line rounded-lg px-4 py-3 text-[15px] resize-none"
                          placeholder="«Продажи растут, а денег не остаётся — не понимаю, куда уходит»"
                          value={form.task}
                          onChange={(e) => setForm({...form, task: e.target.value})}></textarea>
              </Field>
            </div>

            <label className="mt-5 flex items-start gap-3 text-[12.5px] text-ink2 cursor-pointer">
              <input type="checkbox" checked={form.agree} onChange={(e) => setForm({...form, agree: e.target.checked})}
                     className="mt-0.5 w-4 h-4 accent-teal-700"/>
              <span>
                Согласен на обработку персональных данных. Не используем ваш номер для рассылок —
                только для одного звонка.
              </span>
            </label>
            {errors.agree && <div className="mt-1 text-[11.5px] text-danger">{errors.agree}</div>}

            <div className="mt-7 flex items-center gap-3 flex-wrap">
              <Btn type="submit" variant="primary" className="h-12 px-6 text-[14.5px]">
                Отправить заявку <Icon.arrow size={16}/>
              </Btn>
              <span className="text-[12px] text-mute">Ответим в течение рабочего дня</span>
            </div>
          </form>

          {/* contacts panel */}
          <aside className="bg-teal-900 text-paper p-7 lg:p-10 relative overflow-hidden">
            <div className="absolute -bottom-20 -right-20 w-60 h-60 rounded-full bg-gold/10 blur-3xl pointer-events-none"></div>
            <div className="relative">
              <div className="text-[11px] uppercase tracking-[0.22em] text-paper/55 font-medium">Прямые контакты</div>
              <div className="mt-7 space-y-6">
                <ContactRow icon={<Icon.phone/>} label="Телефон" value="+7 (989) 888-90-07" href="tel:+79898889007" />
                <ContactRow icon={<Icon.tg/>}    label="Telegram" value="@finCollegium" href="https://t.me/finCollegium" />
                <ContactRow icon={<Icon.mail/>}  label="Email"    value="fincollegium8@gmail.com" href="mailto:fincollegium8@gmail.com" />
              </div>

              <div className="mt-10 pt-7 border-t border-paper/15">
                <div className="text-[11px] uppercase tracking-[0.22em] text-paper/55 font-medium mb-3">Где мы</div>
                <p className="text-[14px] text-paper/85 leading-[1.6]">
                  Краснодар · Южный федеральный округ.<br/>
                  Работаем по&nbsp;всей России — встречи онлайн.
                </p>
              </div>

              <div className="mt-10 pt-7 border-t border-paper/15 flex items-center gap-3 text-[12px] text-paper/55">
                <span className="w-1.5 h-1.5 rounded-full bg-gold blink"></span>
                <span>принимаем заявки на&nbsp;квартал</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

const Field = ({ label, error, optional, children }) => (
  <label className="block">
    <div className="flex items-center justify-between mb-1.5">
      <span className="text-[12px] uppercase tracking-[0.18em] text-mute font-medium">{label}</span>
      {optional && <span className="text-[10.5px] text-mute/70 italic">по желанию</span>}
    </div>
    {children}
    {error && <div className="mt-1 text-[11.5px] text-danger">{error}</div>}
  </label>
);

const ContactRow = ({ icon, label, value, href }) => (
  <a href={href} className="flex items-start gap-4 group" target={href.startsWith('http') ? "_blank" : undefined} rel="noreferrer">
    <span className="grid place-items-center w-10 h-10 rounded-md border border-paper/15 text-paper/85 group-hover:border-gold group-hover:text-gold transition-colors flex-shrink-0">
      {icon}
    </span>
    <div className="min-w-0">
      <div className="text-[11px] uppercase tracking-[0.18em] text-paper/50">{label}</div>
      <div className="num text-[18px] text-paper mt-0.5 tracking-tightish group-hover:text-gold transition-colors">{value}</div>
    </div>
  </a>
);

/* ============================== FOOTER ============================== */
function Footer() {
  return (
    <footer className="bg-teal-950 text-paper/75 pt-16 lg:pt-20 pb-10 border-t border-teal-900">
      <div className="max-w-[1280px] mx-auto px-6 lg:px-10">
        <div className="grid grid-cols-1 lg:grid-cols-[1.4fr_1fr_1fr_1fr] gap-10 lg:gap-12">
          <div>
            <div className="flex items-center gap-2.5">
              <span className="grid place-items-center w-9 h-9 rounded-md border border-paper/25 text-paper">
                <Icon.logo size={18}/>
              </span>
              <div className="leading-tight">
                <div className="text-[15px] font-semibold text-paper tracking-tightish">ФИНКОЛЛЕГИЯ</div>
                <div className="text-[10.5px] uppercase tracking-[0.22em] text-paper/55 -mt-0.5">финансовые консультанты</div>
              </div>
            </div>
            <p className="mt-5 text-[13.5px] leading-[1.6] max-w-[360px]">
              Финансовый партнёр на&nbsp;стороне собственника. Наводим порядок в&nbsp;деньгах
              малого бизнеса и&nbsp;запускаем культуру управления через финансы.
            </p>
          </div>

          <FooterCol title="Навигация" items={[
            ["Боли клиента", "#problem"],
            ["Решение", "#solution"],
            ["Как работаем", "#how"],
            ["Дашборд", "#dashboard"],
            ["Отчёты", "#reports"],
          ]}/>
          <FooterCol title="Компания" items={[
            ["Тарифы", "#pricing"],
            ["Чем НЕ являемся", "#not-us"],
            ["Почему сейчас", "#why-now"],
            ["Контакты", "#contact"],
          ]}/>
          <FooterCol title="Реквизиты" items={[
            ["ООО «Финколлегия»"],
            ["ИНН 2310000000", null, true],
            ["ОГРН 1230000000000", null, true],
            ["Краснодар, ЮФО"],
          ]}/>
        </div>

        <div className="mt-14 pt-7 border-t border-paper/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 text-[12px] text-paper/55">
          <div className="font-mono">© 2026 ООО «Финколлегия». Все права защищены.</div>
          <div className="flex items-center gap-6">
            <a href="#" className="hover:text-paper">Политика конфиденциальности</a>
            <a href="#" className="hover:text-paper">Договор-оферта</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

const FooterCol = ({ title, items }) => (
  <div>
    <div className="text-[11px] uppercase tracking-[0.22em] text-paper/45 font-medium mb-5">{title}</div>
    <ul className="space-y-2.5 text-[14px]">
      {items.map(([label, href, mute], i) => (
        <li key={i}>
          {href ? <a href={href} className="hover:text-paper">{label}</a>
                : <span className={mute ? "text-paper/45 num tnum" : ""}>{label}</span>}
        </li>
      ))}
    </ul>
  </div>
);

Object.assign(window, {
  Hero, Problem, Solution, HowItWorks, Reports, Benefits, NotUs, Pricing, WhyNow, Contact, Footer,
});
