// ─────────────────────────────────────────────────────────
//  All page sections.
//  Colours via CSS custom properties from :root (index.html).
// ─────────────────────────────────────────────────────────

// ── Layout helpers ────────────────────────────────────────

const Container = ({ children, className = '', style }) => (
  <div
    className={`mx-auto w-full max-w-[1180px] px-5 sm:px-8 ${className}`}
    style={style}
  >
    {children}
  </div>
);

const SectionLabel = ({ n, children, light = false }) => {
  const col  = light ? 'rgba(255,255,255,0.40)' : 'var(--ink-3)';
  const line = light ? 'rgba(255,255,255,0.15)' : 'var(--line)';
  return (
    <div
      className="flex items-center gap-3 mb-6 sm:mb-10 text-[13px] tracking-[0.08em] uppercase font-mono"
      style={{ color: col }}
    >
      <span className="tabular-nums">{n}</span>
      <span className="h-px w-[40px]" style={{ background: line }} />
      <span>{children}</span>
    </div>
  );
};

const PrimaryBtn = ({ children, href = '#form' }) => (
  <a
    href={href}
    className="inline-flex items-center justify-center gap-2 rounded-full
               px-7 py-[14px] text-[16px] font-medium
               transition-[opacity,transform] duration-150
               hover:opacity-90 active:scale-[0.985]"
    style={{
      backgroundColor: 'var(--accent)',
      color: 'var(--accent-ink)',
      boxShadow: '0 1px 0 rgba(255,255,255,.35) inset, 0 8px 24px -10px var(--accent)',
    }}
  >
    {children}
  </a>
);

const GhostBtn = ({ children, href = '#' }) => (
  <a
    href={href}
    className="inline-flex items-center gap-2 px-3 py-[14px]
               text-[16px] font-medium underline underline-offset-[5px]
               decoration-[1.5px] transition-opacity hover:opacity-60"
    style={{ color: 'var(--ink)', textDecorationColor: 'var(--line)' }}
  >
    {children}
  </a>
);

// ── Logo icon (SVG pin — used in nav & footer) ────────────
function TochkaLogo({ size = 32 }) {
  const h = Math.round(size * 1.1);
  return (
    <svg width={size} height={h} viewBox="0 0 68 74" fill="none" style={{ flexShrink: 0 }}>
      <defs>
        <linearGradient id="tpg" x1="8" y1="3" x2="50" y2="71" gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#42B8FF"/>
          <stop offset="100%" stopColor="#0B1A5C"/>
        </linearGradient>
      </defs>
      {/* Pin body */}
      <path d="M28 3C14.7 3 4 13.7 4 27c0 17.5 24 44 24 44s24-26.5 24-44C52 13.7 41.3 3 28 3z"
        fill="url(#tpg)"/>
      {/* White chat bubble */}
      <circle cx="27" cy="27" r="14" fill="white"/>
      {/* Three dots */}
      <circle cx="20.5" cy="27" r="2.3" fill="#0B1A5C"/>
      <circle cx="27"   cy="27" r="2.3" fill="#0B1A5C"/>
      <circle cx="33.5" cy="27" r="2.3" fill="#0B1A5C"/>
      {/* Orbit arc */}
      <path d="M38 32 Q51 23 48 12" stroke="white" strokeWidth="2.2"
        fill="none" strokeLinecap="round"/>
      <circle cx="48" cy="12" r="3" fill="white"/>
      {/* Pixel squares top-right */}
      <rect x="49" y="2"  width="8"   height="8"   rx="1.5" fill="#6BC5FF" opacity="0.90"/>
      <rect x="59" y="3"  width="6"   height="6"   rx="1.2" fill="#6BC5FF" opacity="0.70"/>
      <rect x="53" y="11" width="7"   height="7"   rx="1.4" fill="#6BC5FF" opacity="0.85"/>
      <rect x="62" y="12" width="5"   height="5"   rx="1.0" fill="#6BC5FF" opacity="0.55"/>
    </svg>
  );
}

// ── TopNav ────────────────────────────────────────────────
function TopNav() {
  const navLinks = [
    { href: '#how',   label: 'Как работает' },
    { href: '#price', label: 'Условия' },
    { href: '#faq',   label: 'Вопросы' },
  ];

  return (
    <header
      className="sticky top-0 z-30 backdrop-blur-md border-b"
      style={{ background: 'rgba(250,250,247,0.80)', borderColor: 'var(--line-2)' }}
    >
      <Container className="h-[64px] flex items-center justify-between">
        <a href="#" className="flex items-center gap-2.5 shrink-0">
          <TochkaLogo size={34} />
          <div className="leading-none">
            <div className="font-semibold text-[15px]" style={{ color: 'var(--ink)' }}>
              Точка Бота
            </div>
            <div className="text-[11px]" style={{ color: 'var(--ink-3)' }}>
              ИИ-боты под ключ
            </div>
          </div>
        </a>

        <nav className="hidden md:flex items-center gap-7 text-[14px]">
          {navLinks.map(l => (
            <a key={l.href} href={l.href}
              className="transition-colors hover:opacity-70"
              style={{ color: 'var(--ink-2)' }}
            >{l.label}</a>
          ))}
        </nav>

        <a
          href="#contacts"
          className="inline-flex items-center rounded-full px-3 sm:px-4 py-2
                     text-[13px] sm:text-[14px] font-medium
                     transition-all hover:brightness-105"
          style={{
            backgroundColor: 'var(--accent)',
            color: 'var(--accent-ink)',
            boxShadow: '0 1px 0 rgba(255,255,255,.4) inset, 0 4px 12px -4px var(--accent)',
          }}
        >
          Написать нам
        </a>
      </Container>
    </header>
  );
}

// ── Hero ─────────────────────────────────────────────────

const Stat = ({ k, v }) => (
  <div>
    <div className="text-[26px] sm:text-[30px] font-semibold tracking-[-0.01em]"
      style={{ color: 'var(--ink)' }}>{k}</div>
    <div className="mt-1 text-[13px] leading-[1.45]"
      style={{ color: 'var(--ink-3)' }}>{v}</div>
  </div>
);

const Bubble = ({ side, children }) => (
  <div className={`flex ${side === 'us' ? 'justify-end' : 'justify-start'}`}>
    <div
      className={`max-w-[82%] rounded-2xl px-3.5 py-2.5 text-[13px] leading-[1.5]
        ${side === 'us' ? 'rounded-br-sm' : 'rounded-bl-sm'}`}
      style={side === 'us'
        ? { background: 'var(--ink)', color: 'white' }
        : { background: 'var(--line-2)', color: 'var(--ink)' }
      }
    >
      {children}
    </div>
  </div>
);

function DemoChatCard() {
  return (
    <div
      className="hidden lg:block absolute right-[32px] top-[120px] w-[320px] rounded-2xl
                 shadow-[0_20px_60px_-16px_rgba(20,24,31,0.16)]"
      style={{
        border: '1px solid var(--line)',
        background: 'var(--surface)',
        transform: 'rotate(1.5deg)',
      }}
    >
      <div
        className="flex items-center gap-2.5 px-4 py-3"
        style={{ borderBottom: '1px solid var(--line-2)' }}
      >
        <span
          className="w-7 h-7 rounded-full grid place-items-center text-white text-[11px] font-semibold shrink-0"
          style={{ background: 'var(--ink)' }}
        >Т</span>
        <div className="min-w-0">
          <div className="text-[13px] font-medium truncate" style={{ color: 'var(--ink)' }}>
            Авито · новое сообщение
          </div>
          <div className="text-[11px]" style={{ color: 'var(--ink-3)' }}>
            бот Точка Бота · отвечает за вас
          </div>
        </div>
        <span className="ml-auto font-mono text-[10px] shrink-0" style={{ color: 'var(--ink-3)' }}>
          14:08
        </span>
      </div>

      <div className="p-4 flex flex-col gap-2.5">
        <Bubble side="them">Здравствуйте, хочу записаться</Bubble>
        <Bubble side="us">Здравствуйте! Подскажите, что вас интересует, и когда удобнее — в будни или выходные?</Bubble>
        <Bubble side="them">В субботу, с утра</Bubble>
        <Bubble side="us">Записал на субботу утром. Оставьте имя и номер — специалист свяжется накануне и уточнит время.</Bubble>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="relative overflow-hidden border-b" style={{ borderColor: 'var(--line-2)' }}>
      <div className="absolute inset-0 grid-bg opacity-60 pointer-events-none" />
      <div
        className="absolute -top-32 right-0 w-[600px] h-[600px] rounded-full pointer-events-none"
        style={{ background: 'radial-gradient(closest-side, var(--accent-soft), transparent 72%)' }}
      />

      <Container className="relative pt-16 sm:pt-24 pb-20 sm:pb-32">
        <div
          className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-[12.5px] mb-8"
          style={{ borderColor: 'var(--line)', background: 'var(--surface)', color: 'var(--ink-3)' }}
        >
          <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)' }} />
          Точка Бота · ИИ-боты для бизнеса
        </div>

        <h1
          className="font-semibold tracking-[-0.022em] text-[40px] leading-[1.05]
                     sm:text-[64px] sm:leading-[1.02] max-w-[17ch]"
          style={{ color: 'var(--ink)' }}
        >
          Клиент написал — бот ответил за 5 секунд. Пока вы заняты.
        </h1>

        <p
          className="mt-7 text-[18px] sm:text-[20px] leading-[1.55] max-w-[56ch]"
          style={{ color: 'var(--ink-2)' }}
        >
          Настраиваем ИИ-ассистента под ваш бизнес и подключаем к Авито, WhatsApp, Telegram и другим каналам. Первые 2 недели — бесплатно.
        </p>

        <div className="mt-10 flex flex-wrap items-center gap-3">
          <PrimaryBtn href="#contacts">
            Запустить бесплатный тест
            <IconArrow size={18} />
          </PrimaryBtn>
          <GhostBtn href="#price">Посмотреть условия</GhostBtn>
        </div>

        {/* Mobile-only inline chat preview */}
        <div
          className="block lg:hidden mt-10 rounded-2xl overflow-hidden"
          style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}
        >
          <div className="flex items-center gap-2.5 px-4 py-3"
            style={{ borderBottom: '1px solid var(--line-2)' }}>
            <span className="w-7 h-7 rounded-full grid place-items-center text-white text-[11px] font-semibold shrink-0"
              style={{ background: 'var(--ink)' }}>Т</span>
            <div className="min-w-0">
              <div className="text-[13px] font-medium truncate" style={{ color: 'var(--ink)' }}>
                Авито · новое сообщение
              </div>
              <div className="text-[11px]" style={{ color: 'var(--ink-3)' }}>
                бот Точка Бота · отвечает за вас
              </div>
            </div>
            <span className="ml-auto font-mono text-[10px] shrink-0" style={{ color: 'var(--ink-3)' }}>14:08</span>
          </div>
          <div className="p-4 flex flex-col gap-2.5">
            <Bubble side="them">Здравствуйте, хочу записаться</Bubble>
            <Bubble side="us">Здравствуйте! Подскажите, что вас интересует, и когда удобнее — в будни или выходные?</Bubble>
            <Bubble side="them">В субботу, с утра</Bubble>
            <Bubble side="us">Записал на субботу утром. Оставьте имя и номер — специалист свяжется накануне и уточнит время.</Bubble>
          </div>
        </div>

        <div className="mt-16 sm:mt-24 grid grid-cols-2 sm:grid-cols-4 gap-8 max-w-[820px]">
          <Stat k="5 сек"    v="среднее время ответа бота — круглосуточно" />
          <Stat k="+36%"     v="рост конверсии заявок в сделки" />
          <Stat k="−60%"     v="потерь входящих обращений" />
          <Stat k="7"        v="каналов: Авито, WA, TG, IG, VK, MAX, сайт" />
        </div>
      </Container>

      <DemoChatCard />
    </section>
  );
}

// ── Pain ─────────────────────────────────────────────────
function Pain() {
  const items = [
    {
      ic: <IconMessage className="w-6 h-6" />,
      t: 'Пока вы на объекте, клиент написал в Авито. Через 30 минут он уже у конкурента.',
    },
    {
      ic: <IconUserX className="w-6 h-6" />,
      t: 'Клиенты пишут одновременно в Авито, WhatsApp, Telegram, ВКонтакте — невозможно успеть везде.',
    },
    {
      ic: <IconRepeat className="w-6 h-6" />,
      t: 'Каждому новому клиенту — одни и те же вопросы про сроки, цену и условия. По кругу.',
    },
    {
      ic: <IconClock className="w-6 h-6" />,
      t: 'Клиент пишет в одиннадцать вечера. Утром вы откроете чат — а он уже договорился с другими.',
    },
  ];

  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="01">Знакомо</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch]"
          style={{ color: 'var(--ink)' }}
        >
          Каждая пропущенная заявка — это клиент, который написал кому-то ещё.
        </h2>

        <div
          className="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-px rounded-2xl overflow-hidden"
          style={{ background: 'var(--line)', border: '1px solid var(--line)' }}
        >
          {items.map((it, i) => (
            <div key={i} className="flex gap-5 p-7 sm:p-8" style={{ background: 'var(--surface)' }}>
              <div
                className="shrink-0 w-11 h-11 rounded-xl border grid place-items-center"
                style={{ borderColor: 'var(--line)', color: 'var(--ink-2)' }}
              >
                {it.ic}
              </div>
              <p
                className="text-[17px] sm:text-[18px] leading-[1.5]"
                style={{ color: 'var(--ink)' }}
              >{it.t}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── HowItWorks ───────────────────────────────────────────
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Клиент пишет вам в Авито или мессенджер.' },
    { n: '02', t: 'Бот отвечает в течение секунды и задаёт уточняющие вопросы.' },
    { n: '03', t: 'Записывает на бесплатный замер, визит или консультацию.' },
    { n: '04', t: 'Заявка падает вам в Telegram — едете и закрываете сделку.' },
  ];

  return (
    <section id="how" className="py-20 sm:py-28 border-b anchor-pad" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="02">Как это работает</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[20ch]"
          style={{ color: 'var(--ink)' }}
        >
          Четыре шага. От сообщения до записанной заявки.
        </h2>

        <div className="mt-14 relative">
          <div
            className="hidden md:block absolute left-[34px] right-0 top-[33px] h-px"
            style={{ background: 'var(--line)' }}
          />
          <div className="grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-6 relative">
            {steps.map((s, i) => (
              <div key={i}>
                <div
                  className="relative z-10 w-[68px] h-[68px] rounded-full border grid place-items-center"
                  style={{ background: 'var(--bg)', borderColor: 'var(--line)' }}
                >
                  <span
                    className="font-mono text-[12px] tracking-wider"
                    style={{ color: 'var(--ink-3)' }}
                  >{s.n}</span>
                </div>
                <p
                  className="mt-5 text-[17px] leading-[1.5] max-w-[26ch]"
                  style={{ color: 'var(--ink)' }}
                >{s.t}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ── WhatYouGet ───────────────────────────────────────────
function WhatYouGet() {
  const items = [
    {
      ic: <IconClock className="w-5 h-5" />,
      t: 'Отвечает 24/7',
      d: 'Ночью, в выходные, в праздники — пока вы заняты или спите.',
    },
    {
      ic: <IconBolt className="w-5 h-5" />,
      t: 'Реакция за 5 секунд',
      d: 'Клиент не ждёт. Бот отвечает мгновенно и ведёт диалог до результата.',
    },
    {
      ic: <IconInbox className="w-5 h-5" />,
      t: 'Заявки в Telegram',
      d: 'Контакт и суть запроса — сразу в ваш чат. Ничего не теряется.',
    },
    {
      ic: <IconCheckCircle className="w-5 h-5" />,
      t: 'Отсеивает лишнее',
      d: 'Выясняет потребность, фильтрует спам и нецелевые обращения — до вас доходят только реальные клиенты.',
    },
    {
      ic: <IconBolt className="w-5 h-5" />,
      t: 'Настройка за 1–2 дня',
      d: 'Бриф — 15 минут. Остальное берём на себя.',
    },
    {
      ic: <IconWrench className="w-5 h-5" />,
      t: 'Правки без задержек',
      d: 'Нужно изменить сценарий — пишете в Telegram, правим в тот же день.',
    },
  ];

  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="04">Что получаете</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch] mb-12"
          style={{ color: 'var(--ink)' }}
        >
          Всё необходимое. Ничего лишнего.
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl">
          {items.map((it, i) => (
            <div key={i} className="flex gap-4">
              <div
                className="shrink-0 mt-0.5 w-10 h-10 rounded-lg grid place-items-center"
                style={{ background: 'var(--accent-soft)', color: 'var(--ink)' }}
              >
                {it.ic}
              </div>
              <div>
                <div
                  className="font-medium text-[18px] tracking-[-0.005em]"
                  style={{ color: 'var(--ink)' }}
                >{it.t}</div>
                <div
                  className="mt-1.5 text-[15.5px] leading-[1.55]"
                  style={{ color: 'var(--ink-3)' }}
                >{it.d}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Economics ─────────────────────────────────────────────
function Economics() {
  return (
    <section id="economics" className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="06">Экономика</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch]"
          style={{ color: 'var(--ink)' }}
        >
          Разовая настройка — 20 000 ₽. Одна пропущенная заявка — дороже.
        </h2>

        <p
          className="mt-5 mb-12 text-[18px] leading-[1.55] max-w-[58ch]"
          style={{ color: 'var(--ink-2)' }}
        >
          Большинство клиентов не ждут ответа дольше 30 минут. Написали — нет ответа — ушли.
          Бот отвечает за секунды, круглосуточно.
        </p>

        {/* Comparison cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5 max-w-2xl mb-12">
          {/* Without bot */}
          <div
            className="rounded-2xl p-7 flex flex-col gap-4"
            style={{ background: 'var(--line-2)', border: '1px solid var(--line)' }}
          >
            <div className="text-[12px] tracking-[0.1em] uppercase font-mono"
              style={{ color: 'var(--ink-3)' }}>
              Без бота
            </div>
            <ul className="flex flex-col gap-2.5 text-[15px]" style={{ color: 'var(--ink-2)' }}>
              {[
                '5–15 пропущенных заявок в месяц',
                'Клиент не ждёт — уходит к тому, кто ответил',
                'Каждый пропуск = потерянный чек',
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-2.5">
                  <span className="shrink-0 mt-1.5 w-1 h-1 rounded-full"
                    style={{ background: 'var(--ink-3)' }} />
                  {t}
                </li>
              ))}
            </ul>
            <div className="pt-3 mt-auto" style={{ borderTop: '1px solid var(--line)' }}>
              <div className="text-[32px] font-semibold tracking-[-0.02em]"
                style={{ color: 'var(--warn)' }}>
                −25 000 ₽+
              </div>
              <div className="text-[13px] mt-0.5" style={{ color: 'var(--ink-3)' }}>
                потенциально упущено в месяц
              </div>
            </div>
          </div>

          {/* With bot */}
          <div
            className="rounded-2xl p-7 flex flex-col gap-4"
            style={{ background: 'var(--accent-soft)', border: '1px solid rgba(255,85,36,0.18)' }}
          >
            <div className="text-[12px] tracking-[0.1em] uppercase font-mono"
              style={{ color: 'var(--accent)' }}>
              С ботом
            </div>
            <ul className="flex flex-col gap-2.5 text-[15px]" style={{ color: 'var(--ink-2)' }}>
              {[
                'Ответ за 5 секунд — в любое время',
                'Бот не болеет, не устаёт, не забывает',
                'Окупается с первой сохранённой записи',
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-2.5">
                  <IconCheck size={14} className="shrink-0 mt-0.5"
                    style={{ color: 'var(--accent)' }} />
                  {t}
                </li>
              ))}
            </ul>
            <div className="pt-3 mt-auto" style={{ borderTop: '1px solid rgba(255,85,36,0.18)' }}>
              <div className="text-[32px] font-semibold tracking-[-0.02em]"
                style={{ color: 'var(--accent)' }}>
                20 000 ₽
              </div>
              <div className="text-[13px] mt-0.5" style={{ color: 'var(--ink-3)' }}>
                разовая настройка под вашу нишу
              </div>
            </div>
          </div>
        </div>

        {/* ROI callout */}
        <div
          className="max-w-2xl rounded-2xl px-7 py-6 flex items-start gap-5"
          style={{ background: 'var(--surface)', border: '1px solid var(--line)' }}
        >
          <div
            className="shrink-0 w-10 h-10 rounded-xl grid place-items-center mt-0.5 text-[20px]"
            style={{ background: 'var(--accent-soft)' }}
          >
            ⚡
          </div>
          <div>
            <p className="font-medium text-[17px]" style={{ color: 'var(--ink)' }}>
              Средний чек в сфере услуг — от 5 000 до 30 000 ₽.
            </p>
            <p className="mt-1.5 text-[15.5px] leading-[1.55]" style={{ color: 'var(--ink-2)' }}>
              При среднем чеке от 5 000 ₽ разовая настройка{' '}
              <strong style={{ color: 'var(--ink)' }}>окупается за 1–4 сохранённые заявки</strong>.
              Дальше — чистая прибыль без повторных вложений.
            </p>
          </div>
        </div>

        {/* Mid-page CTA */}
        <div className="mt-10 flex flex-wrap gap-3">
          <PrimaryBtn href="#contacts">
            Запустить бесплатный тест
            <IconArrow size={18} />
          </PrimaryBtn>
          <GhostBtn href="#price">Смотреть условия</GhostBtn>
        </div>
      </Container>
    </section>
  );
}

// ── Testimonials ──────────────────────────────────────────
function Testimonials() {
  const items = [
    {
      text: 'Раньше не успевал отвечать — работаю один, руки заняты. Бот подхватывает и держит клиента до моего ответа. За первые две недели теста пришло 11 заявок, из которых 4 превратились в заказы. Подключился без вопросов.',
      name: 'Андрей К.',
      role: 'Мастер натяжных потолков, Казань',
    },
    {
      text: 'Думал, что бот будет отвечать как робот и распугает клиентов. Оказалось — всё нормально, живо. Клиенты даже не замечают. Теперь заявки из Авито и WhatsApp приходят в один Telegram-чат, ничего не теряется.',
      name: 'Марина Ш.',
      role: 'Студия маникюра, Уфа',
    },
    {
      text: 'Самое ценное — бот работает ночью и в выходные. Раньше половина заявок просто уходила, потому что я не отвечал быстро. Сейчас конверсия выросла заметно. Настройка заняла буквально пару дней.',
      name: 'Сергей Т.',
      role: 'Автосервис, Екатеринбург',
    },
  ];

  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="05">Отзывы</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch] mb-12"
          style={{ color: 'var(--ink)' }}
        >
          Что говорят после первых двух недель.
        </h2>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-5 max-w-5xl">
          {items.map((it, i) => (
            <div
              key={i}
              className="rounded-2xl p-7 flex flex-col gap-5"
              style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}
            >
              <p
                className="text-[15.5px] leading-[1.65] flex-1"
                style={{ color: 'var(--ink-2)' }}
              >
                «{it.text}»
              </p>
              <div style={{ borderTop: '1px solid var(--line-2)', paddingTop: '16px' }}>
                <div className="font-medium text-[15px]" style={{ color: 'var(--ink)' }}>{it.name}</div>
                <div className="text-[13px] mt-0.5" style={{ color: 'var(--ink-3)' }}>{it.role}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Channels ─────────────────────────────────────────────
function WhoFor() {
  const channels = [
    { name: 'Авито',     sub: 'сообщения и отклики',      color: '#00aaff' },
    { name: 'WhatsApp',  sub: 'входящие обращения',        color: '#25d366' },
    { name: 'Telegram',  sub: 'бот или личный аккаунт',    color: '#229ed9' },
    { name: 'Instagram', sub: 'Direct-сообщения',          color: '#e1306c' },
    { name: 'ВКонтакте', sub: 'личные сообщения группы',   color: '#0077ff' },
    { name: 'MAX',       sub: 'мессенджер Мегафон',        color: '#7c3aed' },
    { name: 'Сайт',      sub: 'виджет онлайн-чата',        color: '#f97316' },
  ];

  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="03">Каналы</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch]"
          style={{ color: 'var(--ink)' }}
        >
          Один бот — все каналы, где пишут ваши клиенты.
        </h2>
        <p
          className="mt-4 mb-12 text-[17px] leading-[1.55] max-w-[58ch]"
          style={{ color: 'var(--ink-3)' }}
        >
          Подключаем к тем площадкам, которые актуальны для вашего бизнеса.
          Не нужно менять то, что уже работает.
        </p>

        <div className="flex flex-wrap gap-3 max-w-3xl">
          {channels.map((ch, i) => (
            <div
              key={i}
              className="flex items-center gap-3 rounded-2xl px-5 py-4"
              style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}
            >
              <span
                className="shrink-0 w-2.5 h-2.5 rounded-full"
                style={{ background: ch.color }}
              />
              <div>
                <div className="font-semibold text-[16px]" style={{ color: 'var(--ink)' }}>{ch.name}</div>
                <div className="text-[12px] mt-0.5" style={{ color: 'var(--ink-3)' }}>{ch.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── Conditions (dark section) ─────────────────────────────
function Conditions() {
  return (
    <section id="price" className="py-20 sm:py-28 anchor-pad" style={{ background: 'var(--ink)' }}>
      <Container>
        <SectionLabel n="07" light>Условия</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch] mb-14 text-white"
        >
          Сначала вы видите результат. Потом решаете, продолжать ли.
        </h2>

        <div
          className="grid grid-cols-1 lg:grid-cols-12 max-w-3xl rounded-2xl overflow-hidden"
          style={{
            border: '1px solid rgba(255,255,255,0.12)',
            gap: '1px',
            background: 'rgba(255,255,255,0.12)',
          }}
        >
          {/* Stage 1 — dark */}
          <div className="lg:col-span-7 flex flex-col gap-5 p-8 sm:p-10"
            style={{ background: 'var(--ink)' }}>
            <div className="text-[12px] tracking-[0.1em] uppercase font-mono"
              style={{ color: 'rgba(255,255,255,0.40)' }}>
              Этап 1 · бесплатно
            </div>
            <div>
              <div className="text-[52px] font-semibold tracking-[-0.02em] leading-none text-white">
                0 ₽
              </div>
              <div className="mt-1.5 text-[16px]" style={{ color: 'rgba(255,255,255,0.55)' }}>
                2 недели тестового периода
              </div>
            </div>
            <ul className="flex flex-col gap-3">
              {[
                'Подключаем бот к вашему Авито или мессенджерам за 1–2 дня.',
                'Ведём переписку, дорабатываем сценарий ответов под ваш бизнес.',
                'Все заявки за 14 дней приходят вам в Telegram.',
                'Не привёл ни одной заявки — отключаемся, вы ничего не платите.',
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-3 text-[15px]"
                  style={{ color: 'rgba(255,255,255,0.72)' }}>
                  <span className="shrink-0 mt-[9px] w-1 h-1 rounded-full"
                    style={{ background: 'rgba(255,255,255,0.35)' }} />
                  {t}
                </li>
              ))}
            </ul>
          </div>

          {/* Stage 2 — white */}
          <div
            className="lg:col-span-5 flex flex-col gap-5 p-8 sm:p-10"
            style={{ background: 'var(--surface)', color: 'var(--ink)' }}
          >
            <div className="text-[12px] tracking-[0.1em] uppercase font-mono"
              style={{ color: 'var(--ink-3)' }}>
              Этап 2 · если работает
            </div>
            <div>
              <div className="text-[44px] font-semibold tracking-[-0.02em] leading-none">20 000 ₽</div>
              <div className="mt-1.5 text-[14px]" style={{ color: 'var(--ink-3)' }}>разовая настройка</div>
            </div>
            <div className="h-px" style={{ background: 'var(--line)' }} />
            <div>
              <div className="text-[30px] font-semibold tracking-[-0.015em]">~2 900 ₽/мес</div>
              <div className="mt-1 text-[14px]" style={{ color: 'var(--ink-3)' }}>платформа (AI + хостинг)</div>
            </div>
            <ul className="flex flex-col gap-2.5">
              {[
                'Настройка сценария под вашу нишу',
                'Подключение к Авито и мессенджерам',
                'Тестовые диалоги перед запуском',
                'Отключиться можно в любой момент',
              ].map((t, i) => (
                <li key={i} className="flex items-start gap-2.5 text-[14px]"
                  style={{ color: 'var(--ink-2)' }}>
                  <IconCheck size={14} className="shrink-0 mt-0.5"
                    style={{ color: 'var(--accent)' }} />
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mt-10 flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
          <PrimaryBtn href="#contacts">
            Запустить бесплатный тест
            <IconArrow size={18} />
          </PrimaryBtn>
          <p className="text-[14px] max-w-[44ch]" style={{ color: 'rgba(255,255,255,0.55)' }}>
            Никаких звёздочек, скрытых платежей и автопродлений.
            Если что-то непонятно — напишите, ответим в мессенджере.
          </p>
        </div>
      </Container>
    </section>
  );
}

// ── About logo (full horizontal lockup from logo.png) ─────
function AboutLogo() {
  const [err, setErr] = React.useState(false);
  if (err) {
    return (
      <div className="flex items-center gap-3">
        <TochkaLogo size={52} />
        <div>
          <div className="font-semibold text-[22px]" style={{ color: 'var(--ink)' }}>Точка Бота</div>
          <div className="text-[14px]" style={{ color: 'var(--ink-3)' }}>Автоматизация общения и продаж</div>
        </div>
      </div>
    );
  }
  return (
    <img
      src="logo.png"
      alt="Точка Бота — Автоматизация общения и продаж"
      onError={() => setErr(true)}
      style={{ height: 64, maxWidth: 400, objectFit: 'contain', objectPosition: 'left' }}
    />
  );
}

// ── About ─────────────────────────────────────────────────
function About() {
  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="06">О нас</SectionLabel>
        <div className="max-w-[680px]">
          <h2
            className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[40px]
                       leading-[1.1] mb-7"
            style={{ color: 'var(--ink)' }}
          >
            Кто за этим стоит
          </h2>
          <div className="flex flex-col gap-5">
            <p className="text-[17px] sm:text-[18px] leading-[1.6]"
              style={{ color: 'var(--ink-2)' }}>
              Точка Бота — команда, которая настраивает ИИ-ботов для малого и среднего
              бизнеса под ключ. Берём бриф, пишем сценарий, подключаем к вашим каналам
              и следим чтобы всё работало.
            </p>
            <p className="text-[17px] sm:text-[18px] leading-[1.6]"
              style={{ color: 'var(--ink-2)' }}>
              Работаем на платформе Nextbot — официальный партнёр. Это значит: стабильная
              инфраструктура, поддержка семи каналов и AI, который говорит человеческим
              языком, а не как чат-бот из 2015 года.
            </p>
            <p className="text-[15.5px] leading-[1.6] pt-1"
              style={{ color: 'var(--ink-3)' }}>
              Общаетесь с нами напрямую — Telegram, WhatsApp или MAX.
              Никакой переписки через техподдержку.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ── WorkProcess ───────────────────────────────────────────
function WorkProcess() {
  const steps = [
    {
      n: '01',
      ic: <IconSend className="w-5 h-5" />,
      t: 'Пишете нам',
      d: 'Рассказываете о бизнесе: какие вопросы задают клиенты, через какие каналы они приходят. 10–15 минут переписки.',
    },
    {
      n: '02',
      ic: <IconWrench className="w-5 h-5" />,
      t: 'Настраиваем за 1–2 дня',
      d: 'Создаём сценарий под вашу нишу, подключаем к Авито или мессенджерам. Вам нужно только дать доступ к аккаунту.',
    },
    {
      n: '03',
      ic: <IconClock className="w-5 h-5" />,
      t: '2 недели — тест',
      d: 'Бот работает и передаёт заявки в ваш Telegram. Следим за диалогами, правим если нужно — всё бесплатно.',
    },
    {
      n: '04',
      ic: <IconCheckCircle className="w-5 h-5" />,
      t: 'Вы решаете',
      d: 'Если заявки пошли — переходим на платный тариф. Не пошли — отключаемся без лишних слов и обязательств.',
    },
  ];

  return (
    <section className="py-20 sm:py-28 border-b" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="08">Как мы работаем</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch]"
          style={{ color: 'var(--ink)' }}
        >
          Что произойдёт после того, как вы напишете.
        </h2>
        <p
          className="mt-5 mb-14 text-[17px] leading-[1.55] max-w-[56ch]"
          style={{ color: 'var(--ink-2)' }}
        >
          Никаких предоплат и долгих переговоров.
          Сначала вы видите результат — потом платите.
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {steps.map((s, i) => (
            <div
              key={i}
              className="rounded-2xl p-6 flex flex-col gap-4"
              style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}
            >
              <div className="flex items-center gap-3">
                <div
                  className="shrink-0 w-9 h-9 rounded-lg grid place-items-center border"
                  style={{ background: 'var(--bg)', borderColor: 'var(--line)', color: 'var(--ink-2)' }}
                >
                  {s.ic}
                </div>
                <span
                  className="font-mono text-[11px] tracking-wider"
                  style={{ color: 'var(--ink-3)' }}
                >{s.n}</span>
              </div>
              <div className="font-semibold text-[17px] leading-[1.25]"
                style={{ color: 'var(--ink)' }}>{s.t}</div>
              <div className="text-[14.5px] leading-[1.55]"
                style={{ color: 'var(--ink-3)' }}>{s.d}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── FAQ ───────────────────────────────────────────────────
function Faq() {
  const [openIdx, setOpenIdx] = React.useState(0);

  const items = [
    {
      q: 'Безопасно ли давать вам доступ к Авито?',
      a: 'Вы подключаете интеграцию сами через официальный API Авито — как любое стороннее приложение. Пароль никому не передаётся. Разрешение можно отозвать в настройках Авито в любой момент. Мы не видим вашу переписку с другими клиентами и не можем писать от вашего имени без бота.',
    },
    {
      q: 'Что если бот ошибётся и нагрубит клиенту?',
      a: 'Бот работает строго по заданному сценарию: вежливо, коротко, без оценок и лишних слов. Он не импровизирует. Если клиент задаёт вопрос вне сценария — бот говорит, что уточнит мастер, и предлагает записаться. Перед запуском проходим несколько тестовых диалогов вместе.',
    },
    {
      q: 'Будет ли бот называть цену клиенту?',
      a: 'По умолчанию нет — бот выясняет потребность и передаёт вам контакт. Если нужно называть цены из прайса, настраиваем это отдельно. Обсуждаем на брифе.',
    },
    {
      q: 'Что если за 2 недели заявки будут, но мало?',
      a: 'Обсудим. Если бот сработал, но поток небольшой — смотрим на качество диалогов и конверсию. Если что-то явно не так в сценарии — дорабатываем бесплатно. Решение о переходе к платному тарифу принимаете только вы.',
    },
    {
      q: 'Сколько времени займёт подключение?',
      a: '1–2 дня после первого контакта. Нужно: 15–20 минут на бриф в мессенджере, доступ к нужным каналам (Авито, WhatsApp и т.д.) и Telegram, куда будут приходить заявки.',
    },
    {
      q: 'Можно ли отключиться в любой момент?',
      a: 'Да. Никаких контрактов и автопродлений. Напишете «стоп» в Telegram — отключаем в тот же день. Данные клиентов (заявки в Telegram) остаются у вас.',
    },
  ];

  return (
    <section id="faq" className="py-20 sm:py-28 border-b anchor-pad" style={{ borderColor: 'var(--line-2)' }}>
      <Container>
        <SectionLabel n="09">Частые вопросы</SectionLabel>
        <h2
          className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[44px]
                     leading-[1.1] max-w-[22ch] mb-12"
          style={{ color: 'var(--ink)' }}
        >
          Что обычно спрашивают.
        </h2>

        <div className="max-w-2xl" style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((item, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
              <button
                className="w-full flex items-center justify-between py-5 text-left gap-6"
                onClick={() => setOpenIdx(openIdx === i ? null : i)}
              >
                <span
                  className="text-[17px] sm:text-[18px] font-medium"
                  style={{ color: 'var(--ink)' }}
                >{item.q}</span>
                <span
                  className="shrink-0 w-8 h-8 rounded-full border grid place-items-center
                             text-[20px] leading-none font-light select-none"
                  style={{ borderColor: 'var(--line)', color: 'var(--ink-3)' }}
                >
                  {openIdx === i ? '−' : '+'}
                </span>
              </button>
              {openIdx === i && (
                <div
                  className="pb-6 text-[16px] leading-[1.65]"
                  style={{ color: 'var(--ink-2)' }}
                >{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ── ContactSection ────────────────────────────────────────
function ContactSection({ config }) {
  const tgHandle = config.telegram ? config.telegram.replace(/^@/, '') : '';
  const tgHref   = tgHandle ? `https://t.me/${tgHandle}` : '#contacts';

  const cards = [
    {
      icon: <IconTelegram size={40} />,
      label: 'Telegram',
      sub: tgHandle ? `@${tgHandle}` : 'написать',
      href: tgHref,
      external: !!tgHandle,
    },
    {
      icon: <IconWhatsApp size={40} />,
      label: 'WhatsApp',
      sub: '8-917-796-92-22',
      href: 'https://wa.me/79177969222',
      external: true,
    },
    {
      icon: <IconMAX size={40} />,
      label: 'MAX',
      sub: '8-993-046-29-22',
      href: 'tel:+79930462922',
      external: false,
    },
  ];

  return (
    <section id="contacts" className="py-20 sm:py-28" style={{ background: 'var(--bg)' }}>
      <Container>
        <div className="max-w-xl">
          <SectionLabel n="10">Написать нам</SectionLabel>
          <h2
            className="font-semibold tracking-[-0.015em] text-[30px] sm:text-[40px]
                       leading-[1.1] max-w-[26ch] mb-4"
            style={{ color: 'var(--ink)' }}
          >
            Напишите — ответим в течение часа.
          </h2>
          <p className="text-[17px] mb-10 leading-[1.55]" style={{ color: 'var(--ink-2)' }}>
            Расскажите о вашем бизнесе и потоке заявок. Подберём сценарий
            и подключим бота в тестовый период бесплатно.
          </p>

          <div className="flex flex-col sm:grid sm:grid-cols-3 gap-3 sm:gap-4 max-w-full sm:max-w-[420px]">
            {cards.map((c, i) => (
              <a
                key={i}
                href={c.href}
                target={c.external ? '_blank' : undefined}
                rel={c.external ? 'noopener noreferrer' : undefined}
                className="rounded-2xl p-4 sm:p-5 flex sm:flex-col items-center gap-4 sm:gap-3
                           text-left sm:text-center
                           transition-[opacity,transform] duration-200
                           hover:opacity-80 active:scale-[0.97]"
                style={{ border: '1px solid var(--line)', background: 'var(--surface)' }}
              >
                {c.icon}
                <div>
                  <div className="font-semibold text-[15px]" style={{ color: 'var(--ink)' }}>
                    {c.label}
                  </div>
                  <div className="text-[12px] sm:text-[11px] mt-0.5 leading-[1.4]" style={{ color: 'var(--ink-3)' }}>
                    {c.sub}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ── Footer ────────────────────────────────────────────────
function Footer({ config }) {
  return (
    <footer
      className="py-10"
      style={{ background: 'var(--bg)', borderTop: '1px solid var(--line-2)' }}
    >
      <Container
        className="flex flex-col sm:flex-row items-center justify-between gap-3 text-[14px]"
      >
        <div className="flex items-center gap-2.5" style={{ color: 'var(--ink)' }}>
          <TochkaLogo size={26} />
          <span className="font-medium">© 2026 Точка Бота</span>
        </div>

        <span className="text-[13px]" style={{ color: 'var(--ink-3)' }}>
          Все способы связи — в разделе выше
        </span>
      </Container>
    </footer>
  );
}
