// pages.jsx - landing sub-pages: Product, VaultLog, Insurers, Pricing, Brand assets + FAQ
const { useState: useStatePg } = React;

/* ================= FAQ (accordion) ================= */
const FAQ_ITEMS = [
  { q: "What exactly is VaultLog?", a: "VaultLog is your living register of everything you own - each asset carries its purchase price and real replacement cost, so we can show you precisely what's covered and what's exposed. Add assets by simply describing them to Cova in plain language." },
  { q: "How does the Cova assessment work?", a: "When you add an asset or file a claim, Cova auto-detects what it is, scores the risk, and asks only the questions that matter. Most risks are assessed and bound instantly; high-value or unusual cases are routed to our human underwriting team - usually back within 4 business hours." },
  { q: "Can I insure assets together?", a: "Yes - bundling related assets (your fleet, your home and contents, your premises and plant) into one policy typically saves around 18% versus separate covers, with one renewal date and one document." },
  { q: "What is VaultRewards?", a: "Value-based insurance: stay claim-free and earn back up to 7% of your annual premium, accrued monthly across the policy year. A claim filed within the policy period forfeits that year's rewards. Redeem what you've earned to your wallet, your bank, or roll it into next year's premium." },
  { q: "How fast are claims paid?", a: "Small claims on active policies are auto-approved by Cova in minutes. Larger claims require further assessment and are settled within the average window of 8 days or less." },
  { q: "Is VaultCova an insurer?", a: "No - VaultCova is an Insurance Operating System: the layer where businesses and individuals run everything insurance. Your assets, risks, policies, claims and rewards live in one place, while cover is underwritten by the NAICOM-regulated partners on our panel." },
  { q: "What do the paid plans add?", a: "Buying policies, storing them, tracking claims and chatting with Cova are free for everyone on the Free Vault (up to 35 assets), forever. Paid tiers simply raise your asset cap and unlock more: Individual Vault (₦800/mo, 80 assets) adds schedule-of-assets export and VaultRewards cashback; Pro Vault (₦2,500/mo, 150 assets) adds the risk dashboard, gap analysis and bundle optimiser; Business Vault (₦4,500/mo) is unlimited with multi-location and team access. Pay annually and get 2 months free." },
];

function FaqSection() {
  const [open, setOpen] = useStatePg(0);
  return (
    <section className="vc-section" style={{ maxWidth: 860, margin: "0 auto", padding: "50px 42px 70px" }}>
      <h2 className="display" style={{ fontSize: 34, textAlign: "center" }}>Questions, answered</h2>
      <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: 16, marginTop: 10 }}>What businesses and individuals ask us - answered up front.</p>
      <div style={{ display: "grid", gap: 10, marginTop: 32 }}>
        {FAQ_ITEMS.map((f, i) => {
          const on = open === i;
          return (
            <div key={i} style={{ borderRadius: 16, background: "var(--surface)", border: "1.5px solid " + (on ? "var(--accent)" : "var(--border)"), overflow: "hidden", transition: "border-color .25s", boxShadow: on ? "var(--shadow-md)" : "var(--shadow-sm)" }}>
              <button onClick={() => setOpen(on ? -1 : i)} style={{ width: "100%", display: "flex", alignItems: "center", gap: 12, padding: "17px 20px", textAlign: "left" }}>
                <span style={{ display: "grid", placeItems: "center", width: 28, height: 28, borderRadius: 9, flexShrink: 0, background: on ? "var(--accent)" : "var(--accent-soft)", color: on ? "#fff" : "var(--accent)", transition: "all .25s" }}>
                  <window.Icon name="chevD" size={16} style={{ transform: on ? "rotate(180deg)" : "none", transition: "transform .3s var(--ease)" }} />
                </span>
                <span style={{ fontWeight: 700, fontSize: 15.5, flex: 1 }}>{f.q}</span>
              </button>
              <div style={{ maxHeight: on ? 200 : 0, overflow: "hidden", transition: "max-height .45s var(--ease)" }}>
                <p style={{ padding: "0 20px 18px 60px", fontSize: 14.5, color: "var(--text-muted)", lineHeight: 1.6, margin: 0 }}>{f.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ================= shared page scaffolding ================= */
function PageHero({ kicker, title, sub }) {
  return (
    <header className="vc-section" style={{ maxWidth: 880, margin: "0 auto", padding: "64px 42px 30px", textAlign: "center" }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 14px", borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-ink)", fontSize: 12.5, fontWeight: 700, animation: "vc-fade-up .5s var(--ease) both" }}>{kicker}</div>
      <h1 className="display vc-page-h1" style={{ fontSize: 52, lineHeight: 1.04, marginTop: 18, animation: "vc-fade-up .6s var(--ease) .05s both" }}>{title}</h1>
      <p style={{ fontSize: 17.5, color: "var(--text-muted)", lineHeight: 1.55, maxWidth: 600, margin: "16px auto 0", animation: "vc-fade-up .6s var(--ease) .12s both" }}>{sub}</p>
    </header>
  );
}
function PageCta({ onStart, label = "Tell Cova what you need - cover, a claim, or your vault" }) {
  return (
    <div style={{ display: "flex", justifyContent: "center", padding: "10px 0 64px" }}>
      <ChatCta onStart={onStart} placeholder={label} />
    </div>
  );
}

/* Chat area CTA - the journey starts by typing, anywhere */
function ChatCta({ onStart, placeholder = "Tell Cova what you need…", light = false }) {
  const [msg, setMsg] = useStatePg("");
  const [listening, setListening] = useStatePg(false);
  const rotatingPh = window.useRotatingPh(!listening); // rotate through what Cova can do for a visitor
  const locale = window.I18N ? window.I18N.localeFor((window.useT && window.useT().lang) || "en") : "en-NG";
  const submit = (e) => { e.preventDefault(); onStart(msg.trim() || undefined); };
  const chips = ["Insure my car", "Build my vault", "I already have a policy", "File a claim"];
  return (
    <form onSubmit={submit} style={{ width: "100%", maxWidth: 600 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 10px 10px 20px", borderRadius: 999, background: light ? "rgba(255,255,255,.96)" : "var(--surface)", border: "1.5px solid " + (light ? "transparent" : "var(--border)"), boxShadow: "var(--shadow-lg)" }}>
        <window.Icon name="sparkle" size={20} style={{ color: "var(--accent)", flexShrink: 0 }} />
        <input value={msg} onChange={(e) => setMsg(e.target.value)} placeholder={listening ? "Listening… speak now" : rotatingPh}
          style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontSize: 15.5, color: light ? "#0f1124" : "var(--text)", minWidth: 0 }} />
        <window.GuestClipBtn size={38} light={light} />
        {window.VoiceMicButton && <window.VoiceMicButton locale={locale} onTranscript={setMsg} onListenChange={setListening} size={38} light={light} />}
        <window.Btn type="submit" iconR="arrowR">{msg.trim() ? "Ask Cova" : "Start"}</window.Btn>
      </div>
      <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 8, marginTop: 12 }}>
        {chips.map((c) => (
          <button key={c} type="button" onClick={() => onStart(c)} style={{ padding: "6px 13px", borderRadius: 999, fontSize: 12.5, fontWeight: 700, background: light ? "rgba(255,255,255,.2)" : "var(--surface)", color: light ? "#fff" : "var(--accent-ink)", border: "1px solid " + (light ? "rgba(255,255,255,.45)" : "var(--border)"), backdropFilter: light ? "blur(6px)" : "none", transition: "all .2s" }}>{c}</button>
        ))}
      </div>
    </form>
  );
}

/* ================= Product page ================= */
function ProductPage({ onStart }) {
  const rows = [
    { icon: "chat", title: "Talk, don't fill forms", desc: "“Add my Hilux, replacement ₦52M.” That sentence creates the asset, values it, scores the risk and queues the right cover. Cova handles motor, property, marine, valuables and more.", tag: "Natural language" },
    { icon: "sparkle", title: "Cova underwriting, human backstop", desc: "Cova auto-detects what you're insuring, assesses the risk and asks only the questions that matter. Most covers bind instantly; edge cases go to our underwriting team within hours.", tag: "Cova" },
    { icon: "eye", title: "Cova Insight", desc: "One score for your whole portfolio. See exposure by category, what to fix first, and how your premiums benchmark against similar portfolios.", tag: "Risk intelligence" },
    { icon: "claim", title: "Claims without the chase", desc: "File in chat or with a 4-step wizard. Small claims auto-approve; bigger ones get further assessment, settled within the 8-day average window or less. Track every stage to settlement.", tag: "Claims" },
    { icon: "trend", title: "VaultRewards", desc: "Stay claim-free and get up to 7% of your premium back, accrued monthly - to your wallet, your bank, or off next year's renewal. A claim within the period forfeits it.", tag: "Cashback" },
    { icon: "doc", title: "Documents on demand", desc: "Schedule of Assets and Policy Certificates - bundled or individual - generated as branded PDFs whenever you need proof of cover.", tag: "PDF exports" },
  ];
  return (
    <div>
      <PageHero kicker="Product" title={<span>The Insurance Operating System.</span>} sub="Not another broker - the layer where businesses and individuals run everything insurance: assets, risks, cover, claims and rewards, in one conversation." />
      <section className="vc-section" style={{ maxWidth: 1100, margin: "0 auto", padding: "10px 42px 40px" }}>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
          {rows.map((r, i) => (
            <div key={r.title} style={{ display: "flex", gap: 16, padding: 24, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)", animation: `vc-fade-up .5s var(--ease) ${i * 0.06}s both` }}>
              <span style={{ display: "grid", placeItems: "center", width: 48, height: 48, borderRadius: 14, flexShrink: 0, background: "var(--accent-soft)", color: "var(--accent)" }}><window.Icon name={r.icon} size={24} /></span>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: "var(--accent)", letterSpacing: ".04em", textTransform: "uppercase" }}>{r.tag}</div>
                <h3 style={{ fontSize: 18, marginTop: 5 }}>{r.title}</h3>
                <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 7 }}>{r.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
      <PageCta onStart={onStart} />
    </div>
  );
}

/* ================= VaultLog page ================= */
function VaultLogPage({ onStart }) {
  const D = window.VC_DATA;
  const demo = [
    { name: "Toyota Hilux Fleet (×3)", cat: "vehicle", rep: "₦52M", ins: "₦52M", status: "insured" },
    { name: "Cold Storage Warehouse", cat: "property", rep: "₦410M", ins: "₦300M", status: "partial" },
    { name: "Forklifts (×4)", cat: "equipment", rep: "₦58M", ins: "-", status: "uninsured" },
  ];
  return (
    <div>
      <PageHero kicker="VaultLog" title={<span>Every asset. Its real value.<br/>Its exact cover.</span>} sub="A living register where purchase price, replacement cost and sum insured sit side by side - so coverage gaps have nowhere to hide." />
      <section className="vc-section" style={{ maxWidth: 760, margin: "0 auto", padding: "6px 42px 30px" }}>
        <div style={{ borderRadius: 22, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-lg)", overflow: "hidden", animation: "vc-fade-up .6s var(--ease) .15s both" }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.1fr", gap: 10, padding: "12px 18px", background: "var(--surface-2)", fontSize: 10.5, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>
            <span>Asset</span><span>Replacement</span><span>Insured</span><span>Status</span>
          </div>
          {demo.map((d, i) => (
            <div key={d.name} style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1.1fr", gap: 10, padding: "13px 18px", alignItems: "center", borderTop: "1px solid var(--border)", animation: `vc-fade-up .5s var(--ease) ${0.25 + i * 0.1}s both` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}><window.AssetThumb category={d.cat} size={34} radius={9} /><span style={{ fontWeight: 700, fontSize: 13.5 }}>{d.name}</span></div>
              <span className="mono" style={{ fontSize: 13.5, fontWeight: 600 }}>{d.rep}</span>
              <span className="mono" style={{ fontSize: 13.5, fontWeight: 600, color: d.ins === "-" ? "var(--danger)" : "var(--success)" }}>{d.ins}</span>
              <window.StatusBadge status={d.status} size="sm" />
            </div>
          ))}
        </div>
      </section>
      <section className="vc-section" style={{ maxWidth: 1000, margin: "0 auto", padding: "20px 42px 40px" }}>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {[["alert", "Gap detection", "Replacement cost vs sum insured, live. Underinsurance means scaled-down claims - we make it visible before it bites."],
            ["layers", "Bundles", "Group fleet, premises or household assets into one policy. One renewal, one certificate, ~18% saved."],
            ["download", "Schedule of Assets", "Auditor-ready PDF of your whole register - values, cover, gaps and totals - generated in one click or one sentence."]].map(([ic, t, d], i) => (
            <div key={t} style={{ padding: 22, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)", animation: `vc-fade-up .5s var(--ease) ${i * 0.07}s both` }}>
              <span style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: 13, background: "var(--accent-soft)", color: "var(--accent)" }}><window.Icon name={ic} size={22} /></span>
              <h3 style={{ fontSize: 17, marginTop: 14 }}>{t}</h3>
              <p style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 7 }}>{d}</p>
            </div>
          ))}
        </div>
      </section>
      <PageCta onStart={onStart} label="Tell Cova what to vault first…" />
    </div>
  );
}

/* ================= Insurers page ================= */
function InsurersPage({ onStart, insurers = [] }) {
  return (
    <div>
      <PageHero kicker="Insurer panel" title={<span>Underwritten by Nigeria's<br/>most trusted carriers.</span>} sub="VaultCova is the operating system; our partners carry the risk. Every policy is backed by a NAICOM-regulated insurer - we match you to the right one, then manage the relationship for you." />
      <section className="vc-section" style={{ maxWidth: 1000, margin: "0 auto", padding: "10px 42px 30px" }}>
        {insurers.length === 0 && (
          <div style={{ padding: 40, textAlign: "center", borderRadius: 20, background: "var(--surface)", border: "1px dashed var(--border-strong)", color: "var(--text-faint)" }}>
            Our underwriter panel is being finalised. Check back shortly.
          </div>
        )}
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16 }}>
          {insurers.map((p, i) => (
            <div key={p.id || p.name} style={{ padding: 24, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)", animation: `vc-fade-up .5s var(--ease) ${i * 0.07}s both` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 13 }}>
                <span className="display" style={{ display: "grid", placeItems: "center", width: 52, height: 52, borderRadius: 15, background: "linear-gradient(135deg,var(--accent-2),var(--accent))", color: "#fff", fontWeight: 700, fontSize: 20 }}>{p.name[0]}</span>
                <div style={{ flex: 1 }}>
                  <h3 style={{ fontSize: 18 }}>{p.name}</h3>
                  <div style={{ fontSize: 12.5, color: "var(--text-faint)", marginTop: 2 }}>★ {p.rating} · NAICOM-regulated</div>
                </div>
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 16 }}>
                {(p.lines || []).map((l) => <span key={l} style={{ fontSize: 12, fontWeight: 600, padding: "4px 11px", borderRadius: 999, background: "var(--accent-soft)", color: "var(--accent-ink)" }}>{l}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 24, padding: 26, borderRadius: 22, background: "linear-gradient(120deg,var(--accent),var(--accent-2))", color: "#fff", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20, boxShadow: "var(--shadow-glow)" }}>
          <div>
            <h3 className="display" style={{ fontSize: 22, color: "#fff" }}>Are you an insurer?</h3>
            <p style={{ fontSize: 14.5, opacity: 0.92, marginTop: 6 }}>Join the panel and receive Cova-triaged, pre-assessed risks with complete documentation.</p>
          </div>
          <window.Btn size="lg" style={{ background: "#fff", color: "var(--accent-ink)", flexShrink: 0 }}>Partner with us</window.Btn>
        </div>
      </section>
      <PageCta onStart={onStart} />
    </div>
  );
}

/* ================= Pricing page ================= */
function PricingPage({ onStart }) {
  const D = window.VC_DATA;
  const [cycle, setCycle] = useStatePg("monthly");
  const annual = cycle === "annual";
  const freeMonths = D.ANNUAL_MONTHS_FREE || 2;
  const perMonth = (p) => annual ? D.annualPerMonth(p.price) : p.price;
  const tiers = D.PLANS.map((p) => ({ id: p.id, name: p.name, price: p.price, per: p.per, feats: p.feats, hot: p.id === "pro" }));
  return (
    <div>
      <PageHero kicker="Pricing" title={<span>Insurance is free to run.<br/>Risk intelligence is the upgrade.</span>} sub="Buying policies, storing them, claims and Cova guidance cost nothing - on any plan, forever. Paid plans add business risk management for businesses and individuals who run serious operations." />
      <section className="vc-section" style={{ maxWidth: 1040, margin: "0 auto", padding: "10px 42px 10px" }}>
        {/* Monthly / annual toggle — annual gives 2 months free */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
          <div style={{ display: "inline-flex", padding: 3, borderRadius: 999, background: "var(--surface-3)" }}>
            {[["monthly", "Monthly"], ["annual", "Annual"]].map(([id, label]) => (
              <button key={id} onClick={() => setCycle(id)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "8px 18px", borderRadius: 999, fontSize: 13, fontWeight: 700, border: "none", cursor: "pointer", background: cycle === id ? "var(--surface)" : "transparent", color: cycle === id ? "var(--text)" : "var(--text-muted)", boxShadow: cycle === id ? "var(--shadow-sm)" : "none", transition: "all .2s" }}>
                {label}{id === "annual" && <span style={{ fontSize: 10, fontWeight: 800, padding: "2px 8px", borderRadius: 999, background: "var(--success-soft)", color: "var(--success)" }}>{freeMonths} MONTHS FREE</span>}
              </button>
            ))}
          </div>
        </div>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14, alignItems: "stretch" }}>
          {tiers.map((tr, i) => (
            <div key={tr.name} style={{ position: "relative", display: "flex", flexDirection: "column", padding: 22, borderRadius: 20, background: tr.hot ? "linear-gradient(160deg,var(--accent),var(--accent-2))" : "var(--surface)", color: tr.hot ? "#fff" : "var(--text)", border: "1px solid " + (tr.hot ? "transparent" : "var(--border)"), boxShadow: tr.hot ? "var(--shadow-glow)" : "var(--shadow-sm)", animation: `vc-fade-up .5s var(--ease) ${i * 0.08}s both`, transform: tr.hot ? "scale(1.03)" : "none" }}>
              {tr.hot && <span style={{ position: "absolute", top: 16, right: 16, fontSize: 10.5, fontWeight: 700, padding: "3px 10px", borderRadius: 999, background: "rgba(255,255,255,.22)" }}>MOST POPULAR</span>}
              <h3 className="display" style={{ fontSize: 19, color: "inherit" }}>{tr.name}</h3>
              <div style={{ marginTop: 12 }}>
                <span className="display mono" style={{ fontSize: 36 }}>{tr.price ? "₦" + perMonth(tr).toLocaleString() : "₦0"}</span>
                <span style={{ fontSize: 13, opacity: 0.75, marginLeft: 6 }}>{tr.price ? "/month" : "forever"}</span>
              </div>
              <div style={{ fontSize: 11.5, marginTop: 4, minHeight: 16, fontWeight: 700, opacity: tr.price && annual ? 1 : 0, color: tr.hot ? "rgba(255,255,255,.92)" : "var(--success)" }}>
                {tr.price ? `₦${D.annualTotal(tr.price).toLocaleString()}/yr · ${freeMonths} months free` : ""}
              </div>
              <div style={{ display: "grid", gap: 9, marginTop: 16, flex: 1 }}>
                {tr.feats.map((f) => (
                  <div key={f} style={{ display: "flex", gap: 9, fontSize: 13.5, alignItems: "flex-start" }}>
                    <window.Icon name="check" size={15} stroke={3} style={{ color: tr.hot ? "#fff" : "var(--success)", flexShrink: 0, marginTop: 2 }} />
                    <span style={{ opacity: tr.hot ? 0.95 : 1, color: tr.hot ? "#fff" : "var(--text-muted)" }}>{f}</span>
                  </div>
                ))}
              </div>
              <window.Btn size="lg" onClick={onStart} style={{ width: "100%", justifyContent: "center", marginTop: 22, ...(tr.hot ? { background: "#fff", color: "var(--accent-ink)" } : {}) }} variant={tr.hot ? "primary" : "outline"}>Subscribe</window.Btn>
            </div>
          ))}
        </div>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginTop: 18, paddingBottom: 30 }}>
          {[["quote", "Pay small-small", "Spread any premium over 12 monthly instalments - card, transfer or USSD."],
            ["vault", "Policies are never paywalled", "Buying, storing and claiming on policies is free on every tier, always."],
            ["trend", "Plans pay for themselves", "One gap analysis or bundled policy typically saves more than a year of fees."]].map(([ic, t2, d]) => (
            <div key={t2} style={{ display: "flex", gap: 12, padding: 18, borderRadius: 16, background: "var(--surface)", border: "1px solid var(--border)" }}>
              <span style={{ display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 11, flexShrink: 0, background: "var(--accent-soft)", color: "var(--accent)" }}><window.Icon name={ic} size={18} /></span>
              <div><div style={{ fontWeight: 700, fontSize: 14 }}>{t2}</div><div style={{ fontSize: 12.5, color: "var(--text-muted)", lineHeight: 1.5, marginTop: 3 }}>{d}</div></div>
            </div>
          ))}
        </div>
      </section>
      <PageCta onStart={onStart} />
    </div>
  );
}

/* ================= Brand assets page ================= */
function svgLockup({ dark = false, markOnly = false, mono = false }) {
  const bg = mono ? (dark ? "#ffffff" : "#0f1124") : "url(#g)";
  const grad = `<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#7a5cff"/><stop offset="1" stop-color="#5b3df5"/></linearGradient></defs>`;
  const mark = `<rect x="0" y="0" width="48" height="48" rx="12" fill="${bg}"/>
  <circle cx="24" cy="24" r="11" fill="none" stroke="${mono && !dark ? "#fff" : dark && mono ? "#0f1124" : "#fff"}" stroke-width="2.6"/>
  <circle cx="24" cy="24" r="3.4" fill="${mono && !dark ? "#fff" : dark && mono ? "#0f1124" : "#fff"}"/>
  <path d="M24 13v4M24 31v4M13 24h4M31 24h4" stroke="${mono && !dark ? "#fff" : dark && mono ? "#0f1124" : "#fff"}" stroke-width="2.6" stroke-linecap="round"/>`;
  if (markOnly) return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="96" height="96">${grad}${mark}</svg>`;
  const text = dark ? "#ffffff" : "#0f1124";
  const accent = mono ? text : "#5b3df5";
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232 48" width="232" height="48">${grad}${mark}
  <text x="60" y="33" font-family="Space Grotesk, Arial, sans-serif" font-weight="600" font-size="26" letter-spacing="-0.5" fill="${text}">Vault<tspan fill="${accent}">Cova</tspan></text></svg>`;
}

function downloadSvg(svg, filename) {
  const blob = new Blob([svg], { type: "image/svg+xml" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url; a.download = filename; a.click();
  setTimeout(() => URL.revokeObjectURL(url), 2000);
}

function BrandPage({ onStart }) {
  const assets = [
    { name: "Primary lockup", file: "vaultcova-lockup.svg", svg: svgLockup({}), darkBg: false },
    { name: "Lockup on dark", file: "vaultcova-lockup-dark.svg", svg: svgLockup({ dark: true }), darkBg: true },
    { name: "Mark only", file: "vaultcova-mark.svg", svg: svgLockup({ markOnly: true }), darkBg: false },
    { name: "Mark - mono ink", file: "vaultcova-mark-mono.svg", svg: svgLockup({ markOnly: true, mono: true }), darkBg: false },
    { name: "Lockup - mono ink", file: "vaultcova-lockup-mono.svg", svg: svgLockup({ mono: true }), darkBg: false },
    { name: "Lockup - mono white", file: "vaultcova-lockup-white.svg", svg: svgLockup({ mono: true, dark: true }), darkBg: true },
  ];
  return (
    <div>
      <PageHero kicker="Brand" title={<span>The VaultCova mark.</span>} sub="The vault dial - our commitment that what's inside stays protected. Download official assets; please don't redraw, recolour or rotate the mark." />
      <section className="vc-section" style={{ maxWidth: 1000, margin: "0 auto", padding: "10px 42px 30px" }}>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
          {assets.map((a, i) => (
            <div key={a.name} style={{ borderRadius: 20, overflow: "hidden", border: "1px solid var(--border)", background: "var(--surface)", boxShadow: "var(--shadow-sm)", animation: `vc-fade-up .5s var(--ease) ${i * 0.06}s both` }}>
              <div style={{ display: "grid", placeItems: "center", height: 130, background: a.darkBg ? "#0f1124" : "var(--surface-2)", padding: 20 }}
                dangerouslySetInnerHTML={{ __html: a.svg.replace(/width="\d+" height="\d+"/, 'width="' + (a.svg.includes("232") ? 170 : 64) + '"') }} />
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 16px", borderTop: "1px solid var(--border)" }}>
                <span style={{ fontWeight: 700, fontSize: 13.5 }}>{a.name}</span>
                <button onClick={() => downloadSvg(a.svg, a.file)} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 700, color: "var(--accent)", padding: "6px 12px", borderRadius: 999, background: "var(--accent-soft)" }}><window.Icon name="download" size={14} />SVG</button>
              </div>
            </div>
          ))}
        </div>
        <div className="vc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 16, marginTop: 24 }}>
          <div style={{ padding: 22, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)" }}>
            <h3 style={{ fontSize: 16 }}>Type</h3>
            <p style={{ fontSize: 13.5, color: "var(--text-muted)", marginTop: 8, lineHeight: 1.6 }}><b style={{ color: "var(--text)" }}>Space Grotesk</b> for display & headings.<br/><b style={{ color: "var(--text)" }}>Manrope</b> for interface & body.<br/><b style={{ color: "var(--text)" }}>JetBrains Mono</b> for figures & policy numbers.</p>
          </div>
          <div style={{ padding: 22, borderRadius: 20, background: "var(--surface)", border: "1px solid var(--border)" }}>
            <h3 style={{ fontSize: 16 }}>Colour</h3>
            <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
              {[["#5b3df5", "Violet 500"], ["#7a5cff", "Violet 400"], ["#0f1124", "Ink"], ["#0f9d58", "Cover green"], ["#e0392b", "Exposure red"]].map(([c, n]) => (
                <div key={c} style={{ textAlign: "center" }}>
                  <div style={{ width: 46, height: 46, borderRadius: 13, background: c, boxShadow: "var(--shadow-sm)" }} />
                  <div className="mono" style={{ fontSize: 9.5, color: "var(--text-faint)", marginTop: 6 }}>{c}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      <PageCta onStart={onStart} />
    </div>
  );
}

Object.assign(window, { FaqSection, ProductPage, VaultLogPage, InsurersPage, PricingPage, BrandPage, ChatCta });