/* Body sections for ZenTag landing — kept tight per section */

// ============ 1. NFC CARDS SHOWCASE ============
function CardsShowcase() {
  const [active, setActive] = React.useState('matte');
  const materials = [
    { id: 'matte', label: 'Matte Black', sub: 'Soft-touch finish' },
    { id: 'metal', label: 'Brushed Metal', sub: 'Aerospace aluminum' },
    { id: 'glass', label: 'Frosted Glass', sub: 'Smoked translucent' },
    { id: 'white', label: 'White Minimal', sub: 'Pearl-coat polymer' },
    { id: 'wood', label: 'Wooden Luxury', sub: 'FSC walnut grain' },
  ];

  const benefits = [
    { i: <Icon.NFC width="16" height="16"/>, t: 'Tap to share', d: 'One touch, full profile transferred.' },
    { i: <Icon.Phone width="16" height="16"/>, t: 'iPhone & Android', d: 'Native NFC reader on every modern phone.' },
    { i: <Icon.Cloud width="16" height="16"/>, t: 'No app required', d: 'Recipients open a link — that\'s it.' },
    { i: <Icon.Sync width="16" height="16"/>, t: 'Reusable forever', d: 'Update your profile, card stays the same.' },
    { i: <Icon.Check width="16" height="16"/>, t: 'Instant contact save', d: 'Add to phone book in two taps.' },
    { i: <Icon.Leaf width="16" height="16"/>, t: 'Eco-friendly', d: 'One card saves 200+ paper cards a year.' },
  ];

  return (
    <section id="cards" className="relative py-32 px-5 overflow-hidden">
      <div className="absolute inset-0 dots-bg opacity-30" style={{ maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)', WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 70%)' }} />
      <div className="mx-auto max-w-6xl relative">
        <SectionTitle
          eyebrow="Smart NFC Cards"
          title="Five materials. One signature feel."
          sub="Premium NFC cards engineered for the way you network. Pick a finish that matches your craft — every card carries the same encrypted chip."
        />

        {/* Material picker */}
        <Reveal delay={2}>
          <div className="mt-12 flex flex-wrap gap-2">
            {materials.map(m => (
              <button
                key={m.id}
                onClick={() => setActive(m.id)}
                className={`px-4 py-2.5 rounded-full text-[13px] font-medium transition-all duration-300 border ${active === m.id ? 'bg-white text-ink-900 border-white' : 'glass text-fog-200 hover:text-white border-transparent'}`}
              >
                {m.label}
              </button>
            ))}
          </div>
        </Reveal>

        {/* Big card stage */}
        <div className="mt-12 grid lg:grid-cols-[1.2fr_1fr] gap-12 items-center">
          <Reveal>
            <div className="relative h-[440px] flex items-center justify-center">
              <div className="absolute -inset-10 -z-10 rounded-full blur-3xl opacity-50" style={{ background: 'radial-gradient(circle, var(--accent-glow-soft), transparent 70%)' }} />
              {/* Stacked back cards */}
              <div className="absolute" style={{ transform: 'rotate(-12deg) translate(-90px, 40px)' }}>
                <NFCCard material={active === 'matte' ? 'metal' : 'matte'} sheen={false} className="w-[300px] opacity-40 blur-[0.5px]" />
              </div>
              <div className="absolute" style={{ transform: 'rotate(10deg) translate(90px, 40px)' }}>
                <NFCCard material={active === 'glass' ? 'wood' : 'glass'} sheen={false} className="w-[300px] opacity-50 blur-[0.5px]" />
              </div>
              {/* Active card */}
              <div className="tilt relative z-10" key={active}>
                <NFCCard material={active} className="w-[420px]" />
              </div>
            </div>
          </Reveal>

          <div>
            <Reveal>
              <div className="text-[11px] font-mono uppercase tracking-[0.22em] text-fog-400">Selected</div>
              <div className="mt-2 text-[36px] tracking-tight font-medium text-gradient">{materials.find(m=>m.id===active).label}</div>
              <div className="text-fog-300">{materials.find(m=>m.id===active).sub}</div>
            </Reveal>

            <div className="mt-8 grid sm:grid-cols-2 gap-5">
              {benefits.map((b, i) => (
                <Reveal key={b.t} delay={Math.min(i, 4)}>
                  <div className="flex gap-3">
                    <div className="w-9 h-9 rounded-xl glass flex items-center justify-center shrink-0" style={{ color: 'var(--accent-2)' }}>{b.i}</div>
                    <div>
                      <div className="text-[14.5px] font-medium">{b.t}</div>
                      <div className="text-[13px] text-fog-400 leading-relaxed">{b.d}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ 2. QR + 3. PROFILE — side-by-side storytelling ============
function QRSection() {
  return (
    <section className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <div className="grid lg:grid-cols-[1fr_1.1fr] gap-14 items-center">
          {/* Left: phone scanning QR */}
          <Reveal>
            <div className="relative h-[560px] flex items-center justify-center">
              <div className="absolute -inset-6 -z-10 rounded-3xl blur-3xl opacity-30" style={{ background: 'radial-gradient(circle, var(--accent), transparent 70%)' }} />

              {/* QR card */}
              <div className="absolute left-0 top-12 p-6 rounded-3xl glass-strong" style={{ transform: 'rotate(-6deg)' }}>
                <QRCode size={170} />
                <div className="mt-3 text-[10px] font-mono text-center text-fog-300 tracking-widest">SCAN · ZENTAG.IO/AM</div>
                <div className="absolute inset-6 overflow-hidden rounded-2xl pointer-events-none">
                  <div className="scanline absolute left-0 right-0 h-[2px]" style={{ background: 'linear-gradient(90deg, transparent, var(--accent-2), transparent)' }} />
                </div>
              </div>

              {/* Phone scanning */}
              <div className="absolute right-0 bottom-0 floatY" style={{ animationDelay: '0.8s' }}>
                <PhoneFrame>
                  <div className="w-full h-full relative bg-black">
                    {/* Camera viewfinder */}
                    <div className="absolute inset-0" style={{
                      background: 'linear-gradient(180deg, rgba(20,20,30,0.9) 0%, rgba(10,10,15,0.6) 50%, rgba(20,20,30,0.9) 100%)',
                    }} />
                    {/* Reticle */}
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-44 h-44 relative">
                        {/* Corner brackets */}
                        {['tl','tr','bl','br'].map(c => (
                          <div key={c} className="absolute w-6 h-6" style={{
                            ...(c.includes('t') ? { top: 0 } : { bottom: 0 }),
                            ...(c.includes('l') ? { left: 0 } : { right: 0 }),
                            borderColor: 'var(--accent-2)',
                            borderStyle: 'solid',
                            borderTopWidth: c.includes('t') ? 2 : 0,
                            borderBottomWidth: c.includes('b') ? 2 : 0,
                            borderLeftWidth: c.includes('l') ? 2 : 0,
                            borderRightWidth: c.includes('r') ? 2 : 0,
                            borderRadius: c === 'tl' ? '12px 0 0 0' : c === 'tr' ? '0 12px 0 0' : c === 'bl' ? '0 0 0 12px' : '0 0 12px 0',
                          }} />
                        ))}
                        <div className="absolute inset-3 opacity-90 flex items-center justify-center">
                          <div style={{ filter: 'brightness(0.95)' }}>
                            <QRCode size={130} brand={true} />
                          </div>
                        </div>
                      </div>
                    </div>
                    {/* Top hint */}
                    <div className="absolute top-14 left-0 right-0 text-center text-[11px] text-fog-200 font-mono">Point your camera at a code</div>
                    {/* Bottom captured */}
                    <div className="absolute bottom-16 left-5 right-5 glass-strong rounded-2xl p-3 flex items-center gap-3">
                      <div className="w-8 h-8 rounded-lg" style={{ background: 'var(--accent)' }} />
                      <div className="flex-1 min-w-0">
                        <div className="text-[11px] font-medium">zentag.io/collins-wonder</div>
                        <div className="text-[9px] text-fog-400 font-mono">Open · Save contact</div>
                      </div>
                      <Icon.Arrow width="14" height="14" />
                    </div>
                  </div>
                </PhoneFrame>
              </div>
            </div>
          </Reveal>

          {/* Right: copy */}
          <div>
            <SectionTitle
              eyebrow="QR Sharing"
              title="No NFC? No problem."
              sub="Every ZenTag card pairs an NFC chip with a printed QR code, so anyone with a camera — old or new phone, on any OS — can grab your profile in under a second."
            />

            <div className="mt-10 grid sm:grid-cols-2 gap-x-8 gap-y-6">
              {[
                { i: <Icon.Spark width="16" height="16"/>, t: 'Dynamic QR', d: 'Edit your profile, the code stays valid forever.' },
                { i: <Icon.Chart width="16" height="16"/>, t: 'Scan analytics', d: 'See who scanned, when, and from where.' },
                { i: <Icon.Cloud width="16" height="16"/>, t: 'Offline support', d: 'Cached profiles work without a signal.' },
                { i: <Icon.Resume width="16" height="16"/>, t: 'Personalised codes', d: 'Brand each code with your logo and palette.' },
              ].map((f, i) => (
                <Reveal key={f.t} delay={Math.min(i, 4)}>
                  <div>
                    <div className="w-9 h-9 rounded-xl glass flex items-center justify-center mb-3" style={{ color: 'var(--accent-2)' }}>{f.i}</div>
                    <div className="text-[15px] font-medium">{f.t}</div>
                    <div className="text-[13.5px] text-fog-400 mt-1 leading-relaxed">{f.d}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ 3. PROFILE EXPERIENCE ============
function ProfileSection() {
  return (
    <section className="relative py-32 px-5 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" style={{ background: 'radial-gradient(ellipse at 70% 50%, var(--accent-glow-soft), transparent 60%)' }} />
      <div className="mx-auto max-w-6xl relative">
        <div className="grid lg:grid-cols-[1fr_1fr] gap-14 items-center">
          <div>
            <SectionTitle
              eyebrow="Digital Profile"
              title="A profile that does what paper never could."
              sub="Embed your portfolio, link every channel you live on, take bookings, sell products — all from a single living page that you control."
            />
            <div className="mt-9 grid grid-cols-2 gap-3">
              {[
                { i: <Icon.Users width="14" height="14"/>, t: 'Profile + avatar' },
                { i: <Icon.Link width="14" height="14"/>, t: 'Unlimited links' },
                { i: <Icon.Video width="14" height="14"/>, t: 'Embedded videos' },
                { i: <Icon.Calendar width="14" height="14"/>, t: 'Booking widgets' },
                { i: <Icon.Resume width="14" height="14"/>, t: 'Digital resume' },
                { i: <Icon.Globe width="14" height="14"/>, t: 'Multi-language' },
                { i: <Icon.Chart width="14" height="14"/>, t: 'Lead capture form' },
                { i: <Icon.Spark width="14" height="14"/>, t: 'Branded everything' },
              ].map((c, i) => (
                <Reveal key={c.t} delay={Math.min(i,4)}>
                  <div className="glass rounded-xl px-3.5 py-3 flex items-center gap-2.5 text-[13px]">
                    <span style={{ color: 'var(--accent-2)' }}>{c.i}</span>
                    <span>{c.t}</span>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>

          {/* Profile mockup stack */}
          <Reveal delay={2}>
            <div className="relative h-[640px] flex items-center justify-center">
              <div className="absolute -inset-4 -z-10 rounded-3xl blur-3xl opacity-40" style={{ background: 'radial-gradient(circle, var(--accent), transparent 70%)' }} />

              {/* Back: floating module cards */}
              <div className="absolute top-5 right-0 floatY" style={{ animationDelay: '0.4s' }}>
                <div className="glass-strong rounded-2xl p-3.5 w-[200px]">
                  <div className="text-[10px] font-mono text-fog-400 uppercase tracking-widest mb-2">This week</div>
                  <div className="flex items-end gap-1.5 h-12">
                    {[35, 60, 45, 80, 55, 92, 70].map((v,i) => (
                      <div key={i} className="flex-1 rounded-sm" style={{ height: `${v}%`, background: `linear-gradient(180deg, var(--accent-2), var(--accent))`, opacity: 0.85 }} />
                    ))}
                  </div>
                  <div className="mt-2 flex items-center justify-between text-[11px]">
                    <span className="font-medium">412 views</span>
                    <span className="text-fog-400">+38%</span>
                  </div>
                </div>
              </div>

              <div className="absolute bottom-12 left-0 floatY" style={{ animationDelay: '1s' }}>
                <div className="glass-strong rounded-2xl p-3.5 w-[210px]">
                  <div className="flex items-center gap-2.5">
                    <div className="w-9 h-9 rounded-xl" style={{ background: 'linear-gradient(135deg, var(--accent), var(--accent-2))' }} />
                    <div className="flex-1">
                      <div className="text-[12px] font-medium">New lead</div>
                      <div className="text-[10px] text-fog-400">Nana Adjei · Asante Capital</div>
                    </div>
                    <div className="w-5 h-5 rounded-full flex items-center justify-center" style={{ background: 'var(--accent)' }}>
                      <Icon.Check width="10" height="10"/>
                    </div>
                  </div>
                </div>
              </div>

              {/* Main phone */}
              <PhoneFrame style={{ width: 280 }}>
                <ProfileScreen />
              </PhoneFrame>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ============ 4. ORG / TEAM ============
function TeamSection() {
  return (
    <section id="teams" className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <div className="text-center flex flex-col items-center gap-5 max-w-3xl mx-auto">
          <Reveal><Eyebrow>For teams &amp; organizations</Eyebrow></Reveal>
          <Reveal delay={1}><h2 className="display text-[clamp(34px,5.4vw,64px)] text-gradient">One brand. Every employee.</h2></Reveal>
          <Reveal delay={2}><p className="text-fog-300 text-lg leading-relaxed">Roll ZenTag across your entire org with branded cards, a control plane for permissions, real-time analytics, and direct CRM sync.</p></Reveal>
        </div>

        {/* Dashboard mockup */}
        <Reveal delay={2}>
          <div className="mt-16 relative">
            <div className="absolute -inset-6 -z-10 rounded-3xl blur-3xl opacity-50" style={{ background: 'radial-gradient(ellipse at center, var(--accent-glow-soft), transparent 70%)' }} />
            <DashboardMockup />
          </div>
        </Reveal>

        {/* Feature triplet */}
        <div className="mt-16 grid md:grid-cols-3 gap-5">
          {[
            { t: 'Team dashboard', d: 'Provision, freeze and reassign cards as headcount changes.', icon: <Icon.Users width="18" height="18"/> },
            { t: 'CRM integrations', d: 'Pipe scans straight to Salesforce, HubSpot, or Attio.', icon: <Icon.Sync width="18" height="18"/> },
            { t: 'Brand controls', d: 'Lock typography, palette, and approved logo lockups org-wide.', icon: <Icon.Spark width="18" height="18"/> },
          ].map((f,i) => (
            <Reveal key={f.t} delay={Math.min(i+1,3)}>
              <div className="glass rounded-2xl p-6 h-full hover:bg-white/[0.06] transition-colors">
                <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ background: 'var(--accent-glow-soft)', color: 'var(--accent-2)' }}>{f.icon}</div>
                <div className="mt-5 text-[17px] font-medium">{f.t}</div>
                <div className="mt-1.5 text-[13.5px] text-fog-400 leading-relaxed">{f.d}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function DashboardMockup() {
  const team = [
    { n: 'Collins S. Wonder', r: 'Design', v: 412, s: 'active' },
    { n: 'Akosua Boateng', r: 'Sales', v: 1284, s: 'active' },
    { n: 'Kwame Mensah', r: 'Engineering', v: 87, s: 'active' },
    { n: 'Adwoa Asare', r: 'Operations', v: 246, s: 'paused' },
    { n: 'Yaw Owusu', r: 'Marketing', v: 568, s: 'active' },
  ];
  return (
    <div className="rounded-2xl glass-strong overflow-hidden">
      {/* Window chrome */}
      <div className="flex items-center gap-2 px-4 py-3 border-b border-white/[0.06]">
        <div className="flex gap-1.5">
          <div className="w-3 h-3 rounded-full bg-white/15" />
          <div className="w-3 h-3 rounded-full bg-white/15" />
          <div className="w-3 h-3 rounded-full bg-white/15" />
        </div>
        <div className="flex-1 text-center text-[11px] font-mono text-fog-400">app.zentag.io/teams/acme</div>
        <div className="text-[11px] text-fog-400">acme · 248 members</div>
      </div>
      <div className="grid grid-cols-[200px_1fr] min-h-[440px]">
        {/* Sidebar */}
        <div className="border-r border-white/[0.06] p-4 text-[12.5px]">
          <div className="text-[10px] uppercase font-mono text-fog-400 tracking-widest mb-3">Workspace</div>
          {['Overview', 'Team', 'Cards', 'Analytics', 'Integrations', 'Brand kit', 'Settings'].map((l, i) => (
            <div key={l} className={`px-2.5 py-2 rounded-lg flex items-center gap-2 ${i === 1 ? 'bg-white/[0.06] text-white' : 'text-fog-300'}`}>
              <div className="w-1 h-1 rounded-full" style={{ background: i === 1 ? 'var(--accent)' : 'transparent' }} />
              {l}
            </div>
          ))}
        </div>
        {/* Main */}
        <div className="p-5">
          {/* Stats */}
          <div className="grid grid-cols-4 gap-3">
            {[
              { l: 'Active cards', v: '241', d: '+12 wk' },
              { l: 'Total scans', v: '8,442', d: '+38%' },
              { l: 'Leads captured', v: '1,128', d: '+22%' },
              { l: 'Avg. saves', v: '64%', d: '+4%' },
            ].map((s,i) => (
              <div key={s.l} className="glass rounded-xl p-3">
                <div className="text-[10.5px] uppercase font-mono text-fog-400 tracking-widest">{s.l}</div>
                <div className="mt-1 text-[22px] font-medium tracking-tight">{s.v}</div>
                <div className="text-[10.5px]" style={{ color: 'var(--accent-2)' }}>{s.d}</div>
              </div>
            ))}
          </div>

          {/* Chart */}
          <div className="mt-4 glass rounded-xl p-4">
            <div className="flex items-center justify-between">
              <div>
                <div className="text-[13px] font-medium">Network activity</div>
                <div className="text-[11px] text-fog-400">Last 30 days · all departments</div>
              </div>
              <div className="flex gap-2 text-[11px]">
                {['1W','1M','3M','YTD'].map((p,i) => (
                  <div key={p} className={`px-2 py-0.5 rounded-md ${i === 1 ? 'bg-white/[0.08] text-white' : 'text-fog-400'}`}>{p}</div>
                ))}
              </div>
            </div>
            <svg viewBox="0 0 600 120" className="w-full h-24 mt-3">
              <defs>
                <linearGradient id="chartGrad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.5"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,90 C50,75 90,65 140,68 C190,71 220,40 270,38 C320,36 350,55 400,48 C450,42 490,20 540,18 C570,16 590,22 600,28 L600,120 L0,120 Z" fill="url(#chartGrad)"/>
              <path d="M0,90 C50,75 90,65 140,68 C190,71 220,40 270,38 C320,36 350,55 400,48 C450,42 490,20 540,18 C570,16 590,22 600,28" fill="none" stroke="var(--accent-2)" strokeWidth="2"/>
            </svg>
          </div>

          {/* Team table */}
          <div className="mt-4 glass rounded-xl">
            <div className="grid grid-cols-[1.6fr_1fr_0.8fr_0.6fr] gap-3 px-4 py-2.5 text-[10.5px] uppercase font-mono text-fog-400 tracking-widest border-b border-white/[0.05]">
              <div>Member</div><div>Role</div><div>Scans</div><div>Status</div>
            </div>
            {team.map((m,i) => (
              <div key={m.n} className="grid grid-cols-[1.6fr_1fr_0.8fr_0.6fr] gap-3 px-4 py-2.5 text-[12.5px] items-center border-b border-white/[0.03] last:border-0">
                <div className="flex items-center gap-2.5">
                  <div className="w-6 h-6 rounded-full" style={{ background: `hsl(${i*60}, 30%, 30%)` }} />
                  <span>{m.n}</span>
                </div>
                <div className="text-fog-300">{m.r}</div>
                <div className="text-fog-300">{m.v}</div>
                <div>
                  <span className="px-2 py-0.5 rounded-full text-[10px]" style={{
                    background: m.s === 'active' ? 'var(--accent-glow-soft)' : 'rgba(255,255,255,0.06)',
                    color: m.s === 'active' ? 'var(--accent-2)' : '#86868b',
                  }}>{m.s}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ 5. HOW IT WORKS ============
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Design your card', d: 'Pick a material, drop in your logo and brand assets. Add as many social and content blocks as you want — re-order them anytime.', icon: <Icon.Spark width="20" height="20"/> },
    { n: '02', t: 'Tap or scan', d: 'Hand your card to anyone. NFC fires the profile on modern phones, the printed QR catches everyone else. No installs. No friction.', icon: <Icon.NFC width="20" height="20"/> },
    { n: '03', t: 'Connect instantly', d: 'Their contact lands in your CRM, your profile saves to their phone, and your dashboard logs the moment. The handshake is two-way.', icon: <Icon.Check width="20" height="20"/> },
  ];
  return (
    <section id="how" className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <SectionTitle align="center" eyebrow="How it works" title="Three taps to a smarter network." sub="No installs, no setup ceremony. Receive your card, scan to claim, you're live." />

        <div className="mt-16 grid md:grid-cols-3 gap-5 relative">
          {/* Connecting arrows */}
          <svg className="absolute inset-0 w-full h-full pointer-events-none hidden md:block" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <linearGradient id="arrG" x1="0" x2="1">
                <stop offset="0%" stopColor="var(--accent)" stopOpacity="0"/>
                <stop offset="50%" stopColor="var(--accent)" stopOpacity="0.4"/>
                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
              </linearGradient>
            </defs>
          </svg>

          {steps.map((s, i) => (
            <Reveal key={s.n} delay={Math.min(i+1,3)}>
              <div className="relative glass rounded-3xl p-7 h-full overflow-hidden">
                {/* Number bg */}
                <div className="absolute -top-3 -right-2 text-[160px] font-medium leading-none opacity-[0.04] tracking-tighter">{s.n}</div>

                <div className="flex items-center justify-between">
                  <div className="w-12 h-12 rounded-2xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)', color: '#0a0a0d' }}>{s.icon}</div>
                  <div className="text-[11px] font-mono text-fog-400 uppercase tracking-widest">Step {s.n}</div>
                </div>
                <div className="mt-7 text-[22px] font-medium tracking-tight">{s.t}</div>
                <div className="mt-2 text-[14px] text-fog-400 leading-relaxed">{s.d}</div>

                {i < steps.length - 1 && (
                  <div className="absolute top-1/2 -right-3 hidden md:flex w-6 h-6 items-center justify-center rounded-full glass-strong z-10">
                    <Icon.Arrow width="12" height="12" />
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ 6. MOBILE EXPERIENCE ============
function MobileSection() {
  return (
    <section className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <div className="grid lg:grid-cols-[1fr_1.1fr] gap-14 items-center">
          <Reveal>
            <div className="relative h-[600px] flex items-center justify-center">
              <div className="absolute -inset-4 -z-10 rounded-3xl blur-3xl opacity-30" style={{ background: 'radial-gradient(circle, var(--accent), transparent 70%)' }} />

              {/* Two phones */}
              <div className="absolute left-2 top-12" style={{ transform: 'rotate(-8deg)' }}>
                <PhoneFrame style={{ width: 220 }}>
                  <WalletScreen />
                </PhoneFrame>
              </div>
              <div className="absolute right-2 bottom-0" style={{ transform: 'rotate(6deg)' }}>
                <PhoneFrame style={{ width: 220 }}>
                  <ProfileScreen compact />
                </PhoneFrame>
              </div>
            </div>
          </Reveal>

          <div>
            <SectionTitle
              eyebrow="Mobile-first"
              title="Lives in the place you live."
              sub="Add your card to Apple Wallet or Google Wallet, set a home-screen shortcut, or drop a QR widget. Works edge-to-edge on iPhone, Android, and the open web."
            />
            <div className="mt-9 space-y-3">
              {[
                { t: 'Apple Wallet & Google Wallet', d: 'Pull up your card from the lock screen — no unlocking required.', icon: <Icon.Wallet width="16" height="16"/> },
                { t: 'Home-screen widget', d: 'Pin a QR widget that updates the moment you edit your profile.', icon: <Icon.QR width="16" height="16"/> },
                { t: 'Browser-based, always', d: 'No app installs for you or anyone you share with.', icon: <Icon.Globe width="16" height="16"/> },
                { t: 'Responsive at every size', d: 'Profiles scale beautifully from a 4.7" phone to a 32" monitor.', icon: <Icon.Phone width="16" height="16"/> },
              ].map((f, i) => (
                <Reveal key={f.t} delay={Math.min(i+1, 4)}>
                  <div className="flex gap-4 p-4 rounded-2xl hover:bg-white/[0.03] transition-colors">
                    <div className="w-10 h-10 rounded-xl glass flex items-center justify-center shrink-0" style={{ color: 'var(--accent-2)' }}>{f.icon}</div>
                    <div>
                      <div className="text-[15px] font-medium">{f.t}</div>
                      <div className="text-[13.5px] text-fog-400 mt-0.5 leading-relaxed">{f.d}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WalletScreen() {
  return (
    <div className="w-full h-full relative" style={{ background: 'linear-gradient(180deg, #0a0a0d 0%, #16161b 100%)' }}>
      <div className="absolute top-0 left-0 right-0 h-10 flex items-center justify-between px-5 text-[10px] font-mono z-20"><span>9:41</span><span className="opacity-70">5G</span></div>
      <div className="pt-12 px-3 text-[11px] text-fog-300 font-medium">Wallet</div>
      <div className="px-3 mt-2 space-y-2">
        {/* Card 1 — featured ZenTag */}
        <div className="relative rounded-2xl p-3 overflow-hidden" style={{ background: 'linear-gradient(135deg, #18181c 0%, #0a0a0d 100%)', border: '1px solid rgba(255,255,255,0.06)' }}>
          <div className="flex items-start justify-between">
            <div>
              <div className="text-[8.5px] font-mono uppercase tracking-widest text-fog-400">ZenTag · Smart Card</div>
              <div className="text-[12px] font-medium mt-1">Collins S. Wonder</div>
            </div>
            <div className="w-5 h-5 rounded-full" style={{ background: 'linear-gradient(135deg, var(--accent), var(--accent-2))' }} />
          </div>
          <div className="mt-3 flex items-center justify-center">
            <QRCode size={88} />
          </div>
        </div>
        {/* Card 2 — collapsed */}
        <div className="rounded-2xl p-2.5 -mt-12" style={{ background: 'linear-gradient(135deg, #2a4a7a 0%, #1a2a4a 100%)' }}>
          <div className="text-[8.5px] font-mono text-fog-200 opacity-80">Boarding pass</div>
        </div>
        <div className="rounded-2xl p-2.5 -mt-4" style={{ background: 'linear-gradient(135deg, #7a4a2a 0%, #4a2a1a 100%)' }}>
          <div className="text-[8.5px] font-mono text-fog-200 opacity-80">Loyalty · Café</div>
        </div>
      </div>
      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-24 h-1 rounded-full bg-white/30" />
    </div>
  );
}

// ============ 7. SOCIAL PROOF ============
function SocialProof() {
  return (
    <section className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <SectionTitle align="center" eyebrow="In the wild" title="Networks built on ZenTag." sub="From solo designers to 500-person sales orgs — over 200,000 cards are tapped every day." />

        {/* Metrics row */}
        <div className="mt-14 grid grid-cols-2 md:grid-cols-4 gap-3">
          {[
            { v: '2.4M+', l: 'Cards shipped' },
            { v: '86%', l: 'Recipients save the contact' },
            { v: '38s', l: 'Average tap-to-save' },
            { v: '142', l: 'Countries delivered' },
          ].map((m,i) => (
            <Reveal key={m.l} delay={Math.min(i+1,4)}>
              <div className="glass rounded-2xl p-5 text-center">
                <div className="text-[clamp(28px,4vw,42px)] font-medium tracking-tight text-gradient-accent">{m.v}</div>
                <div className="text-[12px] text-fog-400 mt-1">{m.l}</div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Testimonials */}
        <div className="mt-14 grid md:grid-cols-3 gap-5">
          {[
            { q: "We rolled ZenTag out to every account exec at our Accra office in three weeks. Lead capture from trade shows tripled the next quarter.", n: 'Ama Mensimah', r: 'VP Sales · Cinder Ghana' },
            { q: "Paper cards never made it past the conference hotel. ZenTag actually lives on people's phones long after the handshake.", n: 'Kojo Boadi', r: 'Founder · Form & Field, Kumasi' },
            { q: "The brand controls are sharp. Every staff card looks like ours — and updates centrally when we rebrand across our regional offices.", n: 'Efua Asantewaa', r: 'Head of Brand · Lumen, Takoradi' },
          ].map((t,i) => (
            <Reveal key={t.n} delay={Math.min(i+1,3)}>
              <div className="glass rounded-3xl p-6 h-full flex flex-col">
                <div className="text-[28px] leading-none font-serif" style={{ color: 'var(--accent-2)' }}>"</div>
                <div className="mt-2 text-[14.5px] leading-relaxed text-fog-100 flex-1">{t.q}</div>
                <div className="mt-5 flex items-center gap-3 pt-5 border-t border-white/[0.06]">
                  <div className="w-9 h-9 rounded-full" style={{ background: `linear-gradient(135deg, hsl(${i*80}, 35%, 45%), hsl(${i*80+40}, 40%, 30%))` }} />
                  <div>
                    <div className="text-[13px] font-medium">{t.n}</div>
                    <div className="text-[11.5px] text-fog-400">{t.r}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ 8. FEATURES GRID ============
function FeaturesGrid() {
  const features = [
    { t: 'NFC Tap Sharing', i: <Icon.NFC width="20" height="20"/>, span: 'lg:col-span-2', big: true },
    { t: 'QR Scanning', i: <Icon.QR width="20" height="20"/> },
    { t: 'Contact saving', i: <Icon.Check width="20" height="20"/> },
    { t: 'Analytics', i: <Icon.Chart width="20" height="20"/> },
    { t: 'Team management', i: <Icon.Users width="20" height="20"/> },
    { t: 'Lead capture', i: <Icon.Lead width="20" height="20"/> },
    { t: 'CRM sync', i: <Icon.Sync width="20" height="20"/> },
    { t: 'Wallet integration', i: <Icon.Wallet width="20" height="20"/> },
    { t: 'Instant updates', i: <Icon.Cloud width="20" height="20"/> },
    { t: 'AI smart profiles', i: <Icon.AI width="20" height="20"/>, span: 'lg:col-span-2', big: true },
    { t: 'Digital resume', i: <Icon.Resume width="20" height="20"/> },
    { t: 'Calendar booking', i: <Icon.Calendar width="20" height="20"/> },
    { t: 'Product links', i: <Icon.Link width="20" height="20"/> },
    { t: 'Video embeds', i: <Icon.Video width="20" height="20"/> },
    { t: 'Multi-link profiles', i: <Icon.Globe width="20" height="20"/> },
  ];
  return (
    <section id="features" className="relative py-32 px-5 overflow-hidden">
      <div className="mx-auto max-w-6xl">
        <SectionTitle align="center" eyebrow="Everything in one card" title="A complete networking stack." sub="Every tool you'd reach for during a handshake — bundled, branded, and shipped on a card." />

        <div className="mt-14 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
          {features.map((f, i) => (
            <Reveal key={f.t} delay={Math.min((i%5)+1, 5)}>
              <div className={`glass rounded-2xl p-5 h-full hover:bg-white/[0.06] hover:border-white/[0.14] transition-all duration-300 group ${f.span || ''}`} style={{ minHeight: f.big ? 180 : 130 }}>
                <div className="w-10 h-10 rounded-xl glass flex items-center justify-center transition-all group-hover:scale-110" style={{ color: 'var(--accent-2)' }}>
                  {f.i}
                </div>
                <div className="mt-4 text-[14.5px] font-medium tracking-tight">{f.t}</div>
                {f.big && (
                  <div className="mt-1.5 text-[12.5px] text-fog-400 leading-relaxed">
                    {f.t === 'NFC Tap Sharing' && 'Works on every iPhone since 7 and any Android with NFC. No app required.'}
                    {f.t === 'AI smart profiles' && 'Suggests blocks, drafts your bio, surfaces the right call-to-action.'}
                  </div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ 9. FINAL CTA ============
function FinalCTA() {
  return (
    <section className="relative py-40 px-5 overflow-hidden">
      <Aurora intensity={1.2} />
      <div className="absolute inset-0 grid-bg opacity-50" />
      <div className="mx-auto max-w-5xl relative text-center">
        <Reveal>
          <Eyebrow>Start in 2 minutes</Eyebrow>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="display mt-7 text-[clamp(48px,7vw,96px)] text-gradient">
            Network smarter <br/>with <span className="text-gradient-accent italic font-serif font-normal">ZenTag</span>.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p className="mt-6 text-[clamp(15px,1.4vw,19px)] text-fog-300 max-w-xl mx-auto">One smart card. Unlimited connections. Ship yours this week.</p>
        </Reveal>

        {/* Floating card + QR */}
        <Reveal delay={3}>
          <div className="mt-14 relative h-[280px] flex items-center justify-center">
            <div className="absolute -inset-20 -z-10 rounded-full blur-3xl opacity-60" style={{ background: 'radial-gradient(circle, var(--accent-glow), transparent 60%)' }} />
            <div className="float" style={{ ['--rx']: '6deg', ['--ry']: '-12deg' }}>
              <NFCCard material="matte" className="w-[340px] ring-accent" />
            </div>
            <div className="absolute left-1/2 top-1/2 -translate-y-1/2 ml-44 floatY hidden md:block" style={{ animationDelay: '0.6s' }}>
              <div className="p-3 glass-strong rounded-2xl">
                <QRCode size={100} />
              </div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={4}>
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
            <PrimaryBtn href={(window.ZENTAG && window.ZENTAG.urls.signup) || '/login'}>Get your card</PrimaryBtn>
            <GhostBtn href="#pricing">See all cards <Icon.Arrow width="13" height="13"/></GhostBtn>
          </div>
        </Reveal>

        <Reveal delay={5}>
          <div className="mt-6 text-[12px] text-fog-400 font-mono">
            Free profile · From GH₵150 for your physical card · Ships across Ghana
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="relative pt-20 pb-10 px-5 border-t border-white/[0.04]">
      <div className="mx-auto max-w-6xl">
        <div className="grid md:grid-cols-[1.4fr_1fr_1fr_1fr_1fr] gap-10">
          <div>
            <a href="#" className="flex items-center gap-2">
              <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%)' }}>
                <span className="font-bold text-[14px] text-white">z</span>
              </div>
              <span className="text-[15px] font-medium tracking-tight">ZenTag</span>
            </a>
            <p className="mt-4 text-[13px] text-fog-400 leading-relaxed max-w-xs">The premium digital business card platform. Smart networking, beautifully built.</p>
            <div className="mt-5 flex gap-2">
              {SocialList.slice(0,5).map(({name, Comp}) => (
                <a key={name} href="#" className="w-8 h-8 rounded-lg glass flex items-center justify-center text-fog-300 hover:text-white transition">
                  <Comp width="14" height="14" />
                </a>
              ))}
            </div>
          </div>
          {[
            { h: 'Product', l: ['Cards', 'Profiles', 'Analytics', 'Teams', 'Integrations'] },
            { h: 'Company', l: ['About', 'Customers', 'Brand', 'Careers', 'Press'] },
            { h: 'Resources', l: ['Help center', 'Status', 'Changelog', 'Developers', 'Security'] },
            { h: 'Legal', l: ['Privacy', 'Terms', 'Cookies', 'DPA', 'Imprint'] },
          ].map(c => (
            <div key={c.h}>
              <div className="text-[11px] font-mono uppercase tracking-widest text-fog-400">{c.h}</div>
              <div className="mt-4 flex flex-col gap-2.5 text-[13.5px] text-fog-200">
                {c.l.map(l => <a key={l} href="#" className="hover:text-white transition">{l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="mt-14 pt-6 border-t border-white/[0.04] flex flex-col md:flex-row items-center justify-between gap-3 text-[12px] text-fog-400 font-mono">
          <div>© 2026 ZenTag, Inc. Designed in Accra, Ghana.</div>
          <div className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--accent)', boxShadow: '0 0 8px var(--accent-glow)' }} />
            All systems operational
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  CardsShowcase, QRSection, ProfileSection, TeamSection,
  HowItWorks, MobileSection, SocialProof, FeaturesGrid, FinalCTA, Footer
});