/* Showcase S1, Comparison C1, Pricing P1–P3, FAQ Q1, CTA X1, Footer FT1 */

/* ───────── S1 · Dashboard showcase — big framed product shot ───────── */
const S1 = () => (
  <div style={{ padding: '52px 36px', textAlign: 'center', background: `radial-gradient(800px 400px at 50% 0%, rgba(245,181,68,0.07), transparent 70%)` }}>
    <Eyebrow dot={false}>The dashboard</Eyebrow>
    <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: '0 auto 12px', letterSpacing: '-0.02em', maxWidth: 620 }}>A control room, not a data dump</h2>
    <p style={{ fontSize: 15, color: L.textDim, maxWidth: 520, margin: '0 auto 36px', lineHeight: 1.6 }}>Posture at a glance, findings ranked by risk, and live scan progress — the whole operator workflow in one dense, fast view.</p>
    <div style={{ background: L.surface, border: `1px solid ${L.borderHi}`, borderRadius: 14, overflow: 'hidden', boxShadow: '0 30px 90px rgba(0,0,0,0.55)', textAlign: 'left' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 18px', borderBottom: `1px solid ${L.border}`, background: L.bgAlt }}>
        <Wordmark markSize={26} />
        <div style={{ display: 'flex', gap: 8 }}>
          {['Dashboard','Scans','Findings','Reports'].map((x,i)=>(
            <span key={x} style={{ fontSize: 11.5, fontFamily: L.mono, padding: '5px 10px', borderRadius: 6, color: i===0?L.accent:L.textMute, background: i===0?L.accentDim:'transparent', border: `1px solid ${i===0?L.borderAmber:'transparent'}` }}>{x}</span>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', borderBottom: `1px solid ${L.border}` }}>
        {[['ASSETS','1,247',L.text],['OPEN','644',L.crit],['CRITICAL+HIGH','59',L.high],['REMEDIATED','187',L.ok],['MTTR','3.4d',L.accent]].map(([k,v,c],i)=>(
          <div key={k} style={{ padding: '16px 18px', borderRight: i<4?`1px solid ${L.border}`:'none' }}>
            <div style={{ fontSize: 9, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.12em', fontWeight: 700 }}>{k}</div>
            <div style={{ fontSize: 24, fontFamily: L.mono, fontWeight: 700, color: c, marginTop: 5 }}>{v}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr' }}>
        <div style={{ borderRight: `1px solid ${L.border}` }}>
          <MiniFinding sev="critical" name="XZ Utils backdoor → sshd RCE" cve="CVE-2024-3094" cvss="10.0" host="api-staging" />
          <MiniFinding sev="critical" name="Apache Struts2 path traversal → RCE" cve="CVE-2023-50164" cvss="9.8" host="admin" />
          <MiniFinding sev="high" name="Default credentials on Jenkins" cve="—" cvss="8.8" host="jenkins.int" />
          <MiniFinding sev="high" name="SQL injection in /api/v2/users" cve="—" cvss="8.6" host="api" />
        </div>
        <div style={{ padding: 18 }}>
          <div style={{ fontSize: 9.5, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.12em', fontWeight: 700, marginBottom: 12 }}>BY SEVERITY</div>
          {[['Critical',12,L.crit],['High',47,L.high],['Medium',184,L.med],['Low',312,L.low]].map(([l,n,c])=>(
            <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 9 }}>
              <span style={{ width: 3, height: 16, background: c, borderRadius: 1 }} />
              <span style={{ flex: 1, fontSize: 12, color: L.textDim }}>{l}</span>
              <span style={{ fontSize: 12, fontFamily: L.mono, fontWeight: 700, color: L.text }}>{n}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
);

/* ───────── C1 · Comparison table vs generic scanners ───────── */
const C1 = () => {
  const rows = [
    ['Plug and play scanner', true, false],
    ['Multi-domain discovery', true, false],
    ['Apex Hunter', true, false],
    ['JS Forensics Hunt', true, false],
    ['Active exploit validation', true, false],
    ['Authenticated scanners', true, false],
    ['Continuous re-scan with diffing', true, 'partial'],
    ['Operator-controlled scan workflow', true, false],
  ];
  const Cell = ({ v, accent }) => (
    <div style={{ display: 'grid', placeItems: 'center', padding: '14px 0' }}>
      {v === true ? <span style={{ color: accent ? L.accent : L.ok, display: 'flex' }}>{I.check}</span>
        : v === 'partial' ? <span style={{ fontSize: 11, fontFamily: L.mono, color: L.textMute }}>partial</span>
        : <span style={{ color: L.textFaint, display: 'flex' }}>{I.x}</span>}
    </div>
  );
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <Eyebrow dot={false}>The difference</Eyebrow>
        <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>Why teams switch to ThirdEyeScan</h2>
      </div>
      <div style={{ maxWidth: 760, margin: '0 auto', borderRadius: 14, border: `1px solid ${L.border}`, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 160px 160px', background: L.bgAlt, borderBottom: `1px solid ${L.border}` }}>
          <div style={{ padding: '16px 20px', fontSize: 12, fontFamily: L.mono, color: L.textMute, fontWeight: 700, letterSpacing: '0.1em' }}>CAPABILITY</div>
          <div style={{ padding: '16px 0', textAlign: 'center', borderLeft: `1px solid ${L.border}`, background: L.accentFaint }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Logo size={18} /><span style={{ fontSize: 13, fontWeight: 700, color: L.text }}>ThirdEyeScan</span></div>
          </div>
          <div style={{ padding: '16px 0', textAlign: 'center', borderLeft: `1px solid ${L.border}`, fontSize: 13, fontWeight: 600, color: L.textMute }}>Generic scanner</div>
        </div>
        {rows.map(([label, a, b], i) => (
          <div key={label} style={{ display: 'grid', gridTemplateColumns: '1fr 160px 160px', borderBottom: i<rows.length-1?`1px solid ${L.border}`:'none', background: i%2?'transparent':'rgba(255,255,255,0.01)' }}>
            <div style={{ padding: '14px 20px', fontSize: 13.5, color: L.textDim, display: 'flex', alignItems: 'center' }}>{label}</div>
            <div style={{ borderLeft: `1px solid ${L.border}`, background: L.accentFaint }}><Cell v={a} accent /></div>
            <div style={{ borderLeft: `1px solid ${L.border}` }}><Cell v={b} /></div>
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── P1 · Pricing — beta packages ───────── */
const P1 = () => {
  const tiers = [
    ['Basic', '$15', '$30', '15 days', 'For Solo Researchers', ['7 targets', 'Core detection modules + multi-domain discovery', 'Access to Apex Hunter', 'Access to Deep IP Port Analysis', 'Access to TLS Scanner', 'Analysis · Scan History · Evidence Lab · Attack Chains', 'Live Logs · Reports (PDF export)', '15-day access'], false],
    ['Plus', '$50', '$100', '3 months', 'For Active Researchers', ['All Basic plan features', '30 targets', 'JS Forensics · XSS · SQLi', 'Continuous rescan on the same target', '3-month access'], false],
    ['Pro', '$250', '$500', '1 year', 'For Professional Researchers', ['Everything in Plus', 'Unlimited targets · unlimited rescans', '1-year access', 'Priority support', 'Authenticated Scanning (v5) · Upcoming'], true],
    ['Audit a Company', 'Custom', '', '', 'For organisations that need audit support and custom scope control', ['Custom authorised scope', 'Company audit workflow', 'Dedicated onboarding', 'Priority coordination by email'], false],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ textAlign: 'center', marginBottom: 14 }}>
        <Eyebrow dot={false}>Pricing</Eyebrow>
        <h2 style={{ fontSize: 34, fontWeight: 700, color: L.text, margin: '0 0 10px', letterSpacing: '-0.02em' }}>Beta pricing — 50% off for the first 100 users</h2>
        <p style={{ fontSize: 14.5, color: L.textMute }}>Request a demo to choose a package and activate your account.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 28, alignItems: 'start' }}>
        {tiers.map(([name, price, was, per, desc, feats, rec]) => (
          <div key={name} style={{ padding: 26, borderRadius: 14, border: `1px solid ${rec?L.borderAmber:L.border}`, background: rec?`linear-gradient(170deg, ${L.accentDim}, ${L.surface})`:L.surface, position: 'relative', boxShadow: rec?'0 0 40px rgba(245,181,68,0.12)':'none' }}>
            {rec && <div style={{ position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)', fontSize: 10, fontFamily: L.mono, fontWeight: 700, letterSpacing: '0.1em', color: '#0A0E14', background: L.accent, padding: '4px 12px', borderRadius: 100 }}>RECOMMENDED</div>}
            <div style={{ fontSize: 14, fontWeight: 700, color: L.text }}>{name}</div>
            <div style={{ fontSize: 12.5, color: L.textMute, margin: '4px 0 18px', minHeight: 32 }}>{desc}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 20 }}>
              {was && <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 13, fontFamily: L.mono, color: L.textFaint, textDecoration: 'line-through' }}>{was}</span>
                <span style={{ fontSize: 10, fontFamily: L.mono, color: L.accent, background: L.accentDim, border: `1px solid ${L.borderAmber}`, padding: '3px 7px', borderRadius: 100, fontWeight: 700, letterSpacing: '0.08em' }}>50% OFF</span>
              </div>}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontSize: price === 'Custom' ? 36 : 42, fontFamily: L.mono, fontWeight: 700, color: L.text }}>{price}</span>
              {per && <span style={{ fontSize: 14, color: L.textMute, fontFamily: L.mono }}>/ {per}</span>}
              </div>
            </div>
            <div style={{ marginBottom: 22 }}><Btn primary={rec} size="md">Request a demo</Btn></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {feats.map(f => (
                <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: L.textDim }}>
                  <span style={{ color: L.accent, display: 'flex', flexShrink: 0 }}>{I.check}</span>{f}
                </div>
              ))}
            </div>
            {/* Pro-only side callout — Authenticated Scanning v5 upcoming */}
            {rec && (
              <div style={{
                marginTop: 22, padding: '14px 14px',
                borderRadius: 10,
                border: `1px dashed ${L.borderAmber}`,
                background: 'rgba(245,181,68,0.05)',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontSize: 10, fontFamily: L.mono, fontWeight: 700, color: L.accent, letterSpacing: '0.12em' }}>
                    AUTHENTICATED SCANNER · v5
                  </span>
                  <span style={{ fontSize: 9, fontFamily: L.mono, fontWeight: 700, color: '#0A0E14', background: L.accent, padding: '2px 7px', borderRadius: 100, letterSpacing: '0.1em' }}>
                    UPCOMING
                  </span>
                </div>
                <div style={{ fontSize: 12, color: L.textDim, lineHeight: 1.5 }}>
                  Session-aware scanning for authenticated flows — included for Pro users at launch.
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── P2 · Pricing — full 5-tier strip (their current count) ───────── */
const P2 = () => {
  const tiers = [
    ['Basic', '$15', '$30', ['Subdomains', 'IP ports', 'Full scan pipeline', '7 targets', '15-day access'], 'Beta rate'],
    ['Plus', '$50', '$100', ['Multi-domain', 'URLs & params', 'XSS · SQLi · JS Forensics', '30 targets', '3-month access'], 'Beta rate'],
    ['Pro', '$250', '$500', ['Everything in Plus', 'Unlimited scans', '1-year access', 'Authenticated v5 (Upcoming)', 'Priority access'], 'Recommended'],
    ['Max', 'Custom', null, ['Dedicated onboarding', 'Higher volume', 'Premium modules', 'Licensing options'], 'Contact sales'],
    ['Enterprise', 'Demo', null, ['Plug & play rollout', 'Custom pricing', 'Large environments', 'Predator scanner access'], 'Enterprise'],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 28 }}>
        <div><Eyebrow>Pricing</Eyebrow><h2 style={{ fontSize: 32, fontWeight: 700, color: L.text, margin: 0, letterSpacing: '-0.02em' }}>Five tiers, one engine</h2></div>
        <p style={{ fontSize: 14, color: L.textMute, maxWidth: 320, margin: 0, lineHeight: 1.5 }}>All beta rates are 50% off for the first 100 users.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }}>
        {tiers.map(([name, price, was, feats, badge]) => {
          const rec = badge === 'Recommended';
          return (
            <div key={name} style={{ padding: 20, borderRadius: 12, border: `1px solid ${rec?L.borderAmber:L.border}`, background: rec?`linear-gradient(170deg, ${L.accentDim}, ${L.surface})`:L.surface }}>
              <div style={{ display: 'inline-block', fontSize: 9.5, fontFamily: L.mono, fontWeight: 700, color: L.accent, background: L.accentDim, border: `1px solid ${L.borderAmber}`, padding: '3px 8px', borderRadius: 100, marginBottom: 14, letterSpacing: '0.04em' }}>{badge}</div>
              <div style={{ fontSize: 15, fontWeight: 700, color: L.text, marginBottom: 8 }}>{name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 16 }}>
                {was && <span style={{ fontSize: 13, fontFamily: L.mono, color: L.textFaint, textDecoration: 'line-through' }}>{was}</span>}
                <span style={{ fontSize: 28, fontFamily: L.mono, fontWeight: 700, color: L.text }}>{price}</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {feats.map(f => (
                  <div key={f} style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 12, color: L.textDim }}>
                    <span style={{ width: 5, height: 5, borderRadius: 3, background: L.accent, flexShrink: 0 }} />{f}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

/* ───────── P3 · Single focused pricing + toggle ───────── */
const P3 = () => (
  <div style={{ padding: '52px 36px' }}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
      <div>
        <Eyebrow>Simple pricing</Eyebrow>
        <h2 style={{ fontSize: 36, fontWeight: 700, color: L.text, margin: '0 0 14px', letterSpacing: '-0.02em' }}>One plan. Everything included.</h2>
        <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: '0 0 22px' }}>Every module, continuous scanning, full evidence, and report export. Scale targets as you grow — no feature gates, no surprises.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
          {['All 30+ detection modules','Continuous re-scan + diff alerts','Unlimited reports & exports','API, CI, Slack, Jira included'].map(f=>(
            <div key={f} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 14, color: L.textDim }}><span style={{ color: L.accent, display: 'flex' }}>{I.check}</span>{f}</div>
          ))}
        </div>
      </div>
      <div style={{ padding: 32, borderRadius: 16, border: `1px solid ${L.borderAmber}`, background: `linear-gradient(170deg, ${L.accentDim}, ${L.surface})`, textAlign: 'center' }}>
        <div style={{ fontSize: 12.5, fontFamily: L.mono, color: L.accent, letterSpacing: '0.1em', fontWeight: 700, marginBottom: 16 }}>BETA · 50% OFF</div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6, marginBottom: 6 }}>
          <span style={{ fontSize: 20, fontFamily: L.mono, color: L.textFaint, textDecoration: 'line-through' }}>$100</span>
          <span style={{ fontSize: 56, fontFamily: L.mono, fontWeight: 700, color: L.text, letterSpacing: '-0.03em' }}>$50</span>
          <span style={{ fontSize: 16, color: L.textMute, fontFamily: L.mono }}>3 months</span>
        </div>
        <div style={{ fontSize: 13, color: L.textMute, marginBottom: 22 }}>20 targets · one-time 3-month package · cancel anytime</div>
        <Btn primary size="lg" icon={I.arrowUpRight}>Request a demo</Btn>
        <div style={{ fontSize: 12, color: L.textFaint, fontFamily: L.mono, marginTop: 14 }}>Personalized walkthrough · setup in minutes</div>
      </div>
    </div>
  </div>
);

/* ───────── Q1 · FAQ accordion ───────── */
const Q1 = () => {
  const [open, setOpen] = React.useState('pricing-0');
  const groups = [
    ['Pricing', [
      ['What are the beta prices?', 'Basic is $15 / 15 days, Plus is $50 / 3 months, and Pro is $250 / 1 year. Each beta package is 50% off the regular price for the first 100 users.'],
      ['What happens after the beta?', 'Beta rates are locked for the first 100 users. You keep your package price while the platform expands with deeper scanners and analysis modules.'],
      ['How does Audit a Company pricing work?', 'Audit a Company is custom. Share the authorised company scope, targets, timeline, and support needs, and we will coordinate pricing and activation by email.'],
    ]],
    ['Why Us?', [
      ['Why do researchers choose ThirdEyeScan?', 'ThirdEyeScan is built for active hunting: it maps exposed surfaces, follows JavaScript clues, correlates evidence, and keeps noisy scanner output under control.'],
      ['What makes the results useful?', 'ThirdEyeScan uses predator scanners to hunt for real issues, while other tools mostly stop at recon and endpoint discovery. The output is organised around affected assets, evidence, impact, and exportable reports, so you can move from discovery to verification without rebuilding context manually.'],
      ['How does it help during beta?', 'Beta users get discounted access while the platform expands, plus priority exposure to new predator scanners and workflow improvements as they ship.'],
    ]],
    ['Account', [
      ['How does payment and activation work?', 'Submit the request demo form with your package choice and payment mode. We currently accept Bitcoin and UPI, then activation is handled by email after payment confirmation.'],
      ['Can one package be used by a full team?', 'Each package is meant for one researcher account. Strict session control helps prevent spam, device swapping, and unauthorized scanning from shared accounts.'],
      ['Can I export findings for clients or auditors?', 'Every run exports a client-ready PDF with evidence, plus JSON/CSV and direct push to Jira, Slack, and webhooks.'],
    ]],
  ];
  return (
    <div style={{ padding: '52px 36px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 28, marginBottom: 26 }}>
        <div>
          <Eyebrow>FAQ</Eyebrow>
          <h2 style={{ fontSize: 32, fontWeight: 700, color: L.text, margin: '0 0 8px' }}>Questions, answered</h2>
        </div>
        <a href="/requestdemo.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none', color: '#0A0E14', background: L.accent, borderRadius: 9, padding: '12px 16px', fontSize: 13.5, fontWeight: 700 }}>Request a demo <span style={{ display: 'flex' }}>{I.arrowUpRight}</span></a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16, alignItems: 'start' }}>
        {groups.map(([group, items], gi) => (
          <div key={group} style={{ borderRadius: 12, border: `1px solid ${gi === 0 ? L.borderAmber : L.border}`, background: gi === 0 ? `linear-gradient(170deg, ${L.accentDim}, ${L.surface})` : L.surface, overflow: 'hidden' }}>
            <div style={{ padding: '15px 18px', borderBottom: `1px solid ${L.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ fontSize: 11, fontFamily: L.mono, color: L.accent, fontWeight: 700, letterSpacing: '0.12em' }}>{group.toUpperCase()}</div>
              {gi === 0 && <div style={{ fontSize: 10, fontFamily: L.mono, color: L.accent, border: `1px solid ${L.borderAmber}`, borderRadius: 100, padding: '3px 7px' }}>50% OFF</div>}
            </div>
            {items.map(([q, a], ii) => {
              const key = `${group.toLowerCase()}-${ii}`;
              const active = open === key;
              return (
                <div key={q} style={{ borderBottom: ii < items.length - 1 ? `1px solid ${L.border}` : 'none' }}>
                  <button
                    type="button"
                    onClick={() => setOpen(active ? '' : key)}
                    aria-expanded={active}
                    style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, padding: '16px 18px', border: 'none', background: active ? 'rgba(245,181,68,0.04)' : 'transparent', cursor: 'pointer', textAlign: 'left' }}
                  >
                    <span style={{ fontSize: 14, fontWeight: 700, color: L.text, lineHeight: 1.35 }}>{q}</span>
                    <span style={{ color: L.accent, display: 'flex', flexShrink: 0, transform: active ? 'rotate(180deg)' : 'none', transition: 'transform 160ms ease' }}>{I.chevron}</span>
                  </button>
                  {active && <p style={{ fontSize: 13, color: L.textDim, lineHeight: 1.6, margin: 0, padding: '0 18px 17px' }}>{a}</p>}
                </div>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
};

/* ───────── FT1 · Footer ───────── */
const FT1 = () => {
  const cols = [
    ['Product', [['Platform','/#platform'], ['Detections','/#detections'], ['Pricing','/#pricing'], ['FAQ','/#faq']]],
    ['Resources', [['Scanner Overview','/scanner-overview'], ['Request Demo','/requestdemo.html']]],
    ['Company', [['Contact','mailto:support@thirdeyescan.io'], ['Privacy and Terms','/tps.html']]],
  ];
  return (
    <div style={{ padding: '48px 36px 28px', borderTop: `1px solid ${L.border}`, background: L.bgAlt }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
        <div>
          <Wordmark markSize={34} />
          <p style={{ fontSize: 13.5, color: L.textMute, lineHeight: 1.6, margin: '16px 0 16px', maxWidth: 280 }}>External attack surface scanning that gives operators signal, not noise.</p>
          <div style={{ display: 'flex', gap: 10 }}>
            {[
              { ic: I.mail,    href: 'mailto:support@thirdeyescan.io', label: 'Email support' },
              { ic: I.globe,   href: 'https://thirdeyescan.io',         label: 'Website',        external: true },
              { ic: I.twitter, href: 'https://x.com/thirdeyescan',      label: 'X (Twitter)',    external: true },
            ].map((s, i) => (
              <a key={i} href={s.href}
                 aria-label={s.label} title={s.label}
                 target={s.external ? '_blank' : undefined}
                 rel={s.external ? 'noopener noreferrer' : undefined}
                 style={{
                   width: 34, height: 34, borderRadius: 8,
                   border: `1px solid ${L.border}`,
                   display: 'grid', placeItems: 'center',
                   color: L.textMute, textDecoration: 'none',
                   transition: 'color .15s, border-color .15s, background .15s',
                 }}
                 onMouseEnter={e => { e.currentTarget.style.color = L.accent; e.currentTarget.style.borderColor = L.borderAmber; e.currentTarget.style.background = L.accentDim; }}
                 onMouseLeave={e => { e.currentTarget.style.color = L.textMute; e.currentTarget.style.borderColor = L.border; e.currentTarget.style.background = 'transparent'; }}
              >{s.ic}</a>
            ))}
          </div>
        </div>
        {cols.map(([title, links]) => (
          <div key={title}>
            <div style={{ fontSize: 11, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.14em', fontWeight: 700, marginBottom: 14 }}>{title.toUpperCase()}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {links.map(([l, href]) => <a key={l} href={href} style={{ fontSize: 13.5, color: L.textDim, cursor: 'pointer', textDecoration: 'none' }}>{l}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 22, borderTop: `1px solid ${L.border}` }}>
        <span style={{ fontSize: 12.5, color: L.textFaint, fontFamily: L.mono }}>© 2026 ThirdEyeScan · thirdeyescan.io</span>
        <span style={{ fontSize: 12.5, color: L.textFaint, fontFamily: L.mono }}>Predator-grade scanners for exposed assets and shipped JavaScript</span>
      </div>
    </div>
  );
};

Object.assign(window, { S1, C1, P1, P2, P3, Q1, FT1 });