const { useState: useState_fp } = React;

const FEED_ROWS = [
  ['00:01:42', 'ENG-9281', 'CRIT', 'graphql-introspection → priv-esc', '[redacted-fintech-eu]', 'exploited'],
  ['00:04:18', 'ENG-9281', 'HIGH', 'jwt-rsa-replay · 14h drift', '[redacted-fintech-eu]', 'validated'],
  ['00:07:33', 'ENG-9282', 'MED', 's3-bucket · public · 412mb', '[redacted-saas-us]', 'remediated'],
  ['00:11:09', 'ENG-9283', 'CRIT', 'k8s-rbac · cluster-admin via crd', '[redacted-health-us]', 'isolated'],
  ['00:14:51', 'ENG-9281', 'HIGH', 'idor · /accounts/{id}/wallet', '[redacted-fintech-eu]', 'exploited'],
  ['00:18:22', 'ENG-9284', 'MED', 'ssrf · /image-proxy?u=', '[redacted-media-uk]', 'queued'],
  ['00:21:40', 'ENG-9285', 'HIGH', 'secret in github-actions · prod-deploy', '[redacted-saas-us]', 'remediated'],
  ['00:24:11', 'ENG-9286', 'CRIT', 'ios · cert-pin bypass · custom keychain', '[redacted-bank-au]', 'validated'],
  ['00:28:55', 'ENG-9281', 'HIGH', 'chain · idor → priv-esc → cred-exfil', '[redacted-fintech-eu]', 'exploited'],
  ['00:32:07', 'ENG-9287', 'LOW', 'cors · misconfigured wildcard', '[redacted-media-uk]', 'ignored'],
  ['00:36:19', 'ENG-9281', 'CRIT', 'rce candidate · unauth · CVSS 9.8', '[redacted-fintech-eu]', 'exploited'],
  ['00:39:44', 'ENG-9288', 'MED', 'rate-limit bypass · auth/v2/login', '[redacted-saas-us]', 'validated'],
];

function ThreatFeed() {
  return (
    <section id="feed" className="section" style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="page">
        <SectionHeader number="04" eyebrow="Threat Feed" title={<>An hour of operations,<br />declassified.</>} sub="A sanitized excerpt of the last hour across the Cyrion estate. Customer identifiers redacted. Timestamps preserved." />
        <div className="feed-grid" style={{ marginTop: 56 }}><FeedTable /><FeedGlobe /></div>
      </div>
    </section>
  );
}

function FeedTable() {
  return (
    <div className="card" style={{ overflow: 'hidden', position: 'relative' }}>
      <span className="ticks"><i /><b /></span>
      <div className="feed-table-row" style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', background: 'var(--bg-lift)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-dim)', textTransform: 'uppercase' }}>
        <span>TS</span><span className="feed-col-eng">ENG</span><span>SEV</span><span>Finding</span><span className="feed-col-customer">Customer</span><span>Action</span>
      </div>
      {FEED_ROWS.map((row, i) => <FeedRow key={i} row={row} index={i} />)}
      <div style={{ padding: '12px 18px', borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 11 }}><span className="dim">showing 12 / 2,847 last-hour events</span><span style={{ color: 'var(--accent)' }}>● streaming</span></div>
    </div>
  );
}

function FeedRow({ row, index }) {
  const [ts, eng, sev, finding, customer, action] = row;
  const sevColor = sev === 'CRIT' ? 'var(--red)' : sev === 'HIGH' ? 'var(--amber)' : sev === 'MED' ? 'var(--accent)' : 'var(--ink-dim)';
  const actionColor = action === 'exploited' ? 'var(--red)' : (action === 'remediated' || action === 'validated') ? 'var(--green)' : action === 'isolated' ? 'var(--amber)' : 'var(--ink-mute)';
  return (
    <div className="feed-table-row" style={{ padding: '12px 18px', borderBottom: '1px solid var(--line)', fontSize: 12, animation: `rise 700ms ${index * 30}ms cubic-bezier(0.2,0.7,0.2,1) both` }}>
      <span className="tnum dim">{ts}</span><span className="tnum dim feed-col-eng">{eng}</span><span style={{ color: sevColor, letterSpacing: '0.08em' }}>● {sev}</span>
      <span className="ink" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{finding}</span>
      <span className="dim feed-col-customer">{customer}</span><span style={{ color: actionColor }}>{action}</span>
    </div>
  );
}

function FeedGlobe() {
  return (
    <div className="card" style={{ padding: 20, position: 'relative', overflow: 'hidden', minHeight: 360 }}>
      <span className="ticks"><i /><b /></span>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}><span className="bracket">GLOBAL · LAST 60M</span><span className="caption" style={{ color: 'var(--accent)' }}>● active</span></div>
      <div className="h3" style={{ marginBottom: 8 }}>2,847 events</div>
      <div className="dim" style={{ fontSize: 12, marginBottom: 14 }}>across 187 customer estates · 14 regions</div>
      <svg viewBox="0 0 320 280" style={{ width: '100%', height: 'auto' }}>
        {[0.2, 0.4, 0.5, 0.6, 0.8].map((p, i) => <ellipse key={i} cx="160" cy="160" rx={140 * p} ry="80" fill="none" stroke="var(--line)" strokeWidth="1" />)}
        {[0.2, 0.5, 0.8].map((p, i) => <ellipse key={i} cx="160" cy="160" rx="140" ry={80 * p} fill="none" stroke="var(--line)" strokeWidth="1" />)}
        <circle cx="160" cy="160" r="140" fill="none" stroke="var(--line-2)" strokeWidth="1" />
        {[['M40,160 Q160,40 280,160', '0s'], ['M70,200 Q160,80 250,210', '0.4s'], ['M90,120 Q200,40 260,120', '0.8s'], ['M50,180 Q120,260 270,180', '1.2s'], ['M110,90 Q220,180 280,100', '1.6s']].map(([d, delay], i) => (
          <path key={i} d={d} fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.6"><animate attributeName="stroke-dasharray" values="0,400;120,400;400,0" dur="3s" begin={delay} repeatCount="indefinite" /><animate attributeName="opacity" values="0;0.8;0" dur="3s" begin={delay} repeatCount="indefinite" /></path>
        ))}
        {[[40, 160], [280, 160], [70, 200], [250, 210], [90, 120], [260, 120], [110, 90], [220, 180], [160, 60], [160, 250]].map(([x, y], i) => (
          <g key={i}><circle cx={x} cy={y} r="2.5" fill="var(--accent)" /><circle cx={x} cy={y} r="6" fill="none" stroke="var(--accent)" opacity="0.4"><animate attributeName="r" values="2;10;2" dur="2.2s" begin={`${(i % 4) * 0.4}s`} repeatCount="indefinite" /><animate attributeName="opacity" values="0.6;0;0.6" dur="2.2s" begin={`${(i % 4) * 0.4}s`} repeatCount="indefinite" /></circle></g>
        ))}
      </svg>
      <div style={{ position: 'absolute', bottom: 12, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-faint)' }}><span>EU-WEST-1 · 412</span><span>US-EAST-1 · 1,038</span><span>AP-SOUTH-1 · 207</span></div>
    </div>
  );
}

const TIERS = [
  { name: 'Free', price: 'Free', sub: '100 credits · get started with basic security scanning.', features: ['100 credits included', '1 concurrent scan', 'Basic web scanning', 'Standard support'], cta: 'Upgrade', tone: 'ghost' },
  { name: 'Hacker', price: '$999', period: '/ month', sub: 'For individual security researchers and bug bounty hunters.', features: ['5 concurrent scans', 'Web application testing', 'API security scanning', 'Basic exploit generation', 'Standard reporting', 'Community support', '1 user seat'], cta: 'Start Hacking', tone: 'default' },
  { name: 'Red Team', price: '$1,999', period: '/ month', sub: 'For professional penetration testing teams and security consultants.', features: ['25 concurrent scans', 'Web, API & Mobile testing', 'Cloud security (AWS, Azure, GCP)', 'Advanced exploit chaining', 'Android & iOS analysis', 'CI/CD integration', 'Priority support', '10 user seats', 'Custom reporting templates'], cta: 'Deploy Red Team', tone: 'primary', popular: true },
  { name: 'Enterprise', price: 'Custom', sub: 'For organizations requiring comprehensive security coverage.', features: ['Unlimited scans', 'Full platform coverage', 'On-premise deployment option', 'Custom AI model training', 'Dedicated success manager', 'SLA guarantees', 'SOC2 & ISO 27001 compliance', 'SSO & SAML integration', 'Unlimited user seats', 'White-label reporting'], cta: 'Contact Sales', tone: 'default' },
];

function Pricing() {
  return (
    <section id="pricing" className="section">
      <div className="page">
        <SectionHeader number="05" eyebrow="Engagement" title={<>Choose your<br />arsenal.</>} sub="Scale your offensive security capabilities with plans designed for hackers, red teams, and enterprises. 14-day free trial · no credit card required." />
        <div className="pricing-grid" style={{ marginTop: 56 }}>{TIERS.map((t, i) => <Reveal key={t.name} delay={i * 70}><PricingTier tier={t} /></Reveal>)}</div>
        <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 12, color: 'var(--ink-dim)' }}>
          <span>All plans include: 24/7 monitoring · automatic updates · encrypted data storage · cancel anytime.</span>
          <a href="https://docs.cyrion.ai/pricing" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent)' }}>Compare all features ↗</a>
        </div>
      </div>
    </section>
  );
}

function PricingTier({ tier }) {
  const isPrimary = tier.tone === 'primary';
  return (
    <div style={{ padding: '28px 24px 24px', height: '100%', borderLeft: '1px solid var(--line)', background: isPrimary ? 'linear-gradient(180deg, rgba(0,224,198,0.04), transparent 70%), var(--panel)' : 'transparent', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      {tier.popular && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'var(--accent)', boxShadow: '0 0 20px var(--accent-shadow)' }} />}
      <div className="row" style={{ justifyContent: 'space-between' }}><span className="caption" style={{ color: isPrimary ? 'var(--accent)' : 'var(--ink-mute)' }}>{tier.name}</span>{tier.popular && <span className="caption" style={{ color: 'var(--accent)' }}>★ RECOMMENDED</span>}</div>
      <div style={{ marginTop: 24, marginBottom: 8 }}><span className="tnum" style={{ fontSize: 44, letterSpacing: '-0.04em', lineHeight: 1 }}>{tier.price}</span>{tier.period && <span className="dim" style={{ fontSize: 13, marginLeft: 6 }}>{tier.period}</span>}</div>
      <p className="dim" style={{ fontSize: 12, lineHeight: 1.5, minHeight: 48, margin: 0 }}>{tier.sub}</p>
      <hr className="hr" style={{ margin: '20px 0' }} />
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {tier.features.map(f => <li key={f} style={{ display: 'flex', gap: 10, fontSize: 12, color: 'var(--ink-mute)', alignItems: 'center' }}><span style={{ color: isPrimary ? 'var(--accent)' : 'var(--ink-dim)', flexShrink: 0 }}><IconCheck size={11} color={isPrimary ? 'var(--accent)' : 'var(--ink-dim)'} /></span>{f}</li>)}
      </ul>
      <a href={tier.cta === 'Contact Sales' ? '/contact' : 'https://app.cyrion.ai/signup'} className={isPrimary ? 'btn btn-primary' : 'btn'} style={{ marginTop: 24, width: '100%', justifyContent: 'center' }}>{tier.cta}</a>
    </div>
  );
}

const FAQS = [
  { q: 'Is Cyrion safe to run against production?', a: 'Yes. Every exploit candidate is rerun against a sandbox replica of your environment before validation. Production-touching probes are rate-limited and tagged. You can also restrict Cyrion to non-prod surfaces with a single policy flag.' },
  { q: 'How is this different from a vulnerability scanner?', a: 'Scanners check signatures. Cyrion reasons about your environment — chaining individually-low-severity findings into demonstrable, high-severity attack paths, then validating each one. The output is a reproducible exploit, not a CVE list.' },
  { q: 'Can it replace our human red team?', a: "It replaces the toil — the recon, the boilerplate exploitation, the report-writing. Your humans do the work agents can't: business-logic abuse, social engineering, novel exploitation. Most customers see their team shift to higher-leverage work within a quarter." },
  { q: 'What about false positives?', a: "Cyrion's validation loop runs every candidate finding through a second, independent agent in a sandboxed replica. A finding only ships if it reproduces. Our public false-positive rate is 0% over the last 90 days, audited monthly." },
  { q: 'Where does data live?', a: 'By default, in your nearest Cyrion region (US-East, EU-West, AP-South). Customers on Cyrion / Black operate in their own air-gapped deployment — Cyrion ships an OCI image, you run it.' },
  { q: 'How quickly can we start?', a: 'Sentinel: free, today. Operator: one-week onboarding with your AppSec lead. Red Cell: two weeks, including workbench customization. Cyrion / Black: 30 days, including security review.' },
];

function FAQ() {
  return (
    <section id="faq" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="page">
        <SectionHeader number="07" eyebrow="FAQ" title={<>Anticipated<br />objections.</>} sub="Most of these come up in the first meeting. Resolving them here saves us both time." />
        <div style={{ marginTop: 56, borderTop: '1px solid var(--line)' }}>{FAQS.map((f, i) => <FAQItem key={i} faq={f} index={i} />)}</div>
      </div>
    </section>
  );
}

function FAQItem({ faq, index }) {
  const [open, setOpen] = useState_fp(index === 0);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', display: 'grid', gridTemplateColumns: '60px 1fr 40px', padding: '26px 0', textAlign: 'left', background: 'transparent', border: 0, color: 'var(--ink)', alignItems: 'center', gap: 16 }}>
        <span className="tnum dim" style={{ fontSize: 12 }}>{String(index + 1).padStart(2, '0')}</span>
        <span className="h3" style={{ fontSize: 20 }}>{faq.q}</span>
        <span style={{ fontSize: 22, color: open ? 'var(--accent)' : 'var(--ink-mute)', transition: 'transform 200ms', transform: open ? 'rotate(45deg)' : 'none', textAlign: 'right' }}>+</span>
      </button>
      <div style={{ display: 'grid', gridTemplateRows: open ? '1fr' : '0fr', transition: 'grid-template-rows 240ms ease' }}>
        <div style={{ overflow: 'hidden' }}><div style={{ paddingBottom: 28, maxWidth: 760 }}><p className="body" style={{ margin: 0 }}>{faq.a}</p></div></div>
      </div>
    </div>
  );
}

Object.assign(window, { ThreatFeed, Pricing, FAQ });
