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 IMAGE_ASSETS = {
  hero: {
    url: "https://picsum.photos/seed/rubezh-advisory-hero/1400/1050",
    alt: "Рабочее место финансового консультанта с документами и графиками",
    width: 1400,
    height: 1050,
  },
};

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

function useMagnetic(ref) {
  React.useEffect(() => {
    const el = ref.current;
    if (!el || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return undefined;
    const onMove = (e) => {
      const rect = el.getBoundingClientRect();
      const x = e.clientX - rect.left - rect.width / 2;
      const y = e.clientY - rect.top - rect.height / 2;
      el.style.transform = `translate(${x * 0.12}px, ${y * 0.12}px)`;
    };
    const onLeave = () => { el.style.transform = "translate(0, 0)"; };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
    };
  }, [ref]);
}

function useCounter(target, active, duration = 1400) {
  const [value, setValue] = React.useState(0);
  React.useEffect(() => {
    if (!active) return undefined;
    const numeric = parseFloat(String(target).replace(/[^\d.]/g, ""));
    if (Number.isNaN(numeric)) return undefined;
    let start = null;
    let raf;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setValue(Math.round(numeric * eased));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, active, duration]);
  return value;
}

function useTypewriter(phrases, interval = 3200) {
  const [idx, setIdx] = React.useState(0);
  const [text, setText] = React.useState("");
  const [phase, setPhase] = React.useState("typing");
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setText(phrases[0]);
      return undefined;
    }
    const phrase = phrases[idx];
    let timer;
    if (phase === "typing") {
      if (text.length < phrase.length) {
        timer = setTimeout(() => setText(phrase.slice(0, text.length + 1)), 42);
      } else {
        timer = setTimeout(() => setPhase("pause"), 900);
      }
    } else if (phase === "pause") {
      timer = setTimeout(() => setPhase("deleting"), 400);
    } else {
      if (text.length > 0) {
        timer = setTimeout(() => setText(text.slice(0, -1)), 24);
      } else {
        setIdx((i) => (i + 1) % phrases.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(timer);
  }, [text, phase, idx, phrases]);
  return text;
}

const IconChart = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
    <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
  </svg>
);
const IconShield = () => (
  <svg className="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
  </svg>
);
const IconCheck = () => (
  <svg className="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);
const IconChevronDown = () => (
  <svg className="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
    <polyline points="6 9 12 15 18 9" />
  </svg>
);
const IconQuote = () => (
  <svg className="icon" width="28" height="28" 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 IconArrow = () => (
  <svg className="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
    <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
  </svg>
);

// Header is a controlled chrome block (TASK-013 / ADR-005), data-driven from
// window.LP_CHROME.header with data-header-* hooks for live editor overlay.
const HEADER_DEFAULTS = {
  sticky: true,
  variant: "split",
  logo: { mode: "text", text: "Рубеж Advisory", imageUrl: "", imageAlt: "Логотип", height: 28 },
  links: [
    { label: "Услуги", href: "#features" },
    { label: "Кому", href: "#use_cases" },
    { label: "Кейсы", href: "#case_studies" },
    { label: "FAQ", href: "#faq" },
  ],
  cta: { enabled: true, label: "Консультация", href: "#lead_form" },
};

function Nav() {
  const raw =
    (typeof window !== "undefined" && window.LP_CHROME && window.LP_CHROME.header) || {};
  const cfg = { ...HEADER_DEFAULTS, ...raw };
  const logo = { ...HEADER_DEFAULTS.logo, ...(raw.logo || {}) };
  const cta = { ...HEADER_DEFAULTS.cta, ...(raw.cta || {}) };
  const links = Array.isArray(raw.links) ? raw.links : HEADER_DEFAULTS.links;
  const navClass = "site-nav site-nav--" + (cfg.variant || "split") + (cfg.sticky ? " site-nav--sticky" : "");
  return (
    <header
      className={navClass}
      id="header"
      role="banner"
      data-editor-section-id="header"
      data-editor-section-type="header"
      data-editor-label="Header"
      data-header-root="true"
    >
      <div className="container site-nav__inner">
        <a href="#hero" className="site-nav__brand cursor-pointer" aria-label="Главная" data-header-brand="true">
          {logo.mode === "image" && logo.imageUrl ? (
            <img
              className="site-nav__logo-img"
              data-header-logo="true"
              src={logo.imageUrl}
              alt={logo.imageAlt || "Логотип"}
              style={{ height: (logo.height || 28) + "px", width: "auto" }}
            />
          ) : (
            <React.Fragment>
              <span className="site-nav__logo-mark" aria-hidden="true" data-header-logo-mark="true" />
              <span className="site-nav__brand-name" data-header-brand-text="true">{logo.text || "Рубеж Advisory"}</span>
            </React.Fragment>
          )}
        </a>
        <nav className="site-nav__links" aria-label="Основная навигация" data-header-links="true">
          {links.map((l, i) => (
            <a
              key={i}
              href={l.href || "#"}
              className="site-nav__link cursor-pointer"
              target={l.newTab ? "_blank" : undefined}
              rel={l.newTab ? "noopener noreferrer" : undefined}
            >
              {l.label}
            </a>
          ))}
        </nav>
        {cta.enabled !== false && (
          <a href={cta.href || "#lead_form"} className="btn btn--nav cursor-pointer" data-header-cta="true">
            {cta.label || "Консультация"}
          </a>
        )}
      </div>
    </header>
  );
}

// Footer is a regular editable section (TASK-013) with section id + EditorSlot fields.
function FooterSection() {
  return (
    <footer
      id="footer"
      data-editor-section-id="footer"
      data-editor-section-type="footer"
      data-editor-variant="footer_simple"
      data-editor-label="Footer"
      className="section section--footer site-footer"
      role="contentinfo"
    >
      <div className="container site-footer__inner">
        <EditorSlot path="footer.copyright" type="text" required as="p" className="site-footer__copy">
          © Рубеж Advisory · Финансы, инвестиции, налоги
        </EditorSlot>
        <nav className="site-footer__links" aria-label="Нижняя навигация">
          <EditorSlot path="footer.link_consult" type="text" hideable as="a" href="#lead_form" className="cursor-pointer">
            Консультация
          </EditorSlot>
          <EditorSlot path="footer.link_faq" type="text" hideable as="a" href="#faq" className="cursor-pointer">
            FAQ
          </EditorSlot>
          <EditorSlot path="footer.link_privacy" type="text" hideable as="a" href="#" className="cursor-pointer">
            Политика конфиденциальности
          </EditorSlot>
        </nav>
      </div>
    </footer>
  );
}

function HeroSection() {
  const magneticRef = React.useRef(null);
  useMagnetic(magneticRef);
  const badges = [
    "18 лет практики",
    "CFA · ACCA",
    "152-ФЗ · NDA",
    "Ответ за 24 ч",
  ];
  return (
    <section
      id="hero"
      data-editor-section-id="hero"
      data-editor-section-type="hero"
      data-editor-variant="hero_asymmetric_glass"
      data-editor-label="Hero"
      className="section section--hero"
    >
      <div className="hero-mesh" aria-hidden="true" />
      <div className="container hero-layout">
        <div className="hero-layout__copy reveal">
          <EditorSlot path="hero.eyebrow" type="text" hideable as="p" className="eyebrow hero-eyebrow">
            Финансы · Инвестиции · Налоги · Россия
          </EditorSlot>
          <EditorSlot path="hero.headline" type="headline" required as="h1" className="h1 hero-headline">
            Капитал под контролем — стратегия, налоги и защита активов
          </EditorSlot>
          <EditorSlot path="hero.subheadline" type="multiline_text" required as="p" className="lead hero-lead">
            Личный финансовый советник для предпринимателей и инвесторов: выстраиваем структуру активов, снижаем налоговую нагрузку и даём ясный план на 12 месяцев. Первая диагностика — 45 минут.
          </EditorSlot>
          <div className="hero-actions">
            <span className="btn-magnetic-wrap" ref={magneticRef}>
              <EditorSlot path="hero.primary_cta" type="button_text" required as="a" href="#lead_form" className="btn btn--cta btn--magnetic cursor-pointer">
                Записаться на диагностику
              </EditorSlot>
            </span>
            <EditorSlot path="hero.secondary_cta" type="button_text" hideable as="a" href="#pricing" className="btn btn--ghost cursor-pointer">
              Форматы работы
            </EditorSlot>
          </div>
          <EditorSlot path="hero.microcopy_under_cta" type="text" hideable as="p" className="microcopy hero-microcopy">
            Бесплатная диагностика · Конфиденциально · Онлайн или в Москве
          </EditorSlot>
          <ul className="hero-badges reveal-stagger" aria-label="Преимущества">
            {badges.map((label, i) => (
              <li key={i} className="badge" style={{ "--i": i }}>
                <EditorSlot path={`hero.trust_badges.items[${i}].label`} type="text" hideable as="span">{label}</EditorSlot>
              </li>
            ))}
          </ul>
        </div>
        <div className="hero-layout__visual reveal" style={{ transitionDelay: "120ms" }}>
          <div className="hero-glass">
            <div className="hero-glass__header">
              <span className="hero-glass__dot hero-glass__dot--live" aria-hidden="true" />
              <EditorSlot path="hero.media_badge" type="text" hideable as="span" className="hero-glass__label">Портфель клиента · live</EditorSlot>
            </div>
            <div className="hero-glass__chart" aria-hidden="true">
              <svg viewBox="0 0 320 120" className="hero-chart-svg">
                <defs>
                  <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="rgba(184,149,106,0.35)" />
                    <stop offset="100%" stopColor="rgba(184,149,106,0)" />
                  </linearGradient>
                </defs>
                <path className="hero-chart-area" d="M0,90 L40,72 L80,78 L120,48 L160,52 L200,28 L240,34 L280,18 L320,22 L320,120 L0,120 Z" fill="url(#chartFill)" />
                <path className="hero-chart-line" d="M0,90 L40,72 L80,78 L120,48 L160,52 L200,28 L240,34 L280,18 L320,22" fill="none" stroke="currentColor" strokeWidth="2" />
              </svg>
            </div>
            <div className="hero-glass__stats">
              <div className="hero-stat">
                <span className="hero-stat__value font-mono">+14.3%</span>
                <span className="hero-stat__label">доходность YTD</span>
              </div>
              <div className="hero-stat">
                <span className="hero-stat__value font-mono">-4.8 п.п.</span>
                <span className="hero-stat__label">налоговая нагрузка</span>
              </div>
            </div>
          </div>
          <div className="hero-media-wrap">
            <img
              className="stock-image stock-image--hero"
              src={IMAGE_ASSETS.hero.url}
              alt={IMAGE_ASSETS.hero.alt}
              loading="eager"
              decoding="async"
              width={IMAGE_ASSETS.hero.width}
              height={IMAGE_ASSETS.hero.height}
              data-editor-path="hero.image"
              data-editor-type="image"
              data-editor-required="true"
              data-editor-hideable="false"
              data-editor-media-target="img.src"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function ProblemSection() {
  const items = [
    "Доход растёт, а структура активов не успевает — решения принимаются на эмоциях, не по стратегии",
    "Налоги съедают маржу: ИП, дивиденды и зарплата не оптимизированы под ваш статус резидента",
    "Бизнес и личные финансы переплетены — риски для семьи и компании не разделены юридически",
    "Банковский менеджер предлагает продукты банка, а не независимую стратегию под ваши цели",
  ];
  return (
    <section
      id="problem"
      data-editor-section-id="problem"
      data-editor-section-type="problem"
      data-editor-variant="problem_diagonal_cards"
      data-editor-label="Problem"
      className="section section--problem"
    >
      <div className="container">
        <div className="section-header section-header--left reveal">
          <EditorSlot path="problem.section_header" type="headline" required as="h2" className="h2">
            Когда капитал растёт быстрее, чем система
          </EditorSlot>
        </div>
        <div className="problem-grid reveal-stagger">
          {items.map((quote, i) => (
            <article key={i} className="problem-card reveal" style={{ "--i": i }}>
              <span className="problem-card__index font-mono" aria-hidden="true">0{i + 1}</span>
              <EditorSlot path={`problem.items[${i}].quote`} type="multiline_text" required as="p" className="problem-card__quote">{quote}</EditorSlot>
            </article>
          ))}
        </div>
        <div className="problem-closer reveal">
          <EditorSlot path="problem.closer" type="multiline_text" hideable as="p" className="problem-closer__text">
            На диагностике разберём вашу ситуацию и покажем, где теряются деньги — без продажи банковских продуктов и скрытых комиссий.
          </EditorSlot>
          <EditorSlot path="problem.closer_cta" type="button_text" hideable as="a" href="#lead_form" className="btn btn--outline cursor-pointer">
            Записаться на диагностику
          </EditorSlot>
        </div>
      </div>
    </section>
  );
}

function BenefitsSection() {
  const items = [
    { title: "Стратегия портфеля", desc: "Аллокация под горизонт, риск-профиль и валютные цели — без шаблонных схем" },
    { title: "Налоговая архитектура", desc: "Легальная оптимизация для ИП, ООО, самозанятых и частных инвесторов" },
    { title: "Защита капитала", desc: "Разделение активов, страхование рисков, резервный фонд на 12–18 месяцев" },
    { title: "Roadmap на год", desc: "Конкретные шаги после первой встречи — с датами, суммами и ответственными" },
  ];
  return (
    <section
      id="benefits"
      data-editor-section-id="benefits"
      data-editor-section-type="benefits"
      data-editor-variant="benefits_zigzag"
      data-editor-label="Benefits"
      className="section section--white"
    >
      <div className="container">
        <div className="section-header section-header--left reveal">
          <EditorSlot path="benefits.section_header" type="headline" required as="h2" className="h2">
            Что меняется после работы с экспертом
          </EditorSlot>
          <EditorSlot path="benefits.subtitle" type="multiline_text" hideable as="p" className="lead section-sub">
            Не готовые схемы — решения под ваш доход, статус и цели семьи
          </EditorSlot>
        </div>
        <div className="benefits-zigzag">
          {items.map((item, i) => (
            <article key={i} className={`benefit-row reveal ${i % 2 ? "benefit-row--reverse" : ""}`} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="benefit-row__num font-mono" aria-hidden="true">{String(i + 1).padStart(2, "0")}</div>
              <div className="benefit-row__body">
                <EditorSlot path={`benefits.items[${i}].title`} type="text" required as="h3" className="h3">{item.title}</EditorSlot>
                <EditorSlot path={`benefits.items[${i}].description`} type="multiline_text" required as="p">{item.desc}</EditorSlot>
              </div>
              <div className="benefit-row__line" aria-hidden="true" />
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturesSection() {
  const prompts = [
    "Оптимизировать налоги при дивидендах ИП…",
    "Собрать портфель на 15 млн с валютой 40%…",
    "Разделить активы бизнеса и семьи…",
  ];
  const typed = useTypewriter(prompts);
  const features = [
    { title: "Диагностика 360°", body: "Аудит активов, налогов, страховок и долговых обязательств за одну сессию" },
    { title: "Налоговый календарь", body: "Напоминания о сроках, оптимальные даты выплат и отчётности" },
    { title: "Инвестиционный комитет", body: "Ежеквартальный разбор портфеля с фиксацией решений в протоколе" },
    { title: "Конфиденциальный vault", body: "Документы и расчёты хранятся на серверах в РФ, доступ по NDA" },
  ];
  return (
    <section
      id="features"
      data-editor-section-id="features"
      data-editor-section-type="features"
      data-editor-variant="features_bento"
      data-editor-label="Features"
      className="section section--gray"
    >
      <div className="container">
        <div className="section-header section-header--split reveal">
          <div>
            <EditorSlot path="features.eyebrow" type="text" hideable as="p" className="eyebrow">Компетенции</EditorSlot>
            <EditorSlot path="features.section_header" type="headline" required as="h2" className="h2">
              Инструменты независимого советника
            </EditorSlot>
          </div>
          <EditorSlot path="features.subtitle" type="multiline_text" hideable as="p" className="lead section-sub section-sub--narrow">
            Всё, что нужно для управления капиталом — без привязки к продуктам одного банка
          </EditorSlot>
        </div>
        <div className="bento reveal">
          <div className="bento__tile bento__tile--wide bento__tile--glass">
            <p className="bento__label">Запрос клиента</p>
            <div className="bento-typewriter" aria-live="polite">
              <span className="bento-typewriter__text font-mono">{typed}</span>
              <span className="bento-typewriter__cursor" aria-hidden="true" />
            </div>
            <div className="bento-pulse-row" aria-hidden="true">
              <span className="bento-pulse-dot" />
              <span className="bento-pulse-dot bento-pulse-dot--delay" />
              <span className="bento-pulse-label">Анализируем…</span>
            </div>
          </div>
          {features.map((f, i) => (
            <article key={i} className="bento__tile bento__tile--feature reveal" style={{ transitionDelay: `${(i + 1) * 90}ms` }}>
              <IconShield />
              <EditorSlot path={`features.items[${i}].headline`} type="headline" required as="h3" className="h3 bento__title">{f.title}</EditorSlot>
              <EditorSlot path={`features.items[${i}].body`} type="multiline_text" required as="p" className="bento__body">{f.body}</EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCasesSection() {
  const cases = [
    { segment: "Предприниматели", title: "IT и сервисный бизнес", desc: "Дивиденды, зарплата, ИИС и валютная подушка при доходе 2–8 млн/мес" },
    { segment: "Инвесторы", title: "Частный капитал 15–80 млн", desc: "Ребалансировка, снижение комиссий, план пассивного дохода" },
    { segment: "Самозанятые", title: "Эксперты и консультанты", desc: "Переход между режимами, накопления, страхование дохода" },
    { segment: "Семьи", title: "Совместные активы", desc: "Наследование, трасты, разделение рисков между супругами" },
  ];
  return (
    <section
      id="use_cases"
      data-editor-section-id="use_cases"
      data-editor-section-type="use_cases"
      data-editor-variant="use_cases_horizontal"
      data-editor-label="Use Cases"
      className="section section--white"
    >
      <div className="container">
        <div className="section-header section-header--left reveal">
          <EditorSlot path="use_cases.section_header" type="headline" required as="h2" className="h2">Кому подходит формат</EditorSlot>
          <EditorSlot path="use_cases.subtitle" type="multiline_text" hideable as="p" className="lead section-sub">
            Работаем с клиентами, у которых финансовые решения влияют на бизнес и семью
          </EditorSlot>
        </div>
      </div>
      <div className="use-cases-scroll reveal">
        <div className="use-cases-track" role="list">
          {cases.map((c, i) => (
            <article key={i} className="use-case-card" role="listitem">
              <EditorSlot path={`use_cases.items[${i}].segment`} type="text" required as="span" className="use-case-card__segment">{c.segment}</EditorSlot>
              <EditorSlot path={`use_cases.items[${i}].title`} type="text" required as="h3" className="h3 use-case-card__title">{c.title}</EditorSlot>
              <EditorSlot path={`use_cases.items[${i}].description`} type="multiline_text" required as="p" className="use-case-card__desc">{c.desc}</EditorSlot>
              <Static as="a" href="#lead_form" className="use-case-card__link cursor-pointer">Обсудить задачу <IconArrow /></Static>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { label: "Шаг 1", time: "45 мин", title: "Диагностика", body: "Разбираем цели, активы, налоги. Вы получаете 3–5 приоритетных шагов." },
    { label: "Шаг 2", time: "5–7 дней", title: "Стратегия", body: "Готовим roadmap: аллокация, налоговая схема, календарь действий." },
    { label: "Шаг 3", time: "ежемесячно", title: "Сопровождение", body: "Контроль исполнения, корректировки при изменении законов и рынка." },
    { label: "Шаг 4", time: "ежеквартально", title: "Комитет", body: "Сводный отчёт, ребалансировка, фиксация решений в протоколе." },
  ];
  return (
    <section
      id="process"
      data-editor-section-id="process"
      data-editor-section-type="process"
      data-editor-variant="process_horizontal_rail"
      data-editor-label="Process"
      className="section section--navy"
    >
      <div className="container">
        <div className="section-header reveal">
          <EditorSlot path="process.eyebrow" type="text" hideable as="p" className="eyebrow eyebrow--light">Как мы работаем</EditorSlot>
          <EditorSlot path="process.section_header" type="headline" required as="h2" className="h2 text-white">
            Путь от хаоса к системе
          </EditorSlot>
        </div>
        <ol className="process-rail reveal-stagger" aria-label="Этапы работы">
          {steps.map((step, i) => (
            <li key={i} className="process-rail__step reveal" style={{ "--i": i }}>
              <div className="process-rail__node font-mono">{i + 1}</div>
              <div className="process-rail__meta">
                <EditorSlot path={`process.steps[${i}].label`} type="text" required as="span" className="process-rail__label">{step.label}</EditorSlot>
                <EditorSlot path={`process.steps[${i}].time`} type="text" hideable as="span" className="process-rail__time">{step.time}</EditorSlot>
              </div>
              <EditorSlot path={`process.steps[${i}].title`} type="text" required as="h3" className="process-rail__title">{step.title}</EditorSlot>
              <EditorSlot path={`process.steps[${i}].body`} type="multiline_text" required as="p" className="process-rail__desc">{step.body}</EditorSlot>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

function TrustSection() {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return undefined;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setActive(true); io.disconnect(); }
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const c0 = useCounter(18, active);
  const c1 = useCounter(412, active);
  const stats = [
    { value: `${c0}+`, raw: "18+", label: "лет практики" },
    { value: `${c1}+`, raw: "412+", label: "клиентов" },
    { value: "₽3,4 млрд", raw: "₽3,4 млрд", label: "активов под сопровождением", noAnim: true },
  ];
  const creds = [
    "CFA Charterholder · ACCA · член СРО",
    "Бывший директор private banking в топ-5 банке РФ",
    "Публикации в РБК, Forbes Russia, Коммерсантъ",
    "152-ФЗ · NDA · данные только в РФ",
  ];
  return (
    <section
      id="trust"
      ref={ref}
      data-editor-section-id="trust"
      data-editor-section-type="trust"
      data-editor-variant="trust_split_marquee"
      data-editor-label="Trust"
      className="section section--white"
    >
      <div className="container trust-split reveal">
        <div className="trust-split__stats">
          <EditorSlot path="trust.section_header" type="headline" required as="h2" className="h2 trust-split__heading">
            Цифры, которые можно проверить
          </EditorSlot>
          <div className="trust-stats-row">
            {stats.map((s, i) => (
              <div key={i} className="trust-stat-block">
                <EditorSlot path={`trust.stats[${i}].value`} type="stat_value" required as="strong" className="trust-stat-block__value font-mono">
                  {s.noAnim ? s.raw : s.value}
                </EditorSlot>
                <EditorSlot path={`trust.stats[${i}].label`} type="text" required as="span" className="trust-stat-block__label">{s.label}</EditorSlot>
              </div>
            ))}
          </div>
        </div>
        <div className="trust-split__creds">
          {creds.map((label, i) => (
            <div key={i} className="trust-cred-row">
              <IconCheck />
              <EditorSlot path={`trust.credentials.items[${i}].label`} type="text" required as="span">{label}</EditorSlot>
            </div>
          ))}
        </div>
      </div>
      <div className="trust-marquee" aria-hidden="true">
        <div className="trust-marquee__track">
          {[...creds, ...creds].map((t, i) => (
            <span key={i} className="trust-marquee__item">{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStudiesSection() {
  const cases = [
    {
      tag: "Предприниматель · e-commerce · 4,2 млн/мес",
      problem: "Дивиденды и зарплата смешаны, налог 27%+. Портфель в рублях без валютной диверсификации.",
      solution: "Реструктурировали выплаты, выстроили ИИС и брокерский счёт, добавили 32% в валютные ETF.",
      results: ["Налоговая нагрузка -5,2 п.п. легально", "Валютная подушка на 16 месяцев", "Единый dashboard бизнес + личное"],
      quote: "«Наконец понимаю, сколько могу инвестировать без риска для операционки.»",
      speaker: "Дмитрий Воронцов, основатель маркетплейса",
    },
    {
      tag: "Инвестор · 52 года · капитал 38 млн ₽",
      problem: "23 инструмента без стратегии, комиссии брокеров, страх не успеть выйти на пенсию.",
      solution: "Сократили до 9 позиций, настроили ребалансировку, план пассивного дохода к 57 годам.",
      results: ["Комиссии -37%", "Целевая доходность 11,4% с контролируемым риском", "План cash-flow на 20 лет"],
      quote: "«Перестал проверять котировки каждый день — есть план и ответственный эксперт.»",
      speaker: "Елена Миронова, директор по развитию",
    },
  ];
  return (
    <section
      id="case_studies"
      data-editor-section-id="case_studies"
      data-editor-section-type="case_studies"
      data-editor-variant="case_studies_editorial"
      data-editor-label="Case Studies"
      className="section section--case"
    >
      <div className="container">
        <div className="section-header reveal">
          <EditorSlot path="case_studies.section_header" type="headline" required as="h2" className="h2 text-white">
            Результаты клиентов
          </EditorSlot>
        </div>
        <div className="case-editorial-list">
          {cases.map((c, i) => (
            <article key={i} className="case-editorial reveal" style={{ transitionDelay: `${i * 100}ms` }}>
              <div className="case-editorial__index font-mono" aria-hidden="true">{String(i + 1).padStart(2, "0")}</div>
              <div className="case-editorial__body">
                <EditorSlot path={`case_studies.items[${i}].niche_tag`} type="text" required as="span" className="case-editorial__tag">{c.tag}</EditorSlot>
                <div className="case-editorial__grid">
                  <div>
                    <p className="case-editorial__label">Задача</p>
                    <EditorSlot path={`case_studies.items[${i}].problem`} type="multiline_text" required as="p">{c.problem}</EditorSlot>
                  </div>
                  <div>
                    <p className="case-editorial__label">Решение</p>
                    <EditorSlot path={`case_studies.items[${i}].solution`} type="multiline_text" required as="p">{c.solution}</EditorSlot>
                  </div>
                </div>
                <ul className="case-editorial__results">
                  {c.results.map((r, ri) => (
                    <li key={ri}>
                      <IconCheck />
                      <EditorSlot path={`case_studies.items[${i}].results[${ri}]`} type="text" required as="span">{r}</EditorSlot>
                    </li>
                  ))}
                </ul>
                <blockquote className="case-editorial__quote">
                  <IconQuote />
                  <EditorSlot path={`case_studies.items[${i}].quote`} type="multiline_text" required as="p">{c.quote}</EditorSlot>
                  <EditorSlot path={`case_studies.items[${i}].speaker`} type="text" required as="cite">{c.speaker}</EditorSlot>
                </blockquote>
                <EditorSlot path={`case_studies.items[${i}].cta`} type="button_text" hideable as="a" href="#lead_form" className="btn btn--gold-outline cursor-pointer">
                  Обсудить похожий кейс
                </EditorSlot>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingSection() {
  const plans = [
    {
      name: "Диагностика",
      price: "0 ₽",
      period: "45 минут",
      desc: "Разбор ситуации и 3–5 приоритетных шагов",
      features: ["Аудит активов и налогов", "PDF с рекомендациями", "Без обязательств"],
      featured: false,
      cta: "Записаться бесплатно",
    },
    {
      name: "Сопровождение",
      price: "от 95 000 ₽",
      period: "/ месяц",
      desc: "Персональный roadmap и ежемесячный контроль",
      features: ["Стратегия портфеля", "Налоговый календарь", "Чат с экспертом", "Квартальный комитет"],
      featured: true,
      cta: "Обсудить формат",
    },
    {
      name: "Private Office",
      price: "индивидуально",
      period: "",
      desc: "Семейный офис: активы от 100 млн ₽",
      features: ["Выделенный советник", "Юридическое сопровождение", "Наследственное планирование", "24/7 приоритет"],
      featured: false,
      cta: "Запросить встречу",
    },
  ];
  return (
    <section
      id="pricing"
      data-editor-section-id="pricing"
      data-editor-section-type="pricing"
      data-editor-variant="pricing_glass_tiers"
      data-editor-label="Pricing"
      className="section section--gray"
    >
      <div className="container">
        <div className="section-header reveal">
          <EditorSlot path="pricing.eyebrow" type="text" hideable as="p" className="eyebrow">Форматы</EditorSlot>
          <EditorSlot path="pricing.section_header" type="headline" required as="h2" className="h2">
            Прозрачные форматы работы
          </EditorSlot>
          <EditorSlot path="pricing.subtitle" type="multiline_text" hideable as="p" className="lead section-sub lead--center">
            Стоимость сопровождения зависит от объёма активов — обсудим после диагностики
          </EditorSlot>
        </div>
        <div className="pricing-grid reveal-stagger">
          {plans.map((plan, i) => (
            <article key={i} className={`pricing-card reveal ${plan.featured ? "pricing-card--featured" : ""}`} style={{ "--i": i }}>
              {plan.featured && <span className="pricing-card__badge">Популярный</span>}
              <EditorSlot path={`pricing.plans[${i}].name`} type="text" required as="h3" className="h3 pricing-card__name">{plan.name}</EditorSlot>
              <EditorSlot path={`pricing.plans[${i}].description`} type="multiline_text" required as="p" className="pricing-card__desc">{plan.desc}</EditorSlot>
              <div className="pricing-card__price-row">
                <EditorSlot path={`pricing.plans[${i}].price`} type="text" required as="span" className="pricing-card__price font-mono">{plan.price}</EditorSlot>
                <EditorSlot path={`pricing.plans[${i}].period`} type="text" hideable as="span" className="pricing-card__period">{plan.period}</EditorSlot>
              </div>
              <ul className="pricing-card__features">
                {plan.features.map((f, fi) => (
                  <li key={fi}>
                    <IconCheck />
                    <EditorSlot path={`pricing.plans[${i}].features[${fi}]`} type="text" required as="span">{f}</EditorSlot>
                  </li>
                ))}
              </ul>
              <EditorSlot path={`pricing.plans[${i}].primary_cta`} type="button_text" required as="a" href="#lead_form" className={`btn cursor-pointer ${plan.featured ? "btn--cta" : "btn--outline"}`}>
                {plan.cta}
              </EditorSlot>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqSection() {
  const [openIdx, setOpenIdx] = React.useState(0);
  const toggle = (i) => setOpenIdx((prev) => (prev === i ? -1 : i));
  const items = [
    { q: "Сколько стоит консультация?", a: "Первая диагностика 45 минут — бесплатно. Сопровождение обсуждается после разбора ситуации. Цена зависит от объёма активов — без скрытых комиссий от банков." },
    { q: "Вы управляете моими деньгами?", a: "Нет. Мы консультируем и сопровождаем решения — счета остаются у вас у брокера или банка. Не принимаем деньги на свой счёт." },
    { q: "Это инвестиционная рекомендация?", a: "Материалы носят информационный характер. Персональные рекомендации — только после KYC и договора. Доходность в прошлом не гарантирует будущую." },
    { q: "Как проходит первая встреча?", a: "45 минут онлайн или очно: цели, активы, налоги. Вы получаете 3–5 приоритетных шагов. Если формат подходит — предложим план сопровождения." },
    { q: "Что в чек-листе?", a: "PDF «12 ошибок частного инвестора в 2025»: налоги, валюта, страхование, структура портфеля. Отправим на email после заявки." },
    { q: "Работаете с иностранными активами?", a: "Да — учитываем валютный контроль, CRS и санкционные ограничения. Структурируем решения под резидентство РФ." },
  ];
  return (
    <section
      id="faq"
      data-editor-section-id="faq"
      data-editor-section-type="faq"
      data-editor-variant="faq_accordion_gold"
      data-editor-label="FAQ"
      className="section section--white"
    >
      <div className="container container--narrow">
        <EditorSlot path="faq.section_header" type="headline" required as="h2" className="h2 text-center reveal">
          Частые вопросы
        </EditorSlot>
        <div className="faq-list reveal" 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>
  );
}

function CtaSection() {
  return (
    <section
      id="cta"
      data-editor-section-id="cta"
      data-editor-section-type="cta"
      data-editor-variant="cta_split_mesh"
      data-editor-label="CTA"
      className="section section--cta"
    >
      <div className="cta-mesh" aria-hidden="true" />
      <div className="container cta-split reveal">
        <div className="cta-split__copy">
          <EditorSlot path="cta.eyebrow" type="text" hideable as="p" className="eyebrow eyebrow--light">Следующий шаг</EditorSlot>
          <EditorSlot path="cta.headline" type="headline" required as="h2" className="h2 text-white">
            Разберём вашу ситуацию — без продажи банковских продуктов
          </EditorSlot>
          <EditorSlot path="cta.subheadline" type="multiline_text" hideable as="p" className="cta-split__sub">
            Диагностика бесплатна. Вы получите конкретные шаги — решение о сопровождении остаётся за вами.
          </EditorSlot>
        </div>
        <div className="cta-split__action">
          <EditorSlot path="cta.primary_cta" type="button_text" required as="a" href="#lead_form" className="btn btn--gold cursor-pointer">
            Записаться на консультацию
          </EditorSlot>
          <EditorSlot path="cta.microcopy" type="text" hideable as="p" className="microcopy cta-split__micro">
            Или скачайте чек-лист в форме ниже
          </EditorSlot>
        </div>
      </div>
    </section>
  );
}

function LeadFormSection() {
  const [state, setState] = React.useState("idle");
  const [values, setValues] = React.useState({ name: "", phone: "", email: "" });
  const [errors, setErrors] = React.useState({});
  const validate = () => {
    const e = {};
    if (!values.name.trim()) e.name = "Укажите ваше имя";
    if (!values.phone.trim()) e.phone = "Введите номер телефона";
    if (!values.email.trim()) e.email = "Укажите email для чек-листа";
    return e;
  };
  const handleChange = (field) => (ev) => {
    setValues((v) => ({ ...v, [field]: ev.target.value }));
    if (errors[field]) setErrors((err) => ({ ...err, [field]: "" }));
  };
  const handleSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    setState("loading");
    setTimeout(() => setState("success"), 1200);
  };
  return (
    <section
      id="lead_form"
      data-editor-section-id="lead_form"
      data-editor-section-type="lead_form"
      data-editor-variant="lead_form_split"
      data-editor-label="Lead Form"
      className="section section--form"
    >
      <div className="container lead-split">
        <div className="lead-split__info reveal">
          <Static as="h2" className="h2">Конфиденциальная заявка</Static>
          <Static as="p" className="lead">Оставьте контакты — пришлём чек-лист и предложим время диагностики в течение 24 часов.</Static>
          <ul className="lead-trust-list">
            <li><IconShield /> 152-ФЗ · данные в РФ</li>
            <li><IconCheck /> NDA по запросу</li>
            <li><IconCheck /> Без спама и рассылок</li>
          </ul>
        </div>
        <div className="lead-split__form-wrap reveal" style={{ transitionDelay: "100ms" }}>
          {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"><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">
                Мы свяжемся в течение 24 часов. Чек-лист отправим на указанный email.
              </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" />
                  {errors.name && <span 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 (916) 847-1928" value={values.phone} onChange={handleChange("phone")} autoComplete="tel" aria-required="true" />
                  {errors.phone && <span className="field__error" role="alert">{errors.phone}</span>}
                </div>
                <div className={`field ${errors.email ? "field--error" : ""}`}>
                  <EditorSlot path="lead_form.label_email" type="form_text" required as="label" htmlFor="lf-email" className="field__label">
                    Email <Static as="span" aria-hidden="true" className="field__req">*</Static>
                  </EditorSlot>
                  <input id="lf-email" type="email" className="field__input" placeholder="you@email.ru" value={values.email} onChange={handleChange("email")} autoComplete="email" aria-required="true" />
                  {errors.email && <span className="field__error" role="alert">{errors.email}</span>}
                </div>
              </div>
              <EditorSlot path="lead_form.above_button" type="text" hideable as="p" className="lead-form__above-btn">
                45 минут · Конфиденциально · Без обязательств
              </EditorSlot>
              <button type="submit" className={`btn btn--cta lead-form__submit cursor-pointer ${state === "loading" ? "btn--loading" : ""}`} 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">
                Ответим в течение 24 часов в рабочие дни
              </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>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Nav, FooterSection, HeroSection, ProblemSection, BenefitsSection, FeaturesSection,
  UseCasesSection, ProcessSection, TrustSection, CaseStudiesSection,
  PricingSection, FaqSection, CtaSection, LeadFormSection, EditorSlot,
});