/* Hero variants H1–H4 + Trust/stats T1–T3 */

/* Shared little dashboard-glimpse used inside heroes */
const SevDot = ({ c }) => <span style={{ width: 7, height: 7, borderRadius: 2, background: c, display: 'inline-block' }} />;

const MiniFinding = ({ sev, name, cve, cvss, host }) => {
  const col = { critical: L.crit, high: L.high, medium: L.med }[sev];
  const bg = { critical: 'rgba(229,72,77,0.12)', high: 'rgba(245,128,62,0.12)', medium: 'rgba(245,181,68,0.12)' }[sev];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: '11px 14px', borderBottom: `1px solid ${L.border}`, position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 2, background: col }} />
      <span style={{ fontSize: 9, fontFamily: L.mono, fontWeight: 700, color: col, background: bg, padding: '2px 6px', borderRadius: 3, border: `1px solid ${col}33`, letterSpacing: '0.04em' }}>{sev.slice(0,4).toUpperCase()}</span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 12, color: L.text, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        <div style={{ fontSize: 10, fontFamily: L.mono, color: L.textMute, marginTop: 2 }}>{cve} · {host}</div>
      </div>
      <span style={{ fontSize: 11, fontFamily: L.mono, fontWeight: 700, color: col }}>{cvss}</span>
    </div>
  );
};

const DashGlimpse = () => (
  <div style={{ background: L.surface, border: `1px solid ${L.borderHi}`, borderRadius: 12, overflow: 'hidden', boxShadow: '0 24px 80px rgba(0,0,0,0.5)' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: `1px solid ${L.border}`, background: L.bgAlt }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Logo size={20} />
        <span style={{ fontSize: 12, fontWeight: 600, color: L.text }}>Live scan · target.com</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: 3, background: L.ok }} />
        <span style={{ fontSize: 10, fontFamily: L.mono, color: L.ok, letterSpacing: '0.1em', fontWeight: 700 }}>SCANNING 76%</span>
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', borderBottom: `1px solid ${L.border}` }}>
      {[['HOSTS','73',L.text],['FINDINGS','644',L.crit],['CRITICAL','12',L.crit],['REMEDIATED','187',L.ok]].map(([k,v,c],i)=>(
        <div key={k} style={{ padding: '12px 14px', borderRight: i<3?`1px solid ${L.border}`:'none' }}>
          <div style={{ fontSize: 8.5, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.12em', fontWeight: 700 }}>{k}</div>
          <div style={{ fontSize: 19, fontFamily: L.mono, fontWeight: 700, color: c, marginTop: 3 }}>{v}</div>
        </div>
      ))}
    </div>
    <MiniFinding sev="critical" name="XZ Utils backdoor → sshd RCE" cve="CVE-2024-3094" cvss="10.0" host="api-staging" />
    <MiniFinding sev="critical" name="Subdomain takeover · dangling CNAME" cve="—" cvss="9.6" host="old-cdn" />
    <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" />
    <MiniFinding sev="medium" name="TLS 1.0 enabled on edge LB" cve="—" cvss="5.3" host="lb-01" />
  </div>
);

/* ───────── H1 · Split hero — copy left, live dashboard right ───────── */
const H1 = () => (
  <div>
    <NavBar />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center', padding: '60px 36px 70px', background: `radial-gradient(900px 500px at 78% 20%, rgba(245,181,68,0.08), transparent 70%)` }}>
      <div>
        <Eyebrow>External attack surface scanner</Eyebrow>
        <h1 style={{ fontSize: 50, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.025em', color: L.text, margin: '0 0 20px' }}>
          Find what attackers<br/>see <span style={{ color: L.accent }}>before they do.</span>
        </h1>
        <p style={{ fontSize: 16.5, lineHeight: 1.6, color: L.textDim, margin: '0 0 28px', maxWidth: 460 }}>
          ThirdEyeScan maps your external surface, runs 30+ attack modules, and hands back ranked, reproducible findings — with the exact evidence to fix them. No agents. No noise.
        </p>
        <div style={{ display: 'flex', gap: 12, marginBottom: 26 }}>
          <Btn primary size="lg" icon={I.arrowUpRight}>Request a demo</Btn>
          <Btn size="lg" iconLeft={I.eye}>Scanner Overview</Btn>
        </div>
        <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
          {['No credit card', 'First scan in 60s', '30+ detection modules'].map(x => (
            <div key={x} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: L.textMute, fontFamily: L.mono }}>
              <span style={{ color: L.ok, display: 'flex' }}>{I.check}</span>{x}
            </div>
          ))}
        </div>
      </div>
      <DashGlimpse />
    </div>
  </div>
);

/* ───────── H2 · Centered hero with terminal + chips ───────── */
const H2 = () => (
  <div>
    <NavBar />
    <div style={{ textAlign: 'center', padding: '64px 36px 56px', background: `radial-gradient(800px 420px at 50% 0%, rgba(245,181,68,0.10), transparent 70%)` }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 14px', borderRadius: 100, border: `1px solid ${L.borderAmber}`, background: L.accentDim, marginBottom: 24 }}>
        <span style={{ width: 6, height: 6, borderRadius: 3, background: L.accent }} />
        <span style={{ fontSize: 12, fontFamily: L.mono, color: L.accent, fontWeight: 600, letterSpacing: '0.04em' }}>Beta · 50% off the first 100 teams</span>
      </div>
      <h1 style={{ fontSize: 58, fontWeight: 800, lineHeight: 1.03, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 22px', maxWidth: 820 }}>
        Continuous exposure scanning for researchers and teams
      </h1>
      <p style={{ fontSize: 17.5, lineHeight: 1.6, color: L.textDim, margin: '0 auto 30px', maxWidth: 580 }}>
        Point ThirdEyeScan at any domain and get back live hosts, open ports, exposed panels, and exploitable CVEs — ranked by real risk and tied to fixable evidence. Solo researcher or full security team, same engine.
      </p>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 34 }}>
        <Btn primary size="lg" icon={I.arrowUpRight}>Request a demo</Btn>
        <Btn size="lg">Scanner Overview</Btn>
      </div>
      <div style={{ maxWidth: 620, margin: '0 auto', background: '#05080D', border: `1px solid ${L.border}`, borderRadius: 10, overflow: 'hidden', textAlign: 'left' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, padding: '9px 14px', borderBottom: `1px solid ${L.border}`, background: L.surface }}>
          <span style={{ width: 9, height: 9, borderRadius: 5, background: '#FF5F57' }} />
          <span style={{ width: 9, height: 9, borderRadius: 5, background: '#FEBC2E' }} />
          <span style={{ width: 9, height: 9, borderRadius: 5, background: '#28C840' }} />
          <span style={{ fontSize: 10.5, fontFamily: L.mono, color: L.textMute, marginLeft: 8 }}>thirdeyescan — live scan</span>
        </div>
        <div style={{ padding: '14px 16px', fontFamily: L.mono, fontSize: 12.5, lineHeight: 1.8 }}>
          <div style={{ color: L.textMute }}><span style={{ color: L.accent }}>$</span> scan target.com</div>
          <div style={{ color: L.ok }}>✓ 73 subdomains · 73 live hosts · 65 open ports</div>
          <div style={{ color: L.high }}>✗ 47 high · <span style={{ color: L.crit }}>12 critical</span> findings · evidence attached</div>
          <div style={{ color: L.textDim }}>→ report ready: <span style={{ color: L.accent }}>thirdeyescan.io/r/7f4a</span> <span style={{ width: 7, height: 14, background: L.accent, display: 'inline-block', verticalAlign: 'middle', marginLeft: 4 }} /></div>
        </div>
      </div>
    </div>
  </div>
);

/* ───────── H3 · Bold statement hero, full-bleed type ───────── */
const H3 = () => (
  <div>
    <NavBar />
    <div style={{ padding: '70px 36px 60px' }}>
      <Eyebrow>Attack surface management</Eyebrow>
      <h1 style={{ fontSize: 76, fontWeight: 800, lineHeight: 0.98, letterSpacing: '-0.035em', color: L.text, margin: '0 0 28px', maxWidth: 1000 }}>
        Your perimeter has<br/>changed since <span style={{ color: L.accent, fontStyle: 'italic' }}>breakfast.</span>
      </h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'end' }}>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: L.textDim, margin: 0, maxWidth: 540 }}>
          New subdomains, forgotten staging boxes, expired certs, a fresh CVE dropping at 2am. ThirdEyeScan watches the outside of your org the way an attacker would — continuously, and reports only what's actually exploitable.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
          <Btn primary size="lg" icon={I.arrowUpRight}>Map my attack surface</Btn>
          <div style={{ display: 'flex', gap: 16, fontSize: 12.5, fontFamily: L.mono, color: L.textMute }}>
            <span><span style={{ color: L.accent, fontWeight: 700 }}>1,200+</span> assets / scan</span>
            <span><span style={{ color: L.accent, fontWeight: 700 }}>14 min</span> avg runtime</span>
          </div>
        </div>
      </div>
    </div>
    <div style={{ borderTop: `1px solid ${L.border}`, padding: '14px 36px', display: 'flex', gap: 10, flexWrap: 'wrap', background: L.bgAlt }}>
      {['Subdomain enum', 'Port & service scan', 'Exposed panels', 'CVE matching', 'Subdomain takeover', 'Secrets & sensitive files', 'TLS / SSL review', 'Web exploit modules'].map(x => <Chip key={x}>{x}</Chip>)}
    </div>
  </div>
);

/* ───────── H4 · Product-led: input box hero ───────── */
const H4 = () => (
  <div>
    <NavBar />
    <div style={{ textAlign: 'center', padding: '66px 36px 60px', background: `radial-gradient(700px 380px at 50% 10%, rgba(245,181,68,0.09), transparent 70%)` }}>
      <h1 style={{ fontSize: 54, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 18px', maxWidth: 760 }}>
        Scan any domain. See every exposure.
      </h1>
      <p style={{ fontSize: 17, lineHeight: 1.6, color: L.textDim, margin: '0 auto 32px', maxWidth: 520 }}>
        Enter a domain and watch ThirdEyeScan enumerate the surface, fingerprint services, and surface exploitable findings in real time.
      </p>
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', maxWidth: 560, margin: '0 auto 18px' }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px', background: L.surface, border: `1px solid ${L.borderHi}`, borderRadius: 10 }}>
          <span style={{ color: L.textMute, display: 'flex' }}>{I.globe}</span>
          <input defaultValue="target.com" readOnly style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', color: L.text, fontSize: 15, fontFamily: L.mono, padding: '15px 0' }} />
        </div>
        <Btn primary size="lg" icon={I.arrow}>Scan now</Btn>
      </div>
      <div style={{ fontSize: 12.5, color: L.textMute, fontFamily: L.mono }}>Try a demo target — no signup required</div>
    </div>
  </div>
);

/* ───────── T1 · Logo trust bar + stat strip ───────── */
const T1 = () => (
  <div style={{ padding: '40px 36px' }}>
    <div style={{ textAlign: 'center', fontSize: 11.5, fontFamily: L.mono, color: L.textMute, letterSpacing: '0.16em', fontWeight: 700, marginBottom: 24 }}>
      TRUSTED BY SECURITY TEAMS AT FAST-MOVING COMPANIES
    </div>
    <div style={{ display: 'flex', justifyContent: 'center', gap: 48, flexWrap: 'wrap', marginBottom: 44, opacity: 0.55 }}>
      {['NORTHWIND', 'Lumenly', 'VANTAGE', 'Acme/IO', 'Orbital', 'Hexabyte'].map(x => (
        <span key={x} style={{ fontSize: 19, fontWeight: 700, color: L.textDim, letterSpacing: '-0.01em' }}>{x}</span>
      ))}
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: L.border, border: `1px solid ${L.border}`, borderRadius: 12, overflow: 'hidden' }}>
      {[['2.4M+','assets scanned'],['180K+','findings triaged'],['30+','detection modules'],['14 min','median scan time']].map(([n,l])=>(
        <div key={l} style={{ background: L.bg, padding: '26px 20px', textAlign: 'center' }}>
          <div style={{ fontSize: 34, fontFamily: L.mono, fontWeight: 700, color: L.accent, letterSpacing: '-0.02em' }}>{n}</div>
          <div style={{ fontSize: 12.5, color: L.textMute, marginTop: 6 }}>{l}</div>
        </div>
      ))}
    </div>
  </div>
);

/* ───────── T2 · Compliance / standards row ───────── */
const T2 = () => (
  <div style={{ padding: '44px 36px', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 40, alignItems: 'center' }}>
    <div>
      <Eyebrow>Built on what attackers use</Eyebrow>
      <h2 style={{ fontSize: 28, fontWeight: 700, color: L.text, margin: '0 0 12px', letterSpacing: '-0.02em' }}>Mapped to the standards your auditors ask about</h2>
      <p style={{ fontSize: 15, color: L.textDim, lineHeight: 1.6, margin: 0 }}>Every finding is tagged with CVE, CVSS 3.1, EPSS, and OWASP category — so triage, reporting, and compliance evidence come from one run.</p>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
      {[['OWASP','Top 10 coverage'],['CVE','+ NVD enrichment'],['CVSS','3.1 base scoring'],['EPSS','exploit prediction'],['CWE','weakness mapping'],['MITRE','ATT&CK tags']].map(([a,b])=>(
        <div key={a} style={{ padding: '16px', borderRadius: 10, border: `1px solid ${L.border}`, background: L.surface }}>
          <div style={{ fontSize: 16, fontFamily: L.mono, fontWeight: 700, color: L.accent }}>{a}</div>
          <div style={{ fontSize: 12, color: L.textMute, marginTop: 4 }}>{b}</div>
        </div>
      ))}
    </div>
  </div>
);

/* ───────── T3 · Single big testimonial ───────── */
const T3 = () => (
  <div style={{ padding: '54px 36px', textAlign: 'center', background: `radial-gradient(600px 300px at 50% 0%, rgba(245,181,68,0.06), transparent 70%)` }}>
    <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 22, color: L.accent }}>
      {[0,1,2,3,4].map(i => <span key={i} style={{ display: 'flex' }}>{I.star}</span>)}
    </div>
    <p style={{ fontSize: 26, fontWeight: 600, lineHeight: 1.4, color: L.text, margin: '0 auto 26px', maxWidth: 760, letterSpacing: '-0.01em' }}>
      "We replaced two scanners and a spreadsheet with ThirdEyeScan. The first run found a forgotten staging box with a 10.0 on it. <span style={{ color: L.accent }}>That alone paid for the year.</span>"
    </p>
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <div style={{ width: 44, height: 44, borderRadius: 100, background: L.surface3, border: `1px solid ${L.borderHi}`, display: 'grid', placeItems: 'center', fontFamily: L.mono, fontWeight: 700, color: L.accent }}>RK</div>
      <div style={{ textAlign: 'left' }}>
        <div style={{ fontSize: 14, fontWeight: 700, color: L.text }}>Riya Kapoor</div>
        <div style={{ fontSize: 12.5, color: L.textMute }}>Head of Security · Series B SaaS</div>
      </div>
    </div>
  </div>
);

Object.assign(window, { H1, H2, H3, H4, T1, T2, T3, DashGlimpse });