/* All section components for the Mica landing page */
const { useState, useEffect, useRef } = React;

/* ============ NAV ============ */
const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={`nav-wrap ${scrolled ? 'scrolled' : ''}`}>
      <nav className="nav" aria-label="Primary">
        <a className="brand" href="#" aria-label="Mica home">
          <img className="wordmark" src="mica-logo.png" alt="Mica" />
        </a>
        <div className="nav-links">
          <a href="#product">Product</a>
          <a href="#pricing">Pricing</a>
          <a href="/privacy">Privacy</a>
          <a href="#faq">FAQ</a>
        </div>
        <span className="nav-spacer"></span>
        <a className="nav-ghost" href="https://app.meetmica.com/login">Sign in</a>
        <a className="nav-cta" href="https://app.meetmica.com/login">
          Get Started <Icon name="arrow-right" size={14}/>
        </a>
      </nav>
    </div>
  );
};

/* ============ HERO ============ */
const Hero = ({ headline }) => {
  const scrollToChat = () => {
    document.getElementById('workflow')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <section className="hero" id="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow"><span className="dot"></span>AI-NATIVE CRM · WHATSAPP-FIRST</div>
            <h1>
              Your CRM<br/>is now a <span className="accent">contact.</span>
            </h1>
            <p className="hero-sub">
              Mica is the CRM your reps already use, because it lives in WhatsApp.
              Voice notes become deals. Business cards become contacts. The data-entry tax disappears.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="https://app.meetmica.com/login">
                Get Started <Icon name="arrow-right" size={16}/>
              </a>
              <button className="btn btn-secondary btn-lg" onClick={scrollToChat}>
                <Icon name="whatsapp" size={16}/> See it in WhatsApp
              </button>
            </div>
            <div className="hero-meta">
              <span className="pill"><span className="dot"></span>WhatsApp Business API · Verified</span>
              <span>POPIA · GDPR</span>
            </div>
          </div>
          <div className="hero-phone-wrap">
            <div className="hero-glow"></div>
            <ChatThread script={HERO_SCRIPT} loop={true} startDelay={500} />
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ PROBLEM ============ */
const Problem = () => (
  <section className="section" id="problem">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow"><span className="dot"></span>THE PROBLEM</div>
        <h2>Your reps don't update the CRM.<br/><span style={{color:'var(--muted)'}}>You already know this.</span></h2>
        <p>
          You've tried Salesforce. Pipedrive. Half the tabs in Chrome. None of it changes the fact that the people closing your deals refuse to fill in forms after 6pm. The data-entry tax is killing your forecast.
        </p>
      </div>
      <div className="problem-stats">
        <div className="problem-stat">
          <div className="num">73%</div>
          <div className="desc">of CRM data goes stale within 30 days of being entered.</div>
          <div className="src">Industry composite · 2024</div>
        </div>
        <div className="problem-stat">
          <div className="num">5.5h</div>
          <div className="desc">per rep, per week, lost to manual logging and pipeline hygiene.</div>
          <div className="src">SDR time studies · 2024</div>
        </div>
        <div className="problem-stat">
          <div className="num">1 in 4</div>
          <div className="desc">deals that slip do so because no one followed up, not because of price.</div>
          <div className="src">Win/loss analysis</div>
        </div>
      </div>
    </div>
  </section>
);

/* ============ FIX ============ */
const Fix = () => (
  <section className="section" id="product" style={{ paddingTop: 40 }}>
    <div className="container">
      <div className="section-head">
        <div className="eyebrow"><span className="dot"></span>THE FIX</div>
        <h2>Three jobs.<br/>One chat thread.</h2>
        <p>Mica is a sales co-pilot, an analyst, and a scout, all reachable from the app on your rep's lock screen.</p>
      </div>
      <div className="fix-grid">

        {/* Card 1 — WhatsApp agent */}
        <div className="fix-card">
          <span className="label">01 · CO-PILOT</span>
          <h3>The agent that lives in WhatsApp.</h3>
          <p>
            Voice notes, vCards, photographed business cards, free-form pipeline updates. Mica parses it, files it, and tells you what to do next.
          </p>
          <div className="visual fc-stack">
            <div className="mini s1"><div className="ico"><Icon name="voicewave" size={14}/></div>"Just met with Maya at Kontoor, push them to Q2."</div>
            <div className="mini s2"><div className="ico"><Icon name="card" size={14}/></div>vCard imported · 3 new contacts at Kontoor Brands</div>
            <div className="mini s3"><div className="ico"><Icon name="check" size={14}/></div>Stage moved → Qualified · Follow-up Mon 09:00</div>
          </div>
        </div>

        {/* Card 2 — Scoring */}
        <div className="fix-card">
          <span className="label">02 · SCORING</span>
          <h3>Lead scores with reasoning.</h3>
          <p>
            Every company gets rated 0–100 against your ICP, with a rationale your reps actually read.
          </p>
          <div className="visual fc-score">
            {[
              ["Kontoor Brands", 92],
              ["TechFlow Labs", 84],
              ["Northwave Co.", 71],
              ["Helios Energy", 58],
              ["Stratus Capital", 33],
            ].map(([co, val]) => (
              <div className="row" key={co}>
                <span className="co">{co}</span>
                <span className="meter"><span style={{ width: val + '%' }}></span></span>
                <span className="val">{val}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Card 3 — Scout */}
        <div className="fix-card">
          <span className="label">03 · SCOUT</span>
          <h3>A daily list of who to call.</h3>
          <p>Mica scrapes the web for net-new companies matching your pitch and qualifies them overnight.</p>
          <div className="visual fc-scout">
            <div className="scout-item"><span className="dot"></span><span className="ttl">Aerodyne Aviation · Series B</span><span className="tag">★ 94</span></div>
            <div className="scout-item"><span className="dot"></span><span className="ttl">Lumen Health · Hiring 12 SDRs</span><span className="tag">★ 88</span></div>
            <div className="scout-item"><span className="dot"></span><span className="ttl">Verdant Foods · New CRO</span><span className="tag">★ 81</span></div>
            <div className="scout-item"><span className="dot"></span><span className="ttl">Polaris Bank · RFP issued</span><span className="tag">★ 77</span></div>
          </div>
        </div>

      </div>
    </div>
  </section>
);

/* ============ WORKFLOW ============ */
const WORKFLOW_STEPS = [
  {
    title: "06:42 - Morning briefing",
    accent: "06:42",
    blurb: "Mica DMs you a one-screen briefing: yesterday's pipeline changes, today's calls with prep notes, and which two deals went quiet.",
    script: [
      { kind: "day", text: "Today · 06:42" },
      { kind: "them", text: "Good morning, Aisha. 3 things for today ↓", time: "06:42", delay: 400 },
      { kind: "them", text: "1. Kontoor pricing call at 10am · brief attached\n2. TechFlow has gone quiet, last touch 8d\n3. Verdant signed the MSA at 23:14 last night 🎉", time: "06:42", delay: 1200 },
      { kind: "me", text: "Send me the Kontoor brief.", time: "06:43", delay: 1400 },
    ],
  },
  {
    title: "09:55 - Pre-meeting brief",
    accent: "09:55",
    blurb: "Five minutes before your call, Mica drops a one-pager: recent news, last touchpoint, the three open questions from your last meeting, and a suggested ask.",
    script: [
      { kind: "day", text: "Today · 09:55" },
      { kind: "them", text: "5 min till Kontoor. Quick brief:", time: "09:55", delay: 400 },
      { kind: "card", delay: 900, payload: {
        label: "Meeting brief · Kontoor",
        stage: "Negotiating",
        rows: [
          ["Attendees", "Maya, Tom + you"],
          ["Last touch", "Demo · 4 days ago"],
          ["Open questions", "SSO · pricing · pilot scope"],
          ["Suggested ask", "Commit to Q2 pilot"],
        ],
        foot: ["Open in app", "Looks good"],
      }},
    ],
  },
  {
    title: "10:48 - Post-call voice note",
    accent: "10:48",
    blurb: "Walk to your car, hold the mic, talk. Mica turns the ramble into structured notes, contacts, next steps and a draft follow-up email, without you opening a single dropdown.",
    script: [
      { kind: "day", text: "Today · 10:48" },
      { kind: "me", kindSub: "voice", duration: 14, time: "10:48", delay: 500 },
      { kind: "typing", delay: 700 },
      { kind: "them", text: "Got it. Captured 3 follow-ups and 1 risk. Drafting an email to Maya.", time: "10:48", delay: 1500, replaceTyping: true },
      { kind: "card", delay: 800, payload: {
        label: "Email draft · review",
        stage: "Ready",
        rows: [
          ["To", "maya@kontoor.com"],
          ["Subject", "Pilot scope + next steps"],
          ["Attached", "Security one-pager"],
          ["Tone", "Warm · confident"],
        ],
        foot: ["Edit", "Send"],
      }},
    ],
  },
  {
    title: "17:15 - Pipeline closes itself",
    accent: "17:15",
    blurb: "By end of day, every deal touched has moved stage, been scored, and queued its next action. Your forecast updates without anyone touching a spreadsheet.",
    script: [
      { kind: "day", text: "Today · 17:15" },
      { kind: "them", text: "End of day rollup. 4 deals moved, 1 new at-risk flag.", time: "17:15", delay: 400 },
      { kind: "card", delay: 900, payload: {
        label: "Daily pipeline",
        stage: "+R 480K",
        rows: [
          ["Kontoor", "Qualified → Negotiating"],
          ["TechFlow", "Stalled · 8d (re-engage?)"],
          ["Verdant", "Won · R 1.2M ARR"],
          ["Helios", "New · scored 71/100"],
        ],
        foot: ["Open in app", "Looks good"],
      }},
      { kind: "me", text: "Beautiful. Re-engage TechFlow tomorrow at 9.", time: "17:16", delay: 1400 },
    ],
  },
];

const Workflow = () => {
  const [active, setActive] = useState(0);
  const stepRefs = useRef([]);

  useEffect(() => {
    const handler = () => {
      const mid = window.innerHeight / 2;
      let best = 0; let bestDist = Infinity;
      stepRefs.current.forEach((el, i) => {
        if (!el) return;
        const r = el.getBoundingClientRect();
        const d = Math.abs(r.top + r.height / 2 - mid);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      setActive(best);
    };
    window.addEventListener('scroll', handler, { passive: true });
    handler();
    return () => window.removeEventListener('scroll', handler);
  }, []);

  return (
    <section className="section" id="workflow">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>A DAY WITH MICA</div>
          <h2>What happens on a Tuesday<br/>between meetings.</h2>
          <p>Your rep's CRM activity, captured entirely through the chat thread on their lock screen.</p>
        </div>

        <div className="workflow">
          <div className="workflow-steps">
            {WORKFLOW_STEPS.map((s, i) => (
              <div
                key={i}
                ref={el => stepRefs.current[i] = el}
                className={`wf-step ${active === i ? 'active' : ''}`}
                onClick={() => setActive(i)}
              >
                <div className="num">0{i+1}</div>
                <div className="content">
                  <h4>
                    <span className="accent">{s.accent}</span>
                    {s.title.replace(s.accent, '')}
                  </h4>
                  <p>{s.blurb}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="workflow-visual">
            <div style={{ position: 'sticky', top: 100, display: 'flex', justifyContent: 'center' }}>
              <ChatThread
                key={active}
                script={WORKFLOW_STEPS[active].script}
                loop={true}
                startDelay={300}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ UNDER THE HOOD ============ */
const UnderHood = () => (
  <section className="hood">
    <div className="container">
      <div className="hood-head">Under the hood</div>
      <div className="hood-row">
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"/></svg>
          </span>
          Anthropic
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"/></svg>
          </span>
          OpenAI
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-label="Wispr Flow"><rect x="3" y="3" width="3" height="18" rx="1.5"/><rect x="8" y="6" width="3" height="12" rx="1.5"/><rect x="13" y="9" width="3" height="6" rx="1.5"/><rect x="18" y="3" width="3" height="18" rx="1.5"/></svg>
          </span>
          Whisper
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9 1.036c-.015-.986-1.26-1.41-1.874-.637L.764 12.05C-.33 13.427.65 15.455 2.409 15.455h9.579l.113 7.51c.014.985 1.259 1.408 1.873.636l9.262-11.653c1.093-1.375.113-3.403-1.645-3.403h-9.642z"/></svg>
          </span>
          Supabase
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
          </span>
          WhatsApp Business
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"/></svg>
          </span>
          Google
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0v11.408h11.408V0zm12.594 0v11.408H24V0zM0 12.594V24h11.408V12.594zm12.594 0V24H24V12.594z"/></svg>
          </span>
          Microsoft
        </div>
        <div className="hood-item">
          <span className="logo-mark">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z"/></svg>
          </span>
          Stripe
        </div>
      </div>
    </div>
  </section>
);

/* ============ PRICING ============ */
const Pricing = () => {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>PRICING</div>
          <h2>Pay per seat.<br/>Pay per AI action.</h2>
          <p>Every plan includes the WhatsApp agent, the dashboard, and Scout. AI usage is billed in credits so heavy weeks don't break the bank, and quiet ones don't waste it.</p>
        </div>
        <div className="pricing-grid">

          <div className="price-card">
            <span className="tier-tag">STARTER</span>
            <h3>Solo</h3>
            <p className="blurb">For founders running BD themselves before the first hire.</p>
            <div className="price">
              <span className="cur">ZAR</span>
              <span className="amt">490</span>
              <span className="unit">/mo</span>
            </div>
            <div className="credits">300 AI credits / month</div>
            <ul>
              <li><Icon name="check" size={14}/>WhatsApp agent · 1 number</li>
              <li><Icon name="check" size={14}/>Web app dashboard</li>
              <li><Icon name="check" size={14}/>Lead scoring</li>
              <li><Icon name="check" size={14}/>Email integration</li>
            </ul>
            <a href="https://app.meetmica.com/login" className="price-cta">Start free for 14 days</a>
          </div>

          <div className="price-card featured">
            <span className="tier-tag">TEAM <span className="accent">· MOST POPULAR</span></span>
            <h3>Team</h3>
            <p className="blurb">For sales teams of 3–25 who close in WhatsApp threads, not Salesforce tabs.</p>
            <div className="price">
              <span className="cur">ZAR</span>
              <span className="amt">1,490</span>
              <span className="unit">/seat/mo</span>
            </div>
            <div className="credits">1,500 AI credits / seat / month</div>
            <ul>
              <li><Icon name="check" size={14}/>Everything in Solo</li>
              <li><Icon name="check" size={14}/>Opportunity Scout (daily)</li>
              <li><Icon name="check" size={14}/>Shared pipeline & roles</li>
              <li><Icon name="check" size={14}/>Manager rollups & forecasting</li>
              <li><Icon name="check" size={14}/>Calendar + Mail (Google/MS)</li>
            </ul>
            <a href="https://app.meetmica.com/login" className="price-cta">Get Started</a>
          </div>

          <div className="price-card">
            <span className="tier-tag">ENTERPRISE</span>
            <h3>Scale</h3>
            <p className="blurb">For listed corporates funding ESD beneficiaries or running 25+ reps.</p>
            <div className="price">
              <span className="amt">Custom</span>
            </div>
            <div className="credits">Volume credits · pooled or per-seat</div>
            <ul>
              <li><Icon name="check" size={14}/>Everything in Team</li>
              <li><Icon name="check" size={14}/>SSO, audit logs, data residency</li>
              <li><Icon name="check" size={14}/>White-label option</li>
              <li><Icon name="check" size={14}/>ESD / B-BBEE invoicing</li>
              <li><Icon name="check" size={14}/>Dedicated success engineer</li>
            </ul>
            <a href="mailto:hello@mica.ai" className="price-cta">Talk to sales</a>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ FAQ ============ */
const FAQS = [
  {
    q: "Is this really WhatsApp, or a WhatsApp lookalike?",
    a: "Real WhatsApp. Mica is a verified WhatsApp Business sender, so your reps message a contact in their actual WhatsApp app. No fork, no separate inbox, no install. The web dashboard exists for managers and pipeline views, but every rep interaction is native chat."
  },
  {
    q: "What does the AI actually do, and what do credits cover?",
    a: "Voice transcription, lead scoring, opportunity scout, follow-up drafting, meeting briefs, and free-form pipeline updates. Each is metered in credits so a quiet week costs less than a busy one. A typical rep uses 800–1,200 credits per month, well inside the Team plan allowance."
  },
  {
    q: "How do you handle data privacy and POPIA / GDPR?",
    a: "Conversations are encrypted in transit and at rest. We're POPIA-compliant for South African customers and GDPR-compliant for EU customers, with optional data residency in the EU and ZA. Your CRM data is yours. You can export it as a single archive, any time, in one click."
  },
  {
    q: "Will my reps need to learn anything new?",
    a: "If they can send a WhatsApp message, they're done. Onboarding is one message. They say hi to Mica, she walks them through it. No training, no Slack channel, no quarterly enablement session about adoption metrics."
  },
  {
    q: "Can I migrate from Salesforce, HubSpot or Pipedrive?",
    a: "Yes. Import via CSV in five minutes, or we'll run a managed migration for free on Team and Scale. We map your stages, custom fields, and historical activity. Nothing is lost, and nothing has to be re-typed."
  },
  {
    q: "Who is the team behind Mica?",
    a: "Mica is built by Takat AI, in partnership with Nonzero Africa. Together we combine two decades of WhatsApp-native AI engineering with two decades of business-development experience across African markets. 51% Black female-owned, Level 2 B-BBEE."
  },
];

const Faq = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>FAQ</div>
          <h2>Things you probably want to ask.</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="plus"><Icon name="plus" size={14}/></span>
              </div>
              <div className="faq-a">{item.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ CTA ============ */
const CtaStrip = () => (
  <section className="cta-strip">
    <div className="container">
      <h2>Stop logging.<br/><span className="accent">Start selling.</span></h2>
      <p>Two minutes to set up. Mica is on WhatsApp the moment you finish signing in.</p>
      <a className="btn btn-primary btn-lg" href="https://app.meetmica.com/login">Get Started <Icon name="arrow-right" size={16}/></a>
    </div>
  </section>
);

/* ============ FOOTER ============ */
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-col">
          <a className="brand" href="#" aria-label="Mica home">
            <img className="wordmark" src="mica-logo.png" alt="Mica" />
          </a>
          <p className="footer-tag">The CRM your reps will actually use, because it lives in their WhatsApp.</p>
          <div style={{ marginTop: 18 }}>
            <span className="popia-badge"><span className="dot"></span>POPIA · GDPR Ready</span>
          </div>
        </div>
        <div className="footer-col">
          <h5>Product</h5>
          <ul>
            <li><a href="#product">WhatsApp agent</a></li>
            <li><a href="#product">Lead scoring</a></li>
            <li><a href="#product">Opportunity Scout</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="mailto:hello@mica.ai">Contact</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Legal</h5>
          <ul>
            <li><a href="/privacy">Privacy</a></li>
            <li><a href="/terms">Terms</a></li>
            <li><a href="/security">Security</a></li>
            <li><a href="/dpa">DPA</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>Mica by Takat AI &amp; NonZéro · Johannesburg · © 2026</span>
        <span>Built in Africa · Verified by Meta · Powered by Claude</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Problem, Fix, Workflow, UnderHood, Pricing, Faq, CtaStrip, Footer });