/* ─── Helpers ─────────────────────────────────────────────────────────────── */

const EditorSlot = ({
  path,
  type,
  required = false,
  hideable = false,
  as: As = "div",
  className = "",
  children,
  ...rest
}) => (
  <As
    className={className}
    data-editor-path={path}
    data-editor-type={type}
    data-editor-required={required ? "true" : "false"}
    data-editor-hideable={hideable ? "true" : "false"}
    {...rest}
  >
    {children}
  </As>
);

const Static = ({ as: As = "div", className = "", children, ...rest }) => (
  <As className={className} data-editor-static="true" {...rest}>
    {children}
  </As>
);

const Placeholder = ({ label, kind = "mockup", className = "" }) => (
  <div
    className={`placeholder ${className}`}
    data-placeholder-kind={kind}
    role="img"
    aria-label={label}
  >
    <span className="placeholder__label">{label}</span>
  </div>
);

const IMAGE_ASSETS = {
  hero: {
    url: "https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxzYWxlcyUyMGRhc2hib2FyZCUyMGxhcHRvcHxlbnwwfDB8fHwxNzc5MzA3MzQ0fDA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    thumbUrl: "https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxzYWxlcyUyMGRhc2hib2FyZCUyMGxhcHRvcHxlbnwwfDB8fHwxNzc5MzA3MzQ0fDA&ixlib=rb-4.1.0&w=400&auto=format&fit=crop&q=70",
    alt: "turned on black and grey laptop computer",
    source: "unsplash",
    photographer: "Lukas Blazek",
    photographerUrl: "https://unsplash.com/@goumbik",
    queryUsed: "sales dashboard laptop",
    width: 6144,
    height: 4069,
  },
  featureInbox: {
    url: "https://images.unsplash.com/photo-1576267423429-569309b31e84?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHx0ZWFtJTIwc2FsZXMlMjBsYXB0b3B8ZW58MHwwfHx8MTc3OTMwNzM0NXww&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    thumbUrl: "https://images.unsplash.com/photo-1576267423429-569309b31e84?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHx0ZWFtJTIwc2FsZXMlMjBsYXB0b3B8ZW58MHwwfHx8MTc3OTMwNzM0NXww&ixlib=rb-4.1.0&w=400&auto=format&fit=crop&q=70",
    alt: "woman in maroon sweater using laptop",
    source: "unsplash",
    photographer: "Windows",
    photographerUrl: "https://unsplash.com/@windows",
    queryUsed: "team sales laptop",
    width: 7952,
    height: 5304,
  },
  featureFollowup: {
    url: "https://images.unsplash.com/photo-1542744094-24638eff58bb?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHx3b3JrZmxvdyUyMGF1dG9tYXRpb258ZW58MHwwfHx8MTc3OTMwNzM0Nnww&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    thumbUrl: "https://images.unsplash.com/photo-1542744094-24638eff58bb?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHx3b3JrZmxvdyUyMGF1dG9tYXRpb258ZW58MHwwfHx8MTc3OTMwNzM0Nnww&ixlib=rb-4.1.0&w=400&auto=format&fit=crop&q=70",
    alt: "man writing on white board",
    source: "unsplash",
    photographer: "Campaign Creators",
    photographerUrl: "https://unsplash.com/@campaign_creators",
    queryUsed: "workflow automation",
    width: 4353,
    height: 2901,
  },
  featurePipeline: {
    url: "https://images.unsplash.com/photo-1608222351212-18fe0ec7b13b?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGFuYWx5dGljcyUyMGRhc2hib2FyZHxlbnwwfDB8fHwxNzc5MzA3MzQ2fDA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    thumbUrl: "https://images.unsplash.com/photo-1608222351212-18fe0ec7b13b?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGFuYWx5dGljcyUyMGRhc2hib2FyZHxlbnwwfDB8fHgxNzc5MzA3MzQ2fDA&ixlib=rb-4.1.0&w=400&auto=format&fit=crop&q=70",
    alt: "black and silver laptop computer",
    source: "unsplash",
    photographer: "path digital",
    photographerUrl: "https://unsplash.com/@pathdigital",
    queryUsed: "business analytics dashboard",
    width: 3370,
    height: 2527,
  },
  featureOnboarding: {
    url: "https://images.unsplash.com/photo-1758520144427-ddb02ac74e9d?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxvZmZpY2UlMjBvbmJvYXJkaW5nfGVufDB8MHx8fDE3NzkzMDczNDd8MA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    thumbUrl: "https://images.unsplash.com/photo-1758520144427-ddb02ac74e9d?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxvZmZpY2UlMjBvbmJvYXJkaW5nfGVufDB8MHx8fDE3NzkzMDczNDd8MA&ixlib=rb-4.1.0&w=400&auto=format&fit=crop&q=70",
    alt: "Two women shaking hands across a desk",
    source: "unsplash",
    photographer: "Vitaly Gariev",
    photographerUrl: "https://unsplash.com/@silverkblack",
    queryUsed: "office onboarding",
    width: 3840,
    height: 2160,
  },
  avatar1: {
    url: "https://images.unsplash.com/photo-1735424080701-d00f5fda5aa6?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjB3b21hbiUyMHBvcnRyYWl0fGVufDB8Mnx8fDE3NzkzMDczNDd8MA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    alt: "A woman leaning on a railing looking at her cell phone",
    source: "unsplash",
    photographer: "Alex Sheldon",
    photographerUrl: "https://unsplash.com/@slavewire",
    queryUsed: "professional woman portrait",
  },
  avatar2: {
    url: "https://images.unsplash.com/photo-1620837759552-c4347eaa30e8?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBtYW4lMjBwb3J0cmFpdHxlbnwwfDJ8fHwxNzc5MzA3MzQ3fDA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    alt: "woman in purple jacket and brown pants standing on rocky road during daytime",
    source: "unsplash",
    photographer: "Bogdan Costin",
    photographerUrl: "https://unsplash.com/@bcdphotos",
    queryUsed: "professional man portrait",
  },
  avatar3: {
    url: "https://images.unsplash.com/photo-1676281161960-c6d1d369b755?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHdvbWFuJTIwcG9ydHJhaXR8ZW58MHwyfHx8MTc3OTMwNzM0OHww&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    alt: "a woman standing on the side of a road at night",
    source: "unsplash",
    photographer: "Senya Mitin",
    photographerUrl: "https://unsplash.com/@mediahope",
    queryUsed: "business woman portrait",
  },
  avatar4: {
    url: "https://images.unsplash.com/photo-1718209881007-c0ecdfc00f9d?ixid=M3w5NTY3MjB8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMG1hbiUyMHBvcnRyYWl0fGVufDB8Mnx8fDE3NzkzMDczNDh8MA&ixlib=rb-4.1.0&w=1600&auto=format&fit=crop&q=80",
    alt: "a man in a suit standing with his arms crossed",
    source: "unsplash",
    photographer: "Filip Rankovic Grobgaard",
    photographerUrl: "https://unsplash.com/@filipgrobgaard",
    queryUsed: "business man portrait",
  },
};

const StockImage = ({ image, alt, className = "", loading = "lazy" }) => (
  <img
    className={`stock-image ${className}`}
    src={image.url}
    alt={alt || image.alt}
    loading={loading}
    decoding="async"
    data-image-source={image.source || "unsplash"}
    data-image-query={image.queryUsed || ""}
  />
);

/* ─── Inline SVG Icons (Lucide-style, 24×24) ─────────────────────────────── */

const IconInbox = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
  </svg>
);

const IconZap = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
  </svg>
);

const IconEye = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
    <circle cx="12" cy="12" r="3" />
  </svg>
);

const IconRocket = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
    <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
  </svg>
);

const IconCheck = () => (
  <svg className="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

const IconQuote = () => (
  <svg className="icon" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" />
    <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
  </svg>
);

const IconChevronDown = () => (
  <svg className="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <polyline points="6 9 12 15 18 9" />
  </svg>
);

const IconShield = () => (
  <svg className="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
  </svg>
);

const IconClock = () => (
  <svg className="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="10" />
    <polyline points="12 6 12 12 16 14" />
  </svg>
);

const IconServer = () => (
  <svg className="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
    <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
    <line x1="6" y1="6" x2="6.01" y2="6" />
    <line x1="6" y1="18" x2="6.01" y2="18" />
  </svg>
);

const IconUsers = () => (
  <svg className="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
);

/* ─── Nav (chrome, not in LP_SCHEMA) ────────────────────────────────────── */

function Nav({ showNav }) {
  if (!showNav) return null;
  return (
    <header className="site-nav" role="banner" data-editor-static="true" data-editor-chrome="nav">
      <div className="container site-nav__inner">
        <a href="#hero" className="site-nav__brand cursor-pointer" aria-label="Главная">
          <span className="site-nav__logo-mark" aria-hidden="true" />
          <Static as="span" className="site-nav__brand-name">CRMAuto</Static>
        </a>
        <nav className="site-nav__links" aria-label="Основная навигация">
          <Static as="a" href="#features" className="site-nav__link cursor-pointer">Возможности</Static>
          <Static as="a" href="#process" className="site-nav__link cursor-pointer">Как работает</Static>
          <Static as="a" href="#faq" className="site-nav__link cursor-pointer">FAQ</Static>
        </nav>
        <Static as="a" href="#lead_form" className="btn btn--nav cursor-pointer">Записаться на демо</Static>
      </div>
    </header>
  );
}

/* ─── Footer (chrome, not in LP_SCHEMA) ─────────────────────────────────── */

function Footer() {
  return (
    <footer className="site-footer" role="contentinfo" data-editor-static="true" data-editor-chrome="footer">
      <div className="container site-footer__inner">
        <Static as="p" className="site-footer__copy">© 2025 CRMAuto · Автоматизация отделов продаж</Static>
        <nav className="site-footer__links" aria-label="Нижняя навигация">
          <Static as="a" href="#lead_form" className="cursor-pointer">Демо</Static>
          <Static as="a" href="#faq" className="cursor-pointer">FAQ</Static>
          <Static as="a" href="#" className="cursor-pointer">Политика конфиденциальности</Static>
        </nav>
      </div>
    </footer>
  );
}

/* ─── 01 Hero ─────────────────────────────────────────────────────────────── */

function HeroSection() {
  const badges = [
    { icon: <IconServer />, label: "Данные в России" },
    { icon: <IconShield />, label: "152-ФЗ" },
    { icon: <IconClock />, label: "Ответ за 2 часа" },
    { icon: <IconUsers />, label: "Онбординг 3 дня" },
  ];

  return (
    <section
      id="hero"
      data-editor-section-id="hero"
      data-editor-section-type="hero"
      data-editor-variant="hero_split_with_media"
      data-editor-label="Hero"
      data-section="hero"
      data-variant="hero_split_with_media"
      data-screen-label="01 Hero"
      className="section section--hero"
    >
      <div className="container hero-grid">
        <div className="hero-grid__copy">
          <EditorSlot path="hero.eyebrow" type="text" hideable as="p" className="eyebrow hero-eyebrow">
            Для команд продаж от 3 человек
          </EditorSlot>
          <EditorSlot path="hero.headline" type="headline" required as="h1" className="h1 hero-headline">
            Заявки теряются. Follow-up не происходит. Исправим за 3 дня.
          </EditorSlot>
          <EditorSlot path="hero.subheadline" type="multiline_text" required as="p" className="lead hero-lead">
            Ни одна заявка не потеряется. Каждый лид получит follow-up в нужный момент — автоматически. Покажем, как это работает в вашем отделе продаж, за 30 минут в Zoom.
          </EditorSlot>
          <div className="hero-actions">
            <EditorSlot path="hero.primary_cta" type="button_text" required as="a" href="#lead_form" className="btn btn--cta cursor-pointer">
              Записаться на демо
            </EditorSlot>
            <EditorSlot path="hero.secondary_cta" type="button_text" hideable as="a" href="#features" className="btn btn--ghost cursor-pointer">
              Посмотреть, как это работает
            </EditorSlot>
          </div>
          <EditorSlot path="hero.microcopy_under_cta" type="text" hideable as="p" className="microcopy hero-microcopy">
            30 минут. Без презентаций — только ваш процесс продаж.
          </EditorSlot>
          <div className="hero-badges">
            {badges.map((b, i) => (
              <span key={i} className="badge">
                <span className="badge__icon" aria-hidden="true">{b.icon}</span>
                <EditorSlot path={`hero.trust_badges.items[${i}].label`} type="text" hideable as="span">
                  {b.label}
                </EditorSlot>
              </span>
            ))}
          </div>
        </div>
        <div className="hero-grid__media">
          <StockImage
            image={IMAGE_ASSETS.hero}
            alt="Дашборд CRM с аналитикой продаж на ноутбуке"
            className="stock-image--hero"
            loading="eager"
          />
          <div className="hero-media-badge" aria-hidden="true">
            <span className="hero-media-badge__dot" />
            <EditorSlot path="hero.media_badge" type="text" hideable as="span">
              Follow-up автоматически
            </EditorSlot>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 02 Trust Logos ─────────────────────────────────────────────────────── */

function TrustLogosSection() {
  const logos = [1, 2, 3, 4, 5, 6];
  return (
    <section
      id="trust-logos"
      data-editor-section-id="trust_logos"
      data-editor-section-type="trust"
      data-editor-variant="trust_logo_strip"
      data-editor-label="Trust — Logos"
      data-section="trust"
      data-variant="trust_logo_strip"
      data-screen-label="02 Trust Logos"
      className="section section--trust-logos"
    >
      <div className="container">
        <EditorSlot path="trust_logos.section_label" type="text" hideable as="p" className="trust-logos__label">
          Нам доверяют команды продаж
        </EditorSlot>
        <div className="logo-strip">
          {logos.map((n) => (
            <div key={n} className="logo-strip__item">
              <Placeholder
                label={`Логотип компании ${n}`}
                kind="logo"
                className="placeholder--logo"
              />
            </div>
          ))}
        </div>
        <EditorSlot path="trust_logos.subtext" type="text" hideable as="p" className="trust-logos__subtext">
          {"{{N}}+ компаний автоматизируют обработку заявок и follow-up"}
        </EditorSlot>
      </div>
    </section>
  );
}

/* ─── 03 Problem ──────────────────────────────────────────────────────────── */

function ProblemSection() {
  const problems = [
    {
      icon: <IconZap />,
      quote: "«Менеджер не перезвонил лиду. Тот написал конкуренту. Узнал об этом через неделю случайно.»",
    },
    {
      icon: <IconInbox />,
      quote: "«Заявки приходят в WhatsApp, на почту и через сайт. Нигде нет единой картины — кто уже в работе, кто забыт.»",
    },
    {
      icon: <IconZap />,
      quote: "«Follow-up делается, только если менеджер не забыл. Чаще — забывает. Клиент остывает.»",
    },
    {
      icon: <IconEye />,
      quote: "«Чтобы понять, где сейчас воронка — нужно или звонить менеджеру, или лезть в таблицу. Ни то ни другое не даёт актуальной картины.»",
    },
  ];

  return (
    <section
      id="problem"
      data-editor-section-id="problem"
      data-editor-section-type="problem"
      data-editor-variant="problem_cards"
      data-editor-label="Problem"
      data-section="problem"
      data-variant="problem_cards"
      data-screen-label="03 Problem"
      className="section section--white"
    >
      <div className="container">
        <div className="section-header">
          <EditorSlot path="problem.section_header" type="headline" required as="h2" className="h2 text-center">
            Узнаёте себя?
          </EditorSlot>
        </div>
        <div className="problem-grid">
          {problems.map((p, i) => (
            <article key={i} className="problem-card">
              <div className="problem-card__icon" aria-hidden="true">{p.icon}</div>
              <EditorSlot path={`problem.items[${i}].quote`} type="multiline_text" required as="blockquote" className="problem-card__quote">
                {p.quote}
              </EditorSlot>
            </article>
          ))}
        </div>
        <div className="problem-closer">
          <EditorSlot path="problem.closer" type="multiline_text" hideable as="p" className="problem-closer__text">
            Если хотя бы один сценарий знаком — покажем, как это исправить. 30 минут в Zoom.
          </EditorSlot>
          <EditorSlot path="problem.closer_cta" type="button_text" hideable as="a" href="#lead_form" className="btn btn--cta cursor-pointer">
            Записаться на демо
          </EditorSlot>
        </div>
      </div>
    </section>
  );
}

/* ─── 04 Features ────────────────────────────────────────────────────────── */

function FeaturesSection() {
  const features = [
    {
      icon: <IconInbox />,
      headline: "Все заявки — в одном месте",
      body: "Из WhatsApp, Telegram, сайта и почты. Ни одна не пропадёт между каналами. Менеджер видит всё с одного экрана.",
      media: "Скриншот: единый inbox со сделками из разных каналов",
      image: IMAGE_ASSETS.featureInbox,
    },
    {
      icon: <IconZap />,
      headline: "Follow-up происходит без участия менеджера",
      body: "Клиент получает касание в нужный момент — система отправляет напоминание или сообщение автоматически, даже если менеджер отвлёкся.",
      media: "Скриншот: автоматический follow-up timeline",
      image: IMAGE_ASSETS.featureFollowup,
    },
    {
      icon: <IconEye />,
      headline: "Воронка в реальном времени",
      body: "Вы видите, на каком этапе каждая сделка — без звонков менеджерам и выгрузок в Excel.",
      media: "Скриншот: воронка продаж с метриками по этапам",
      image: IMAGE_ASSETS.featurePipeline,
    },
    {
      icon: <IconRocket />,
      headline: "Первый процесс — через 3 дня",
      body: "Настраиваем под ваш отдел продаж, помогаем с онбордингом команды. Не нужен выделенный IT-специалист.",
      media: "Скриншот: онбординг и настройка сценариев",
      image: IMAGE_ASSETS.featureOnboarding,
    },
  ];

  return (
    <section
      id="features"
      data-editor-section-id="features"
      data-editor-section-type="features"
      data-editor-variant="features_alternating"
      data-editor-label="Features"
      data-section="features"
      data-variant="features_alternating"
      data-screen-label="04 Features"
      className="section section--gray"
    >
      <div className="container">
        <div className="section-header">
          <EditorSlot path="features.eyebrow" type="text" hideable as="p" className="eyebrow text-center">
            Ключевые возможности
          </EditorSlot>
          <EditorSlot path="features.section_header" type="headline" required as="h2" className="h2 text-center">
            Что конкретно меняется
          </EditorSlot>
        </div>
        <div className="features-stack">
          {features.map((f, i) => (
            <article key={i} className={`feature-row ${i % 2 === 1 ? "feature-row--reverse" : ""}`}>
              <div className="feature-row__copy">
                <div className="feature-row__icon" aria-hidden="true">{f.icon}</div>
                <EditorSlot path={`features.items[${i}].headline`} type="headline" required as="h3" className="h3 feature-row__headline">
                  {f.headline}
                </EditorSlot>
                <EditorSlot path={`features.items[${i}].body`} type="multiline_text" required as="p" className="feature-row__body">
                  {f.body}
                </EditorSlot>
              </div>
              <div className="feature-row__media">
                <StockImage image={f.image} alt={f.media} className="stock-image--feature" />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 05 Process ─────────────────────────────────────────────────────────── */

function ProcessSection() {
  const steps = [
    {
      label: "Шаг 1",
      title: "Оставляете заявку",
      body: "Заполняете форму. Наш менеджер звонит в течение 2 рабочих часов — уточняет задачу и договаривается о времени демо.",
      time: "2 часа",
    },
    {
      label: "Шаг 2",
      title: "Настраиваем первый сценарий",
      body: "Вместе определяем ключевой процесс: как приходят заявки, как должен работать follow-up. Настраиваем, тестируем, запускаем.",
      time: "3 дня",
    },
    {
      label: "Шаг 3",
      title: "Команда работает в системе",
      body: "Менеджеры ведут сделки. Follow-up происходит автоматически. Вы видите воронку в реальном времени.",
      time: "с 1-го дня",
    },
    {
      label: "Шаг 4",
      title: "Мы рядом при запуске",
      body: "Отвечаем на вопросы, помогаем доработать сценарии, адаптируем систему под изменения в процессе продаж.",
      time: "постоянно",
    },
  ];

  return (
    <section
      id="process"
      data-editor-section-id="process"
      data-editor-section-type="process"
      data-editor-variant="process_vertical_stepper"
      data-editor-label="Process"
      data-section="process"
      data-variant="process_vertical_stepper"
      data-screen-label="05 Process"
      className="section section--white"
    >
      <div className="container container--narrow">
        <div className="section-header">
          <EditorSlot path="process.eyebrow" type="text" hideable as="p" className="eyebrow text-center">
            Как это работает
          </EditorSlot>
          <EditorSlot path="process.section_header" type="headline" required as="h2" className="h2 text-center">
            Как это работает
          </EditorSlot>
        </div>
        <ol className="process-stepper" aria-label="Шаги процесса">
          {steps.map((step, i) => (
            <li key={i} className="process-step">
              <div className="process-step__connector" aria-hidden="true">
                <span className="process-step__num">{i + 1}</span>
                {i < steps.length - 1 && <span className="process-step__line" />}
              </div>
              <div className="process-step__body">
                <div className="process-step__meta">
                  <EditorSlot path={`process.steps[${i}].label`} type="text" required as="span" className="process-step__label">{step.label}</EditorSlot>
                  <EditorSlot path={`process.steps[${i}].time`} type="text" hideable as="span" className="process-step__time">{step.time}</EditorSlot>
                </div>
                <EditorSlot path={`process.steps[${i}].title`} type="text" required as="h3" className="process-step__title">{step.title}</EditorSlot>
                <EditorSlot path={`process.steps[${i}].body`} type="multiline_text" required as="p" className="process-step__desc">{step.body}</EditorSlot>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* ─── 06 Case Studies ────────────────────────────────────────────────────── */

function CaseStudiesSection() {
  const cases = [
    {
      niche_tag: "Маркетинговое агентство · 6 менеджеров",
      problem:
        "Заявки приходили из трёх каналов — сайт, WhatsApp и почта. Часть терялась до первого контакта. Follow-up делался вручную: помнил — позвонил, не помнил — лид остывал.",
      solution:
        "Собрали все каналы в единый inbox. Настроили автоматические follow-up-сценарии: касание через 1 день и через 3 дня после первого контакта.",
      results: [
        "Конверсия из заявки в сделку выросла с {{X}}% до {{Y}}% за 6 недель",
        "Руководитель перестал вручную контролировать, кто кому позвонил",
        "Первый сценарий запустили за 3 рабочих дня",
      ],
      quote:
        "«Раньше я каждый понедельник разбирал с менеджерами, почему клиент не получил ответ. Теперь система это делает сама.»",
      speaker: "{{имя_спикера_1}}, {{должность_1}}, {{компания_1}}",
    },
    {
      niche_tag: "IT-интегратор · 4 менеджера",
      problem:
        "После ухода ключевого менеджера база клиентов осталась в его таблицах. Восстанавливали две недели. Входящие заявки обрабатывались в среднем {{Z}} часов — слишком долго для горячего лида.",
      solution:
        "Мигрировали базу, настроили воронку под цикл сделки 3–4 недели, добавили автоматические напоминания менеджеру на каждом переходе между этапами.",
      results: [
        "Время обработки входящей заявки сократилось с {{Z}} часов до 35 минут",
        "База клиентов теперь в системе — уход менеджера не несёт риска для данных",
        "Онбординг нового менеджера — 1 день вместо недели",
      ],
      quote:
        "«Система сразу показала, где у нас узкое место. Мы фиксировали только входящие — и упускали всех, кто не купил с первого касания.»",
      speaker: "{{имя_спикера_2}}, {{должность_2}}, {{компания_2}}",
    },
  ];

  return (
    <section
      id="case_studies"
      data-editor-section-id="case_studies"
      data-editor-section-type="case_studies"
      data-editor-variant="case_study_full_width"
      data-editor-label="Case Studies"
      data-section="case_studies"
      data-variant="case_study_full_width"
      data-screen-label="06 Case Studies"
      className="section section--dark"
      data-section-theme="dark"
    >
      <div className="container">
        <div className="section-header section-header--dark">
          <EditorSlot path="case_studies.section_header" type="headline" required as="h2" className="h2 text-center text-white">
            Как это работает на практике
          </EditorSlot>
        </div>
        <div className="case-studies-list">
          {cases.map((c, i) => (
            <article key={i} className="case-card">
              <div className="case-card__inner">
                <div className="case-card__left">
                  <EditorSlot path={`case_studies.items[${i}].niche_tag`} type="text" required as="span" className="case-card__tag">{c.niche_tag}</EditorSlot>
                  <div className="case-card__section">
                    <Static as="p" className="case-card__section-label">Ситуация</Static>
                    <EditorSlot path={`case_studies.items[${i}].problem`} type="multiline_text" required as="p" className="case-card__text">{c.problem}</EditorSlot>
                  </div>
                  <div className="case-card__section">
                    <Static as="p" className="case-card__section-label">Что сделали</Static>
                    <EditorSlot path={`case_studies.items[${i}].solution`} type="multiline_text" required as="p" className="case-card__text">{c.solution}</EditorSlot>
                  </div>
                </div>
                <div className="case-card__right">
                  <div className="case-card__results">
                    <Static as="p" className="case-card__section-label">Результаты</Static>
                    <ul className="case-card__results-list">
                      {c.results.map((r, ri) => (
                        <li key={ri} className="case-card__result-item">
                          <span className="case-card__check" aria-hidden="true"><IconCheck /></span>
                          <EditorSlot path={`case_studies.items[${i}].results[${ri}]`} type="text" required as="span">{r}</EditorSlot>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="case-card__quote-block">
                    <span className="case-card__quote-icon" aria-hidden="true"><IconQuote /></span>
                    <EditorSlot path={`case_studies.items[${i}].quote`} type="multiline_text" required as="blockquote" className="case-card__quote">{c.quote}</EditorSlot>
                    <EditorSlot path={`case_studies.items[${i}].speaker`} type="text" required as="cite" className="case-card__speaker">{c.speaker}</EditorSlot>
                  </div>
                  <EditorSlot path={`case_studies.items[${i}].cta`} type="button_text" hideable as="a" href="#lead_form" className="btn btn--cta-inverted cursor-pointer">
                    Записаться на демо
                  </EditorSlot>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 07 Trust Testimonials ──────────────────────────────────────────────── */

function TrustTestimonialsSection() {
  const testimonials = [
    {
      quote: "«Раньше я лично проверял, кто кому позвонил. Теперь вижу воронку за 20 секунд. Менеджеры сами ведут клиентов — система подсказывает следующий шаг.»",
      name: "{{имя_1}}",
      title: "{{должность_1}}",
      company: "{{компания_1}}",
      initials: "И",
      image: IMAGE_ASSETS.avatar1,
    },
    {
      quote: "«Запустили первый сценарий за 3 дня, как и говорили. Через месяц добавили ещё два. Лиды теперь не теряются между каналами — всё в одном месте.»",
      name: "{{имя_2}}",
      title: "{{должность_2}}",
      company: "{{компания_2}}",
      initials: "А",
      image: IMAGE_ASSETS.avatar2,
    },
    {
      quote: "«Боялся, что менеджеры откажутся работать в новой системе. Оказалось — им самим удобнее. Не нужно помнить, кому звонить сегодня. Система сама напоминает.»",
      name: "{{имя_3}}",
      title: "{{должность_3}}",
      company: "{{компания_3}}",
      initials: "С",
      image: IMAGE_ASSETS.avatar3,
    },
    {
      quote: "«Перешли после того, как Битрикс стал слишком тяжёлым для нашей команды. Здесь — только то, что нужно отделу продаж. Внедрили за неделю, без внешних подрядчиков.»",
      name: "{{имя_4}}",
      title: "{{должность_4}}",
      company: "{{компания_4}}",
      initials: "М",
      image: IMAGE_ASSETS.avatar4,
    },
  ];

  return (
    <section
      id="trust-testimonials"
      data-editor-section-id="trust_testimonials"
      data-editor-section-type="trust"
      data-editor-variant="trust_testimonials"
      data-editor-label="Trust — Testimonials"
      data-section="trust"
      data-variant="trust_testimonials"
      data-screen-label="07 Trust Testimonials"
      className="section section--gray"
    >
      <div className="container">
        <div className="section-header">
          <EditorSlot path="trust_testimonials.eyebrow" type="text" hideable as="p" className="eyebrow text-center">
            Команды о системе
          </EditorSlot>
          <EditorSlot path="trust_testimonials.section_header" type="headline" required as="h2" className="h2 text-center">
            Что говорят команды, которые уже работают в системе
          </EditorSlot>
        </div>
        <div className="testimonials-grid">
          {testimonials.map((t, i) => (
            <article key={i} className="testimonial-card">
              <span className="testimonial-card__quote-icon" aria-hidden="true"><IconQuote /></span>
              <EditorSlot path={`trust_testimonials.items[${i}].quote`} type="multiline_text" required as="blockquote" className="testimonial-card__quote">
                {t.quote}
              </EditorSlot>
              <footer className="testimonial-card__footer">
                <div className="testimonial-card__avatar" aria-hidden="true">
                  <StockImage image={t.image} alt="" className="stock-image--avatar" />
                </div>
                <div className="testimonial-card__meta">
                  <EditorSlot path={`trust_testimonials.items[${i}].name`} type="text" required as="span" className="testimonial-card__name">{t.name}</EditorSlot>
                  <span className="testimonial-card__role">
                    <EditorSlot path={`trust_testimonials.items[${i}].title`} type="text" required as="span">{t.title}</EditorSlot>
                    {", "}
                    <EditorSlot path={`trust_testimonials.items[${i}].company`} type="text" required as="span">{t.company}</EditorSlot>
                  </span>
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 08 FAQ ─────────────────────────────────────────────────────────────── */

function FaqSection() {
  const [openIdx, setOpenIdx] = React.useState(0);

  const items = [
    {
      q: "Сколько это стоит?",
      a: "Стоимость зависит от размера команды и нужных интеграций. Обсудим на демо — рассчитаем за 5 минут. Вы получите конкретные цифры и можете взять время на решение. Никакого давления.",
    },
    {
      q: "Наши данные в безопасности?",
      a: "Данные хранятся на серверах в России. Продукт соответствует требованиям 152-ФЗ о персональных данных. Передача данных — по зашифрованному соединению (TLS). Доступ к данным клиента — только у авторизованных пользователей вашей команды.",
    },
    {
      q: "Как долго занимает внедрение?",
      a: "Первый сценарий настраиваем за 3 рабочих дня. Команда начинает работать с системой сразу после онбординга. Мы сопровождаем запуск — вам не нужен выделенный IT-специалист.",
    },
    {
      q: "С чем работает интеграция?",
      a: "WhatsApp, Telegram, email, телефония (Манго Телеком, Билайн Бизнес, UIS), 1С. Если у вас нестандартный стек — обсудим на демо, скажем честно, что возможно.",
    },
    {
      q: "Чем вы отличаетесь от Битрикс24 или amoCRM?",
      a: "Крупные системы подходят для больших команд, готовых тратить время на настройку и обучение. Мы — для отделов продаж от 3 человек, которым нужно начать работать быстро, без лишних модулей. Это не замена — другой подход к задаче.",
    },
    {
      q: "Что если после демо нам не подойдёт?",
      a: "Ничего не произойдёт. Демо — без обязательств. Вы решаете сами. Никаких звонков с давлением.",
    },
    {
      q: "Есть ли поддержка после запуска?",
      a: "Да. Поддержка включена в подписку. Отвечаем в рабочие часы. Помогаем доработать сценарии под изменения в вашем процессе продаж.",
    },
  ];

  const toggle = (i) => setOpenIdx((prev) => (prev === i ? null : i));

  return (
    <section
      id="faq"
      data-editor-section-id="faq"
      data-editor-section-type="faq"
      data-editor-variant="faq_accordion"
      data-editor-label="FAQ"
      data-section="faq"
      data-variant="faq_accordion"
      data-screen-label="08 FAQ"
      className="section section--white"
    >
      <div className="container container--narrow">
        <div className="section-header">
          <EditorSlot path="faq.section_header" type="headline" required as="h2" className="h2 text-center">
            Частые вопросы
          </EditorSlot>
        </div>
        <div className="faq-list" role="list">
          {items.map((item, i) => {
            const isOpen = openIdx === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? "faq-item--open" : ""}`} role="listitem">
                <button
                  type="button"
                  className="faq-item__trigger cursor-pointer"
                  aria-expanded={isOpen}
                  aria-controls={`faq-answer-${i}`}
                  onClick={() => toggle(i)}
                >
                  <EditorSlot path={`faq.items[${i}].question`} type="text" required as="span" className="faq-item__question">
                    {item.q}
                  </EditorSlot>
                  <span className={`faq-item__chevron ${isOpen ? "faq-item__chevron--open" : ""}`} aria-hidden="true">
                    <IconChevronDown />
                  </span>
                </button>
                <div id={`faq-answer-${i}`} className="faq-item__answer" aria-hidden={!isOpen} role="region">
                  <EditorSlot path={`faq.items[${i}].answer`} type="multiline_text" required as="p">
                    {item.a}
                  </EditorSlot>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── 09 CTA ─────────────────────────────────────────────────────────────── */

function CtaSection() {
  return (
    <section
      id="cta"
      data-editor-section-id="cta"
      data-editor-section-type="cta"
      data-editor-variant="cta_dark_centered"
      data-editor-label="CTA"
      data-section="cta"
      data-variant="cta_dark_centered"
      data-screen-label="09 CTA"
      className="section section--cta-dark"
      data-section-theme="dark"
    >
      <div className="container">
        <div className="cta-block">
          <EditorSlot path="cta.eyebrow" type="text" hideable as="p" className="eyebrow cta-block__eyebrow">
            Следующий шаг — 30 минут
          </EditorSlot>
          <EditorSlot path="cta.headline" type="headline" required as="h2" className="h2 cta-block__headline text-white">
            Покажем, как это работает в вашем отделе продаж
          </EditorSlot>
          <EditorSlot path="cta.subheadline" type="multiline_text" hideable as="p" className="cta-block__sub">
            30 минут в Zoom. Без обязательств. Покажем систему на примере вашего процесса продаж — и вы сами решите, подходит ли это вам.
          </EditorSlot>
          <EditorSlot path="cta.primary_cta" type="button_text" required as="a" href="#lead_form" className="btn btn--cta-inverted cursor-pointer">
            Записаться на демо
          </EditorSlot>
          <EditorSlot path="cta.microcopy" type="text" hideable as="p" className="microcopy cta-block__microcopy">
            Позвоним в течение 2 рабочих часов
          </EditorSlot>
        </div>
      </div>
    </section>
  );
}

/* ─── 10 Lead Form ───────────────────────────────────────────────────────── */

function LeadFormSection() {
  const [state, setState] = React.useState("idle");
  const [values, setValues] = React.useState({ name: "", phone: "", company: "" });
  const [errors, setErrors] = React.useState({});

  const validate = () => {
    const e = {};
    if (!values.name.trim()) e.name = "Укажите ваше имя";
    if (!values.phone.trim()) e.phone = "Введите номер в формате +7 900 000-00-00";
    return e;
  };

  const handleChange = (field) => (ev) => {
    setValues((v) => ({ ...v, [field]: ev.target.value }));
    if (errors[field]) setErrors((e) => ({ ...e, [field]: "" }));
  };

  const handleSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    setState("loading");
    setTimeout(() => setState("success"), 1500);
  };

  return (
    <section
      id="lead_form"
      data-editor-section-id="lead_form"
      data-editor-section-type="lead_form"
      data-editor-variant="lead_form_card"
      data-editor-label="Lead Form"
      data-section="lead_form"
      data-variant="lead_form_card"
      data-screen-label="10 Lead Form"
      className="section section--gray"
    >
      <div className="container">
        <div className="lead-form-wrap">
          {state === "success" ? (
            <div className="lead-form-success" role="status" aria-live="polite">
              <span className="lead-form-success__icon" aria-hidden="true">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <polyline points="20 6 9 17 4 12" />
                </svg>
              </span>
              <EditorSlot path="lead_form.post_submit_heading" type="text" required as="h3" className="lead-form-success__heading">
                Готово!
              </EditorSlot>
              <EditorSlot path="lead_form.post_submit_body" type="multiline_text" required as="p" className="lead-form-success__body">
                Наш менеджер позвонит вам в течение 2 рабочих часов, чтобы согласовать время демо. Демо — 30 минут в Zoom. Покажем продукт на примере вашего процесса продаж.
              </EditorSlot>
            </div>
          ) : (
            <form className="lead-form" onSubmit={handleSubmit} noValidate aria-label="Форма записи на демо">
              <EditorSlot path="lead_form.form_title" type="headline" required as="h2" className="h2 lead-form__title">
                Записаться на демо
              </EditorSlot>
              <div className="lead-form__fields">
                <div className={`field ${errors.name ? "field--error" : ""}`}>
                  <EditorSlot path="lead_form.label_name" type="form_text" required as="label" htmlFor="lf-name" className="field__label">
                    Ваше имя <Static as="span" aria-hidden="true" className="field__req">*</Static>
                  </EditorSlot>
                  <input
                    id="lf-name"
                    type="text"
                    className="field__input"
                    placeholder="Иван Иванов"
                    value={values.name}
                    onChange={handleChange("name")}
                    autoComplete="name"
                    aria-required="true"
                    aria-describedby={errors.name ? "lf-name-err" : undefined}
                  />
                  {errors.name && <span id="lf-name-err" className="field__error" role="alert">{errors.name}</span>}
                </div>
                <div className={`field ${errors.phone ? "field--error" : ""}`}>
                  <EditorSlot path="lead_form.label_phone" type="form_text" required as="label" htmlFor="lf-phone" className="field__label">
                    Телефон <Static as="span" aria-hidden="true" className="field__req">*</Static>
                  </EditorSlot>
                  <input
                    id="lf-phone"
                    type="tel"
                    className="field__input"
                    placeholder="+7 900 000-00-00"
                    value={values.phone}
                    onChange={handleChange("phone")}
                    autoComplete="tel"
                    aria-required="true"
                    aria-describedby={errors.phone ? "lf-phone-err" : undefined}
                  />
                  {errors.phone && <span id="lf-phone-err" className="field__error" role="alert">{errors.phone}</span>}
                </div>
                <div className="field">
                  <EditorSlot path="lead_form.label_company" type="form_text" hideable as="label" htmlFor="lf-company" className="field__label">Компания</EditorSlot>
                  <input
                    id="lf-company"
                    type="text"
                    className="field__input"
                    placeholder="Название компании (необязательно)"
                    value={values.company}
                    onChange={handleChange("company")}
                    autoComplete="organization"
                  />
                </div>
              </div>
              <EditorSlot path="lead_form.above_button" type="text" hideable as="p" className="lead-form__above-btn">
                30 минут. Без презентаций.
              </EditorSlot>
              <button
                type="submit"
                className="btn btn--cta lead-form__submit cursor-pointer"
                disabled={state === "loading"}
                aria-busy={state === "loading"}
              >
                {state === "loading" ? (
                  <EditorSlot path="lead_form.button_loading" type="button_text" as="span">Отправляем…</EditorSlot>
                ) : (
                  <EditorSlot path="lead_form.button_label" type="button_text" required as="span">Записаться на демо</EditorSlot>
                )}
              </button>
              <EditorSlot path="lead_form.below_button" type="text" hideable as="p" className="microcopy lead-form__below-btn">
                Позвоним в течение 2 рабочих часов
              </EditorSlot>
              <p className="microcopy lead-form__privacy">
                <EditorSlot path="lead_form.privacy_notice" type="text" hideable as="span">
                  Нажимая кнопку, вы соглашаетесь с{" "}
                </EditorSlot>
                <EditorSlot path="lead_form.privacy_link" type="text" as="a" href="#" className="cursor-pointer lead-form__privacy-link">
                  политикой обработки персональных данных
                </EditorSlot>
              </p>
              <Static as="p" className="microcopy lead-form__req-hint">* — обязательное поле</Static>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─── Exports ────────────────────────────────────────────────────────────── */

Object.assign(window, {
  Nav,
  Footer,
  HeroSection,
  TrustLogosSection,
  ProblemSection,
  FeaturesSection,
  ProcessSection,
  CaseStudiesSection,
  TrustTestimonialsSection,
  FaqSection,
  CtaSection,
  LeadFormSection,
});