// Insights Page — editorial hub for long-form content and thought pieces

function EmailCapture() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | loading | success | error
  const [message, setMessage] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    setStatus('loading');
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json();
      if (data.success) {
        setStatus('success');
      } else {
        setStatus('error');
        setMessage(data.error || 'Something went wrong. Please try again.');
      }
    } catch {
      setStatus('error');
      setMessage('Something went wrong. Please try again.');
    }
  };

  if (status === 'success') {
    return (
      <div className="q-email-capture-success">
        You're on the list. We'll be in touch when something new is worth reading.
      </div>
    );
  }

  return (
    <form className="q-email-capture" onSubmit={submit}>
      <div className="q-email-capture-row">
        <input
          className="q-email-capture-input"
          type="email"
          placeholder="your@email.com"
          value={email}
          onChange={e => setEmail(e.target.value)}
          required
          disabled={status === 'loading'}
        />
        <button className="q-email-capture-btn" type="submit" disabled={status === 'loading'}>
          {status === 'loading' ? 'Sending…' : 'Notify me'}
        </button>
      </div>
      {status === 'error' && <div className="q-email-capture-error">{message}</div>}
    </form>
  );
}

const FEATURED = {
  category: 'Field Guide · Foundations',
  title: 'AI Field Guide for Foundation Leaders: CEO & Executive Director Edition',
  excerpt: 'A practical guide for foundation CEOs and executive directors navigating AI adoption across grantmaking, operations, strategy, and mission delivery. Honest about the limitations, specific about foundation workflows, and addressed to leaders making real decisions.',
  date: 'May 2026',
  readTime: '35 min read',
};

function InsightsPage({ setRoute }) {
  const goArticle = () => setRoute('article');
  return (
    <div data-screen-label="11 Insights">
      <SiteNav route="insights" setRoute={setRoute} theme="light" />

      <section className="q-insights-header">
        <div className="q-wrap">
          <div className="q-insights-header-inner">
            <div>
              <div className="q-eyebrow">Quarterdeck</div>
              <h1 className="q-insights-title">Insights</h1>
            </div>
            <p className="q-insights-descriptor">
              Long-form thinking on AI adoption, organizational strategy, and the technology that makes both real. Written for foundation leaders, higher education administrators, and nonprofit executives navigating these questions in real time.
            </p>
          </div>
        </div>
      </section>

      <section className="q-insights-featured">
        <div className="q-wrap">
          <div className="q-eyebrow" style={{ marginBottom: 20 }}>Featured</div>
          <div className="q-feat-card">
            <div className="q-feat-card-label">
              <span className="cat">{FEATURED.category}</span>
              <span className="sep">·</span>
              <span className="date">{FEATURED.date}</span>
              <span className="sep">·</span>
              <span className="rt">{FEATURED.readTime}</span>
            </div>
            <h2 className="q-feat-card-title">{FEATURED.title}</h2>
            <p className="q-feat-card-excerpt">{FEATURED.excerpt}</p>
            <a className="qbtn qbtn--outline-dark" style={{ marginTop: 8, width: 'fit-content' }} onClick={goArticle}>
              Read the piece <Arrow />
            </a>
          </div>
        </div>
      </section>

      <section className="q-insights-cta">
        <div className="q-wrap">
          <div className="q-insights-cta-inner">
            <div>
              <div className="q-eyebrow">Stay current</div>
              <h2>New pieces are added as the work <em>gives us something worth saying.</em></h2>
            </div>
            <div>
              <p>We write when we have something to add to the conversation — not on a publishing schedule. Leave your email and we'll send new pieces directly when they appear.</p>
              <EmailCapture />
            </div>
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { InsightsPage });