/* 21 home-page hero designs for ThirdEyeScan.
   CTA rule: Primary = "Request a demo", secondary = "Scanner Overview". */

/* ── nav (matches the real site) ── */
const Nav = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 36px', borderBottom: `1px solid ${L.border}` }}>
    <Wordmark markSize={32} />
    <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
      <a href="/#platform" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Platform</a>
      <a href="/#detections" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Detections</a>
      <a href="/#pricing" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 500, cursor: 'pointer', textDecoration: 'none' }}>Pricing</a>
      <a href="/scanner-overview" style={{ fontSize: 13.5, color: L.accent, fontWeight: 600, cursor: 'pointer', textDecoration: 'none' }}>Scanner Overview</a>
    </div>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <a href="/login" style={{ fontSize: 13.5, color: L.textDim, fontWeight: 600, cursor: 'pointer', textDecoration: 'none' }}>Sign in</a>
      <Btn primary size="sm" icon={I.arrowUpRight}>Request a demo</Btn>
    </div>
  </div>
);

/* ── CTA pair (reused) — primary demo, secondary scanner overview ── */
const CTAs = ({ size = 'lg', center }) => (
  <div style={{ display: 'flex', gap: 12, justifyContent: center ? 'center' : 'flex-start' }}>
    <Btn primary size={size} icon={I.arrowUpRight}>Request a demo</Btn>
    <Btn size={size} iconLeft={I.eye}>Scanner Overview</Btn>
  </div>
);
/* yellow Scanner Overview variant */
const CTAsB = ({ size = 'lg', center }) => (
  <div style={{ display: 'flex', gap: 12, justifyContent: center ? 'center' : 'flex-start' }}>
    <Btn primary size={size} iconLeft={I.eye}>Scanner Overview</Btn>
    <Btn size={size} icon={I.arrowUpRight}>Request a demo</Btn>
  </div>
);

const BetaBadge = () => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 14px', borderRadius: 100, border: `1px solid ${L.borderAmber}`, background: L.accentDim }}>
    <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 users</span>
  </div>
);

/* ── reusable terminal ── */
const T = ({ h, children, title = 'thirdeyescan — live scan', status, sc = L.ok }) => (
  <div style={{ background: '#070B11', border: `1px solid ${L.borderHi}`, borderRadius: 12, overflow: 'hidden', boxShadow: '0 24px 70px rgba(0,0,0,0.5)' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', borderBottom: `1px solid ${L.border}`, background: L.surface }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F57' }} /><span style={{ width: 10, height: 10, borderRadius: 5, background: '#FEBC2E' }} /><span style={{ width: 10, height: 10, borderRadius: 5, background: '#28C840' }} />
        <span style={{ fontSize: 11.5, fontFamily: L.mono, color: L.textMute, marginLeft: 8 }}>{title}</span>
      </div>
      {status && <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 3, background: sc }} /><span style={{ fontSize: 10.5, fontFamily: L.mono, color: sc, letterSpacing: '0.1em', fontWeight: 700 }}>{status}</span></div>}
    </div>
    <div style={{ padding: 16, fontFamily: L.mono, fontSize: 12.5, lineHeight: 1.85, minHeight: h }}>{children}</div>
  </div>
);
const ScanLines = () => (<>
  <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> · 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: 2 }} /></div>
</>);

const Find = ({ sev, name, sub, score }) => {
  const c = { CRIT: L.crit, HIGH: L.high, MED: L.med }[sev];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center', padding: '10px 12px', background: L.surface, borderRadius: 8, marginBottom: 7, position: 'relative' }}>
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: c, borderRadius: '8px 0 0 8px' }} />
      <span style={{ fontSize: 9, fontFamily: L.mono, fontWeight: 700, color: c, background: `${c}1f`, padding: '3px 6px', borderRadius: 3, border: `1px solid ${c}44`, marginLeft: 4 }}>{sev}</span>
      <div style={{ minWidth: 0 }}><div style={{ fontSize: 12.5, color: L.text, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div><div style={{ fontSize: 10.5, fontFamily: L.mono, color: L.textMute, marginTop: 2 }}>{sub}</div></div>
      <span style={{ fontSize: 13, fontFamily: L.mono, fontWeight: 700, color: c }}>{score}</span>
    </div>
  );
};

const HEAD = 'Continuous exposure scanning for researchers and teams';
const SUB = 'Point ThirdEyeScan at target.com and get back live hosts, open ports, exposed console logins, and exploitable CVEs — ranked by real risk and tied to fixable evidence. Solo researcher or full security team, same engine.';
const SUB_SHORT = 'One domain in. Live hosts, exposed console logins, and exploitable CVEs out — ranked by real risk, tied to fixable evidence.';
const grid = `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)`;

/* ═══════════ 01 · Centered + terminal (refined current) ═══════════ */
const HX01 = () => (
  <div><Nav /><div style={{ textAlign: 'center', padding: '54px 36px 56px', background: `radial-gradient(800px 420px at 50% 0%, rgba(245,181,68,0.10), transparent 70%)` }}>
    <BetaBadge />
    <h1 style={{ fontSize: 54, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.03em', color: L.text, margin: '22px auto 18px', maxWidth: 800 }}>{HEAD}</h1>
    <p style={{ fontSize: 16.5, lineHeight: 1.6, color: L.textDim, margin: '0 auto 28px', maxWidth: 580 }}>{SUB}</p>
    <CTAs center />
    <div style={{ maxWidth: 640, margin: '34px auto 0', textAlign: 'left' }}><T h={120}><ScanLines /></T></div>
  </div></div>
);

/* ═══════════ 02 · Split — copy left, terminal right ═══════════ */
const HX02 = () => (
  <div><Nav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, alignItems: 'center', padding: '58px 36px 64px', background: `radial-gradient(700px 460px at 80% 30%, rgba(245,181,68,0.08), transparent 70%)` }}>
    <div>
      <BetaBadge />
      <h1 style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.06, letterSpacing: '-0.03em', color: L.text, margin: '18px 0 16px' }}>{HEAD}</h1>
      <p style={{ fontSize: 16, lineHeight: 1.6, color: L.textDim, margin: '0 0 26px', maxWidth: 460 }}>{SUB}</p>
      <CTAs />
    </div>
    <T h={150} status="LIVE" sc={L.ok}><ScanLines /></T>
  </div></div>
);

/* ═══════════ 03 · Split — copy left, findings card right ═══════════ */
const HX03 = () => (
  <div><Nav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, alignItems: 'center', padding: '54px 36px 60px' }}>
    <div>
      <Eyebrow>External attack surface scanner</Eyebrow>
      <h1 style={{ fontSize: 48, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.03em', color: L.text, margin: '0 0 16px' }}>Find what attackers see <span style={{ color: L.accent }}>before they do.</span></h1>
      <p style={{ fontSize: 16, lineHeight: 1.6, color: L.textDim, margin: '0 0 26px', maxWidth: 450 }}>{SUB_SHORT}</p>
      <CTAs />
    </div>
    <T h={0} status="12 CRITICAL" sc={L.crit} title="findings · target.com">
      <Find sev="CRIT" name="XZ Utils backdoor → sshd RCE" sub="CVE-2024-3094 · api-staging.target.com" score="10.0" />
      <Find sev="CRIT" name="Subdomain takeover · dangling CNAME" sub="old-cdn.target.com" score="9.6" />
      <Find sev="HIGH" name="Default credentials on admin panel" sub="jenkins.target.com" score="8.8" />
      <Find sev="HIGH" name="SQL injection in /api/v2/users" sub="api.target.com" score="8.6" />
    </T>
  </div></div>
);

/* ═══════════ 04 · Big statement, left-aligned ═══════════ */
const HX04 = () => (
  <div><Nav /><div style={{ padding: '62px 36px 56px' }}>
    <Eyebrow>Attack surface management</Eyebrow>
    <h1 style={{ fontSize: 72, fontWeight: 800, lineHeight: 0.98, letterSpacing: '-0.035em', color: L.text, margin: '0 0 26px', maxWidth: 980 }}>Your perimeter 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: 17, lineHeight: 1.6, color: L.textDim, margin: 0, maxWidth: 540 }}>New subdomains, forgotten staging, a fresh CVE at 2am. ThirdEyeScan watches the outside of your org the way an attacker would — and reports only what's exploitable.</p>
      <CTAs />
    </div>
  </div></div>
);

/* ═══════════ 05 · Minimal centered ═══════════ */
const HX05 = () => (
  <div><Nav /><div style={{ textAlign: 'center', padding: '90px 36px 96px' }}>
    <h1 style={{ fontSize: 60, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.035em', color: L.text, margin: '0 auto 22px', maxWidth: 820 }}>Scan any domain.<br/>See <span style={{ color: L.accent }}>every exposure.</span></h1>
    <p style={{ fontSize: 17, color: L.textMute, margin: '0 auto 32px', maxWidth: 440, lineHeight: 1.6 }}>{SUB_SHORT}</p>
    <CTAs center />
  </div></div>
);

/* ═══════════ 06 · Terminal-led centered (big terminal) ═══════════ */
const HX06 = () => (
  <div><Nav /><div style={{ textAlign: 'center', padding: '48px 36px 56px', background: `radial-gradient(700px 380px at 50% 10%, rgba(245,181,68,0.08), transparent 70%)` }}>
    <h1 style={{ fontSize: 42, fontWeight: 800, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 10px', maxWidth: 680 }}>Watch it hunt, live.</h1>
    <p style={{ fontSize: 15.5, color: L.textMute, margin: '0 auto 26px', maxWidth: 480 }}>{SUB_SHORT}</p>
    <div style={{ maxWidth: 720, margin: '0 auto 26px', textAlign: 'left' }}><T h={150} status="HUNTING 84%" sc={L.accent}><ScanLines /><div style={{ color: L.textDim }}>→ 9 secrets exposed in JS bundles</div></T></div>
    <CTAs center />
  </div></div>
);

/* ═══════════ 07 · Domain input → demo ═══════════ */
const HX07 = () => (
  <div><Nav /><div style={{ textAlign: 'center', padding: '64px 36px 60px', background: `radial-gradient(700px 380px at 50% 0%, rgba(245,181,68,0.09), transparent 70%)` }}>
    <h1 style={{ fontSize: 52, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 16px', maxWidth: 740 }}>What's exposed on your domain?</h1>
    <p style={{ fontSize: 16.5, color: L.textDim, margin: '0 auto 30px', maxWidth: 500, lineHeight: 1.6 }}>Enter a domain and we'll walk you through a live demo of exactly what ThirdEyeScan finds.</p>
    <div style={{ display: 'flex', gap: 10, justifyContent: 'center', maxWidth: 560, margin: '0 auto 14px' }}>
      <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.arrowUpRight}>Request a demo</Btn>
    </div>
    <div style={{ fontSize: 12.5, color: L.textMute, fontFamily: L.mono }}>or explore the <span style={{ color: L.accent, cursor: 'pointer' }}>Scanner Overview →</span></div>
  </div></div>
);

/* ═══════════ 08 · Stat-bar hero ═══════════ */
const HX08 = () => (
  <div><Nav /><div style={{ textAlign: 'center', padding: '56px 36px 0' }}>
    <h1 style={{ fontSize: 52, fontWeight: 800, lineHeight: 1.04, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 16px', maxWidth: 760 }}>{HEAD}</h1>
    <p style={{ fontSize: 16, color: L.textDim, margin: '0 auto 30px', maxWidth: 520, lineHeight: 1.6 }}>{SUB_SHORT}</p>
    <CTAs center />
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: L.border, borderTop: `1px solid ${L.border}`, borderBottom: `1px solid ${L.border}`, marginTop: 48 }}>
      {[['5,000', 'subdomains / sweep'], ['30+', 'detection modules'], ['14 min', 'median scan'], ['100%', 'evidence-backed']].map(([n, l]) => (
        <div key={l} style={{ background: L.bg, padding: '24px 18px' }}><div style={{ fontSize: 30, fontFamily: L.mono, fontWeight: 700, color: L.accent }}>{n}</div><div style={{ fontSize: 12, color: L.textMute, marginTop: 5 }}>{l}</div></div>
      ))}
    </div>
  </div></div>
);

/* ═══════════ 09 · Grid-background hero ═══════════ */
const HX09 = () => (
  <div><Nav /><div style={{ position: 'relative', padding: '70px 36px', backgroundImage: grid, backgroundSize: '40px 40px' }}>
    <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(600px 360px at 30% 40%, rgba(245,181,68,0.10), transparent 70%)` }} />
    <div style={{ position: 'relative', maxWidth: 760 }}>
      <BetaBadge />
      <h1 style={{ fontSize: 56, fontWeight: 800, lineHeight: 1.03, letterSpacing: '-0.03em', color: L.text, margin: '18px 0 16px' }}>{HEAD}</h1>
      <p style={{ fontSize: 16.5, color: L.textDim, margin: '0 0 28px', maxWidth: 520, lineHeight: 1.6 }}>{SUB_SHORT}</p>
      <CTAs />
    </div>
  </div></div>
);

/* ═══════════ 10 · Mirror — terminal left, copy right ═══════════ */
const HX10 = () => (
  <div><Nav /><div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 44, alignItems: 'center', padding: '58px 36px 64px' }}>
    <T h={150} status="LIVE" sc={L.ok}><ScanLines /></T>
    <div>
      <Eyebrow>Signal, not noise</Eyebrow>
      <h1 style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.03em', color: L.text, margin: '0 0 16px' }}>Exposure intelligence, ranked by real risk</h1>
      <p style={{ fontSize: 16, color: L.textDim, margin: '0 0 26px', maxWidth: 450, lineHeight: 1.6 }}>{SUB}</p>
      <CTAs />
    </div>
  </div></div>
);

/* ═══════════ 11 · Three-predators chips ═══════════ */
const HX11 = () => (
  <div><Nav /><div style={{ padding: '64px 36px 56px', textAlign: 'center', background: `radial-gradient(800px 400px at 50% 0%, rgba(245,181,68,0.09), transparent 70%)` }}>
    <h1 style={{ fontSize: 56, fontWeight: 800, lineHeight: 1.02, letterSpacing: '-0.03em', color: L.text, margin: '0 auto 18px', maxWidth: 820 }}>One domain in.<br/>The whole org <span style={{ color: L.accent }}>laid bare.</span></h1>
    <p style={{ fontSize: 16.5, color: L.textDim, margin: '0 auto 26px', maxWidth: 540, lineHeight: 1.6 }}>{SUB_SHORT}</p>
    <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 30 }}>
      <Chip accent>① Multi-Domain Discovery</Chip><Chip accent>② Apex Hunter</Chip><Chip accent>③ JS Forensics</Chip>
    </div>
    <CTAs center />
  </div></div>
);

Object.assign(window, { Nav, CTAs, CTAsB, BetaBadge, T, ScanLines, Find, HEAD, SUB, SUB_SHORT, grid, HX01, HX02, HX03, HX04, HX05, HX06, HX07, HX08, HX09, HX10, HX11 });
