/* Public marketing landing — uses MarketingShell from marketing-subs.jsx */
const MarketingPage = ({ onGo }) => {
  const features = [
    { i: "bot", t: "Always-on AI receptionist", d: "Answers in English, Swahili and pidgin. Books appointments, qualifies leads, and forwards the call when it matters." },
    { i: "phone", t: "Built for African carriers", d: "Africa's Talking SIP trunks, local numbers across 15 countries, M-Pesa and Airtel Money billing out the box." },
    { i: "shield", t: "Compliance guardrails", d: "PCI-aware scripts, no PIN/CVV capture, tenant isolation and a full audit trail for regulated businesses." },
    { i: "zap", t: "Activate in 12 minutes", d: "Pre-provisioned number pool means your number rings the second you're done onboarding. No waiting on the carrier." },
    { i: "book", t: "Playbook, not prompts", d: "Describe your business in plain English — we build the FAQ, escalation rules and services automatically." },
    { i: "chart", t: "Transcripts & insights", d: "Every call transcribed, tagged, and scored. See missed opportunities and callbacks in real time." },
  ];

  return (
    <MarketingShell onGo={onGo} current="marketing">
      <section className="mkt-hero brand-grid">
        <svg className="orbit" viewBox="0 0 600 600">
          <circle cx="300" cy="300" r="120"/><circle cx="300" cy="300" r="180"/><circle cx="300" cy="300" r="250"/><circle cx="300" cy="300" r="290"/>
          <circle className="pulse" cx="420" cy="300" r="6"/><circle className="pulse" cx="300" cy="120" r="4" opacity=".7"/><circle className="pulse" cx="120" cy="300" r="5" opacity=".85"/>
        </svg>
        <div style={{ position: "relative", maxWidth: 1200, margin: "0 auto" }}>
          <div className="fade-up"><Chip kind="accent" dot>Now live in Kenya, Nigeria, Ghana & South Africa</Chip></div>
          <h1 className="fade-up" style={{ animationDelay: "80ms" }}>Never miss<br/>another <em>call.</em></h1>
          <p className="fade-up" style={{ animationDelay: "180ms" }}>
            Mikaka Voice is an AI receptionist for African businesses. She picks up
            every call, follows your playbook, and escalates when she should — so
            your team can focus on the work only humans can do.
          </p>
          <div className="row gap-3 fade-up" style={{ animationDelay: "260ms", flexWrap: "wrap" }}>
            <button className="btn btn-accent btn-lg" onClick={() => onGo("signup")}>Get a number in 12 min <Icon name="arrow-right" /></button>
            <button className="btn btn-outline btn-lg" onClick={() => onGo("product")}><Icon name="play" /> See how it works</button>
          </div>
          <div className="row gap-6 fade-up" style={{ marginTop: 48, animationDelay: "360ms", flexWrap: "wrap" }}>
            <div className="row gap-2"><span className="live-dot"/> <span style={{ fontSize: 13, color: "var(--fg-muted)" }}><b style={{ color: "var(--fg)" }}>1,284</b> calls handled in the last hour</span></div>
            <div className="vr hide-sm" style={{ height: 20 }}/>
            <div style={{ fontSize: 13, color: "var(--fg-muted)" }}><b style={{ color: "var(--fg)" }}>98.4%</b> answer rate · <b style={{ color: "var(--fg)" }}>2.1s</b> avg pickup</div>
          </div>
        </div>
      </section>

      <div className="logo-strip">
        <div className="marquee-track">
          {["Java House","Sendy","Twiga Foods","Copia","Africa's Talking","Kopo Kopo","Flutterwave","Lipa Later","Eneza","Chipper Cash"].map((n,i) => <span className="item" key={i}>{n}</span>)}
          {["Java House","Sendy","Twiga Foods","Copia","Africa's Talking","Kopo Kopo","Flutterwave","Lipa Later","Eneza","Chipper Cash"].map((n,i) => <span className="item" key={"b"+i}>{n}</span>)}
        </div>
      </div>

      <section className="mkt-section" style={{ maxWidth: 1200, margin: "0 auto" }}>
        <div style={{ marginBottom: 48 }}>
          <Chip>What's inside</Chip>
          <h2 className="mkt-h2">A full call centre in the time it takes to make tea.</h2>
        </div>
        <div className="grid grid-3 stagger">
          {features.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>
        <div style={{ textAlign: "center", marginTop: 32 }}>
          <button className="btn btn-outline btn-lg" onClick={() => onGo("product")}>See the full product <Icon name="arrow-right"/></button>
        </div>
      </section>

      <section className="mkt-section-dark">
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "0 24px" }}>
          <div className="mkt-two" style={{ gap: 64, alignItems: "center" }}>
            <div>
              <Chip kind="accent">Pricing</Chip>
              <h2 className="mkt-h2" style={{ color: "#fff" }}>Pay for the calls that matter.</h2>
              <p style={{ color: "rgba(255,255,255,.7)", fontSize: 16, lineHeight: 1.5, maxWidth: 440, marginTop: 16 }}>Flat monthly fee + per-minute rate. No setup, no carrier deposits, no contracts.</p>
              <button className="btn btn-outline btn-lg" style={{ marginTop: 24, color: "#fff", borderColor: "rgba(255,255,255,.3)" }} onClick={() => onGo("pricing")}>See all plans <Icon name="arrow-right"/></button>
            </div>
            <div style={{ background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.1)", borderRadius: 20, padding: 32 }}>
              <div className="row between" style={{ marginBottom: 20 }}>
                <div>
                  <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)" }}>Growth</div>
                  <div className="display" style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.03em", color: "#fff" }}>$39<span style={{ fontSize: 16, color: "rgba(255,255,255,.6)", fontWeight: 400 }}>/mo</span></div>
                </div>
                <Chip kind="accent">Most popular</Chip>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 14, color: "rgba(255,255,255,.85)" }}>
                {["1 local number", "500 minutes included", "$0.04 / extra minute", "Unlimited transcripts", "3 seat team", "Google Calendar + M-Pesa"].map((x, i) => (
                  <li key={i} className="row gap-2"><Icon name="check" size={14} style={{ color: "var(--mk-orange)" }}/> {x}</li>
                ))}
              </ul>
              <button className="btn btn-accent btn-lg" style={{ width: "100%", justifyContent: "center", marginTop: 24 }} onClick={() => onGo("signup")}>Start free 14-day trial</button>
            </div>
          </div>
        </div>
      </section>
    </MarketingShell>
  );
};

window.MarketingPage = MarketingPage;