const { useState: useState_bl } = React;
const { Link: Link_bl } = ReactRouterDOM;

function Blog() {
  useSEO({
    title: 'Blog | Cyrion AI Research & Engineering Notes',
    description: 'Research and engineering notes from Cyrion AI on agentic penetration testing, LLM security (OWASP Top 10), and continuous attack surface management.',
    path: '/blog',
  });
  const [email, setEmail] = useState_bl('');
  const [status, setStatus] = useState_bl('idle');
  const [msg, setMsg] = useState_bl('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    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 subscribed."); setEmail('');
    } catch (err) { setStatus('error'); setMsg('Network error — please try again.'); }
  };

  return (
    <div data-screen-label="blog">
      <section className="page-hero">
        <div className="page">
          <div className="breadcrumb" style={{ marginBottom: 20 }}><Link_bl to="/">Home</Link_bl><span>/</span><span className="ink">Blog</span></div>
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot" />Resources / Blog</div>
          <h1 className="h1" style={{ maxWidth: 820 }}>Research & engineering notes.</h1>
          <p className="body-lg" style={{ maxWidth: 640, marginTop: 22 }}>How we think about autonomous offensive security, LLM risk, and running a red team at machine speed.</p>
        </div>
      </section>

      <section className="section">
        <div className="page">
          <div className="auto-fit-300">
            {window.ARTICLES.map((a) => (
              <Link_bl key={a.slug} to={`/blog/${a.slug}`} className="card card-hover card-glow blog-card" style={{ padding: 26, textDecoration: 'none' }}>
                <div className="row" style={{ gap: 10, marginBottom: 16 }}><span className="tag-chip">{a.tag}</span><span className="caption tnum">{a.date} · {a.readTime}</span></div>
                <div className="h3" style={{ fontSize: 19 }}>{a.title}</div>
                <p className="body" style={{ marginTop: 12, flex: 1 }}>{a.excerpt}</p>
                <div className="row" style={{ marginTop: 20, color: 'var(--accent)', fontSize: 13 }}>Read article →</div>
              </Link_bl>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-deep)' }}>
        <div className="page" style={{ maxWidth: 520, margin: '0 auto', textAlign: 'center' }}>
          <div className="h3">Get new research in your inbox</div>
          <p className="body" style={{ marginTop: 10 }}>No spam — just what we're finding, roughly monthly.</p>
          <form onSubmit={handleSubmit} className="row" style={{ gap: 10, marginTop: 22 }}>
            <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@company.com" className="field-input" style={{ flex: 1, height: 44 }} />
            <button className="btn btn-primary" type="submit" disabled={status === 'loading'}>{status === 'loading' ? 'Sending…' : 'Subscribe'}</button>
          </form>
          {msg && <div className="caption" style={{ marginTop: 12, minHeight: 16, color: status === 'error' ? 'var(--red)' : 'var(--green)' }}>{msg}</div>}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Blog });