/* Marketing subpages: Product, Pricing, Compliance, Docs, Changelog + shared shell */

const MKT_NAV = [
  { id: "marketing", label: "Home" },
  { id: "product", label: "Product" },
  { id: "pricing", label: "Pricing" },
  { id: "demo", label: "Listen to a demo" },
  { id: "compliance", label: "Compliance" },
  { id: "docs", label: "Docs" },
  { id: "changelog", label: "Changelog" },
];

const MarketingShell = ({ onGo, current, children }) => {
  const [mobileNav, setMobileNav] = useState(false);
  return (
    <div className="mkt">
      <nav className="mkt-nav">
        <a className="row gap-2" style={{ cursor: "pointer", textDecoration: "none" }} onClick={() => onGo("marketing")}>
          <MikakaMark size={28} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.02em", fontSize: 18 }}>
            mikaka<span style={{ color: "var(--mk-orange)" }}>voice</span>
          </span>
        </a>
        <div className="mkt-links">
          {MKT_NAV.filter(l => l.id !== "marketing").map(l => (
            <a key={l.id} onClick={() => onGo(l.id)} className={current === l.id ? "on" : ""}>{l.label}</a>
          ))}
        </div>
        <div style={{ flex: 1 }}/>
        <button className="btn btn-ghost mkt-hide-sm" onClick={() => onGo("login")}>Sign in</button>
        <button className="btn btn-accent" onClick={() => onGo("signup")}>
          Start free <Icon name="arrow-right" />
        </button>
        <button className="btn btn-ghost btn-icon mkt-show-sm" onClick={() => setMobileNav(true)} aria-label="Menu">
          <Icon name="menu" />
        </button>
      </nav>

      {mobileNav && (
        <div className="mk-drawer-backdrop" onClick={() => setMobileNav(false)}>
          <div className="mk-drawer-left" onClick={e => e.stopPropagation()}>
            <div className="row between" style={{ padding: 20, borderBottom: "1px solid var(--border)" }}>
              <div className="row gap-2"><MikakaMark size={24}/><Wordmark/></div>
              <button className="btn btn-ghost btn-icon btn-sm" onClick={() => setMobileNav(false)}><Icon name="x"/></button>
            </div>
            <div style={{ padding: 12 }}>
              {MKT_NAV.map(l => (
                <a key={l.id} onClick={() => { onGo(l.id); setMobileNav(false); }}
                  style={{ display: "block", padding: "14px 12px", fontSize: 16, fontWeight: current === l.id ? 500 : 400, color: current === l.id ? "var(--fg)" : "var(--fg-muted)", borderRadius: 8, background: current === l.id ? "var(--bg-sunken)" : "transparent", cursor: "pointer" }}>{l.label}</a>
              ))}
              <div className="hr" style={{ margin: "12px 0" }}/>
              <a onClick={() => { onGo("login"); setMobileNav(false); }} style={{ display: "block", padding: "14px 12px", fontSize: 16, color: "var(--fg-muted)", cursor: "pointer" }}>Sign in</a>
            </div>
          </div>
        </div>
      )}

      {children}

      <footer className="mkt-footer">
        <div className="mkt-footer-grid">
          <div>
            <div className="row gap-2" style={{ marginBottom: 16 }}><MikakaMark size={24}/><Wordmark/></div>
            <div style={{ fontSize: 13, color: "var(--fg-muted)", maxWidth: 260 }}>AI receptionist for African businesses. Never miss a call.</div>
          </div>
          <div>
            <div className="mkt-footer-h">Product</div>
            <a onClick={() => onGo("product")}>Overview</a>
            <a onClick={() => onGo("pricing")}>Pricing</a>
            <a onClick={() => onGo("changelog")}>Changelog</a>
          </div>
          <div>
            <div className="mkt-footer-h">Resources</div>
            <a onClick={() => onGo("docs")}>Docs</a>
            <a onClick={() => onGo("compliance")}>Compliance</a>
            <a onClick={() => onGo("login")}>Sign in</a>
          </div>
          <div>
            <div className="mkt-footer-h">Company</div>
            <a>About</a>
            <a>Careers</a>
            <a>Contact</a>
          </div>
        </div>
        <div className="mkt-footer-bottom">
          <div>© 2026 Mikaka Telecoms Ltd · Nairobi, Kenya</div>
          <div className="row gap-4"><a>Privacy</a><a>Terms</a><a>Status</a></div>
        </div>
      </footer>
    </div>
  );
};

/* ------------ Product ------------ */
const ProductPage = ({ onGo }) => (
  <MarketingShell onGo={onGo} current="product">
    <section className="mkt-sub-hero">
      <Chip kind="accent">Product</Chip>
      <h1 className="mkt-sub-title">Everything Mikaka does on every call.</h1>
      <p className="mkt-sub-p">Real-time transcription, booking, payments, escalation — built on African carriers, trained on your business.</p>
    </section>

    <section className="mkt-section">
      <div className="grid grid-3 stagger">
        {[
          { i: "bot", t: "Conversational AI", d: "Natural turn-taking in English, Swahili and pidgin. Barge-in supported, 300ms response latency." },
          { i: "phone", t: "Africa-first telecom", d: "Africa's Talking SIP trunks, local numbers in 15 countries. Auto-failover to Safaricom, MTN and Airtel." },
          { i: "calendar", t: "Booking & calendars", d: "Google, Outlook and Calendly. Sees real availability, respects buffer times, sends SMS confirmations." },
          { i: "card", t: "Payments in-call", d: "M-Pesa, Airtel Money and Stripe. Collect deposits or full payments before the caller hangs up." },
          { i: "shield", t: "Compliance guardrails", d: "PCI-aware, no PIN/CVV capture, tenant isolation, audit log of every decision the AI made." },
          { i: "layers", t: "Playbooks, not prompts", d: "Describe your business — we generate the FAQ, escalation rules and services. Edit anything in plain English." },
          { i: "chart", t: "Insights & scorecards", d: "Intent taxonomy, sentiment, first-call resolution, missed-opportunity flags." },
          { i: "users", t: "Seamless human handoff", d: "Warm transfer with full context or schedule a callback. Team inbox keeps everyone aligned." },
          { i: "link", t: "Open integrations", d: "CRMs (HubSpot, Zoho, Salesforce), Slack, Teams, Zapier, or any HTTP webhook." },
        ].map((f, i) => (
          <div className="feat-card" key={i}>
            <div className="icon-box"><Icon name={f.i} size={20}/></div>
            <h3 className="feat-h">{f.t}</h3>
            <p className="feat-p">{f.d}</p>
          </div>
        ))}
      </div>
    </section>

    <section className="mkt-section mkt-section-alt">
      <div className="mkt-two">
        <div>
          <Chip>How it sounds</Chip>
          <h2 className="mkt-h2">She sounds like your best agent on their best day.</h2>
          <p className="mkt-p">Tuned for clarity, politeness and brevity. Never says "as an AI". Knows when to stop selling and transfer the call.</p>
          <button className="btn btn-outline btn-lg" onClick={() => onGo("signup")}>Listen to sample calls <Icon name="play"/></button>
        </div>
        <div className="card card-pad" style={{ maxWidth: 420 }}>
          <div className="row between" style={{ marginBottom: 12 }}>
            <Chip kind="live" dot>live sample</Chip>
            <span className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>00:23</span>
          </div>
          {[
            { who: "Caller", text: "Hi, do you have any emergency slots today?" },
            { who: "Mikaka", text: "Yes — Dr. Owino has an opening at 3:30pm. Is this for a toothache?", hi: true },
            { who: "Caller", text: "Yes, it's quite painful." },
            { who: "Mikaka", text: "I'm sorry. I'll book you now and Dr. Owino will prep for dental trauma.", hi: true },
          ].map((b, i) => (
            <div key={i} style={{ padding: "10px 12px", background: b.hi ? "var(--accent-soft)" : "var(--bg-sunken)", borderRadius: 10, fontSize: 13.5, marginBottom: 8 }}>
              <b style={{ color: b.hi ? "var(--mk-orange-600)" : "var(--fg)" }}>{b.who}:</b> {b.text}
            </div>
          ))}
        </div>
      </div>
    </section>
  </MarketingShell>
);

/* ------------ Pricing ------------ */
const PricingPage = ({ onGo }) => {
  const [annual, setAnnual] = useState(true);
  const plans = [
    { n: "Starter", p: annual ? 0 : 0, d: "For solo operators testing the waters.", features: ["100 minutes / month", "1 local number", "Email support", "Basic analytics"], cta: "Start free", kind: "neutral" },
    { n: "Growth", p: annual ? 39 : 49, d: "For small businesses with steady call volume.", features: ["500 minutes / month", "1 local number", "3 seat team", "Calendar + M-Pesa", "Priority support"], cta: "Start 14-day trial", kind: "accent", popular: true },
    { n: "Scale", p: annual ? 149 : 179, d: "Multi-location, multi-number, higher volume.", features: ["5,000 minutes / month", "5 local numbers", "Unlimited seats", "CRM sync", "Webhook events", "99.9% SLA"], cta: "Start 14-day trial", kind: "purple" },
    { n: "Enterprise", p: null, d: "SSO, custom SLAs, dedicated infra, compliance reviews.", features: ["Unlimited everything", "SAML SSO", "Custom retention", "Dedicated support", "Custom model tuning", "On-prem option"], cta: "Talk to sales", kind: "neutral" },
  ];
  return (
    <MarketingShell onGo={onGo} current="pricing">
      <section className="mkt-sub-hero">
        <Chip kind="accent">Pricing</Chip>
        <h1 className="mkt-sub-title">Simple pricing. <em>No carrier games.</em></h1>
        <p className="mkt-sub-p">Flat monthly fee plus a per-minute rate. All prices in USD — we bill locally in KES, NGN, GHS, ZAR, or card.</p>
        <div className="seg" style={{ marginTop: 24 }}>
          <button className={annual ? "on" : ""} onClick={() => setAnnual(true)}>Annual <span className="chip chip-accent" style={{ marginLeft: 6 }}>-20%</span></button>
          <button className={!annual ? "on" : ""} onClick={() => setAnnual(false)}>Monthly</button>
        </div>
      </section>

      <section className="mkt-section">
        <div className="pricing-grid">
          {plans.map((pl, i) => (
            <div key={i} className={"pricing-card " + (pl.popular ? "pricing-popular" : "")}>
              {pl.popular && <div className="pricing-flag">Most popular</div>}
              <div style={{ marginBottom: 8 }}>
                <Chip kind={pl.kind}>{pl.n}</Chip>
              </div>
              <div className="pricing-price">
                {pl.p === null ? <span>Custom</span> : <>${pl.p}<span className="per">/mo</span></>}
              </div>
              <div className="pricing-d">{pl.d}</div>
              <button className={"btn " + (pl.popular ? "btn-accent" : "btn-outline") + " btn-lg"} style={{ width: "100%", justifyContent: "center", margin: "20px 0" }}
                onClick={() => pl.n === "Enterprise" ? null : onGo("signup")}>
                {pl.cta} {pl.popular && <Icon name="arrow-right"/>}
              </button>
              <div className="pricing-feat">
                {pl.features.map((f, j) => (
                  <div key={j} className="row gap-2" style={{ fontSize: 13.5 }}>
                    <Icon name="check" size={14} style={{ color: "var(--mk-orange)", flexShrink: 0 }}/>
                    <span>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="mkt-section mkt-section-alt">
        <div style={{ maxWidth: 860, margin: "0 auto" }}>
          <Chip>Per-minute rates</Chip>
          <h2 className="mkt-h2" style={{ fontSize: 36, marginBottom: 24 }}>Overage, by country.</h2>
          <div className="card">
            <table className="tbl">
              <thead><tr><th>Country</th><th>Inbound</th><th>Outbound</th><th>SMS</th></tr></thead>
              <tbody>
                {[["Kenya","$0.035","$0.045","$0.02"],["Nigeria","$0.045","$0.060","$0.03"],["Ghana","$0.045","$0.060","$0.03"],["South Africa","$0.030","$0.045","$0.02"],["Tanzania","$0.040","$0.055","$0.03"],["Uganda","$0.040","$0.055","$0.03"]].map((r,i) => (
                  <tr key={i}><td className="cell-strong">{r[0]}</td><td className="mono">{r[1]}/min</td><td className="mono">{r[2]}/min</td><td className="mono">{r[3]}/msg</td></tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="mkt-section">
        <div style={{ maxWidth: 700, margin: "0 auto" }}>
          <h2 className="mkt-h2" style={{ fontSize: 32, textAlign: "center", marginBottom: 24 }}>Questions people ask.</h2>
          <div className="stack gap-3">
            {[
              ["Do you charge for missed or silent calls?", "No — we only count minutes of actual spoken audio."],
              ["Can I bring my own number?", "Yes. On Scale and above. We port in, you keep the number."],
              ["Is there a setup fee?", "Never. No carrier deposits either — we carry that cost."],
              ["What happens if I exceed my minutes?", "Overage rates in the table above kick in. You'll get a notification at 80% and 100%."],
              ["Can I cancel any time?", "Yes. Annual plans get a prorated refund. No contracts, no lock-in."],
            ].map(([q, a], i) => <FAQ key={i} q={q} a={a}/>)}
          </div>
        </div>
      </section>
    </MarketingShell>
  );
};

const FAQ = ({ q, a }) => {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq" data-open={open}>
      <button className="faq-q" onClick={() => setOpen(o => !o)}>
        <span>{q}</span>
        <Icon name="chevron-down" size={16} style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform .2s" }}/>
      </button>
      {open && <div className="faq-a">{a}</div>}
    </div>
  );
};

/* ------------ Compliance ------------ */
const CompliancePage = ({ onGo }) => (
  <MarketingShell onGo={onGo} current="compliance">
    <section className="mkt-sub-hero">
      <Chip kind="accent">Compliance</Chip>
      <h1 className="mkt-sub-title">Security you can show the auditor.</h1>
      <p className="mkt-sub-p">Tenant isolation, regional data residency, audit trails, and regulated-industry guardrails.</p>
    </section>

    <section className="mkt-section">
      <div className="grid grid-4 stagger" style={{ marginBottom: 48 }}>
        {[
          { t: "SOC 2 Type II", s: "In progress · Q2 2026" },
          { t: "ISO 27001", s: "Certified" },
          { t: "PCI-DSS aware", s: "No card data stored" },
          { t: "GDPR + KE DPA", s: "Data subject rights honoured" },
        ].map((c, i) => (
          <div key={i} className="card card-pad" style={{ textAlign: "center" }}>
            <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--accent-soft)", color: "var(--mk-orange-600)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 12px" }}>
              <Icon name="shield" size={20}/>
            </div>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{c.t}</div>
            <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginTop: 4 }}>{c.s}</div>
          </div>
        ))}
      </div>

      <div className="mkt-two" style={{ alignItems: "flex-start" }}>
        <div>
          <h2 className="mkt-h2" style={{ fontSize: 32 }}>Data handling</h2>
          <div className="stack gap-3" style={{ marginTop: 20 }}>
            {[
              ["Encryption at rest", "AES-256 for call recordings, transcripts, and configuration. Keys rotated every 90 days."],
              ["Encryption in transit", "TLS 1.3 for API, SRTP for media."],
              ["Regional residency", "Data stored in eu-west-1 (Ireland) by default. af-south-1 available on Enterprise."],
              ["Retention controls", "Tenant-configurable. Recordings default 30 days, transcripts 1 year. Purge on demand."],
              ["Access logging", "Every read/write/admin action logged with actor and diff. Exportable to SIEM."],
            ].map(([t, d], i) => (
              <div key={i} style={{ padding: 16, border: "1px solid var(--border)", borderRadius: 12 }}>
                <div className="row gap-2" style={{ marginBottom: 4 }}>
                  <Icon name="check" size={14} style={{ color: "var(--mk-success)" }}/>
                  <div style={{ fontWeight: 500, fontSize: 14 }}>{t}</div>
                </div>
                <div style={{ fontSize: 13, color: "var(--fg-muted)" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <h2 className="mkt-h2" style={{ fontSize: 32 }}>Regulated-industry defaults</h2>
          <div className="stack gap-3" style={{ marginTop: 20 }}>
            {[
              ["Never asks for CVV or card PINs", "card"],
              ["Refuses to read full account numbers back", "shield"],
              ["Escalates health crises to a human", "users"],
              ["Redacts KRA PIN / BVN / ID numbers in transcripts", "log"],
              ["Blocks prompt-injection attempts at the model boundary", "shield"],
            ].map(([t, i], idx) => (
              <div key={idx} className="row gap-3" style={{ padding: 12, background: "var(--bg-sunken)", borderRadius: 10 }}>
                <Icon name={i} size={16} style={{ color: "var(--mk-orange)", flexShrink: 0, marginTop: 2 }}/>
                <div style={{ fontSize: 13.5 }}>{t}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, padding: 20, background: "var(--mk-ink)", color: "#fff", borderRadius: 14 }}>
            <div style={{ fontWeight: 500, marginBottom: 6 }}>Need a DPA or SOC 2 report?</div>
            <div style={{ fontSize: 13.5, color: "rgba(255,255,255,.7)", marginBottom: 14 }}>Available to prospects under NDA and all paid customers.</div>
            <button className="btn btn-accent btn-sm" onClick={() => onGo("signup")}>Request documents</button>
          </div>
        </div>
      </div>
    </section>
  </MarketingShell>
);

/* ------------ Docs ------------ */
const DocsPage = ({ onGo }) => {
  const [section, setSection] = useState("get-started");
  const toc = [
    { g: "Getting started", items: [["get-started", "Quickstart"], ["first-call", "Your first call"], ["playbook-basics", "Playbook basics"]] },
    { g: "Receptionist", items: [["intents", "Intents & routing"], ["booking", "Bookings"], ["escalation", "Escalation rules"], ["voices", "Voices & languages"]] },
    { g: "Numbers", items: [["add-number", "Adding numbers"], ["porting", "Porting"], ["carriers", "Carriers & failover"]] },
    { g: "Integrations", items: [["calendar", "Google Calendar"], ["mpesa", "M-Pesa"], ["webhooks", "Webhooks"], ["crm", "CRM sync"]] },
    { g: "API", items: [["auth", "Authentication"], ["calls-api", "/calls"], ["receptionist-api", "/receptionist"], ["events", "Webhook events"]] },
  ];
  return (
    <MarketingShell onGo={onGo} current="docs">
      <div className="docs-layout">
        <aside className="docs-nav">
          <div className="docs-search">
            <Icon name="search" size={14} style={{ color: "var(--fg-faint)" }}/>
            <input placeholder="Search docs…" />
          </div>
          {toc.map((grp, i) => (
            <div key={i} className="nav-group">
              <div className="label">{grp.g}</div>
              {grp.items.map(([k, l]) => (
                <a key={k} className={"docs-link " + (section === k ? "on" : "")} onClick={() => setSection(k)}>{l}</a>
              ))}
            </div>
          ))}
        </aside>
        <main className="docs-main">
          <div style={{ fontSize: 12.5, color: "var(--fg-muted)", marginBottom: 8 }}>Documentation · Getting started</div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 600, letterSpacing: "-0.03em", margin: "0 0 16px" }}>Quickstart</h1>
          <p style={{ fontSize: 16, color: "var(--fg-muted)", lineHeight: 1.6, marginBottom: 32 }}>Get your first AI-answered call in under 15 minutes. This guide walks you through signup, number activation and your first playbook.</p>

          <h2 className="docs-h2">1. Create your workspace</h2>
          <p>Sign up with your work email. We'll send a verification link.</p>

          <h2 className="docs-h2">2. Pick a number</h2>
          <p>Choose a country and area code. Numbers from our pre-provisioned pool activate in ~12 minutes.</p>
          <div className="docs-code">
            <div className="docs-code-head"><span>Response</span><span className="mono" style={{ fontSize: 11 }}>POST /numbers</span></div>
            <pre>{`{
  "number": "+254 20 765 4110",
  "status": "activating",
  "eta_seconds": 720
}`}</pre>
          </div>

          <h2 className="docs-h2">3. Describe your business</h2>
          <p>Write 2–3 paragraphs describing what you do, your services, and how you handle common questions. Mikaka generates the FAQ, services catalogue and escalation rules automatically.</p>
          <div className="docs-callout">
            <Icon name="zap" size={16} style={{ color: "var(--mk-orange)" }}/>
            <div><b>Tip:</b> include edge cases. "For toothache emergencies, always offer same-day booking."</div>
          </div>

          <h2 className="docs-h2">4. Test & publish</h2>
          <p>Call your number from your phone. When you're happy, click <b>Publish</b> and Mikaka goes live.</p>

          <div className="docs-nav-next">
            <a className="docs-next-link"><div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Next</div><div style={{ fontSize: 15, fontWeight: 500 }}>Your first call →</div></a>
          </div>
        </main>
      </div>
    </MarketingShell>
  );
};

/* ------------ Changelog ------------ */
const ChangelogPage = ({ onGo }) => {
  const entries = [
    { v: "v1.28", date: "Apr 18, 2026", tag: "release", title: "Zoho CRM + Zoho Mail integrations", items: [
      "Push every call outcome to Zoho CRM as a lead, contact or deal.",
      "Draft follow-up emails in Zoho Mail with call summary context.",
      "Bi-directional: Zoho contact data enriches incoming caller identity.",
    ]},
    { v: "v1.27", date: "Apr 11, 2026", tag: "improvement", title: "50% faster first response", items: [
      "New streaming ASR pipeline cuts first-response latency to 280ms (p50).",
      "Barge-in detection now under 120ms.",
    ]},
    { v: "v1.26", date: "Apr 03, 2026", tag: "release", title: "Playbook Studio", items: [
      "Visual flow editor for receptionist logic with branch previews.",
      "Import an existing FAQ PDF; we parse and seed the knowledge base.",
      "Version history with one-click rollback.",
    ]},
    { v: "v1.25", date: "Mar 24, 2026", tag: "fix", title: "M-Pesa STK push reliability", items: [
      "Fixed timeout on STK push under high concurrency.",
      "Retry logic with exponential backoff.",
    ]},
    { v: "v1.24", date: "Mar 12, 2026", tag: "release", title: "Pidgin English support", items: [
      "Native pidgin comprehension and generation for Nigerian and Ghanaian accents.",
      "Language auto-detection within the first 2 seconds of the call.",
    ]},
    { v: "v1.23", date: "Feb 28, 2026", tag: "improvement", title: "Admin controls", items: [
      "New Fraud & Limits dashboard with configurable spend thresholds.",
      "Bulk actions on the number pool.",
    ]},
  ];
  const tagColor = { release: "accent", improvement: "live", fix: "warn" };
  const [filter, setFilter] = useState("all");
  const filtered = filter === "all" ? entries : entries.filter(e => e.tag === filter);
  return (
    <MarketingShell onGo={onGo} current="changelog">
      <section className="mkt-sub-hero">
        <Chip kind="accent">Changelog</Chip>
        <h1 className="mkt-sub-title">What we shipped.</h1>
        <p className="mkt-sub-p">Every meaningful change, in reverse chronological order. We ship every week.</p>
      </section>

      <section className="mkt-section">
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          <div className="seg" style={{ marginBottom: 32 }}>
            {[["all","All"],["release","Releases"],["improvement","Improvements"],["fix","Fixes"]].map(([k, l]) => (
              <button key={k} className={filter === k ? "on" : ""} onClick={() => setFilter(k)}>{l}</button>
            ))}
          </div>
          <div className="changelog-wrap">
            {filtered.map((e, i) => (
              <div key={i} className="changelog-entry">
                <div className="changelog-meta">
                  <div className="mono" style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{e.v}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-faint)" }}>{e.date}</div>
                  <Chip kind={tagColor[e.tag]}>{e.tag}</Chip>
                </div>
                <div className="changelog-body">
                  <h3 style={{ margin: "0 0 14px", fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em" }}>{e.title}</h3>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                    {e.items.map((x, j) => (
                      <li key={j} className="row gap-2" style={{ marginBottom: 8, fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.5, alignItems: "flex-start" }}>
                        <Icon name="check" size={14} style={{ color: "var(--mk-orange)", marginTop: 4, flexShrink: 0 }}/>
                        <span>{x}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </MarketingShell>
  );
};

Object.assign(window, { MarketingShell, ProductPage, PricingPage, CompliancePage, DocsPage, ChangelogPage });