const { useMemo: useMemo_h } = React;

function SectionHeader({ number, eyebrow, title, sub }) {
  return (
    <Reveal>
      <div className="grid-2" style={{ alignItems: 'flex-end' }}>
        <div>
          <div className="bracket">{number} · {eyebrow}</div>
          <h2 className="h1" style={{ marginTop: 18, marginBottom: 0 }}>{title}</h2>
        </div>
        <p className="body-lg" style={{ margin: 0, maxWidth: 520 }}>{sub}</p>
      </div>
    </Reveal>
  );
}

function Hero() {
  return (
    <section id="top" className="section" style={{ paddingTop: 100, paddingBottom: 32, position: 'relative' }}>
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: 0.7, maskImage: 'linear-gradient(to bottom, black 30%, transparent)' }} />
      <div className="spotlight" />
      <div className="page" style={{ position: 'relative', zIndex: 2 }}>
        <div className="row rise" style={{ justifyContent: 'space-between', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
          <span className="bracket">CYRION/AI · INTELLIGENCE-GRADE OFFENSIVE SECURITY · v2.6</span>
          <span className="bracket" style={{ color: 'var(--accent)' }}><span style={{ width: 6, height: 6, background: 'var(--accent)', display: 'inline-block', boxShadow: '0 0 10px var(--accent-shadow)' }} />STATUS · 8,412 AGENTS ACTIVE</span>
        </div>

        <h1 className="display rise" style={{ margin: 0, animationDelay: '60ms' }}>
          <span className="dim" style={{ fontSize: '0.34em', letterSpacing: '0.18em', display: 'block', marginBottom: 18, textTransform: 'uppercase' }}>01 · Mandate</span>
          <span>Penetration testing,</span><br />
          <span>without the </span>
          <span style={{ color: 'var(--accent)' }}><Glitch>pentesters</Glitch></span>
          <span className="caret" style={{ marginLeft: 6 }} />
        </h1>

        <div className="rise" style={{ marginTop: 32, maxWidth: 720, animationDelay: '180ms' }}>
          <p className="body-lg" style={{ margin: 0 }}>Cyrion deploys a coordinated swarm of offensive-AI agents against your stack — reconnaissance, exploitation, and remediation, autonomously. The output is an auditor-ready report. The cost is hours, not weeks.</p>
          <p className="body" style={{ marginTop: 18, color: 'var(--ink-dim)', fontSize: 13 }}>›&nbsp; currently running <TypeLines lines={['reconnaissance on api.acme.corp', 'exploit chaining · cluster-eu-1', 'post-engagement triage', 'credential-leak hunt · github org']} /></p>
        </div>

        <div className="rise" style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap', animationDelay: '260ms' }}>
          <a className="btn btn-primary" href="#access">Request engagement<span style={{ marginLeft: 2 }}>→</span></a>
          <a className="btn" href="#demo"><span style={{ color: 'var(--accent)' }}>▶</span>Watch 90-sec engagement</a>
          <span className="pill" style={{ marginLeft: 6, height: 44, padding: '0 16px' }}><span className="swatch" />SOC 2 · ISO 27001 · GDPR</span>
        </div>

        <div className="rise hero-split" style={{ marginTop: 56, animationDelay: '360ms' }}>
          <Terminal />
          <HeroStats />
        </div>
      </div>

      <div style={{ marginTop: 44 }}>
        <div className="page" style={{ paddingBottom: 12 }}><span className="bracket">SIGNAL FEED · LAST 03:00 · PUBLIC-SAFE EXCERPT</span></div>
        <Ticker />
      </div>
    </section>
  );
}

function HeroStats() {
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column', padding: 0 }}>
      <span className="ticks"><i /><b /></span>
      <div style={{ padding: '20px 22px', borderBottom: '1px solid var(--line)' }}>
        <div className="caption" style={{ color: 'var(--accent)' }}>● Operational</div>
        <div className="h3" style={{ marginTop: 6 }}>Engagements, last 24h</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid var(--line)' }}>
        <Stat label="Targets scanned" value={<Counter to={14328} />} delta="+18.4%" />
        <Stat label="Exploits validated" value={<Counter to={2847} />} delta="+22.1%" border="left" />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderBottom: '1px solid var(--line)' }}>
        <Stat label="False-positives" value={<Counter to={0} />} note="continuous validation" />
        <Stat label="Mean engagement" value={<Counter to={6.2} suffix=" min" />} note="recon → report" border="left" />
      </div>
      <div style={{ padding: '16px 22px 8px' }}>
        <div className="caption">Threat intensity · rolling 90s</div>
        <Sparkline />
      </div>
      <div style={{ padding: '14px 22px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 }}>
        <span className="dim">node · cyrion-us-east-1</span>
        <span style={{ color: 'var(--accent)' }}>● synchronized</span>
      </div>
    </div>
  );
}

function Stat({ label, value, delta, note, border }) {
  return (
    <div style={{ padding: '20px 22px', borderLeft: border === 'left' ? '1px solid var(--line)' : undefined }}>
      <div className="caption">{label}</div>
      <div className="tnum" style={{ fontSize: 30, letterSpacing: '-0.02em', marginTop: 4 }}>{value}</div>
      {delta && <div style={{ fontSize: 11, color: 'var(--accent)', marginTop: 2 }}>▲ {delta}</div>}
      {note && <div className="dim" style={{ fontSize: 11, marginTop: 2 }}>{note}</div>}
    </div>
  );
}

function Sparkline() {
  const pts = useMemo_h(() => {
    const arr = []; let v = 0.5;
    for (let i = 0; i < 60; i++) { v += (Math.sin(i * 0.42) + Math.sin(i * 0.13)) * 0.06; v = Math.max(0.1, Math.min(0.95, v)); arr.push(v); }
    return arr;
  }, []);
  const w = 360, h = 70;
  const step = w / (pts.length - 1);
  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${i * step} ${h - p * h}`).join(' ');
  const area = `${d} L${w} ${h} L0 ${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 70, marginTop: 6, display: 'block' }}>
      <defs><linearGradient id="sparkfill" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25" /><stop offset="100%" stopColor="var(--accent)" stopOpacity="0" /></linearGradient></defs>
      <path d={area} fill="url(#sparkfill)" />
      <path d={d} fill="none" stroke="var(--accent)" strokeWidth="1.2" />
      <circle cx={w} cy={h - pts[pts.length - 1] * h} r="3" fill="var(--accent)"><animate attributeName="opacity" values="1;0.3;1" dur="1.6s" repeatCount="indefinite" /></circle>
    </svg>
  );
}

function TrustedBy() {
  const names = ['ARCANUM', 'BLACKBYTE', 'HEX MARSHAL', 'MERIDIAN-9', 'NIGHTOWL', 'PRAXIS', 'QUANTLABS', 'SENTINEL ROW', 'TYCHO', 'VEKTOR.IO', 'WAVEGUARD'];
  return (
    <section className="section" style={{ paddingTop: 56, paddingBottom: 56, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="page row" style={{ alignItems: 'flex-start', gap: 56, flexWrap: 'wrap' }}>
        <div style={{ minWidth: 220, flex: '0 0 auto' }}>
          <span className="bracket">CLEARED · MUTUAL NDA</span>
          <div className="h3" style={{ marginTop: 10 }}>Trusted by teams that don't&nbsp;publish testimonials.</div>
        </div>
        <div className="marquee" style={{ flex: 1, minWidth: 0 }}>
          <div className="marquee-track" style={{ alignItems: 'center' }}>
            {[...names, ...names].map((n, i) => (
              <div key={i} style={{ fontSize: 14, letterSpacing: '0.24em', color: 'var(--ink-dim)', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: 16 }}>
                <span style={{ width: 18, height: 18, border: '1px solid var(--line-2)', display: 'inline-block' }} />{n}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHeader, Hero, TrustedBy });