/* ProAgent Cinematic — combined story + outro (single file for faster load) */

const { useEffect, useRef, useState, useMemo } = React;
const DEMO_WHATSAPP_URL = "https://wa.me/77052200202";

/* ============ helpers ============ */
const smoothstep = (a, b, x) => {
  if (x <= a) return 0;
  if (x >= b) return 1;
  const t = (x - a) / (b - a);
  return t * t * (3 - 2 * t);
};
const lerp = (a, b, t) => a + (b - a) * t;
const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;

function mulberry(seed) {
  return function () {
    seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

const CATS = [
  { id: "legal", x: -380, label: "ПРАВО", desc: "договоры · NDA · споры" },
  { id: "finance", x: -127, label: "ФИНАНСЫ", desc: "счета · учёт · налоги" },
  { id: "hr", x: 127, label: "КАДРЫ", desc: "политики · ЗП · адаптация" },
  { id: "comp", x: 380, label: "КОМПЛАЕНС", desc: "аудит · KYC · регламенты" },
];

const ACTS = [
  { key: "chaos", num: "01", label: "Хаос", center: 0.185 },
  { key: "activation", num: "02", label: "Активация", center: 0.315 },
  { key: "organize", num: "03", label: "Сортировка", center: 0.455 },
  { key: "pack", num: "04", label: "Упаковка", center: 0.585 },
  { key: "archive", num: "05", label: "Архивация", center: 0.705 },
  { key: "ready", num: "06", label: "Готовность", center: 0.825 },
  { key: "memory", num: "07", label: "Память", center: 0.965 },
];

function generateDocs() {
  const rng = mulberry(99);
  const docs = [];
  CATS.forEach((cat) => {
    for (let i = 0; i < 8; i++) {
      const angle = rng() * Math.PI * 2;
      const radius = 280 + rng() * 360;
      const x = Math.cos(angle) * radius * (0.6 + rng() * 0.4);
      const y = (rng() - 0.5) * 540;
      const z = (rng() - 0.5) * 700;
      docs.push({
        id: `${cat.id}-${i}`,
        cat: cat.id,
        catLabel: cat.label,
        catX: cat.x,
        stackIdx: i,
        x0: x, y0: y, z0: z,
        rx0: (rng() - 0.5) * 50,
        ry0: (rng() - 0.5) * 80,
        phase: rng() * Math.PI * 2,
        speed: 0.7 + rng() * 0.6,
        idHex: Math.floor(rng() * 9999).toString(16).padStart(4, "0").toUpperCase(),
      });
    }
  });
  return docs;
}

/* ============ Story atoms ============ */
const DocCard = React.forwardRef(({ doc }, ref) => (
  <div ref={ref} className="doc" data-cat={doc.cat}>
    <div className="doc-cat mono">{doc.catLabel} · {doc.idHex}</div>
    <div className="doc-line"></div>
    <div className="doc-line"></div>
    <div className="doc-line short"></div>
    <div className="doc-block"></div>
    <div className="doc-line"></div>
    <div className="doc-line shorter"></div>
  </div>
));

const ScanField = React.forwardRef((_, ref) => (
  <svg ref={ref} className="scan-svg" viewBox="0 0 1200 700" preserveAspectRatio="xMidYMid slice">
    {CATS.map((c) => (
      <g key={c.id} transform={`translate(${600 + c.x * 0.9} 350)`}>
        <line x1="-10" y1="0" x2="10" y2="0" stroke="oklch(0.55 0.18 var(--accent-h))" strokeOpacity="0.5" />
        <line x1="0" y1="-10" x2="0" y2="10" stroke="oklch(0.55 0.18 var(--accent-h))" strokeOpacity="0.5" />
        <circle r="3" fill="oklch(0.55 0.18 var(--accent-h))" />
        <circle r="20" fill="none" stroke="oklch(0.55 0.18 var(--accent-h))" strokeOpacity="0.18" strokeDasharray="3 4" />
      </g>
    ))}
    {CATS.map((c) => {
      const cx = 600 + c.x * 0.9;
      return (
        <g key={c.id + "r"} opacity="0.18">
          {[-1, 1].map((s) => (
            <line key={s}
              x1={cx} y1="350"
              x2={cx + s * 280} y2={350 + s * 90}
              stroke="oklch(0.55 0.18 var(--accent-h))"
              strokeWidth="0.8"
              strokeDasharray="2 6"
            />
          ))}
        </g>
      );
    })}
  </svg>
));

function StackLabel({ cat, refSet }) {
  return (
    <div className="stack-label" ref={refSet} style={{ "--cat-color": `var(--cat-${cat.id})`, "--lx": "0px" }}>
      <div className="badge" style={{ background: `var(--cat-${cat.id})` }}>{cat.label}</div>
      <div className="meta">{cat.desc}</div>
    </div>
  );
}

const Folder = React.forwardRef(({ cat }, ref) => (
  <div className="folder" data-cat={cat.id} ref={ref}>
    <div className="tab"></div>
    <div className="body"></div>
    <div className="seal"></div>
    <div className="info mono">
      <div className="title">{cat.label}</div>
      <div>{cat.desc}</div>
    </div>
  </div>
));

const Cabinet = React.forwardRef((props, ref) => (
  <div className="cabinet" ref={ref}>
    <div className="frame"></div>
    <div className="header mono">
      <span>PROAGENT · АРХИВ</span>
      <span className="status"><span className="dot"></span> ИНДЕКСИРОВАНО</span>
    </div>
    <div className="shelves">
      {CATS.map((c, i) => (
        <div key={c.id} className="shelf" style={{ "--shelf-color": `var(--cat-${c.id})` }}>
          <div className="accent-bar"></div>
          <div className="label mono">{c.label}</div>
          <div className="count mono">{[1240, 894, 612, 318][i]}</div>
          <div className="slits">
            {Array.from({ length: 6 }).map((_, j) => (
              <div key={j} className="slit"></div>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
));

const ChatBlock = React.forwardRef((_, ref) => {
  const [value, setValue] = useState("");
  const suggestions = [
    { icon: "§", label: "Найди договор по контрагенту «Tengri Capital»", chipBg: "oklch(0.55 0.16 230 / 0.12)", chipColor: "var(--cat-legal)" },
    { icon: "₸", label: "Сверь счета за Q3 с банковской выпиской", chipBg: "oklch(0.52 0.14 155 / 0.14)", chipColor: "var(--cat-finance)" },
    { icon: "К", label: "Кто отвечает за политику командировок?", chipBg: "oklch(0.62 0.14 60 / 0.16)", chipColor: "var(--cat-hr)" },
    { icon: "✓", label: "Покажи истёкшие разрешения за 2025", chipBg: "oklch(0.55 0.16 295 / 0.14)", chipColor: "var(--cat-comp)" },
  ];
  return (
    <div className="chat-block" ref={ref}>
      <div className="chat-eyebrow mono">
        <span className="dot"></span>
        PROAGENT · ОРГАНИЗАЦИОННАЯ ПАМЯТЬ ГОТОВА
      </div>
      <h3>Спросите вашу компанию что угодно.</h3>
      <p>Подключите ваши документы — ProAgent выстраивает контекст ваших процессов и отвечает в их терминах.</p>
      <div className="chat-suggestions">
        {suggestions.map((s, i) => (
          <button key={i} className="chat-chip" onClick={() => setValue(s.label)}>
            <span className="chip-icon" style={{ "--chip-bg": s.chipBg, "--chip-color": s.chipColor }}>{s.icon}</span>
            {s.label}
          </button>
        ))}
      </div>
      <div className="chat-input">
        <input
          type="text"
          placeholder="Спросите ProAgent…"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <button className="send" aria-label="Отправить">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
            <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
      <div className="chat-meta">
        <span className="conn"><span className="dot"></span> ON-PREMISE · ИНДЕКС АКТУАЛЕН</span>
        <span>МОДЕЛЬ · PROAGENT-4 · KZ</span>
      </div>
    </div>
  );
});

function Caption({ act, num, title, desc, refSet }) {
  return (
    <div className="caption" ref={refSet}>
      <div className="caption-card">
        <div className="step mono">
          <span className="num">{num}</span>
          {act}
        </div>
        <h2 className="headline">{title}</h2>
        <p className="desc">{desc}</p>
      </div>
    </div>
  );
}

/* ============ MAIN STORY ============ */
function Story() {
  const docs = useMemo(generateDocs, []);
  const wrapRef = useRef(null);
  const docRefs = useRef({});
  const stackRefs = useRef({});
  const folderRefs = useRef({});
  const cabinetRef = useRef(null);
  const chatRef = useRef(null);
  const scanRef = useRef(null);
  const heroRef = useRef(null);
  const captionRefs = useRef({});
  const scrollHintRef = useRef(null);
  const [activeStep, setActiveStep] = useState(0);

  // Smooth scroll engine (used by Play + step rail + prev/next)
  const animRef = useRef(null);
  const animFromRef = useRef(0);
  const animToRef = useRef(0);
  const animStartRef = useRef(0);
  const animDurRef = useRef(0);
  const programmaticRef = useRef(false);

  function pToY(p) {
    const wrap = wrapRef.current;
    if (!wrap) return 0;
    const rect = wrap.getBoundingClientRect();
    const wrapTop = window.scrollY + rect.top;
    // +10px nudge forward so captions land in their fully-visible band
    return wrapTop + p * (wrap.offsetHeight - window.innerHeight) + 10;
  }

  function tickAnim(now) {
    const t = Math.min(1, (now - animStartRef.current) / animDurRef.current);
    const eased = easeInOutCubic(t);
    const y = animFromRef.current + (animToRef.current - animFromRef.current) * eased;
    programmaticRef.current = true;
    window.scrollTo(0, y);
    programmaticRef.current = false;
    if (t < 1) {
      animRef.current = requestAnimationFrame(tickAnim);
    } else {
      animRef.current = null;
    }
  }

  function smoothScrollTo(targetY, durationMs) {
    if (animRef.current) cancelAnimationFrame(animRef.current);
    animFromRef.current = window.scrollY;
    animToRef.current = targetY;
    animStartRef.current = performance.now();
    animDurRef.current = durationMs;
    animRef.current = requestAnimationFrame(tickAnim);
  }

  function scrollToAct(actIdx) {
    if (actIdx < 0 || actIdx >= ACTS.length) return;
    smoothScrollTo(pToY(ACTS[actIdx].center), 1400);
  }

  useEffect(() => {
    function handleStoryAct(event) {
      scrollToAct(event.detail?.actIdx ?? 0);
    }
    window.addEventListener("proagent:story-act", handleStoryAct);
    return () => window.removeEventListener("proagent:story-act", handleStoryAct);
  }, []);

  function nextAct() {
    const cur = Math.max(0, activeStep - 1);
    if (cur < ACTS.length - 1) scrollToAct(cur + 1);
  }
  function prevAct() {
    const cur = Math.max(0, activeStep - 1);
    if (cur > 0) scrollToAct(cur - 1);
  }

  // Cancel any animation on user wheel/touch
  useEffect(() => {
    function cancelOnUser() {
      if (programmaticRef.current) return;
      if (animRef.current) {
        cancelAnimationFrame(animRef.current);
        animRef.current = null;
      }
    }
    window.addEventListener("wheel", cancelOnUser, { passive: true });
    window.addEventListener("touchstart", cancelOnUser, { passive: true });
    return () => {
      window.removeEventListener("wheel", cancelOnUser);
      window.removeEventListener("touchstart", cancelOnUser);
    };
  }, []);

  /* Main render loop */
  useEffect(() => {
    let raf;
    let lastStep = -1;
    const captionBands = {
      chaos: [0.12, 0.16, 0.20, 0.24],
      activation: [0.24, 0.28, 0.34, 0.38],
      organize: [0.38, 0.42, 0.48, 0.52],
      pack: [0.52, 0.56, 0.60, 0.64],
      archive: [0.64, 0.68, 0.72, 0.76],
      ready: [0.76, 0.80, 0.84, 0.88],
      memory: [0.88, 0.92, 1.00, 1.05],
    };
    const captionEntries = Object.entries(captionBands);

    function frame() {
      const wrap = wrapRef.current;
      if (!wrap) return;
      const rect = wrap.getBoundingClientRect();
      const winH = window.innerHeight;
      const total = rect.height - winH;
      const scrolled = -rect.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      const t = performance.now();

      // Active act
      let step = 0;
      for (let i = ACTS.length - 1; i >= 0; i--) {
        if (p >= (i === 0 ? 0.08 : ACTS[i - 1].center + (ACTS[i].center - ACTS[i - 1].center) * 0.5)) {
          step = i + 1; break;
        }
      }
      if (step !== lastStep) { lastStep = step; setActiveStep(step); }

      // Hero fade
      if (heroRef.current) {
        const fade = 1 - smoothstep(0.04, 0.13, p);
        heroRef.current.style.opacity = String(fade);
        heroRef.current.style.transform = `translateY(${-30 * (1 - fade)}px)`;
        heroRef.current.style.pointerEvents = fade < 0.05 ? "none" : "auto";
      }
      if (scrollHintRef.current) {
        scrollHintRef.current.style.opacity = String(1 - smoothstep(0.02, 0.10, p));
      }

      // Captions
      for (const [k, b] of captionEntries) {
        const el = captionRefs.current[k];
        if (!el) continue;
        const fadeIn = smoothstep(b[0], b[1], p);
        const fadeOut = 1 - smoothstep(b[2], b[3], p);
        const o = fadeIn * fadeOut;
        el.style.opacity = String(o);
        el.style.transform = `translateY(${24 * (1 - fadeIn) + -16 * (1 - fadeOut)}px)`;
      }

      // Scan field
      if (scanRef.current) {
        const o = smoothstep(0.18, 0.30, p) * (1 - smoothstep(0.48, 0.58, p));
        scanRef.current.style.opacity = String(o);
      }

      // Docs
      const driftAmt = 1 - smoothstep(0.20, 0.36, p);
      const packAmt = smoothstep(0.50, 0.62, p);
      const docFadeOut = smoothstep(0.58, 0.66, p);

      for (let i = 0; i < docs.length; i++) {
        const d = docs[i];
        const el = docRefs.current[d.id];
        if (!el) continue;
        const dx = Math.sin(t * 0.0004 * d.speed + d.phase) * 22;
        const dy = Math.cos(t * 0.00035 * d.speed + d.phase * 1.1) * 18;
        const dz = Math.sin(t * 0.0003 * d.speed + d.phase * 1.5) * 28;
        const drx = Math.sin(t * 0.0003 + d.phase) * 5;
        const dry = Math.cos(t * 0.0004 + d.phase) * 8;

        const stackY = -120 - d.stackIdx * 4;
        const stackZ = -30 + d.stackIdx * 8;
        const stackX = d.catX;
        const stackRX = 8;
        const folderX = d.catX;
        const folderY = 30;
        const folderZ = 60;

        let bx, by, bz, brx, bry;
        if (p < 0.30) {
          bx = d.x0; by = d.y0; bz = d.z0; brx = d.rx0; bry = d.ry0;
        } else if (p < 0.50) {
          const lp = easeOutCubic(smoothstep(0.30, 0.50, p));
          bx = lerp(d.x0, stackX, lp);
          by = lerp(d.y0, stackY, lp);
          bz = lerp(d.z0, stackZ, lp);
          brx = lerp(d.rx0, stackRX, lp);
          bry = lerp(d.ry0, 0, lp);
        } else {
          const lp = easeOutCubic(packAmt);
          bx = lerp(stackX, folderX, lp);
          by = lerp(stackY, folderY, lp);
          bz = lerp(stackZ, folderZ, lp);
          brx = lerp(stackRX, 0, lp);
          bry = 0;
        }

        const fx = bx + dx * driftAmt;
        const fy = by + dy * driftAmt;
        const fz = bz + dz * driftAmt;
        const frx = brx + drx * driftAmt;
        const fry = bry + dry * driftAmt;

        const opacity = smoothstep(0.01, 0.06, p) * (1 - docFadeOut);
        const scale = lerp(1, 0.7, packAmt) * (1 - 0.25 * docFadeOut);

        el.style.opacity = String(opacity);
        el.style.transform = `translate3d(${fx}px, ${fy}px, ${fz}px) rotateX(${frx}deg) rotateY(${fry}deg) scale(${scale})`;
      }

      // Stack labels
      for (const c of CATS) {
        const el = stackRefs.current[c.id];
        if (!el) continue;
        const o = smoothstep(0.34, 0.44, p) * (1 - smoothstep(0.50, 0.58, p));
        el.style.opacity = String(o);
        el.style.transform = `translate(-50%, -50%) translate(${c.x}px, -160px) translateY(${-12 * (1 - o)}px)`;
      }

      // Folders
      for (const c of CATS) {
        const el = folderRefs.current[c.id];
        if (!el) continue;
        const appear = smoothstep(0.55, 0.63, p);
        const fadeOut = smoothstep(0.70, 0.78, p);
        const o = appear * (1 - fadeOut);
        const startX = c.x;
        const startY = 30;
        const startZ = 100;
        const shelfXMap = { legal: -125, finance: 125, hr: -125, comp: 125 };
        const shelfYMap = { legal: -85, finance: -85, hr: 55, comp: 55 };
        const archiveAmt = easeOutCubic(smoothstep(0.62, 0.74, p));
        const fx = lerp(startX, shelfXMap[c.id], archiveAmt);
        const fy = lerp(startY, shelfYMap[c.id], archiveAmt);
        const fz = lerp(startZ, -40, archiveAmt);
        const scale = lerp(1, 0.42, archiveAmt);
        const bob = (1 - archiveAmt) * Math.sin(t * 0.001 + c.x * 0.01) * 6;
        el.style.opacity = String(o);
        el.style.transform = `translate3d(${fx}px, ${fy + bob}px, ${fz}px) scale(${scale})`;
      }

      // Cabinet
      if (cabinetRef.current) {
        const appear = smoothstep(0.62, 0.74, p);
        const sIn = lerp(0.7, 1.0, easeOutCubic(appear));
        const chatTake = smoothstep(0.90, 0.97, p);
        const opacity = appear * (1 - chatTake * 0.85);
        const sFinal = lerp(1.0, 1.04, smoothstep(0.78, 0.88, p));
        const tilt = lerp(-10, 0, easeOutCubic(appear));
        const yLift = lerp(0, -20, chatTake);
        const scaleAtEnd = lerp(1, 0.94, chatTake);
        cabinetRef.current.style.opacity = String(opacity);
        cabinetRef.current.style.transform = `translateY(${yLift}px) rotateX(${tilt}deg) scale(${sIn * sFinal * scaleAtEnd})`;
        cabinetRef.current.style.filter = chatTake > 0.05 ? `blur(${chatTake * 4}px)` : "";
      }

      // Chat — lifted ~20px so it doesn't overlap the АКТ 07 caption card
      if (chatRef.current) {
        const appear = smoothstep(0.88, 0.96, p);
        const sIn = lerp(0.92, 1.0, easeOutCubic(appear));
        chatRef.current.style.opacity = String(appear);
        chatRef.current.style.transform = `translate(-50%, -50%) scale(${sIn}) translateY(${(1 - appear) * 24 - 20}px)`;
        chatRef.current.style.pointerEvents = appear > 0.85 ? "auto" : "none";
      }

      raf = requestAnimationFrame(frame);
    }
    frame();
    return () => cancelAnimationFrame(raf);
  }, [docs]);

  const showNav = activeStep >= 1;
  const curActIdx = Math.max(0, activeStep - 1);

  return (
    <section className="story-wrap" id="story" ref={wrapRef} data-screen-label="01 Кинематик">
      <div className="story-sticky">
        <div className="stage">
          <div className="stage-inner">
            <ScanField ref={scanRef} />
            <Cabinet ref={cabinetRef} />
            {docs.map((d) => (
              <DocCard key={d.id} doc={d} ref={(el) => (docRefs.current[d.id] = el)} />
            ))}
            {CATS.map((c) => (
              <Folder key={c.id} cat={c} ref={(el) => (folderRefs.current[c.id] = el)} />
            ))}
            {CATS.map((c) => (
              <StackLabel key={c.id} cat={c} refSet={(el) => (stackRefs.current[c.id] = el)} />
            ))}
            <ChatBlock ref={chatRef} />
          </div>
        </div>

        {/* Hero */}
        <div className="hero-overlay" ref={heroRef}>
          <div className="eyebrow">
            <span className="tag mono">ENTERPRISE AI · MVP</span>
            <span className="dot"></span>
            <span>Открыт приём заявок на пилот</span>
          </div>
          <h1>
            ИИ-агенты, которые<br />
            понимают <span className="accent">вашу компанию</span>
          </h1>
          <p className="sub">
            Превращаем хаос корпоративных документов в интеллектуальную
            организационную память. ProAgent изучает процессы, запоминает
            контекст и автоматизирует юридические и бухгалтерские задачи.
          </p>
          <div className="ctas">
            <button className="btn btn-primary" onClick={() => scrollToAct(0)}>
              <svg width="11" height="11" viewBox="0 0 12 12" fill="currentColor">
                <path d="M3 2.5L9.5 6L3 9.5V2.5Z" />
              </svg>
              Смотреть историю
            </button>
            <a className="btn btn-ghost" href={DEMO_WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
              Запросить демо
            </a>
          </div>
        </div>

        {/* Captions */}
        <Caption act="АКТ 01 · ДОКУМЕНТНЫЙ ХАОС" num="01"
          title="Тысячи документов. Ноль порядка."
          desc="Договоры, счета, политики, аудиты — компания тонет в бумагах каждый день."
          refSet={(el) => (captionRefs.current.chaos = el)} />
        <Caption act="АКТ 02 · АКТИВАЦИЯ" num="02"
          title="ProAgent активирован."
          desc="ИИ считывает каждый документ — структуру, смысл, контекст. За секунды."
          refSet={(el) => (captionRefs.current.activation = el)} />
        <Caption act="АКТ 03 · СОРТИРОВКА" num="03"
          title="Документы сортируются сами."
          desc="Право · Финансы · Кадры · Комплаенс. Без единого клика."
          refSet={(el) => (captionRefs.current.organize = el)} />
        <Caption act="АКТ 04 · УПАКОВКА" num="04"
          title="Знания обретают форму."
          desc="Стопки превращаются в папки с метаданными, версиями и источниками."
          refSet={(el) => (captionRefs.current.pack = el)} />
        <Caption act="АКТ 05 · АРХИВАЦИЯ" num="05"
          title="Один источник правды."
          desc="Весь архив — индексирован, версионирован, готов к аудиту в любой момент."
          refSet={(el) => (captionRefs.current.archive = el)} />
        <Caption act="АКТ 06 · ГОТОВНОСТЬ" num="06"
          title="3 064 документа. 0 потерь."
          desc="Архив подключён. Контекст распознан. ProAgent готов отвечать."
          refSet={(el) => (captionRefs.current.ready = el)} />
        <Caption act="АКТ 07 · ПАМЯТЬ" num="07"
          title="Спросите вашу компанию."
          desc="ProAgent знает всё: договоры, политики, счета. Ответ — за секунды."
          refSet={(el) => (captionRefs.current.memory = el)} />

        {/* Step rail */}
        <div className="step-rail">
          {ACTS.map((a, i) => {
            const idx = i + 1;
            const state = activeStep === idx ? "active" : activeStep > idx ? "done" : "";
            return (
              <button key={a.key} className={`item ${state}`} onClick={() => scrollToAct(i)}>
                <span className="bar"></span>
                <span className="num">{a.num}</span>
                <span>{a.label}</span>
              </button>
            );
          })}
        </div>

        {/* Scroll hint */}
        <div className="scroll-hint" ref={scrollHintRef}>
          <span>Нажмите Play или выберите этап</span>
          <span className="line"></span>
        </div>

        {/* Act navigator (prev/next) */}
        {showNav && (
          <div className="act-nav">
            <button
              className="act-nav-btn"
              onClick={prevAct}
              disabled={curActIdx <= 0}
              aria-label="Назад"
            >
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M10 3L5 8l5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <div className="act-nav-current">
              <div className="act-num mono">АКТ {ACTS[curActIdx].num}</div>
              <div className="act-label">{ACTS[curActIdx].label}</div>
            </div>
            <button
              className="act-nav-btn primary"
              onClick={nextAct}
              disabled={curActIdx >= ACTS.length - 1}
              aria-label="Далее"
            >
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============ Outro sections ============ */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.15 });
    ref.current.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  return ref;
}

function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <div className="brand">
          <svg width="26" height="26" viewBox="0 0 28 28" fill="none">
            <defs>
              <linearGradient id="bmG" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="oklch(0.94 0.06 var(--accent-h))" />
                <stop offset="100%" stopColor="oklch(0.55 0.15 var(--accent-h))" />
              </linearGradient>
            </defs>
            <rect x="2" y="2" width="24" height="24" rx="7" fill="url(#bmG)" opacity="0.2" />
            <rect x="2" y="2" width="24" height="24" rx="7" stroke="oklch(0.55 0.18 var(--accent-h))" strokeOpacity="0.55" />
            <circle cx="14" cy="14" r="3.5" fill="oklch(0.55 0.18 var(--accent-h))" />
            <circle cx="14" cy="14" r="7" fill="none" stroke="oklch(0.55 0.18 var(--accent-h))" strokeOpacity="0.7" />
            <circle cx="20.5" cy="14" r="1.4" fill="oklch(0.55 0.18 var(--accent-h))" />
            <circle cx="7.5" cy="14" r="1.4" fill="oklch(0.55 0.18 var(--accent-h))" />
          </svg>
          <span className="brand-name">Pro<span className="accent">Agent</span><span className="brand-tld mono">.kz</span></span>
        </div>
        <div className="nav-links">
          <a href="#story" onClick={(event) => {
            event.preventDefault();
            window.history.replaceState(null, "", "#story");
            window.dispatchEvent(new CustomEvent("proagent:story-act", { detail: { actIdx: 0 } }));
          }}>История</a>
          <a href="#benefits">Результаты</a>
          <a href="#cases">Применение</a>
          <a href="#demo">Демо</a>
        </div>
        <a className="btn btn-primary" style={{ padding: "11px 18px", fontSize: 13.5 }}
          href={DEMO_WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
          Запросить демо
          <svg className="arr" viewBox="0 0 12 12" fill="none"><path d="M2.5 6h7M6 2.5l3.5 3.5L6 9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </a>
      </div>
    </nav>
  );
}

const BENEFITS = [
  {
    stat: "×100", unit: "быстрее", title: "От часов к секундам",
    desc: "То, на что юрист тратит день — ИИ делает за минуту. Стороны, риски, ключевые условия — извлечены автоматически."
  },
  {
    stat: "KZ·RU·EN", unit: "", title: "Мультиязычно из коробки",
    desc: "Казахская смесь языков, форматов и сканов — один пайплайн. Без потерь смысла."
  },
  {
    stat: "On-prem", unit: "по умолчанию", title: "Суверенитет данных",
    desc: "Ваш периметр. Ваши данные. Ноль исходящего трафика — никаких компромиссов."
  },
];

function Benefits() {
  const ref = useReveal();
  return (
    <section className="section" id="benefits" data-screen-label="02 Результаты" ref={ref}>
      <div className="container">
        <div className="reveal">
          <div className="section-eyebrow mono">РЕЗУЛЬТАТ</div>
          <h2>Почему ProAgent,<br />а не обычный инструмент.</h2>
          <p className="lead">Мы строим платформу, которая умеет работать именно с казахстанскими корпоративными документами — на сложных языковых парах, в вашем контуре, по вашим правилам.</p>
        </div>
        <div className="benefits">
          {BENEFITS.map((b, i) => (
            <div className="benefit reveal" key={i} style={{ transitionDelay: `${i * 0.1}s` }}>
              <div className="stat">{b.stat}<span className="stat-unit">{b.unit}</span></div>
              <h3>{b.title}</h3>
              <p>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CASES = [
  {
    tag: "БАНКИ", title: "Кредиты — за минуты",
    desc: "Анализ заявок, сверка IBAN, БИН и подписей с реестрами — мгновенно. Решение в тот же день.",
    meta: "Кредит · KYC · комплаенс"
  },
  {
    tag: "ЮРИДИЧЕСКИЕ ОТДЕЛЫ", title: "Редлайн NDA за 3 минуты",
    desc: "Проверка по вашему плейбуку. Нестандартные условия и риски — подсвечены сразу.",
    meta: "Договоры · NDA · риски"
  },
  {
    tag: "БУХГАЛТЕРИЯ", title: "Закрытие месяца на автомате",
    desc: "Сверка счетов и выписок, классификация по налогам, регистры по НК РК — без рутины.",
    meta: "Сверка · НК РК · отчётность"
  },
  {
    tag: "КОРПОРАЦИИ", title: "Организационная память",
    desc: "Все политики и решения — в одном чате. Адаптация новых сотрудников за дни, не месяцы.",
    meta: "Граф знаний · долгая память"
  },
  {
    tag: "ОПЕРАЦИИ", title: "Процессы — на автопилоте",
    desc: "Многошаговые сценарии поверх почты и внутренних систем. Полный audit-log, human-in-the-loop.",
    meta: "Audit log · human-in-loop"
  },
  {
    tag: "ВАШ КЕЙС", title: "Если документы съедают команду",
    desc: "Мы строим ProAgent с реальными пилотами. Похоже на ваш процесс? Давайте поговорим.",
    meta: "Заявка на пилот →"
  },
];

function UseCases() {
  const ref = useReveal();
  return (
    <section className="section" id="cases" data-screen-label="03 Применение" ref={ref}>
      <div className="container">
        <div className="reveal">
          <div className="section-eyebrow mono">ДЛЯ КОГО</div>
          <h2>Создано для команд,<br />которые живут в документах.</h2>
          <p className="lead">Мы ищем пилотные команды в банках, юридических отделах, бухгалтерии и операциях — везде, где рутина с документами съедает время хороших специалистов.</p>
        </div>
        <div className="usecases">
          {CASES.map((c, i) => (
            <article className="usecase reveal" key={i} style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="tag mono">{c.tag}</div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="meta">
                <span>{c.meta}</span>
                <svg width="14" height="14" viewBox="0 0 12 12" fill="none"><path d="M3 9L9 3M9 3H4M9 3v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const ref = useReveal();
  return (
    <section className="final-cta" id="demo" data-screen-label="04 Демо" ref={ref}>
      <div className="container">
        <div className="reveal">
          <div className="section-eyebrow mono" style={{ textAlign: "center" }}>ЗАКАЗАТЬ КОРПОРАТИВНОЕ ДЕМО</div>
          <h2>
            Внедрите ИИ-агентов, обученных на <span className="accent">процессах, документах</span> и знаниях вашей компании.
          </h2>
          <p className="lead" style={{ marginLeft: "auto", marginRight: "auto" }}>
            45-минутная закрытая сессия с командой решений. Мы изучим ваши процессы, оценим on-premise внедрение и ответим на вопросы.
          </p>
          <div className="ctas">
            <a className="btn btn-primary" style={{ padding: "16px 28px", fontSize: 15 }}
              href={DEMO_WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
              Заказать демо
              <svg className="arr" viewBox="0 0 12 12" fill="none"><path d="M2.5 6h7M6 2.5l3.5 3.5L6 9.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <span>© 2026 ProAgent.kz · Алматы, Казахстан</span>
        <span>MVP · On-premise · приём заявок на пилот</span>
      </div>
    </footer>
  );
}

window.Story = Story;
window.Nav = Nav;
window.Benefits = Benefits;
window.UseCases = UseCases;
window.FinalCTA = FinalCTA;
window.Footer = Footer;