/* page-360.jsx — Landing для /360 безкоштовного AI-аудиту */

// ─── Brand mark (наш фірмовий знак — блискавка-літера S) ───
function BrandMark({ size = 36 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={{ display: "block" }}>
      <defs>
        <linearGradient id="sp-bg" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="oklch(0.78 0.22 285)"/>
          <stop offset="1" stopColor="oklch(0.55 0.22 285)"/>
        </linearGradient>
        <linearGradient id="sp-bolt" x1="0" y1="0" x2="0" y2="40" gradientUnits="userSpaceOnUse">
          <stop offset="0" stopColor="oklch(0.99 0.05 285)"/>
          <stop offset="1" stopColor="oklch(0.92 0.1 285)"/>
        </linearGradient>
      </defs>
      <rect width="40" height="40" rx="10" fill="url(#sp-bg)"/>
      <path d="M22 6 L11 22 L18 22 L15 34 L29 16 L21 16 L24 6 Z"
        fill="url(#sp-bolt)"
        style={{ filter: "drop-shadow(0 1px 3px oklch(0 0 0 / 0.3))" }}/>
    </svg>
  );
}

// ─── Inline brand icons ─────────────────────────────────────
const IconBolt = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M13 2 L4 14 L11 14 L9 22 L20 10 L13 10 L15 2 Z"/>
  </svg>
);
const IconMail = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="14" rx="2"/>
    <path d="m3 7 9 6 9-6"/>
  </svg>
);
const IconGlobe = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9"/>
    <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
  </svg>
);


const AUDIT_CATEGORIES = [
  { id: "tech",   icon: "⚙",  title: "Технічне SEO",        n: 8, color: "var(--brand-2)",
    checks: ["robots.txt валідний", "sitemap.xml + lastmod", "HTTPS + HSTS", "canonical коректні", "hreflang", "404 / 5xx моніторинг", "rel=next/prev", "redirect chains"] },
  { id: "ai",     icon: "✦",  title: "Готовність до AI",    n: 6, color: "var(--brand)",
    checks: ["llms.txt присутній", "llms-full.txt", "robots для GPTBot/ClaudeBot", "IndexNow", "FAQ-капсули", "цитованість ChatGPT/Claude/Gemini"] },
  { id: "eeat",   icon: "★",  title: "E-E-A-T сигнали",     n: 5, color: "var(--pos)",
    checks: ["Author schema", "About / Contact сторінки", "Privacy / Terms", "Reviews / Trustpilot", "External authority links"] },
  { id: "schema", icon: "⌘",  title: "Schema.org розмітка", n: 5, color: "var(--warn)",
    checks: ["Organization", "BreadcrumbList", "Product / Article", "FAQPage / HowTo", "Validation no errors"] },
  { id: "cwv",    icon: "⚡", title: "Core Web Vitals",     n: 4, color: "var(--info)",
    checks: ["LCP < 2.5s", "CLS < 0.1", "INP < 200ms", "TTFB < 600ms"] },
  { id: "content",icon: "≡",  title: "Контент і структура", n: 4, color: "var(--neg)",
    checks: ["H1 унікальний на сторінці", "Meta title 50-60 симв.", "Дублі контенту", "Глибина < 4 кліки"] },
];

// ─── Live ticker з усіх перевірок ─────────────────────────────────
function CheckTicker() {
  const allChecks = AUDIT_CATEGORIES.flatMap(c => c.checks.map(text => ({ text, color: c.color, icon: c.icon })));
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % allChecks.length), 1400);
    return () => clearInterval(t);
  }, [allChecks.length]);
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "6px 14px",
      background: "oklch(from var(--bg-2) l c h / 0.6)",
      border: "1px solid var(--line)",
      borderRadius: 999,
      fontSize: 12, color: "var(--fg-2)",
      fontFamily: "var(--font-mono)",
      minWidth: 320,
    }}>
      <span style={{ display: "inline-block", width: 7, height: 7, borderRadius: "50%", background: "var(--pos)", boxShadow: "0 0 8px var(--pos)", animation: "pulse-soft 1.4s ease-in-out infinite" }}/>
      <span style={{ color: allChecks[idx].color }}>{allChecks[idx].icon}</span>
      <span key={idx} style={{ animation: "fadeIn 0.3s ease-out" }}>{allChecks[idx].text}</span>
    </div>
  );
}

// ─── Hero — головний блок ────────────────────────────────────────
function Hero360() {
  const [url, setUrl] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [scanning, setScanning] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");

  const onSubmit = async (e) => {
    e?.preventDefault();
    setErrorMsg("");
    if (!url) { setErrorMsg("Введіть домен"); return; }
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setErrorMsg("Введіть валідний email"); return; }
    const domain = url.startsWith("http") ? url : "https://" + url;
    setScanning(true);
    try {
      const r = await fetch("/api/public/spalah360/start", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ domain: domain.trim(), email: email.trim(), utm: (function(){ try { const q = new URLSearchParams(window.location.search); return { source: q.get("utm_source")||"", medium: q.get("utm_medium")||"", campaign: q.get("utm_campaign")||"", term: q.get("utm_term")||"", content: q.get("utm_content")||"" }; } catch(_){ return {}; } })() }),
      });
      const d = await r.json();
      if (!r.ok) { setErrorMsg(d.error || "Помилка запуску"); setScanning(false); return; }
      if (d.token) { window.location.href = "/360/r/" + d.token; return; }
      setErrorMsg("Не вдалося запустити. Спробуйте ще раз."); setScanning(false);
    } catch (err) { setErrorMsg("Помилка з'єднання"); setScanning(false); }
  };

  return (
    <section style={{ position: "relative", padding: "clamp(40px, 8vw, 80px) 0 40px", textAlign: "center" }}>
      {/* Глобальний glow за заголовком */}
      <div style={{
        position: "absolute", left: "50%", top: 120,
        transform: "translateX(-50%)",
        width: 720, height: 380,
        background: "radial-gradient(ellipse, oklch(from var(--brand) l c h / 0.25), transparent 70%)",
        filter: "blur(40px)", pointerEvents: "none", zIndex: 0,
      }}/>

      <div style={{ position: "relative", zIndex: 1 }}>
        <CheckTicker/>

        <h1 style={{
          margin: "26px 0 18px",
          fontSize: "clamp(48px, 8vw, 92px)",
          fontWeight: 700,
          letterSpacing: "-0.04em",
          lineHeight: 0.95,
        }}>
          <span style={{
            background: "linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 50%, oklch(0.78 0.22 350) 100%)",
            WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>AI-аудит сайту</span>
          <br/>
          <span style={{ color: "var(--fg-0)" }}>за 30 секунд</span>
        </h1>

        <p style={{
          maxWidth: 620, margin: "0 auto 38px",
          fontSize: 16.5, lineHeight: 1.6, color: "var(--fg-2)",
        }}>
          Перевіримо ваш сайт за <strong style={{ color: "var(--fg-0)" }}>30+ показниками</strong>: технічне SEO,
          готовність до AI-пошуку (ChatGPT, Claude, Gemini), E-E-A-T сигнали, Schema-розмітка, Core Web Vitals.
          Отримаєте красивий звіт із діагнозом і рекомендаціями.
        </p>

        {/* Форма */}
        <form onSubmit={onSubmit} style={{
          maxWidth: 560, margin: "0 auto",
          padding: 18,
          background: "linear-gradient(180deg, oklch(from var(--bg-2) l c h / 0.7), oklch(from var(--bg-1) l c h / 0.5))",
          border: "1px solid var(--line)",
          borderRadius: 16,
          backdropFilter: "blur(20px)",
          WebkitBackdropFilter: "blur(20px)",
          position: "relative",
          overflow: "hidden",
        }}>
          {scanning && (
            <div style={{
              position: "absolute", top: 0, left: 0, right: 0, height: 2,
              background: `linear-gradient(90deg, transparent, var(--brand-2), transparent)`,
              animation: "scan-sweep 1.2s linear infinite",
            }}/>
          )}

          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {/* URL field */}
            <div style={{
              position: "relative",
              display: "flex", alignItems: "center", gap: 12,
              padding: "0 14px",
              height: 52,
              background: "oklch(from var(--bg-0) l c h / 0.6)",
              border: "1px solid var(--line-2)",
              borderRadius: 10,
            }}>
              <span style={{ color: "var(--brand-2)", display: "inline-flex" }}><IconGlobe size={16}/></span>
              <span style={{ color: "var(--fg-3)", fontFamily: "var(--font-mono)", fontSize: 13 }}>https://</span>
              <input value={url} onChange={e => setUrl(e.target.value)}
                placeholder="example.com"
                style={{
                  flex: 1, background: "transparent", border: 0, outline: 0,
                  color: "var(--fg-0)", fontSize: 15, fontFamily: "var(--font-mono)",
                }}/>
            </div>
            {/* Email field */}
            <div style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "0 14px",
              height: 52,
              background: "oklch(from var(--bg-0) l c h / 0.6)",
              border: "1px solid var(--line-2)",
              borderRadius: 10,
            }}>
              <span style={{ color: "var(--fg-3)", display: "inline-flex" }}><IconMail size={16}/></span>
              <input value={email} onChange={e => setEmail(e.target.value)}
                type="email"
                placeholder="ваш-email@приклад.com"
                style={{
                  flex: 1, background: "transparent", border: 0, outline: 0,
                  color: "var(--fg-0)", fontSize: 14, fontFamily: "var(--font-sans)",
                }}/>
            </div>
            {/* Submit */}
            <button type="submit" disabled={scanning} style={{
              height: 56, marginTop: 4,
              border: 0,
              borderRadius: 10,
              background: scanning
                ? "oklch(from var(--brand) l c h / 0.4)"
                : "linear-gradient(135deg, oklch(0.78 0.22 285), oklch(0.65 0.24 285))",
              color: "white",
              fontSize: 16, fontWeight: 600,
              fontFamily: "var(--font-sans)",
              cursor: scanning ? "wait" : "pointer",
              boxShadow: "0 8px 32px oklch(from var(--brand) l c h / 0.35), 0 0 0 1px oklch(from var(--brand) l c h / 0.4) inset",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
              transition: "transform 0.15s",
              position: "relative", overflow: "hidden",
            }}>
              {scanning ? (
                <>
                  <span style={{
                    width: 16, height: 16, borderRadius: "50%",
                    border: "2px solid oklch(1 0 0 / 0.3)",
                    borderTopColor: "white",
                    animation: "spin 0.8s linear infinite",
                  }}/>
                  <span>Сканую {url}...</span>
                </>
              ) : (
                <>
                  <IconBolt size={18}/>
                  <span>Зробити аудит безкоштовно</span>
                </>
              )}
            </button>
          </div>

          <div style={{
            marginTop: 14, textAlign: "center",
            fontSize: 11.5, color: "var(--fg-3)",
          }}>
            <span style={{ color: "var(--pos)" }}>●</span> Email потрібен щоб надіслати посилання на звіт. Жодних розсилок без вашої згоди.
          </div>
          {errorMsg && (
            <div style={{
              marginTop: 12, padding: "10px 14px",
              background: "oklch(from var(--neg) l c h / 0.12)",
              border: "1px solid oklch(from var(--neg) l c h / 0.4)",
              borderRadius: 8, color: "var(--neg)", fontSize: 13,
            }}>{errorMsg}</div>
          )}
        </form>

        {/* Trust row */}
        <div className="row" style={{ justifyContent: "center", gap: 28, marginTop: 36, flexWrap: "wrap", fontSize: 12, color: "var(--fg-2)" }}>
          <span className="row" style={{ gap: 6 }}><span style={{ color: "var(--pos)" }}>✓</span> Безкоштовно</span>
          <span className="row" style={{ gap: 6 }}><span style={{ color: "var(--pos)" }}>✓</span> Без реєстрації</span>
          <span className="row" style={{ gap: 6 }}><span style={{ color: "var(--pos)" }}>✓</span> 30+ перевірок</span>
          <span className="row" style={{ gap: 6 }}><span style={{ color: "var(--pos)" }}>✓</span> PDF-звіт на email</span>
        </div>
      </div>
    </section>
  );
}

// ─── 30+ перевірок — анімована сітка ─────────────────────────────
function ChecksGrid() {
  const total = AUDIT_CATEGORIES.reduce((a, c) => a + c.n, 0);
  return (
    <section style={{ padding: "clamp(32px, 6vw, 60px) 0", position: "relative" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="label-up" style={{ color: "var(--brand-2)" }}>ЩО МИ ПЕРЕВІРЯЄМО</span>
        <h2 style={{
          margin: "10px 0 6px",
          fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em",
          color: "var(--fg-0)",
        }}>
          {total}+ показників за <span style={{ color: "var(--brand-2)" }}>6 категоріями</span>
        </h2>
        <p style={{ color: "var(--fg-2)", fontSize: 14, margin: 0 }}>
          Від базового технічного SEO — до готовності з'являтися у відповідях ChatGPT.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 14 }}>
        {AUDIT_CATEGORIES.map((cat, i) => (
          <div key={cat.id} className="card" style={{
            padding: 22,
            position: "relative", overflow: "hidden",
            background: `linear-gradient(180deg, oklch(from ${cat.color} l c h / 0.06), transparent 60%), var(--bg-2)`,
            border: `1px solid oklch(from ${cat.color} l c h / 0.25)`,
            animation: `fadeIn 0.5s ease-out ${i * 0.08}s both`,
          }}>
            {/* corner glow */}
            <div style={{
              position: "absolute", top: -40, right: -40,
              width: 120, height: 120,
              background: `radial-gradient(circle, oklch(from ${cat.color} l c h / 0.2), transparent 70%)`,
              filter: "blur(20px)",
              pointerEvents: "none",
            }}/>

            <div className="row between" style={{ marginBottom: 14 }}>
              <div style={{
                width: 42, height: 42, borderRadius: 10,
                background: `linear-gradient(135deg, oklch(from ${cat.color} l c h / 0.25), oklch(from ${cat.color} l c h / 0.05))`,
                border: `1px solid oklch(from ${cat.color} l c h / 0.4)`,
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 22, color: cat.color,
                fontFamily: "var(--font-mono)",
              }}>{cat.icon}</div>
              <span className="num" style={{
                fontSize: 32, fontWeight: 600, color: cat.color,
                letterSpacing: "-0.03em",
                textShadow: `0 0 16px oklch(from ${cat.color} l c h / 0.4)`,
              }}>{cat.n}</span>
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, color: "var(--fg-0)", marginBottom: 12, letterSpacing: "-0.01em" }}>
              {cat.title}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {cat.checks.slice(0, 4).map((c, j) => (
                <div key={j} className="row" style={{ gap: 8, fontSize: 12.5, color: "var(--fg-1)" }}>
                  <span style={{ color: cat.color, fontFamily: "var(--font-mono)", fontSize: 11 }}>✓</span>
                  <span>{c}</span>
                </div>
              ))}
              {cat.checks.length > 4 && (
                <div style={{ fontSize: 11.5, color: "var(--fg-3)", paddingLeft: 19 }}>
                  + ще {cat.checks.length - 4}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Live scanner mock — анімація сканування сайту ───────────────
function LiveScannerDemo() {
  const [step, setStep] = React.useState(0);
  const steps = [
    "Перевіряю HTTPS + headers...",
    "Парсю sitemap.xml (1 247 URL)...",
    "Аналізую llms.txt для AI-движків...",
    "Тестую Core Web Vitals на 12 сторінках...",
    "Валідую Schema.org розмітку...",
    "Запитую ChatGPT, Claude, Gemini про сайт...",
    "Формую звіт + рекомендації...",
    "Готово! Аудит завершено за 28.4s",
  ];
  const stepStatuses = ["done", "done", "done", "active", "queued", "queued", "queued", "queued"];

  React.useEffect(() => {
    const t = setInterval(() => setStep(s => (s + 1) % steps.length), 1800);
    return () => clearInterval(t);
  }, []);

  const cur = (step % steps.length);

  return (
    <section style={{ padding: "clamp(32px, 6vw, 60px) 0", position: "relative" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="label-up" style={{ color: "var(--brand-2)" }}>ЯК ЦЕ ПРАЦЮЄ</span>
        <h2 style={{ margin: "10px 0 6px", fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em", color: "var(--fg-0)" }}>
          Реальне сканування — <span style={{ color: "var(--brand-2)" }}>не магія</span>
        </h2>
        <p style={{ color: "var(--fg-2)", fontSize: 14, margin: 0 }}>
          Ось так виглядає процес. Усе — на наших серверах, ваші дані нікуди не йдуть.
        </p>
      </div>

      <div style={{
        background: "oklch(from var(--bg-0) l c h / 0.85)",
        border: "1px solid var(--line)",
        borderRadius: 16,
        padding: 24,
        fontFamily: "var(--font-mono)",
        fontSize: 13,
        position: "relative", overflow: "hidden",
      }}>
        {/* Terminal header */}
        <div className="row between" style={{ marginBottom: 18, paddingBottom: 14, borderBottom: "1px solid var(--line)" }}>
          <div className="row" style={{ gap: 6 }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--neg)" }}/>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--warn)" }}/>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--pos)" }}/>
          </div>
          <span style={{ color: "var(--fg-3)", fontSize: 11 }}>spalah-360 · audit.example.com</span>
          <span className="row" style={{ gap: 6, color: "var(--pos)", fontSize: 11 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--pos)", animation: "pulse-soft 1.4s infinite", boxShadow: "0 0 8px var(--pos)" }}/>
            LIVE
          </span>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {steps.map((s, i) => {
            const isActive = i === cur;
            const isDone = i < cur;
            return (
              <div key={i} className="row" style={{
                gap: 10,
                opacity: isActive ? 1 : isDone ? 0.55 : 0.3,
                color: isActive ? "var(--brand-2)" : isDone ? "var(--pos)" : "var(--fg-2)",
                transition: "all 0.3s",
              }}>
                <span style={{ width: 14, display: "inline-flex", justifyContent: "center" }}>
                  {isActive ? (
                    <span style={{
                      width: 10, height: 10, borderRadius: "50%",
                      border: "2px solid var(--brand-2)",
                      borderTopColor: "transparent",
                      animation: "spin 0.8s linear infinite",
                    }}/>
                  ) : isDone ? "✓" : "○"}
                </span>
                <span>$ {s}</span>
                {isActive && (
                  <span style={{
                    width: 6, height: 14,
                    background: "var(--brand-2)",
                    animation: "blink 1s steps(2) infinite",
                  }}/>
                )}
              </div>
            );
          })}
        </div>

        {/* Progress bar */}
        <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
          <div className="row between" style={{ marginBottom: 6, fontSize: 11 }}>
            <span style={{ color: "var(--fg-2)" }}>Прогрес</span>
            <span style={{ color: "var(--brand-2)" }}>{Math.round(((cur + 1) / steps.length) * 100)}% · {steps.length - cur - 1} кроків</span>
          </div>
          <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
            <div style={{
              width: `${((cur + 1) / steps.length) * 100}%`,
              height: "100%",
              background: "linear-gradient(90deg, var(--brand-2), var(--brand))",
              boxShadow: "0 0 8px var(--brand-2)",
              transition: "width 0.6s ease-out",
            }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Sample report preview ───────────────────────────────────────
function ReportPreview() {
  return (
    <section style={{ padding: "clamp(32px, 6vw, 60px) 0", position: "relative" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="label-up" style={{ color: "var(--brand-2)" }}>ПРИКЛАД ЗВІТУ</span>
        <h2 style={{ margin: "10px 0 6px", fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em", color: "var(--fg-0)" }}>
          Не просто числа — <span style={{ color: "var(--brand-2)" }}>чіткий план дій</span>
        </h2>
        <p style={{ color: "var(--fg-2)", fontSize: 14, margin: 0 }}>
          Кожна проблема — з поясненням і прикладом, як виправити.
        </p>
      </div>

      <div className="card" style={{
        padding: 28, position: "relative", overflow: "hidden",
        background: "linear-gradient(180deg, oklch(from var(--bg-2) l c h / 0.9), oklch(from var(--bg-1) l c h / 0.7))",
      }}>
        {/* Mock report header */}
        <div className="row between" style={{ marginBottom: 20, paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }}>SPALAH 360 · AUDIT REPORT</div>
            <div style={{ fontSize: 18, fontWeight: 600, color: "var(--fg-0)", marginTop: 4 }}>example.com</div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
            <span className="num" style={{
              fontSize: 38, fontWeight: 600, color: "var(--pos)",
              letterSpacing: "-0.03em",
              textShadow: "0 0 24px oklch(from var(--pos) l c h / 0.4)",
            }}>72<span style={{ color: "var(--fg-3)", fontSize: 18 }}>/100</span></span>
            <span style={{ fontSize: 11, color: "var(--fg-2)" }}>Загальна оцінка</span>
          </div>
        </div>

        {/* Categories breakdown */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12 }}>
          {[
            { l: "Технічне SEO", v: 88, c: "var(--pos)" },
            { l: "AI готовність", v: 42, c: "var(--neg)" },
            { l: "E-E-A-T", v: 65, c: "var(--warn)" },
            { l: "Schema", v: 78, c: "var(--pos)" },
            { l: "Core Web Vitals", v: 91, c: "var(--pos)" },
            { l: "Контент", v: 58, c: "var(--warn)" },
          ].map((m, i) => (
            <div key={i} style={{
              padding: 14,
              background: "oklch(from var(--bg-3) l c h / 0.4)",
              border: "1px solid var(--line)",
              borderRadius: 10,
            }}>
              <div className="row between" style={{ marginBottom: 8 }}>
                <span style={{ fontSize: 12, color: "var(--fg-1)", fontWeight: 500 }}>{m.l}</span>
                <span className="num" style={{ fontSize: 16, fontWeight: 600, color: m.c }}>{m.v}</span>
              </div>
              <div style={{ height: 4, background: "var(--bg-3)", borderRadius: 2, overflow: "hidden" }}>
                <div style={{
                  width: `${m.v}%`, height: "100%",
                  background: m.c, boxShadow: `0 0 6px ${m.c}`,
                }}/>
              </div>
            </div>
          ))}
        </div>

        {/* Sample finding */}
        <div style={{
          marginTop: 20, padding: 16,
          background: "oklch(from var(--neg) l c h / 0.08)",
          border: "1px solid oklch(from var(--neg) l c h / 0.3)",
          borderRadius: 10,
          display: "flex", gap: 14,
        }}>
          <div style={{
            width: 32, height: 32, borderRadius: 8,
            background: "oklch(from var(--neg) l c h / 0.2)",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "var(--neg)", fontSize: 16,
            flexShrink: 0,
          }}>!</div>
          <div style={{ flex: 1 }}>
            <div className="row" style={{ gap: 8, marginBottom: 4 }}>
              <span className="chip chip-neg">КРИТИЧНО</span>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-0)" }}>Відсутній llms.txt</span>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--fg-2)", lineHeight: 1.5 }}>
              ChatGPT і Claude не знають як коректно цитувати ваш сайт.
              Згенеруємо файл за вас — лежить у звіті в розділі <strong style={{ color: "var(--brand-2)" }}>AI Hub</strong>.
            </div>
          </div>
          <span style={{ fontSize: 11, color: "var(--fg-3)", whiteSpace: "nowrap" }}>+12 балів</span>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: "Це правда безкоштовно?", a: "Так. Один аудит на email — повністю безкоштовно, без trial-карти. Якщо захочете моніторити сайт постійно і отримувати рекомендації — є платні плани." },
    { q: "Скільки часу триває аудит?", a: "Зазвичай 25-40 секунд. Залежить від розміру сайту та швидкості відповіді сервера. Великі сайти (10К+ сторінок) скануємо вибірково по карті sitemap." },
    { q: "Які AI-движки тестуються?", a: "ChatGPT (OpenAI), Claude (Anthropic), Gemini (Google), Perplexity. Перевіряємо, чи цитується ваш сайт у відповідях, та чи коректно його розуміють." },
    { q: "Що з даними?", a: "Email — для відправки звіту. Жодних розсилок без вашої згоди. URL сайту і результати аудиту зберігаємо 30 днів — щоб ви могли повернутись до звіту по посиланню." },
    { q: "Чим це відрізняється від PageSpeed Insights?", a: "PSI перевіряє швидкість. Spalah 360 — повний скан: SEO, AI-готовність, схема, контент, авторитетність. Це як медогляд проти аналізу крові." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: "60px 0" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="label-up" style={{ color: "var(--brand-2)" }}>ЧАСТІ ПИТАННЯ</span>
        <h2 style={{ margin: "10px 0 0", fontSize: 38, fontWeight: 600, letterSpacing: "-0.025em", color: "var(--fg-0)" }}>FAQ</h2>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className="card" style={{
              padding: "16px 20px",
              cursor: "pointer",
              transition: "all 0.2s",
              borderColor: isOpen ? "oklch(from var(--brand-2) l c h / 0.35)" : "var(--line)",
            }} onClick={() => setOpen(isOpen ? -1 : i)}>
              <div className="row between" style={{ alignItems: "center" }}>
                <span style={{ fontSize: 15, fontWeight: 500, color: "var(--fg-0)" }}>{it.q}</span>
                <span style={{
                  width: 24, height: 24, borderRadius: 6,
                  background: isOpen ? "oklch(from var(--brand-2) l c h / 0.2)" : "var(--bg-3)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: isOpen ? "var(--brand-2)" : "var(--fg-2)",
                  fontSize: 14, fontWeight: 600,
                  transition: "all 0.2s",
                  transform: isOpen ? "rotate(45deg)" : "rotate(0deg)",
                }}>+</span>
              </div>
              {isOpen && (
                <div style={{
                  marginTop: 10, paddingTop: 10,
                  borderTop: "1px dashed var(--line)",
                  fontSize: 13.5, color: "var(--fg-2)", lineHeight: 1.6,
                  animation: "fadeIn 0.25s ease-out",
                }}>{it.a}</div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─── Final CTA ───────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section style={{ padding: "80px 0 40px", textAlign: "center", position: "relative" }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 80% at 50% 50%, oklch(from var(--brand) l c h / 0.18), transparent 70%)",
        filter: "blur(40px)", pointerEvents: "none",
      }}/>
      <div style={{ position: "relative" }}>
        <h2 style={{
          fontSize: 44, fontWeight: 700, letterSpacing: "-0.03em",
          margin: "0 0 14px", color: "var(--fg-0)",
        }}>Готові побачити, як <span style={{
          background: "linear-gradient(135deg, var(--brand-2), oklch(0.78 0.22 350))",
          WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent",
        }}>AI бачить ваш сайт?</span></h2>
        <p style={{ fontSize: 15, color: "var(--fg-2)", maxWidth: 540, margin: "0 auto 28px" }}>
          30 секунд — і у вас звіт, з яким можна реально щось робити.
        </p>
        <a href="#top" style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          height: 56, padding: "0 28px",
          background: "linear-gradient(135deg, oklch(0.78 0.22 285), oklch(0.65 0.24 285))",
          border: 0, borderRadius: 12,
          color: "white", fontSize: 16, fontWeight: 600,
          textDecoration: "none",
          fontFamily: "var(--font-sans)",
          boxShadow: "0 12px 40px oklch(from var(--brand) l c h / 0.4)",
        }}>
          <IconBolt size={20}/>
          <span>Зробити аудит</span>
        </a>
      </div>
    </section>
  );
}

// ─── ROOT ────────────────────────────────────────────────────────
function Audit360Page() {
  return (
    <div style={{ position: "relative", zIndex: 1, background: "var(--bg-0)", minHeight: "100vh" }}>
      {/* Top nav */}
      <div className="row between" style={{
        padding: "12px clamp(14px, 4vw, 32px)",
        position: "sticky", top: 0, zIndex: 10,
        background: "oklch(from var(--bg-0) l c h / 0.7)",
        backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div className="row" style={{ gap: 12, alignItems: "center" }}>
          <BrandMark size={36}/>
          <div className="row" style={{ gap: 8, alignItems: "center" }}>
            <span style={{ fontSize: 17, fontWeight: 600, color: "var(--fg-0)", letterSpacing: "-0.02em", fontFamily: "'Geist', var(--font-sans)" }}>Spalah</span>
            <span style={{
              padding: "3px 9px", borderRadius: 6,
              background: "oklch(from var(--brand) l c h / 0.18)",
              border: "1px solid oklch(from var(--brand) l c h / 0.3)",
              fontSize: 11, fontWeight: 600, fontFamily: "var(--font-mono)",
              color: "var(--brand-2)", letterSpacing: "0.08em",
            }}>360</span>
          </div>
        </div>
        <a href="#" style={{ fontSize: 13, color: "var(--fg-2)", textDecoration: "none" }}>
          ← Назад на spalah.app
        </a>
      </div>

      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "0 clamp(14px, 4vw, 32px)" }} id="top">
        <Hero360/>
        <ChecksGrid/>
        <LiveScannerDemo/>
        <ReportPreview/>
        <FAQ/>
        <FinalCTA/>
      </div>

      {/* Footer */}
      <footer style={{
        padding: "24px clamp(14px, 4vw, 32px)",
        borderTop: "1px solid var(--line)",
        background: "oklch(from var(--bg-1) l c h / 0.5)",
      }}>
        <div className="row between" style={{ maxWidth: 1100, margin: "0 auto", flexWrap: "wrap", gap: 12 }}>
          <span style={{ fontSize: 11.5, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>
            © Spalah · 2026 · виконано через spalah · v0.42
          </span>
        </div>
      </footer>

      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @media (max-width: 760px) {
          h1, h2 { word-break: break-word; }
          .row.between { flex-wrap: wrap; }
        }
        @media (max-width: 520px) {
          html, body { overflow-x: hidden; }
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes blink { 50% { opacity: 0; } }
        @keyframes scan-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
        @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
      `}</style>
    </div>
  );
}
window.Audit360Page = Audit360Page;