// Section components for DataLoop landing
const { useState, useEffect, useRef, useMemo } = React;

// -- LOGO MARK ------------------------------------------------
function LogoMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <rect x="2" y="2" width="28" height="28" rx="6" fill="currentColor" />
      <path
        d="M10 11 h6 a5 5 0 1 1 0 10 h-6 z M10 11 v10 M19.5 11.5 L13 21"
        stroke="var(--accent)"
        strokeWidth="2.4"
        strokeLinecap="square"
        fill="none"
      />
    </svg>
  );
}

// -- NAV ------------------------------------------------------
function Nav({ direction }) {
  const [open, setOpen] = useState(false);

  // close drawer on hash navigation or window resize past mobile breakpoint
  useEffect(() => {
    function onResize() { if (window.innerWidth > 880) setOpen(false); }
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  // lock body scroll while drawer is open
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const links = [
    { href: "#suggest",  label: "Подсказки" },
    { href: "#api",      label: "API" },
    { href: "#map",      label: "Геокодинг" },
    { href: "#features", label: "Возможности" },
    { href: "#pricing",  label: "Тарифы" },
    { href: "cabinet.html", label: "Кабинет" },
  ];

  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="logo" style={{ color: "var(--ink)" }}>
          <LogoMark />
          <span>dataloop<span className="dot">.</span>ru</span>
        </a>
        <div className="nav-links">
          {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-right">
          <div className="nav-status">
            <span className="status-dot"></span>
            <span>API · 28 мс · 99.99%</span>
          </div>
          <a href="#" className="btn btn-ghost nav-cta-login" style={{ height: 36 }}>Войти</a>
          <a href="#" className="btn btn-primary nav-cta-key" style={{ height: 36 }}>Ключ</a>
          <button
            className={`nav-burger ${open ? "open" : ""}`}
            aria-label="Меню"
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        className={`nav-drawer ${open ? "open" : ""}`}
        role="dialog"
        aria-hidden={!open}
      >
        <div className="nav-drawer-inner">
          <div className="nav-drawer-status">
            <span className="status-dot"></span>
            <span>все системы в норме · 28 мс</span>
          </div>
          <ul className="nav-drawer-list">
            {links.map((l) => (
              <li key={l.href}>
                <a href={l.href} onClick={() => setOpen(false)}>
                  <span>{l.label}</span>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                    <path d="M5 12h14M13 5l7 7-7 7" />
                  </svg>
                </a>
              </li>
            ))}
          </ul>
          <div className="nav-drawer-cta">
            <a href="#" className="btn btn-ghost btn-lg" style={{ flex: 1, justifyContent: "center" }}>Войти</a>
            <a href="#" className="btn btn-primary btn-lg" style={{ flex: 1, justifyContent: "center" }}>Создать ключ</a>
          </div>
        </div>
      </div>
      {open && <div className="nav-scrim" onClick={() => setOpen(false)} />}
    </nav>
  );
}

// -- HERO -----------------------------------------------------
function Hero({ children, direction }) {
  return (
    <header className="hero">
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow">v3 · API очистки адресов</div>
          <h1>
            Адреса{" "}
            <em>под&nbsp;ключ</em>
            <br />
            для&nbsp;ваших&nbsp;форм{" "}
            и&nbsp;баз.
          </h1>
          <p className="hero-sub">
            Подсказки по ФИАС, нормализация, геокодинг и обратное преобразование координат —
            одной строкой кода. SDK для шести языков, бесплатные 10 000 запросов в день.
          </p>
          <div className="hero-cta">
            <a href="#suggest" className="btn btn-primary btn-lg">
              Открыть песочницу →
            </a>
            <a href="#api" className="btn btn-ghost btn-lg">
              Документация API
            </a>
          </div>
          <div className="hero-meta">
            <div>
              <b>28 мс</b>
              медиана ответа
            </div>
            <div>
              <b>1.7 М</b>
              населённых пунктов
            </div>
            <div>
              <b>10 000</b>
              запросов/сутки бесплатно
            </div>
          </div>
        </div>
        {children}
      </div>
    </header>
  );
}

// -- SAGGEST WIDGET -------------------------------------------
function Saggest({ onSelect }) {
  const { ADDRESSES } = window.__DATA;
  const [q, setQ] = useState("тверская 12");
  const [active, setActive] = useState(0);
  const [focus, setFocus] = useState(false);

  const matches = useMemo(() => {
    if (!q.trim()) return ADDRESSES.slice(0, 5);
    const lower = q.toLowerCase();
    const scored = ADDRESSES.map((a) => {
      const t = a.full.toLowerCase();
      let score = 0;
      lower.split(/\s+/).forEach((tok) => {
        if (tok && t.includes(tok)) score += 10 + tok.length;
      });
      if (t.startsWith(lower)) score += 30;
      return { a, score };
    });
    return scored
      .filter((s) => s.score > 0)
      .sort((x, y) => y.score - x.score)
      .slice(0, 5)
      .map((s) => s.a);
  }, [q]);

  useEffect(() => { setActive(0); }, [q]);

  function highlight(text) {
    if (!q.trim()) return text;
    const toks = q.toLowerCase().split(/\s+/).filter(Boolean);
    let parts = [{ t: text, hl: false }];
    toks.forEach((tok) => {
      const next = [];
      parts.forEach((p) => {
        if (p.hl) { next.push(p); return; }
        const idx = p.t.toLowerCase().indexOf(tok);
        if (idx === -1) { next.push(p); return; }
        next.push({ t: p.t.slice(0, idx), hl: false });
        next.push({ t: p.t.slice(idx, idx + tok.length), hl: true });
        next.push({ t: p.t.slice(idx + tok.length), hl: false });
      });
      parts = next;
    });
    return parts.map((p, i) => p.hl ? <mark key={i} className="hl">{p.t}</mark> : <span key={i}>{p.t}</span>);
  }

  return (
    <div className="saggest-card" id="suggest">
      <div className="saggest-head">
        <div className="tab-dots">
          <span className="tab-dot"></span>
          <span className="tab-dot"></span>
          <span className="tab-dot"></span>
        </div>
        <div className="saggest-head-title">POST /v1/suggest/address</div>
      </div>
      <div className="saggest-input-wrap">
        <div className="saggest-label">→ Введите начало адреса</div>
        <input
          className="saggest-input"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
          onKeyDown={(e) => {
            if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(matches.length - 1, a + 1)); }
            if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(0, a - 1)); }
            if (e.key === "Enter" && matches[active]) { setQ(matches[active].full); onSelect && onSelect(matches[active]); }
          }}
          placeholder="например: тверская 12"
          aria-label="Адрес"
        />
      </div>
      <div className="saggest-list">
        {matches.length === 0 && (
          <div style={{ padding: "24px 18px", color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 13 }}>
            // нет совпадений · попробуйте другой запрос
          </div>
        )}
        {matches.map((a, i) => (
          <div
            key={i}
            className={`saggest-item ${i === active ? "active" : ""}`}
            onMouseEnter={() => setActive(i)}
            onClick={() => { setQ(a.full); onSelect && onSelect(a); }}
          >
            <div className="saggest-item-num">{String(i + 1).padStart(2, "0")}</div>
            <div style={{ flex: 1 }}>
              <div className="saggest-item-text">{highlight(a.full)}</div>
              <div className="saggest-item-meta">
                {a.postal} · {a.fias.slice(0, 18)} · {a.lat.toFixed(4)}, {a.lon.toFixed(4)}
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="saggest-foot">
        <span>
          <span className="kbd">↑</span> <span className="kbd">↓</span> навигация
          {"   "}
          <span className="kbd">↵</span> выбор
        </span>
        <span>{matches.length} результат(ов) · 14 мс</span>
      </div>
    </div>
  );
}

// -- API CODE BLOCK (moved to api-block.jsx) --------------------
function ApiBlockLegacy_UNUSED() {
  const { CODE_SAMPLES } = window.__DATA;
  const [tab, setTab] = useState("curl");
  const [copied, setCopied] = useState(false);

  const tabs = [
    { k: "curl", l: "cURL" },
    { k: "js", l: "Node.js" },
    { k: "python", l: "Python" },
    { k: "go", l: "Go" },
  ];

  const lines = CODE_SAMPLES[tab];

  function copy() {
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  }

  return (
    <div className="api-block" id="api">
      <div className="api-side">
        <div className="api-side-head">
          <div className="api-tabs">
            {tabs.map((t) => (
              <button
                key={t.k}
                className={`api-tab ${tab === t.k ? "active" : ""}`}
                onClick={() => setTab(t.k)}
              >
                {t.l}
              </button>
            ))}
          </div>
          <button className="api-copy" onClick={copy}>
            {copied ? "✓ скопировано" : "копировать"}
          </button>
        </div>
        <div>
          {lines.map((ln, i) => (
            <span className="api-line" key={i}>
              {ln.c && <span className={ln.cls || "tok-kw"}>{ln.c}</span>}
              <span>{ln.t}</span>
              {ln.end && <span className={ln.cls || "tok-str"}>{ln.end}</span>}
            </span>
          ))}
        </div>
      </div>
      <div className="api-side">
        <div className="api-side-head">
          <span className="api-side-title">Ответ · 200 OK</span>
          <span className="api-side-title" style={{ color: "var(--accent)" }}>↘ 14 мс</span>
        </div>
        <div>
          <span className="api-line">{"{"}</span>
          <span className="api-line">  <span className="tok-key">"suggestions"</span>: [</span>
          <span className="api-line">    {"{"}</span>
          <span className="api-line">      <span className="tok-key">"value"</span>: <span className="tok-acc">"г Москва, ул Тверская, д 12 стр 9"</span>,</span>
          <span className="api-line">      <span className="tok-key">"unrestricted"</span>: <span className="tok-str">"125009, г Москва, ул Тверская, д 12 стр 9"</span>,</span>
          <span className="api-line">      <span className="tok-key">"data"</span>: {"{"}</span>
          <span className="api-line">        <span className="tok-key">"postal_code"</span>: <span className="tok-str">"125009"</span>,</span>
          <span className="api-line">        <span className="tok-key">"region"</span>: <span className="tok-str">"Москва"</span>,</span>
          <span className="api-line">        <span className="tok-key">"city"</span>: <span className="tok-str">"Москва"</span>,</span>
          <span className="api-line">        <span className="tok-key">"street"</span>: <span className="tok-str">"Тверская"</span>,</span>
          <span className="api-line">        <span className="tok-key">"house"</span>: <span className="tok-str">"12 стр 9"</span>,</span>
          <span className="api-line">        <span className="tok-key">"fias_id"</span>: <span className="tok-str">"8da95206-5d3a-..."</span>,</span>
          <span className="api-line">        <span className="tok-key">"geo_lat"</span>: <span className="tok-num">55.7616</span>,</span>
          <span className="api-line">        <span className="tok-key">"geo_lon"</span>: <span className="tok-num">37.6062</span>,</span>
          <span className="api-line">        <span className="tok-key">"qc"</span>: <span className="tok-num">0</span>  <span className="tok-c">// точность: дом</span></span>
          <span className="api-line">      {"}"}</span>
          <span className="api-line">    {"}"}</span>
          <span className="api-line">  ]</span>
          <span className="api-line">{"}"}</span>
        </div>
      </div>
    </div>
  );
}

// -- MAP / GEO (moved to map-block.jsx) -----------------------
function MapBlockLegacy_UNUSED() {
  const { MAP_PINS } = window.__DATA;
  const [active, setActive] = useState(MAP_PINS[1]);
  const [mouse, setMouse] = useState({ x: 50, y: 50, lat: 55.7558, lon: 37.6173 });
  const canvasRef = useRef(null);

  function onMove(e) {
    const r = canvasRef.current.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width) * 100;
    const y = ((e.clientY - r.top) / r.height) * 100;
    // synthesise lat/lon from x,y (just for display)
    const lat = 65 - (y / 100) * 25;
    const lon = 30 + (x / 100) * 110;
    setMouse({ x, y, lat, lon });
  }

  const a = active.addr;

  return (
    <div className="map-block" id="map">
      <div className="map-canvas" ref={canvasRef} onMouseMove={onMove}>
        {/* stylised russia silhouette */}
        <svg className="map-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs>
            <pattern id="dots" width="3" height="3" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="0.5" fill="var(--ink-3)" opacity="0.35" />
            </pattern>
          </defs>
          {/* a loose russia-like outline (decorative) */}
          <path
            d="M 6 30 L 12 22 L 22 18 L 30 14 L 40 12 L 50 14 L 58 12 L 68 16 L 78 14 L 88 18 L 94 26 L 92 36 L 88 42 L 84 50 L 78 56 L 72 62 L 78 70 L 70 76 L 60 80 L 50 82 L 40 80 L 32 76 L 26 80 L 18 78 L 14 70 L 10 62 L 8 50 L 10 42 Z"
            fill="url(#dots)"
            stroke="var(--ink-3)"
            strokeWidth="0.15"
            opacity="0.85"
          />
          {/* connecting line to selected pin */}
          {MAP_PINS.map((p) => (
            <circle key={p.id} cx={p.x} cy={p.y} r="0.6" fill="var(--ink-3)" opacity="0.6" />
          ))}
        </svg>

        {MAP_PINS.map((p) => (
          <button
            key={p.id}
            className={`map-pin ${active.id === p.id ? "active" : ""}`}
            style={{ left: `${p.x}%`, top: `${p.y}%` }}
            onClick={() => setActive(p)}
            aria-label={p.addr.city}
          >
            <div className="map-pin-body"><span>{p.label}</span></div>
          </button>
        ))}

        <div className="map-coord-readout">
          курсор: <b>{mouse.lat.toFixed(4)}</b>, <b>{mouse.lon.toFixed(4)}</b>
          {"  "}
          · ↓ POST /v1/geocode/reverse
        </div>
      </div>

      <div className="map-info">
        <div className="map-info-label">→ Точка <b style={{ color: "var(--accent)" }}>{active.label}</b> · обратный геокодинг</div>
        <div className="map-info-addr">{a.full}</div>
        <div className="map-fields">
          <div>
            <div className="map-field-label">Регион</div>
            <div className="map-field-value">{a.region}</div>
          </div>
          <div>
            <div className="map-field-label">Город</div>
            <div className="map-field-value">{a.city}</div>
          </div>
          <div>
            <div className="map-field-label">Индекс</div>
            <div className="map-field-value mono">{a.postal}</div>
          </div>
          <div>
            <div className="map-field-label">ОКАТО</div>
            <div className="map-field-value mono">{a.okato}</div>
          </div>
          <div>
            <div className="map-field-label">Широта</div>
            <div className="map-field-value mono">{a.lat.toFixed(6)}</div>
          </div>
          <div>
            <div className="map-field-label">Долгота</div>
            <div className="map-field-value mono">{a.lon.toFixed(6)}</div>
          </div>
          <div style={{ gridColumn: "1 / -1" }}>
            <div className="map-field-label">ФИАС</div>
            <div className="map-field-value mono" style={{ wordBreak: "break-all" }}>{a.fias}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// -- FEATURES -------------------------------------------------
function FeatureIcon({ kind }) {
  const props = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6 };
  switch (kind) {
    case "suggest":
      return <svg {...props}><path d="M3 6h14M3 12h10M3 18h7" /><circle cx="20" cy="18" r="3" stroke="var(--accent)" /></svg>;
    case "geocode":
      return <svg {...props}><circle cx="12" cy="10" r="4" /><path d="M12 14v8M6 22h12" stroke="var(--accent)" /></svg>;
    case "reverse":
      return <svg {...props}><path d="M3 12h14M14 8l4 4-4 4" /><path d="M21 4v16" stroke="var(--accent)" /></svg>;
    case "norm":
      return <svg {...props}><path d="M4 6h16M4 12h10M4 18h16" /><circle cx="18" cy="12" r="3" stroke="var(--accent)" /></svg>;
    case "hier":
      return <svg {...props}><rect x="3" y="3" width="6" height="6" /><rect x="15" y="3" width="6" height="6" stroke="var(--accent)" /><rect x="9" y="15" width="6" height="6" /><path d="M6 9v3h12V9M12 12v3" /></svg>;
    case "fuzzy":
      return <svg {...props}><circle cx="11" cy="11" r="7" /><path d="m17 17 4 4" stroke="var(--accent)" /></svg>;
    case "batch":
      return <svg {...props}><rect x="3" y="4" width="18" height="4" /><rect x="3" y="10" width="18" height="4" stroke="var(--accent)" /><rect x="3" y="16" width="18" height="4" /></svg>;
    case "fias":
      return <svg {...props}><path d="M4 20V8l8-5 8 5v12" /><path d="M9 20v-6h6v6" stroke="var(--accent)" /></svg>;
    case "sla":
      return <svg {...props}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" stroke="var(--accent)" /></svg>;
    default: return null;
  }
}

function FeaturesLegacy_UNUSED() {
  const items = [
    { k: "suggest", t: "Подсказки на лету", d: "Авто-дополнение от региона до квартиры, разрезано на токены и нормализовано. До 25 подсказок за 14 мс.", tag: "/suggest" },
    { k: "geocode", t: "Прямой геокодинг", d: "Адрес → координаты с точностью до подъезда. Покрытие 1.7 М населённых пунктов РФ.", tag: "/geocode" },
    { k: "reverse", t: "Обратный геокодинг", d: "Координаты → структурированный адрес ФИАС. Возвращаем 32 поля включая ОКАТО, ОКТМО, индекс.", tag: "/reverse" },
    { k: "norm", t: "Нормализация ФИАС", d: "Распарсенные части адреса: регион, город, улица, дом, квартира. Сокращения по ФИАС.", tag: "/parse" },
    { k: "fuzzy", t: "Поиск с опечатками", d: "Fuzzy-матчинг по двойной метафонии. \"Тверска 12\" найдёт Тверскую без проблем.", tag: "/fuzzy" },
    { k: "fias", t: "Актуальные базы", d: "Ежесуточная синхронизация с ФИАС, КЛАДР, ЕГРЮЛ. Гарантия свежести данных.", tag: "ФИАС/КЛАДР" },
    { k: "batch", t: "Пакетная обработка", d: "До 50 000 адресов за один батч-запрос, CSV/JSONL на входе и выходе.", tag: "/batch" },
    { k: "hier", t: "Дерево адресов", d: "Иерархия от субъекта РФ до квартиры. Удобно для каталогов и отчётности.", tag: "/tree" },
    { k: "sla", t: "SLA 99.99%", d: "Два дата-центра в Москве и Питере, гео-резервирование, мониторинг 24/7.", tag: "SLA" },
  ];
  return (
    <div className="features" id="features">
      {items.map((it, i) => (
        <div className="feature" key={i}>
          <div className="feature-tag mono">{it.tag}</div>
          <div className="feature-icon"><FeatureIcon kind={it.k} /></div>
          <h3>{it.t}</h3>
          <p>{it.d}</p>
        </div>
      ))}
    </div>
  );
}

// -- STATS ----------------------------------------------------
function Stats() {
  const items = [
    { num: "28", unit: "мс", label: "медианное время ответа" },
    { num: "1.7", unit: "М", label: "населённых пунктов" },
    { num: "99.99", unit: "%", label: "годовая доступность" },
    { num: "240", unit: "млрд", label: "запросов обработано" },
  ];
  return (
    <div className="stats-strip">
      {items.map((s, i) => (
        <div className="stat" key={i}>
          <div className="stat-num">
            {s.num}<span className="unit">{s.unit}</span>
          </div>
          <div className="stat-label">{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// -- MARQUEE --------------------------------------------------
function Marquee() {
  const words = ["ФИАС", "КЛАДР", "ЕГРЮЛ", "Геокодинг", "Suggest", "Нормализация", "Batch", "Webhooks", "SDK"];
  const items = [...words, ...words];
  return (
    <div className="marquee-wrap">
      <div className="marquee">
        {items.map((w, i) => <div className="marquee-item" key={i}>{w}</div>)}
      </div>
    </div>
  );
}

// -- PRICING (replaced by calculator.jsx) ---------------------
function PricingLegacy_UNUSED() {
  const tiers = [
    {
      name: "Старт",
      price: "0",
      per: "₽/мес",
      meta: "Для пет-проектов и проверки гипотез",
      cta: "Создать ключ",
      feats: [
        "10 000 запросов в сутки",
        "Подсказки + нормализация",
        "Прямой и обратный геокодинг",
        "SDK для всех языков",
        "Только публичный rate-limit",
      ],
    },
    {
      name: "Прод",
      price: "9 800",
      per: "₽/мес",
      meta: "Боевой продакшен · оплата помесячно",
      popular: true,
      cta: "Подключить тариф",
      feats: [
        "500 000 запросов в сутки",
        "SLA 99.95%, ответ < 50 мс",
        "Пакетная обработка batch",
        "Webhooks и стриминг",
        "Поддержка в Telegram · 4 ч",
      ],
    },
    {
      name: "Энтерпрайз",
      price: "по запросу",
      per: "",
      meta: "Свой контур, банки и госсектор",
      cta: "Связаться",
      feats: [
        "On-premise установка",
        "Персональный SLA до 99.99%",
        "Юр.лицо РФ · договор · акты",
        "Выделенный аккаунт-менеджер",
        "Аудит ИБ и пентест",
      ],
    },
  ];
  return (
    <div className="pricing" id="pricing">
      {tiers.map((t, i) => (
        <div className={`tier ${t.popular ? "popular" : ""}`} key={i}>
          {t.popular && <div className="tier-badge">★ выбор большинства</div>}
          <div className="tier-name">{t.name}</div>
          <div>
            <div className="tier-price">
              {t.price === "по запросу" ? (
                <span style={{ fontSize: 28 }}>по запросу</span>
              ) : (
                <>
                  <span>{t.price}</span>
                  <span className="per">{t.per}</span>
                </>
              )}
            </div>
            <div className="tier-meta" style={{ marginTop: 6 }}>{t.meta}</div>
          </div>
          <ul className="tier-features">
            {t.feats.map((f, j) => <li className="tier-feature" key={j}>{f}</li>)}
          </ul>
          <button
            className={`btn ${t.popular ? "btn-primary" : "btn-ghost"}`}
            style={{ width: "100%", justifyContent: "center", marginTop: "auto" }}
          >
            {t.cta} →
          </button>
        </div>
      ))}
    </div>
  );
}

// -- USE CASES (removed) --------------------------------------
function UseCasesLegacy_UNUSED() {
  const cases = [
    { n: "01", t: "E-commerce и доставка", d: "Подсказки при оформлении заказа сокращают долю неверных адресов на 78%. Меньше брошенных корзин, меньше возвратов с курьерами." },
    { n: "02", t: "Финтех и КYC", d: "Нормализация под ФИАС, валидация паспортных регионов, готовая выгрузка для отчётности в ЦБ. Соответствие 115-ФЗ из коробки." },
    { n: "03", t: "CRM и аналитика", d: "Геокодирование клиентской базы для тепловых карт и сегментации. Иерархия адресов для отчётов по регионам и федеральным округам." },
    { n: "04", t: "Госуслуги и подряд", d: "On-premise установка, контур без интернета, выгрузка ФИАС внутри периметра. Опыт интеграций с госсектором и муниципалитетами." },
  ];
  return (
    <div className="usecases">
      {cases.map((c, i) => (
        <div className="usecase" key={i}>
          <div className="usecase-num">{c.n} →</div>
          <div>
            <h4>{c.t}</h4>
            <p>{c.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

// -- CTA ------------------------------------------------------
function Cta() {
  return (
    <div className="cta-block">
      <div className="cta-bg-grid"></div>
      <div style={{ position: "relative" }}>
        <div className="eyebrow" style={{ color: "color-mix(in oklab, var(--bg) 60%, transparent)", justifyContent: "center", display: "flex" }}>
          ОТКРЫТЬ ПЕСОЧНИЦУ
        </div>
        <h2>
          API уже работает.<br />
          <em>Подключите за 4&nbsp;минуты.</em>
        </h2>
        <p>Бесплатные 10 000 запросов в сутки. Карта не нужна. Откройте ключ — и начинайте парсить адреса прямо из терминала.</p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="#" className="btn btn-primary btn-lg">Создать ключ</a>
          <a href="#" className="btn btn-ghost btn-lg">Прочитать доку</a>
        </div>
      </div>
    </div>
  );
}

// -- FOOTER ---------------------------------------------------
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="logo" style={{ color: "var(--ink)" }}>
              <LogoMark />
              <span>dataloop<span className="dot">.</span>ru</span>
            </a>
            <p>API для работы с российскими адресами. ФИАС, КЛАДР, геокодинг и поиск.</p>
            <div className="nav-status">
              <span className="status-dot"></span>
              <span>все системы в норме</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>Продукт</h5>
            <ul>
              <li><a href="#suggest">Подсказки</a></li>
              <li><a href="#api">API и SDK</a></li>
              <li><a href="#map">Геокодинг</a></li>
              <li><a href="#features">Возможности</a></li>
              <li><a href="#pricing">Тарифы</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Разработчику</h5>
            <ul>
              <li><a href="cabinet.html">Личный кабинет</a></li>
              <li><a href="#">Песочница</a></li>
              <li><a href="#">Changelog</a></li>
              <li><a href="#">Статус-страница</a></li>
              <li><a href="#">GitHub</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Юр. документы</h5>
            <ul>
              <li><a href="#">Оферта</a></li>
              <li><a href="#">Политика данных</a></li>
              <li><a href="#">152-ФЗ</a></li>
              <li><a href="#">Контакты</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 ООО «Датаклуп» · ИНН 9710087453</div>
          <div>made in ru · v3.8.2 · вакансии · о сервисе</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, Saggest, Stats, Marquee, Cta, Footer, LogoMark,
});