/* Remaining sections — Mobile showcase, Compare, Pricing, Enterprise, Social, Footer */

const { motion, AnimatePresence } = window.FM;
const L2 = window.Lucide;

/* ────────────────────────────────────────────────────────────────
   MOBILE KEYBOARD SHOWCASE
   ──────────────────────────────────────────────────────────────── */
const PhoneShowcase = () => {
  const RAW = 'bro can u send the deck till EOD, very urgent yaar';
  const POL = "Could you share the deck by end of day? It's time-sensitive — appreciate it.";
  const [phase, setPhase] = React.useState('raw'); // 'raw' | 'morph' | 'pol'
  const [pulse, setPulse] = React.useState(false);
  const [out, setOut] = React.useState(RAW);
  const tref = React.useRef(null);

  React.useEffect(() => {
    const cycle = () => {
      // tap pulse
      setPulse(true);
      setTimeout(() => setPulse(false), 700);
      // morph to polished
      setPhase('morph');
      // char-by-char swap (simple cross-fade by length transition)
      let i = 0;
      const total = Math.max(RAW.length, POL.length);
      const tick = () => {
        i++;
        const a = RAW.slice(i);
        const b = POL.slice(0, i);
        setOut(b + a);
        if (i < total) tref.current = setTimeout(tick, 14);
        else { setOut(POL); setPhase('pol'); tref.current = setTimeout(reset, 3500); }
      };
      tref.current = setTimeout(tick, 600);
    };
    const reset = () => {
      setOut(RAW); setPhase('raw');
      tref.current = setTimeout(cycle, 1800);
    };
    tref.current = setTimeout(cycle, 1400);
    return () => clearTimeout(tref.current);
  }, []);

  return (
    <section className="relative py-24 sm:py-32 px-5 sm:px-8 overflow-hidden">
      <div aria-hidden className="absolute inset-0 -z-10">
        <div className="absolute left-1/2 -translate-x-1/2 top-1/3 size-[600px] rounded-full bg-sky-brand/10 blur-[120px]" />
      </div>

      <div className="mx-auto max-w-[1180px] grid lg:grid-cols-12 gap-12 items-center">
        {/* Phone */}
        <div className="lg:col-span-7 flex items-center justify-center">
          <div
            className="relative"
            style={{ perspective: '1400px' }}
          >
            <div
              className="relative"
              style={{ transform: 'rotateY(-8deg) rotateX(4deg) rotateZ(-1deg)', transformStyle: 'preserve-3d' }}
            >
              <Phone>
                <ChatScreen text={out} morphing={phase === 'morph'} polished={phase === 'pol'} />
                <KeyboardToolbar pulse={pulse} />
                <FakeKeyboard />
              </Phone>
              {/* glow */}
              <div aria-hidden className="absolute -inset-10 -z-10 pointer-events-none"
                   style={{ background: 'radial-gradient(50% 50% at 50% 50%, rgba(217,70,239,0.25), transparent 70%)' }} />
            </div>
          </div>
        </div>

        <div className="lg:col-span-5">
          <Eyebrow>The keyboard</Eyebrow>
          <h2 className="mt-5 text-[34px] sm:text-[44px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance">
            Lives in your <span className="gradient-text">keyboard</span>. Not in a side app.
          </h2>
          <p className="mt-4 text-[16px] text-white/55 max-w-[420px]">
            Tap the Enwrite key in the system toolbar. Your selection gets replaced with the polished version in under
            two seconds. No copy-paste. No app-switching. No prompt to write.
          </p>
          <ul className="mt-6 space-y-2.5 text-[14px] text-white/70">
            {[
              ['Tap to rewrite', 'Selected text in-place'],
              ['Swap tone instantly', 'Professional / Casual / Concise chips'],
              ['Hold the mic', 'Hinglish voice → polished English'],
              ['5s undo', 'From the same toolbar — never lose the original'],
            ].map(([k, v]) => (
              <li key={k} className="flex items-start gap-3">
                <span className="mt-2 size-1.5 rounded-full" style={{ background: 'var(--grad)' }} />
                <div><span className="text-white">{k}.</span> <span className="text-white/55">{v}.</span></div>
              </li>
            ))}
          </ul>

          <div className="mt-8 flex items-center gap-2">
            <AppBadge name="WhatsApp" />
            <AppBadge name="Slack" />
            <AppBadge name="Gmail" />
            <span className="text-[12px] text-white/40 ml-2">+ 40 more</span>
          </div>
        </div>
      </div>
    </section>
  );
};

const Phone = ({ children }) => (
  <div
    className="relative w-[320px] sm:w-[360px] rounded-[44px] p-[5px]"
    style={{
      background: 'linear-gradient(180deg, #21283a 0%, #0a0d18 100%)',
      boxShadow:
        '0 0 0 1px rgba(255,255,255,0.08) inset, 0 30px 70px -20px rgba(0,0,0,0.7), 0 8px 28px -10px rgba(56,189,248,0.18)',
    }}
  >
    <div className="rounded-[40px] overflow-hidden bg-ink-950 relative" style={{ aspectRatio: '9 / 19' }}>
      {/* dynamic island */}
      <div className="absolute top-2 left-1/2 -translate-x-1/2 z-30 h-[26px] w-[100px] rounded-full bg-black/90" />
      {/* status bar */}
      <div className="absolute top-0 inset-x-0 z-20 flex items-center justify-between px-7 pt-3 text-[11px] text-white/80 font-medium">
        <span>9:41</span>
        <span className="flex items-center gap-1">
          <L2.Signal size={12} />
          <L2.Wifi size={12} />
          <span className="ml-1 inline-block w-[22px] h-[10px] rounded-[3px] border border-white/60 relative">
            <span className="absolute inset-[1.5px] right-[6px] bg-white/80 rounded-[1.5px]" />
          </span>
        </span>
      </div>
      {children}
    </div>
  </div>
);

const ChatScreen = ({ text, morphing, polished }) => (
  <div className="absolute top-0 inset-x-0 h-[56%] pt-12">
    {/* WhatsApp-ish header */}
    <div className="flex items-center gap-3 px-4 pt-3 pb-3 border-b border-white/5">
      <button className="text-white/60"><L2.ChevronLeft size={18} /></button>
      <div className="size-8 rounded-full shrink-0" style={{ background: 'linear-gradient(135deg, #38BDF8, #8B5CF6)' }} />
      <div className="flex-1">
        <div className="text-[13px] font-semibold text-white">Rohan · Co-founder</div>
        <div className="text-[10.5px] text-emerald-400">online</div>
      </div>
      <L2.Video size={16} className="text-white/55" />
      <L2.Phone size={16} className="text-white/55" />
    </div>
    {/* messages */}
    <div className="px-3 pt-4 space-y-2.5 text-[12.5px]">
      <div className="max-w-[78%] rounded-2xl rounded-tl-md bg-white/[0.06] px-3 py-2 text-white/85">
        Yo did finance get back about the deck?
      </div>
      <div className="text-[10px] text-white/30 text-center pt-1">10:42 AM</div>
    </div>
    {/* compose box */}
    <div className="absolute bottom-0 inset-x-0 px-3 pb-2">
      <div
        className={
          'rounded-2xl px-3 py-2.5 text-[12.5px] leading-snug min-h-[44px] transition-colors duration-300 ' +
          (polished
            ? 'border border-emerald-400/40 bg-emerald-400/[0.05] text-white/95'
            : morphing
              ? 'border border-fuchsia-brand/40 bg-fuchsia-brand/[0.06] text-white/90'
              : 'border border-white/10 bg-white/[0.04] text-white/85')
        }
      >
        {text}
      </div>
    </div>
  </div>
);

const KeyboardToolbar = ({ pulse }) => (
  <div className="absolute left-0 right-0 z-20" style={{ bottom: '40%' }}>
    <div className="mx-2 rounded-2xl glass-strong p-1.5 flex items-center justify-between">
      <div className="flex items-center gap-1">
        <span className="relative inline-flex items-center gap-1 rounded-xl px-2.5 py-1.5 text-[11px] font-semibold text-white"
              style={{ background: 'var(--grad)' }}>
          {pulse && <span className="absolute inset-0 rounded-xl animate-ping" style={{ background: 'var(--grad)', opacity: 0.55 }} />}
          <L2.Wand2 size={12} className="relative" />
          <span className="relative">Enwrite</span>
        </span>
        {['Pro', 'Casual', 'Concise'].map(t => (
          <span key={t} className="rounded-lg px-1.5 py-1 text-[10px] text-white/45 bg-white/[0.04]">{t}</span>
        ))}
      </div>
      <div className="flex items-center gap-0.5">
        <L2.Undo2 size={12} className="text-white/55 mx-1" />
        <L2.Mic size={12} className="text-white/55 mx-1" />
      </div>
    </div>
  </div>
);

const FakeKeyboard = () => {
  const rows = ['QWERTYUIOP', 'ASDFGHJKL', 'ZXCVBNM'];
  return (
    <div className="absolute bottom-0 inset-x-0 z-10 px-1.5 pb-2 pt-1.5"
         style={{ height: '40%', background: 'linear-gradient(180deg, #161b2c, #0e1322)' }}>
      <div className="flex flex-col gap-1.5">
        {rows.map((r, i) => (
          <div key={i} className={'flex gap-1 justify-center ' + (i === 1 ? 'px-3' : i === 2 ? 'px-1' : '')}>
            {i === 2 && <span className="rounded-md bg-white/[0.05] px-2.5 text-[10px] text-white/60 flex items-center">⇧</span>}
            {r.split('').map(k => (
              <span key={k} className="flex-1 max-w-[26px] rounded-md bg-white/[0.07] text-center text-[10.5px] text-white/85 py-1.5">{k}</span>
            ))}
            {i === 2 && <span className="rounded-md bg-white/[0.05] px-2.5 text-[10px] text-white/60 flex items-center">⌫</span>}
          </div>
        ))}
        <div className="flex gap-1 justify-center mt-1">
          <span className="rounded-md bg-white/[0.05] px-2 py-1 text-[10px] text-white/65">123</span>
          <span className="rounded-md bg-white/[0.05] px-2 py-1 text-[10px] text-white/65">🌐</span>
          <span className="rounded-md bg-white/[0.07] flex-1 text-center text-[10px] text-white/55 py-1.5">space</span>
          <span className="rounded-md bg-white/[0.05] px-2 py-1 text-[10px] text-white/65">.</span>
          <span className="rounded-md px-3 py-1 text-[10px] text-white" style={{ background: 'var(--grad)' }}>return</span>
        </div>
      </div>
    </div>
  );
};

const AppBadge = ({ name }) => (
  <span className="inline-flex items-center gap-1.5 rounded-full glass px-2.5 py-1.5 text-[11.5px] text-white/70">
    <span className="size-4 rounded-md bg-white/10" />
    {name}
    <L2.Check size={11} className="text-emerald-400" />
  </span>
);

/* ────────────────────────────────────────────────────────────────
   COMPARE TABLE
   ──────────────────────────────────────────────────────────────── */
const COMPARE_ROWS = [
  ['Switch apps to use it', 'Yes — copy, paste, switch back', 'No — lives in your keyboard'],
  ['Hinglish input', 'Mediocre. Misses idioms.', 'Native. Trained on Indian English.'],
  ['Tone presets', 'Buried in the prompt', 'One-tap chip in the toolbar'],
  ['Average time per rewrite', '~30 seconds', '~2 seconds'],
  ['Cost model', '$20/mo subscription', '₹0.10/rewrite. No subscription.'],
  ['India-aware (₹, Lakh, idioms)', 'No', 'Built for it'],
];

const Compare = () => (
  <section className="relative py-24 sm:py-32 px-5 sm:px-8">
    <div className="mx-auto max-w-[1080px]">
      <div className="text-center max-w-[720px] mx-auto">
        <Eyebrow>Enwrite vs. the alternative</Eyebrow>
        <h2 className="mt-5 text-[34px] sm:text-[48px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance">
          Same model class. <span className="text-white/55">Wildly</span> different daily experience.
        </h2>
      </div>

      <div className="mt-10 sm:mt-14 glass-strong rounded-3xl overflow-hidden">
        <div className="grid grid-cols-[1.1fr_1fr_1fr] text-[13px]">
          <div className="px-5 sm:px-7 py-5 text-white/40 text-[11px] uppercase tracking-[0.22em]">When you want to…</div>
          <div className="px-5 sm:px-7 py-5 text-white/45 text-[12px] border-l border-white/8">Generic AI assistant</div>
          <div className="px-5 sm:px-7 py-5 border-l border-white/8 text-[12px] font-semibold gradient-text">Enwrite</div>

          {COMPARE_ROWS.map(([k, a, b], i) => (
            <React.Fragment key={k}>
              <InView delay={i * 0.04} y={0} className="contents">
                <div className="px-5 sm:px-7 py-4 sm:py-5 border-t border-white/8 text-white/85">{k}</div>
                <div className="px-5 sm:px-7 py-4 sm:py-5 border-t border-l border-white/8 text-white/45">
                  <span className="inline-flex items-center gap-1.5">
                    <L2.X size={13} className="text-rose-300/70" />
                    {a}
                  </span>
                </div>
                <div className="px-5 sm:px-7 py-4 sm:py-5 border-t border-l border-white/8 text-white/95">
                  <span className="inline-flex items-center gap-1.5">
                    <L2.Check size={13} className="text-emerald-400" />
                    {b}
                  </span>
                </div>
              </InView>
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ────────────────────────────────────────────────────────────────
   PRICING
   ──────────────────────────────────────────────────────────────── */
const Pricing = () => (
  <section id="pricing" className="relative py-24 sm:py-32 px-5 sm:px-8">
    <div className="mx-auto max-w-[1080px]">
      <div className="text-center max-w-[720px] mx-auto">
        <Eyebrow>Pricing</Eyebrow>
        <h2 className="mt-5 text-[34px] sm:text-[48px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance">
          Free forever. <span className="text-white/55">Pay only when you use it more.</span>
        </h2>
        <p className="mt-4 text-[15px] text-white/55">No subscription. No card on file. No surprise renewals.</p>
      </div>

      <div className="mt-10 grid md:grid-cols-2 gap-5">
        <InView delay={0.05} className="h-full">
          <div className="h-full glass rounded-3xl p-7 sm:p-8 relative">
            <div className="text-[12px] uppercase tracking-[0.22em] text-white/45">Free forever</div>
            <div className="mt-3 flex items-baseline gap-2">
              <span className="text-[48px] font-semibold tracking-tight">₹0</span>
              <span className="text-white/45 text-[14px]">/ month</span>
            </div>
            <p className="mt-2 text-[14px] text-white/55">15 rewrites/day across every device. Every feature unlocked.</p>

            <ul className="mt-6 space-y-2.5 text-[14px] text-white/75">
              {[
                'iOS keyboard, Android keyboard, Mac, Windows, Chrome',
                'All tone presets — Professional / Casual / Concise',
                'Envoice (Hinglish voice → polished English)',
                'Cross-device sync via Google sign-in',
                '5-second undo from the toolbar',
              ].map(t => <Bullet key={t}>{t}</Bullet>)}
            </ul>

            <div className="mt-8">
              <GhostPill
                href="https://play.google.com/store/apps/details?id=com.enwrite.keyboard"
                size="lg"
                icon={<L2.Download size={14} strokeWidth={2.25} />}
              >
                Start free
              </GhostPill>
            </div>
          </div>
        </InView>

        <InView delay={0.12} className="h-full">
          <div className="h-full rounded-3xl p-7 sm:p-8 relative grad-border bg-white/[0.03] overflow-hidden">
            <div aria-hidden className="absolute -inset-20 -z-10"
                 style={{ background: 'radial-gradient(50% 60% at 50% 0%, rgba(217,70,239,0.18), transparent 70%)' }} />
            <div className="flex items-center justify-between">
              <div className="text-[12px] uppercase tracking-[0.22em] gradient-text font-semibold">Pay as you go</div>
              <span className="rounded-full px-2.5 py-1 text-[10.5px] uppercase tracking-[0.18em] text-white/70 border border-white/10">
                Most popular
              </span>
            </div>
            <div className="mt-3 flex items-baseline gap-2">
              <span className="text-[48px] font-semibold tracking-tight">₹0.10</span>
              <span className="text-white/55 text-[14px]">per rewrite</span>
            </div>
            <p className="mt-2 text-[14px] text-white/55">After your daily free quota. Credits never expire.</p>

            <div className="mt-6 grid grid-cols-3 gap-2">
              {[
                ['₹50', '500 rewrites'],
                ['₹200', '2,000 rewrites'],
                ['₹500', '5,000 rewrites'],
              ].map(([amt, sub], i) => (
                <button key={amt} className={
                  'rounded-2xl px-3 py-3 text-left transition ' +
                  (i === 1 ? 'bg-white/[0.06] border border-white/15' : 'bg-white/[0.03] border border-white/8 hover:bg-white/[0.05]')
                }>
                  <div className="text-[16px] font-semibold">{amt}</div>
                  <div className="text-[11px] text-white/45 mt-0.5">{sub}</div>
                </button>
              ))}
            </div>

            <ul className="mt-6 space-y-2.5 text-[14px] text-white/75">
              {[
                'Same rewrites, same speed — just more of them',
                'Top up once. Credits sync across every device.',
                'Pay only for what you use. Stop anytime.',
              ].map(t => <Bullet key={t}>{t}</Bullet>)}
            </ul>

            <div className="mt-8 flex flex-wrap items-center gap-2.5">
              <GradPill href="#beta" size="lg" icon={<L2.ArrowRight size={15} strokeWidth={2.25} />}>
                Start free, top up later
              </GradPill>
              <span className="text-[12px] text-white/40">Razorpay · UPI · Cards · Netbanking</span>
            </div>
          </div>
        </InView>
      </div>

      {/* trust strip */}
      <div className="mt-8 flex flex-wrap items-center justify-center gap-3 text-[11px] text-white/35">
        <span>Secured payments by</span>
        <TrustPill label="UPI" />
        <TrustPill label="VISA" />
        <TrustPill label="Mastercard" />
        <TrustPill label="RuPay" />
        <TrustPill label="Netbanking" />
      </div>
    </div>
  </section>
);

const Bullet = ({ children }) => (
  <li className="flex items-start gap-2.5">
    <L2.Check size={15} className="mt-0.5 text-emerald-400 shrink-0" strokeWidth={2.25} />
    <span>{children}</span>
  </li>
);

const TrustPill = ({ label }) => (
  <span className="inline-flex items-center rounded-md border border-white/10 bg-white/[0.03] px-2 py-1 text-[10.5px] font-mono tracking-wider text-white/55 uppercase">
    {label}
  </span>
);

/* ────────────────────────────────────────────────────────────────
   ENTERPRISE
   ──────────────────────────────────────────────────────────────── */
const Enterprise = () => (
  <section id="enterprise" className="relative py-20 sm:py-28 px-5 sm:px-8">
    <div className="mx-auto max-w-[1180px]">
      <InView>
        <div className="relative overflow-hidden rounded-3xl glass-strong p-8 sm:p-14">
          <div aria-hidden className="absolute -right-20 -top-20 size-[420px] rounded-full bg-sky-brand/15 blur-[100px]" />
          <div aria-hidden className="absolute -left-20 -bottom-20 size-[420px] rounded-full bg-fuchsia-brand/15 blur-[100px]" />

          <div className="relative grid lg:grid-cols-[1.4fr_1fr] gap-8 items-center">
            <div>
              <div className="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.22em] text-white/55">
                <L2.Building2 size={12} /> Enterprise · Self-hosted worker
              </div>
              <h2 className="mt-4 text-[28px] sm:text-[40px] font-semibold tracking-[-0.02em] leading-[1.1] text-balance">
                Need to keep corporate text inside your{' '}
                <span className="gradient-text">Cloudflare account</span>?
              </h2>
              <p className="mt-3 text-[15px] text-white/60 max-w-[560px]">
                Deploy Enwrite's worker to your own Cloudflare. Your team's prompts never leave your perimeter.
                HMAC-signed JWTs, single-use refresh-token rotation, no third-party storage. We ship the worker
                and the runbook.
              </p>

              <div className="mt-6 flex flex-wrap items-center gap-2">
                <GhostPill
                  href="mailto:contact@spectatr.ai?subject=Enwrite%20enterprise%20%E2%80%94%20self-hosted%20worker"
                  size="lg"
                  icon={<L2.Mail size={14} strokeWidth={2.25} />}
                >
                  Talk to founders
                </GhostPill>
                <span className="text-[12px] text-white/40">DPDP-aligned · India data residency · No third-party storage</span>
              </div>
            </div>

            {/* Architecture mini-diagram */}
            <div className="glass rounded-2xl p-5 font-mono text-[11.5px] text-white/70 leading-[1.7]">
              <div className="text-white/40 text-[10.5px] uppercase tracking-widest mb-2">deploy.sh</div>
              <div><span className="text-white/40">$</span> wrangler deploy --account <span className="text-fuchsia-300">your-org</span></div>
              <div className="text-white/40">  ↳ env: enwrite-worker</div>
              <div className="text-white/40">  ↳ secrets: HMAC_KEY, MODEL_API</div>
              <div className="text-emerald-300/90">✓ deployed to https://enwrite.your-org.dev</div>
              <div className="mt-3 text-white/40">  region: <span className="text-saffron">BOM1</span> · <span className="text-white/55">DEL1</span></div>
              <div className="text-white/40">  retention: <span className="text-white/85">0 days</span></div>
            </div>
          </div>
        </div>
      </InView>
    </div>
  </section>
);

/* ────────────────────────────────────────────────────────────────
   BETA INVITE — replaces the fictional testimonials. We're pre-launch
   and would rather earn social proof than fabricate it. This block
   opens a real path to join the private beta via contact@spectatr.ai.
   ──────────────────────────────────────────────────────────────── */
const BetaInvite = () => (
  <section id="beta" className="relative py-24 sm:py-32 px-5 sm:px-8 overflow-hidden">
    <div aria-hidden className="absolute inset-0 -z-10">
      <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 size-[680px] rounded-full bg-violet-brand/10 blur-[120px]" />
    </div>
    <div className="mx-auto max-w-[920px] text-center">
      <Eyebrow>Private beta · open to early users</Eyebrow>
      <h2 className="mt-5 text-[34px] sm:text-[48px] font-semibold tracking-[-0.02em] leading-[1.05] text-balance">
        We're building with our <span className="gradient-text">first cohort</span>.
      </h2>
      <p className="mt-4 text-[16px] text-white/60 max-w-[640px] mx-auto text-balance">
        Enwrite is in private beta — iOS via TestFlight, Android via Play Store, desktop builds for early users.
        Tell us how you write at work and we'll add you in.
      </p>

      <div className="mt-10 grid sm:grid-cols-3 gap-4 text-left">
        <BetaCard
          icon={L2.Smartphone}
          label="Mobile keyboard"
          body="iOS keyboard extension + Android system keyboard. Tap-to-rewrite from any app."
        />
        <BetaCard
          icon={L2.Monitor}
          label="Desktop, planned"
          body="Mac + Windows menubar app — global hotkey rewrites your selection."
        />
        <BetaCard
          icon={L2.Chrome}
          label="Chrome, planned"
          body="Right-click any text field. One-tap polish, same credits."
        />
      </div>

      <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
        <GradPill
          href="mailto:contact@spectatr.ai?subject=Enwrite%20beta%20%E2%80%94%20count%20me%20in&body=Hi%20Spectatr%20team%2C%0A%0AI%27d%20like%20to%20try%20Enwrite.%20Here%27s%20how%20I%20write%20at%20work%3A%0A%0A%E2%80%A2%20Platforms%20I%20use%3A%20%5B%20%5D%0A%E2%80%A2%20What%20I%27d%20use%20it%20for%3A%20%5B%20%5D%0A%0AThanks!"
          size="lg"
          icon={<L2.ArrowRight size={15} strokeWidth={2.25} />}
        >
          Email us — count me in
        </GradPill>
        <span className="text-[12px] text-white/40">contact@spectatr.ai · Bengaluru · Made in India</span>
      </div>
    </div>
  </section>
);

const BetaCard = ({ icon: Icon, label, body }) => (
  <div className="glass rounded-2xl p-5">
    <div className="inline-flex items-center justify-center size-9 rounded-xl grad-border bg-white/[0.03]">
      <Icon size={16} strokeWidth={1.75} className="text-white/85" />
    </div>
    <div className="mt-4 text-[14px] font-semibold text-white">{label}</div>
    <div className="mt-1 text-[12.5px] text-white/55 leading-[1.55]">{body}</div>
  </div>
);

/* ────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────── */
const Footer = () => (
  <footer className="relative px-5 sm:px-8 pt-16 pb-10 border-t border-white/5">
    <div className="mx-auto max-w-[1180px]">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-[13px]">
        <FootCol
          title="Product"
          links={[
            ['Enwrite (rewrite)', '#product'],
            ['Envoice (voice)', '#product'],
            ['Pricing', '#pricing'],
            ['Roadmap', 'mailto:contact@spectatr.ai?subject=Enwrite%20roadmap'],
          ]}
        />
        <FootCol
          title="Company"
          links={[
            ['About Spectatr', 'https://spectatr.ai'],
            ['Contact', 'mailto:contact@spectatr.ai'],
            ['Beta access', '#beta'],
          ]}
        />
        <FootCol
          title="Trust"
          links={[
            ['Privacy policy', 'https://enwrite.spectatr.ai/privacy'],
            ['Security', '#enterprise'],
            ['DPDP-aligned', '#enterprise'],
          ]}
        />
        <FootCol
          title="Developers"
          links={[
            ['Enterprise (self-host)', '#enterprise'],
            ['Status', 'mailto:contact@spectatr.ai?subject=Enwrite%20status'],
          ]}
        />
      </div>

      <div className="mt-14 flex flex-col sm:flex-row sm:items-end justify-between gap-6">
        <div>
          <div className="inline-flex items-center gap-2">
            <img
              src="assets/enwrite-logo-256.png"
              alt="Enwrite"
              width="24"
              height="24"
              className="inline-block size-6 rounded-md"
            />
            <span className="text-[22px] font-semibold tracking-tight gradient-text">Enwrite</span>
          </div>
          <div className="saffron-stripe w-[180px] mt-2"></div>
          <p className="mt-3 text-[12.5px] text-white/45 max-w-[300px]">
            One tap to polished English. Hinglish-fluent. Built in India by Spectatr.
          </p>
        </div>
        <div className="flex flex-col sm:items-end gap-2 text-[12px] text-white/40">
          <div className="inline-flex items-center gap-1.5">
            Made in India <span aria-label="India">🇮🇳</span>
          </div>
          <div>© 2026 Spectatr.ai · An Enwrite product</div>
          <a
            href="mailto:contact@spectatr.ai"
            className="inline-flex items-center gap-1.5 pt-1 hover:text-white/80"
          >
            <L2.Mail size={13} /> contact@spectatr.ai
          </a>
        </div>
      </div>
    </div>
  </footer>
);

const FootCol = ({ title, links }) => (
  <div>
    <div className="text-[11px] uppercase tracking-[0.22em] text-white/40 mb-3">{title}</div>
    <ul className="space-y-2">
      {links.map(([label, href]) => (
        <li key={label}>
          <a href={href} className="text-white/65 hover:text-white transition-colors duration-200">
            {label}
          </a>
        </li>
      ))}
    </ul>
  </div>
);

Object.assign(window, {
  PhoneShowcase, Compare, Pricing, Enterprise, BetaInvite, Footer,
});