// landing.jsx - VaultCova marketing site: blend hero + pages + FAQ (exported to window)
const { useState: useStateL, useEffect: useEffectL } = React;

const landingFeatures = [
  { icon: "chat", title: "Chat Naturally", desc: "Describe what you own in plain words. Cova does the rest." },
  { icon: "vault", title: "VaultLog", desc: "Every asset with its real replacement cost, in one secure register." },
  { icon: "shield", title: "Insure Smartly", desc: "Cover assets individually or bundle them to cut premiums." },
  { icon: "claim", title: "Claims, Guided", desc: "Cova triages instantly; larger claims get further assessment, settled within the 8-day average window or less." },
];

const landingSteps = [
  { n: "01", t: "Tell Cova what you own", d: "“I just bought a Hilux worth ₦52M.”" },
  { n: "02", t: "Cova assesses the risk", d: "Auto-detected, scored, and the right questions asked." },
  { n: "03", t: "Compare & insure", d: "Matched quotes - individually or bundled to save." },
  { n: "04", t: "Claim with confidence", d: "Most claims auto-approve. Larger claims get further assessment, settled within the 8-day average window or less." },
];

/* ---------------- animated chat demo card ---------------- */
function FloatingChatDemo() {
  const lines = [
    { role: "user", text: "I just bought a Toyota Hilux for my logistics business" },
    { role: "bot", text: "Nice! What's its replacement cost so I can track your coverage?" },
    { role: "user", text: "About ₦52 million" },
    { role: "bot", text: "Added to VaultLog ✓ - risk scored 58/100. Want matched quotes?", card: true },
  ];
  const [shown, setShown] = useStateL(0);
  useEffectL(() => {
    if (shown >= lines.length) { const r = setTimeout(() => setShown(0), 2600); return () => clearTimeout(r); }
    const r = setTimeout(() => setShown((s) => s + 1), shown === 0 ? 600 : 1100);
    return () => clearTimeout(r);
  }, [shown]);
  return (
    <div style={{
      width: "100%", maxWidth: 410, background: "var(--glass)", backdropFilter: "blur(20px) saturate(160%)",
      WebkitBackdropFilter: "blur(20px) saturate(160%)", border: "1px solid var(--glass-border)",
      borderRadius: 24, boxShadow: "var(--shadow-xl)", padding: 18,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, paddingBottom: 14, marginBottom: 6, borderBottom: "1px solid var(--border)" }}>
        <span style={{ display: "grid", placeItems: "center", width: 30, height: 30, borderRadius: 999, background: "linear-gradient(135deg,var(--accent-2),var(--accent))", color: "#fff" }}><window.Icon name="sparkle" size={16} /></span>
        <div style={{ fontWeight: 700, fontSize: 14 }}>Cova Assistant</div>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--success)", fontWeight: 600 }}><span style={{ width: 6, height: 6, borderRadius: 9, background: "var(--success)" }} />Online</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9, height: 252, overflow: "hidden" }}>
        {lines.slice(0, shown).map((l, i) => (
          <div key={i} style={{ alignSelf: l.role === "user" ? "flex-end" : "flex-start", maxWidth: "85%", animation: "vc-fade-up .4s var(--ease) both" }}>
            <div style={{
              padding: "9px 13px", borderRadius: l.role === "user" ? "14px 14px 4px 14px" : "4px 14px 14px 14px", fontSize: 13, lineHeight: 1.45,
              background: l.role === "user" ? "var(--accent)" : "var(--surface)", color: l.role === "user" ? "#fff" : "var(--text)",
              border: l.role === "user" ? "none" : "1px solid var(--border)", boxShadow: "var(--shadow-sm)",
            }}>{l.text}</div>
            {l.card && (
              <div style={{ marginTop: 8, padding: 10, borderRadius: 12, background: "var(--surface)", border: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10, animation: "vc-drop-in .6s var(--ease) both" }}>
                <window.AssetThumb category="vehicle" size={38} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 700, fontSize: 12.5 }}>Toyota Hilux</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--text-muted)" }}>₦52,000,000</div>
                </div>
                <window.StatusBadge status="uninsured" size="sm" />
              </div>
            )}
          </div>
        ))}
        {shown < lines.length && <div style={{ alignSelf: lines[shown]?.role === "user" ? "flex-end" : "flex-start" }}><div style={{ display: "flex", gap: 4, padding: "10px 14px", background: "var(--surface)", borderRadius: 14, border: "1px solid var(--border)" }}>{[0,1,2].map((i)=><span key={i} style={{width:6,height:6,borderRadius:9,background:"var(--text-faint)",animation:`vc-dot 1.2s ${i*0.15}s infinite`}}/>)}</div></div>}
      </div>
    </div>
  );
}

function FloatingAsset({ category, name, amount, status, style }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10, padding: 11, borderRadius: 16,
      background: "var(--glass)", backdropFilter: "blur(16px) saturate(160%)", WebkitBackdropFilter: "blur(16px)",
      border: "1px solid var(--glass-border)", boxShadow: "var(--shadow-lg)", width: 230,
      ...style,
    }}>
      <window.AssetThumb category={category} size={40} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontWeight: 700, fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--text-muted)" }}>{amount}</div>
      </div>
      <window.StatusBadge status={status} size="sm" />
    </div>
  );
}

/* ---------------- animated headline ---------------- */
function AnimatedHeadline() {
  // word-by-word cinematic reveal; accent words get animated gradient + drawn underline
  const line1 = ["Your", "assets,"];
  const line2 = ["vaulted", "&"];
  let idx = 0;
  const w = (word, extra = null) => {
    const d = 0.12 + idx++ * 0.13;
    return (
      <span key={word + d} className="vc-word" style={{ animationDelay: d + "s", marginRight: "0.24em" }}>
        {extra ? extra : word}
      </span>
    );
  };
  return (
    <h1 className="display vc-hero-h1" style={{ fontSize: 74, lineHeight: 1.02, letterSpacing: "-0.035em", margin: 0 }}>
      <span style={{ display: "block" }}>{line1.map((x) => w(x))}{w("vaulted", <span className="vc-grad-text">vaulted</span>)}</span>
      <span style={{ display: "block", marginTop: 6 }}>
        {w("&")}
        <span className="vc-word" style={{ animationDelay: (0.12 + idx * 0.13) + "s", position: "relative", display: "inline-block" }}>
          <span className="vc-grad-text">covered.</span>
          <svg viewBox="0 0 320 22" style={{ position: "absolute", left: 0, bottom: -14, width: "100%", height: 22, overflow: "visible" }}>
            <path d="M6 14 C 80 4, 240 4, 314 12" fill="none" stroke="var(--accent)" strokeWidth="5" strokeLinecap="round"
              strokeDasharray="320" className="vc-draw-underline" style={{ animation: "vc-draw 1s var(--ease) 1.15s both" }} opacity="0.85" />
          </svg>
        </span>
      </span>
    </h1>
  );
}

/* ---------------- the landing shell ---------------- */
const LANDING_PAGES = [
  { id: "product", label: "Product" },
  { id: "vaultlog", label: "VaultLog" },
  { id: "insurers", label: "Insurers" },
  { id: "pricing", label: "Pricing" },
];

function Landing({ tweaks, onStart, onLogin, onToggleTheme, isDark }) {
  const [page, setPage] = useStateL("home");
  const logoV = tweaks.logoVariant || "vault";
  const go = (p) => { setPage(p); };
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;

  // Live platform data (ops-managed underwriters, real asset totals). Only what
  // admin has configured shows on the site.
  const [stats, setStats] = useStateL({ insurers: [], insurerCount: 0, assetsValueKobo: 0, assetsCount: 0 });
  useEffectL(() => {
    fetch("/api/stats").then((r) => r.json()).then((d) => { if (d && Array.isArray(d.insurers)) setStats(d); }).catch(() => {});
  }, []);

  // Mobile homepage = a native-app-style swipeable carousel (full screen, no
  // marketing chrome). The full scrolling site stays on desktop and on the
  // secondary pages (Product/Pricing/…), which mobile reaches from the app menu.
  if (isMobile && page === "home" && window.MobileHome) {
    return <window.MobileHome onStart={onStart} onLogin={onLogin} onToggleTheme={onToggleTheme} isDark={isDark} logoV={logoV} stats={stats} />;
  }

  return (
    <div style={{ height: "100%", overflowY: "auto", background: "var(--hero-grad)" }} key={page}>
      {/* NAV */}
      <nav className="vc-nav" style={{ position: "sticky", top: 0, zIndex: 50, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 42px", background: "var(--glass)", backdropFilter: "blur(16px)", borderBottom: "1px solid var(--border)" }}>
        <window.Logo variant={logoV} size={32} onClick={() => go("home")} />
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          {/* The homepage hero stays clean — just Log in / Get started. The page
              tabs appear on the secondary pages so those stay navigable. */}
          {page !== "home" && LANDING_PAGES.map((l) => (
            <button key={l.id} className="vc-hide-m" onClick={() => go(l.id)} style={{
              padding: "8px 14px", fontSize: 14, fontWeight: 600, borderRadius: 999, transition: "all .2s",
              color: page === l.id ? "var(--accent-ink)" : "var(--text-muted)",
              background: page === l.id ? "var(--accent-soft)" : "transparent",
            }}>{l.label}</button>
          ))}
          <button onClick={onToggleTheme} className="vc-focus" style={{ display: "grid", placeItems: "center", width: 40, height: 40, borderRadius: 999, color: "var(--text-muted)", marginLeft: 6 }}><window.Icon name={isDark ? "sun" : "moon"} size={19} /></button>
          <window.Btn variant="ghost" size="sm" onClick={onLogin}>Log in</window.Btn>
          <window.Btn size="sm" iconR="arrowR" onClick={onStart}>Get started</window.Btn>
        </div>
      </nav>

      {page === "home" && <HomePage onStart={onStart} heroScene={tweaks.heroScene || "auto"} isDark={isDark} stats={stats} />}
      {page === "product" && <window.ProductPage onStart={onStart} />}
      {page === "vaultlog" && <window.VaultLogPage onStart={onStart} />}
      {page === "insurers" && <window.InsurersPage onStart={onStart} insurers={stats.insurers} />}
      {page === "pricing" && <window.PricingPage onStart={onStart} />}
      {page === "brand" && <window.BrandPage onStart={onStart} />}

      {/* FOOTER */}
      <footer className="vc-section" style={{ borderTop: "1px solid var(--border)", padding: "26px 42px", display: "flex", justifyContent: "space-between", alignItems: "center", maxWidth: 1240, margin: "0 auto", flexWrap: "wrap", gap: 14 }}>
        <window.Logo variant={logoV} size={26} onClick={() => go("home")} />
        <div style={{ display: "flex", gap: 4 }}>
          {LANDING_PAGES.map((l) => (
            <button key={l.id} onClick={() => go(l.id)} style={{ padding: "6px 12px", fontSize: 13, fontWeight: 600, color: page === l.id ? "var(--accent)" : "var(--text-faint)", borderRadius: 999 }}>{l.label}</button>
          ))}
        </div>
        <span style={{ fontSize: 13, color: "var(--text-faint)" }}>The Insurance Operating System · © 2026 VaultCova · Lagos, Nigeria</span>
      </footer>
    </div>
  );
}

/* ---------------- HOME: blend hero ---------------- */
function HomePage({ onStart, heroScene = "auto", isDark, stats = { insurers: [], insurerCount: 0, assetsValueKobo: 0 } }) {
  const [heroMsg, setHeroMsg] = useStateL("");
  const [heroListening, setHeroListening] = useStateL(false);
  const heroPh = window.useRotatingPh(!heroListening); // the empty input teaches what Cova can do
  const heroLocale = window.I18N ? window.I18N.localeFor((window.useT && window.useT().lang) || "en") : "en-NG";
  const heroSubmit = (e) => { e.preventDefault(); onStart(heroMsg.trim() || undefined); };

  // stack → spread choreography for the asset cards
  const [stackRef, spread] = useInViewL(0.35);
  const cardSpec = [
    { top: 0, left: 26, stack: "translate(66px, 96px) rotate(-7deg) scale(.97)", cat: "vehicle", name: "Land Cruiser 2023", amount: "₦92,000,000", status: "insured", d: 0 },
    { top: 100, left: 130, stack: "translate(-38px, -4px) rotate(0deg) scale(.99)", cat: "property", name: "Family Home - Lekki", amount: "₦350,000,000", status: "partial", d: 0.12 },
    { top: 200, left: 56, stack: "translate(36px, -104px) rotate(7deg) scale(.97)", cat: "jewelry", name: "Rolex Submariner", amount: "₦41,000,000", status: "uninsured", d: 0.24 },
  ];
  const [featRef, featIn] = useInViewL(0.3);
  const [stepsRef, stepsIn] = useInViewL(0.3);
  return (
    <div>
      <header className="vc-section" style={{ position: "relative", maxWidth: 1240, margin: "0 auto", padding: "64px 42px 30px" }}>
        {window.HeroScene && <window.HeroScene scene={heroScene} isDark={isDark} />}
        {/* centered statement */}
        <div style={{ textAlign: "center", position: "relative", zIndex: 2 }}>
          <div className="vc-rise" style={{ display: "flex", justifyContent: "center", animation: "vc-fade-up .6s var(--ease) both" }}><Pill /></div>
          <div style={{ marginTop: 24, display: "flex", justifyContent: "center" }}><AnimatedHeadline /></div>
          <p className="vc-rise" style={{ fontSize: 19, color: "var(--text-muted)", maxWidth: 560, margin: "30px auto 0", lineHeight: 1.55, animation: "vc-fade-up .7s var(--ease) 1s both" }}>
            Describe what you own in one sentence. VaultCova tracks its real replacement cost, scores the risk, and insures it - individually or bundled.
          </p>
          {/* real chat input - the journey starts here */}
          <form onSubmit={heroSubmit} className="vc-rise" style={{ maxWidth: 560, margin: "28px auto 0", animation: "vc-fade-up .7s var(--ease) 1.15s both" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 10px 10px 20px", borderRadius: 999, background: "var(--surface)", border: "1.5px solid " + (heroListening ? "var(--accent)" : "var(--border)"), boxShadow: "var(--shadow-lg)", transition: "border-color .2s var(--ease)" }}>
              <window.Icon name="sparkle" size={20} style={{ color: "var(--accent)", flexShrink: 0 }} />
              <input value={heroMsg} onChange={(e) => setHeroMsg(e.target.value)}
                placeholder={heroListening ? "Listening… speak now" : heroPh}
                style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 16, color: "var(--text)", minWidth: 0 }} />
              <window.GuestClipBtn size={40} />
              {window.VoiceMicButton && <window.VoiceMicButton locale={heroLocale} onTranscript={setHeroMsg} onListenChange={setHeroListening} size={40} />}
              <window.Btn type="submit" iconR="arrowR">{heroMsg.trim() ? "Ask Cova" : "Start"}</window.Btn>
            </div>
            <div style={{ fontSize: 12.5, color: "var(--text-faint)", marginTop: 10 }}>Type or tap the mic to speak · Cova answers it the moment your vault opens.</div>
          </form>
        </div>

        {/* split: stacking asset cards left, chat demo right */}
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start", marginTop: 54 }}>
          <div style={{ paddingLeft: 30 }}>
            <div ref={stackRef} style={{ position: "relative", height: 290 }}>
              {cardSpec.map((c, i) => (
                <FloatingAsset key={c.name} category={c.cat} name={c.name} amount={c.amount} status={c.status}
                  style={{
                    position: "absolute", top: c.top, left: c.left, zIndex: i + 1,
                    transform: spread ? "none" : c.stack,
                    boxShadow: spread ? "var(--shadow-lg)" : "var(--shadow-xl)",
                    transition: spread
                      ? `transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) ${c.d * 2.2}s, box-shadow 1.8s cubic-bezier(0.16, 1, 0.3, 1) ${c.d * 2.2}s`
                      : `transform .7s var(--ease) ${0.24 - c.d}s, box-shadow .7s var(--ease) ${0.24 - c.d}s`,
                  }} />
              ))}
            </div>
            <div className="vc-rise" style={{ display: "flex", gap: 26, marginTop: 18, animation: "vc-fade-up .8s var(--ease) 1.4s both" }}>
              {[[window.VC_DATA.fmtNaira(Math.round((stats.assetsValueKobo || 0) / 100)), "assets vaulted"], [String(stats.insurerCount || 0), stats.insurerCount === 1 ? "insurer partner" : "insurer partners"], ["3 mins", "to first policy"]].map(([a, b]) => (
                <div key={b}><div className="display" style={{ fontSize: 25 }}>{a}</div><div style={{ fontSize: 12.5, color: "var(--text-faint)", fontWeight: 600 }}>{b}</div></div>
              ))}
            </div>
          </div>
          <div className="vc-rise" style={{ display: "flex", justifyContent: "center", animation: "vc-fade-up .8s var(--ease) 1.1s both" }}><FloatingChatDemo /></div>
        </div>
      </header>

      {/* FEATURES */}
      <section className="vc-section" style={{ maxWidth: 1240, margin: "0 auto", padding: "40px 42px 20px" }}>
        <div ref={featRef} className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
          {landingFeatures.map((f, i) => (
            <div key={f.title} style={{ padding: 22, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)", ...stackStyle(i, 4, featIn) }}>
              <span style={{ display: "grid", placeItems: "center", width: 46, height: 46, borderRadius: 14, background: "var(--accent-soft)", color: "var(--accent)" }}><window.Icon name={f.icon} size={24} /></span>
              <h3 style={{ fontSize: 18, marginTop: 16 }}>{f.title}</h3>
              <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.5, marginTop: 8 }}>{f.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* SEE IT IN MOTION - looping product demos */}
      <MotionDemos />

      {/* HOW IT WORKS */}
      <section className="vc-section" style={{ maxWidth: 1240, margin: "0 auto", padding: "50px 42px" }}>
        <h2 className="display" style={{ fontSize: 34, textAlign: "center" }}>From a sentence to a settled claim</h2>
        <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: 17, marginTop: 10 }}>One platform, every step - in natural language.</p>
        <div ref={stepsRef} className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginTop: 34 }}>
          {landingSteps.map((s, i) => (
            <div key={s.n} style={{ padding: 22, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)", ...stackStyle(i, 4, stepsIn) }}>
              <div className="display mono" style={{ fontSize: 15, color: "var(--accent)", fontWeight: 700 }}>{s.n}</div>
              <h3 style={{ fontSize: 16.5, marginTop: 12 }}>{s.t}</h3>
              <p style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.5, marginTop: 8 }}>{s.d}</p>
              {i < 3 && <div className="vc-hide-m" style={{ position: "absolute", right: -12, top: "50%", color: "var(--border-strong)", zIndex: 2, opacity: stepsIn ? 1 : 0, transition: "opacity .4s var(--ease) " + (stepsIn ? "0.7s" : "0s") }}><window.Icon name="arrowR" size={18} /></div>}
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="vc-section" style={{ maxWidth: 1240, margin: "0 auto", padding: "10px 42px 30px" }}>
        <div style={{ position: "relative", overflow: "hidden", borderRadius: 30, padding: "56px 48px", background: "linear-gradient(120deg,var(--accent) 0%,var(--accent-2) 60%,#9a80ff 100%)", backgroundSize: "200% 200%", animation: "vc-grad-pan 8s linear infinite alternate", textAlign: "center", boxShadow: "var(--shadow-glow)" }}>
          <h2 className="display" style={{ fontSize: 42, color: "#fff" }}>Everything you own. One vault.</h2>
          <p style={{ color: "rgba(255,255,255,.9)", fontSize: 18, marginTop: 12 }}>Type one sentence - get cover, move a policy, or build your vault.</p>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
            <window.ChatCta onStart={onStart} light placeholder="Tell Cova: “Insure my shop and stock”…" />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <window.FaqSection />
    </div>
  );
}

/* ---------------- stack → spread choreography helpers ---------------- */
// Scroll-driven in-view detection (IntersectionObserver is unreliable in embedded iframes).
function useInViewL(threshold = 0.25) {
  const ref = React.useRef(null);
  const [inView, setInView] = useStateL(false);
  useEffectL(() => {
    const el = ref.current;
    if (!el) return;
    const check = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const visible = Math.min(r.bottom, vh) - Math.max(r.top, 0);
      setInView(visible > Math.min(r.height, vh) * threshold);
    };
    // Synchronous on scroll - rAF/IO are throttled in background iframes and never fire.
    check();
    const iv = setInterval(check, 400); // safety net for layout shifts & missed events
    window.addEventListener("scroll", check, { capture: true, passive: true });
    window.addEventListener("resize", check);
    return () => { window.removeEventListener("scroll", check, { capture: true }); window.removeEventListener("resize", check); clearInterval(iv); };
  }, []);
  return [ref, inView];
}
// Cards converge into a neat rotated stack when out of view, fan out staggered when in view.
// Fan-out is slow and luxurious (1.7s expo-out, wide stagger); restack is quicker and tidy.
function stackStyle(i, n, on) {
  const off = (n - 1) / 2 - i;
  const spreadDelay = i * 0.22;
  const stackDelay = (n - 1 - i) * 0.06;
  return {
    position: "relative",
    zIndex: Math.round(10 - Math.abs(off) * 2),
    transform: on ? "none" : `translateX(${off * 92}%) rotate(${-off * 5}deg) scale(.95)`,
    boxShadow: on ? "var(--shadow-sm)" : "var(--shadow-lg)",
    transition: on
      ? `transform 1.7s cubic-bezier(0.16, 1, 0.3, 1) ${spreadDelay}s, box-shadow 1.7s cubic-bezier(0.16, 1, 0.3, 1) ${spreadDelay}s`
      : `transform .7s var(--ease) ${stackDelay}s, box-shadow .7s var(--ease) ${stackDelay}s`,
  };
}

/* ---------------- looping motion demos (product "gifs") ---------------- */
function MotionDemos() {
  const [gridRef, inView] = useInViewL(0.35);
  return (
    <section className="vc-section" style={{ maxWidth: 1240, margin: "0 auto", padding: "40px 42px 10px" }}>
      <style>{`
        @keyframes md-bar { 0%, 18% { width: 32%; } 55%, 82% { width: 100%; } 100% { width: 100%; } }
        @keyframes md-badge-a { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
        @keyframes md-badge-b { 0%, 45% { opacity: 0; transform: scale(.8); } 58%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
        @keyframes md-chip-l { 0%, 20% { transform: translate(-66px, -10deg) rotate(-7deg); } 55%, 100% { transform: translate(0,0) rotate(0); } }
        @keyframes md-chip-r { 0%, 20% { transform: translateX(66px) rotate(7deg); } 55%, 100% { transform: translate(0,0) rotate(0); } }
        @keyframes md-save { 0%, 55% { opacity: 0; transform: translateY(8px) scale(.7); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 1; } }
        @keyframes md-stage { 0%, 100% { background: var(--surface-3); } 25%, 90% { background: var(--accent); } }
        @keyframes md-check { 0%, 62% { opacity: 0; transform: scale(.5); } 74%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
        @keyframes md-typed { 0%, 8% { width: 0; } 40%, 100% { width: 100%; } }
      `}</style>
      <h2 className="display" style={{ fontSize: 34, textAlign: "center" }}>See it work</h2>
      <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: 17, marginTop: 10 }}>Three things Cova does for you, on loop.</p>
      <div ref={gridRef} className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginTop: 30 }}>

        {/* Demo 1 - gap closes */}
        <DemoCard label="Spot & close the gap" icon="alert" style={stackStyle(0, 3, inView)}>
          <div style={{ padding: 14, borderRadius: 14, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <window.AssetThumb category="equipment" size={38} radius={10} />
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 13 }}>Forklifts (×4)</div>
                <div className="mono" style={{ fontSize: 11, color: "var(--text-muted)" }}>₦58,000,000</div>
              </div>
              <div style={{ position: "relative", width: 86, height: 24 }}>
                <span style={{ position: "absolute", right: 0, animation: "md-badge-a 6s infinite" }}><window.StatusBadge status="uninsured" size="sm" /></span>
                <span style={{ position: "absolute", right: 0, animation: "md-badge-b 6s infinite" }}><window.StatusBadge status="insured" size="sm" /></span>
              </div>
            </div>
            <div style={{ height: 9, borderRadius: 999, background: "var(--surface-3)", overflow: "hidden", marginTop: 12 }}>
              <div style={{ height: "100%", borderRadius: 999, background: "var(--success)", animation: "md-bar 6s var(--ease-in-out) infinite" }} />
            </div>
          </div>
        </DemoCard>

        {/* Demo 2 - bundle & save */}
        <DemoCard label="Bundle & save ~18%" icon="layers" style={stackStyle(1, 3, inView)}>
          <div style={{ position: "relative", display: "grid", placeItems: "center", height: 96 }}>
            <div style={{ position: "absolute", animation: "md-chip-l 7s var(--ease) infinite" }}><MiniChip cat="vehicle" label="Fleet" /></div>
            <div style={{ position: "absolute", animation: "md-chip-r 7s var(--ease) infinite" }}><MiniChip cat="property" label="Warehouse" /></div>
            <div style={{ position: "absolute" }}><MiniChip cat="equipment" label="Plant" /></div>
            <span style={{ position: "absolute", top: -4, right: 4, padding: "4px 11px", borderRadius: 999, background: "var(--success)", color: "#fff", fontSize: 12, fontWeight: 800, boxShadow: "var(--shadow-md)", animation: "md-save 7s var(--ease) infinite" }}>-18%</span>
          </div>
        </DemoCard>

        {/* Demo 3 - claim auto-approved */}
        <DemoCard label="Claims, auto-approved" icon="claim" style={stackStyle(2, 3, inView)}>
          <div style={{ padding: 14, borderRadius: 14, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span className="mono" style={{ fontSize: 11.5, color: "var(--text-faint)", fontWeight: 600 }}>CL-2026-0044</span>
              <span style={{ position: "relative", width: 92, height: 22 }}>
                <span style={{ position: "absolute", right: 0, display: "grid", placeItems: "center", padding: "3px 10px", borderRadius: 999, background: "var(--success-soft)", color: "var(--success)", fontSize: 11, fontWeight: 700, animation: "md-check 6s infinite" }}>Approved ✓</span>
              </span>
            </div>
            <div style={{ fontWeight: 700, fontSize: 13.5, marginTop: 8 }}>Windscreen damage · ₦480K</div>
            <div style={{ display: "flex", gap: 5, marginTop: 12 }}>
              {[0, 1, 2, 3, 4].map((i) => (
                <div key={i} style={{ flex: 1, height: 6, borderRadius: 999, background: "var(--surface-3)", animation: `md-stage 6s ${0.4 + i * 0.55}s infinite` }} />
              ))}
            </div>
          </div>
        </DemoCard>
      </div>
    </section>
  );
}
function DemoCard({ label, icon, children, style = {} }) {
  return (
    <div style={{ padding: 20, borderRadius: 20, background: "var(--surface-2)", border: "1px solid var(--border)", overflow: "hidden", ...style }}>
      <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 16 }}>
        <span style={{ display: "grid", placeItems: "center", width: 30, height: 30, borderRadius: 9, background: "var(--accent-soft)", color: "var(--accent)" }}><window.Icon name={icon} size={16} /></span>
        <span style={{ fontWeight: 700, fontSize: 14.5 }}>{label}</span>
        <span style={{ marginLeft: "auto", fontSize: 10, fontWeight: 700, padding: "3px 8px", borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-ink)", letterSpacing: ".04em" }}>LIVE</span>
      </div>
      {children}
    </div>
  );
}
function MiniChip({ cat, label }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 13px", borderRadius: 12, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-md)" }}>
      <window.AssetThumb category={cat} size={26} radius={7} />
      <span style={{ fontWeight: 700, fontSize: 12.5 }}>{label}</span>
    </div>
  );
}

function Pill() {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "7px 14px 7px 8px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)", fontSize: 13, fontWeight: 600, boxShadow: "var(--shadow-sm)" }}>
      <span style={{ display: "grid", placeItems: "center", width: 22, height: 22, borderRadius: 999, background: "var(--accent)", color: "#fff" }}><window.Icon name="sparkle" size={13} /></span>
      Meet Cova, your insurance co-pilot
    </div>
  );
}

Object.assign(window, { Landing });