const { useState: useState_t } = React;

const REVIEWS = [
  { text: 'Cyrion chained three low-severity vulns into a full RCE during our AWS assessment. It thinks like an actual attacker — not just a scanner.', author: 'Viktor Reznov', role: 'Red Team Lead · Fortune 500', tag: 'VR' },
  { text: "I've been doing bug bounty for 6 years. Cyrion found a critical SSRF in 10 minutes that I missed after 2 days of manual testing.", author: '0xGh0st', role: 'Top 50 · HackerOne', tag: '0G' },
  { text: "The mobile module decompiled our Android app and found hardcoded API keys we didn't know existed. Certificate pinning bypass took 30 seconds.", author: 'Sarah Chen', role: 'Mobile Security Researcher', tag: 'SC' },
  { text: 'We replaced three commercial scanners with Cyrion. Zero false positives means our dev team actually fixes what we report.', author: 'Marcus Webb', role: 'CISO · FinTech', tag: 'MW' },
  { text: 'The cloud module found 47 S3 misconfigs and an IAM privilege-escalation path in our GCP environment. Saved us from a potential breach.', author: 'Jennifer Park', role: 'Cloud Security Engineer', tag: 'JP' },
  { text: 'Cyrion is the only tool I trust for scoping new targets. The recon phase alone is worth the price — subdomain takeovers on autopilot.', author: 'DarkTrace_', role: 'Independent Pentester', tag: 'DT' },
];

function Testimonials() {
  return (
    <section id="testimonials" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="page">
        <SectionHeader number="06" eyebrow="Field Reports" title={<>Verified by the<br />people who broke in.</>} sub="From bug bounty hunters to Fortune 500 red teams — operators who ran Cyrion against real targets." />
        <div className="grid-3" style={{ marginTop: 56, gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
          {REVIEWS.map((r, i) => (
            <Reveal key={r.author} delay={(i % 3) * 70} style={{ height: '100%' }}>
              <div className="card-hover" style={{ height: '100%', background: 'var(--bg)', padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
                <div className="row" style={{ gap: 12 }}>
                  <span style={{ width: 36, height: 36, flex: '0 0 auto', border: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: 'var(--accent)' }}>{r.tag}</span>
                  <div><div style={{ fontSize: 13, color: 'var(--ink)' }}>{r.author}</div><div className="caption">{r.role}</div></div>
                </div>
                <p className="body" style={{ margin: 0, fontSize: 13.5, lineHeight: 1.6 }}>&ldquo;{r.text}&rdquo;</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SecurityBadges() {
  const badges = ['SOC 2 Type II · Certified', 'ISO 27001 · Compliant', 'GDPR · Ready', 'CREST · Approved'];
  return (
    <section className="section" style={{ paddingTop: 48, paddingBottom: 48, borderTop: '1px solid var(--line)' }}>
      <div className="page row" style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
        <div><div className="bracket">COMPLIANCE</div><div className="h3" style={{ marginTop: 10 }}>Enterprise-grade security &amp; compliance.</div></div>
        <div className="row" style={{ gap: 12, flexWrap: 'wrap' }}>{badges.map((b) => <span key={b} className="pill"><span className="swatch" />{b}</span>)}</div>
      </div>
    </section>
  );
}

function Waitlist() {
  const [email, setEmail] = useState_t('');
  const [status, setStatus] = useState_t('idle');
  const [msg, setMsg] = useState_t('');

  const handleSubscribe = async (e) => {
    e.preventDefault();
    if (!email) { setStatus('error'); setMsg('Please enter your email'); return; }
    setStatus('loading'); setMsg('');
    try {
      const res = await fetch('/api/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email }) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setStatus('error'); setMsg(data.error || 'Something went wrong'); return; }
      setStatus('success'); setMsg("You're on the list."); setEmail('');
    } catch (err) { setStatus('error'); setMsg('Network error. Please try again.'); }
  };

  return (
    <section id="waitlist" className="section" style={{ borderTop: '1px solid var(--line)', position: 'relative', textAlign: 'center', overflow: 'hidden' }}>
      <div className="grid-bg-fine" style={{ position: 'absolute', inset: 0, opacity: 0.5 }} />
      <div className="spotlight" />
      <div className="page" style={{ position: 'relative', zIndex: 2, maxWidth: 720, margin: '0 auto' }}>
        <div className="bracket" style={{ justifyContent: 'center' }}>FINAL CALL</div>
        <h2 className="h1" style={{ marginTop: 18 }}>Ready to secure<br />the future?</h2>
        <p className="body-lg" style={{ margin: '20px auto 0', maxWidth: 480 }}>Get early access to the most advanced offensive-AI platform. No credit card required.</p>
        <form onSubmit={handleSubscribe} style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center', marginTop: 32 }}>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="name@company.com" disabled={status === 'loading'} className="field-input" style={{ height: 44, minWidth: 280, flex: '0 1 320px', border: '1px solid var(--line-2)' }} />
          <button type="submit" className="btn btn-primary" disabled={status === 'loading'}>{status === 'loading' ? 'Joining…' : status === 'success' ? '✓ Joined' : <>Get early access<span style={{ marginLeft: 2 }}>→</span></>}</button>
        </form>
        {msg && <p style={{ marginTop: 14, fontSize: 12, color: status === 'error' ? 'var(--red)' : 'var(--green)' }}>{msg}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials, SecurityBadges, Waitlist });