// BookExcerpt — email-capture section for the free preview chapter.
// POSTs to /api/excerpt which appends a row to the book-excerpt Google Sheet.
function BookExcerpt() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || submitting) return;
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('/api/excerpt', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        throw new Error(data.error || 'Something went wrong. Please try again.');
      }
      setSubmitted(true);
    } catch (err) {
      setError(err.message || 'Network error. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <section id="excerpt" className="section-pad" style={{ background: '#D9F1F1' }}>
      <style>{`
        .eivi-excerpt-form { display: flex; flex-direction: column; gap: 12px; }
        .eivi-excerpt-input-row { display: flex; gap: 10px; flex-direction: column; }
        @media (min-width: 600px) {
          .eivi-excerpt-input-row { flex-direction: row; }
        }
      `}</style>
      <div style={{ maxWidth: 780, margin: '0 auto', textAlign: 'center' }}>
        <h2 className="t-h2" style={{ margin: 0, color: '#000' }}>Download your free summary</h2>
        <p className="t-body" style={{
          color: '#000', marginTop: 'clamp(20px, 3vw, 32px)', marginBottom: 0,
          maxWidth: 580, marginLeft: 'auto', marginRight: 'auto',
        }}>
          Leave your email and we'll send you the overview of <em>For Flux Sake</em> to your inbox.
        </p>
        {submitted ? (
          <div style={{
            marginTop: 'clamp(36px, 5vw, 56px)',
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '18px 28px', borderRadius: 999, background: '#fff', color: '#0B6F8D',
            fontWeight: 500, fontSize: 20,
          }}>
            <span style={{ width: 10, height: 10, borderRadius: 999, background: '#1BBBBB', flexShrink: 0 }} />
            We'll email you as soon as it's published, in May.
          </div>
        ) : (
          <form
            onSubmit={onSubmit}
            className="eivi-excerpt-form"
            style={{ marginTop: 'clamp(36px, 5vw, 56px)', maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            <div className="eivi-excerpt-input-row">
              <input
                type="email" required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
                disabled={submitting}
                style={{
                  flex: 1, padding: '18px 22px', borderRadius: 999,
                  border: '1px solid rgba(0,0,0,0.15)', background: '#fff',
                  color: '#000', fontSize: 20, fontFamily: 'inherit', outline: 'none', fontWeight: 500,
                  minWidth: 0,
                }} />
              <button
                type="submit"
                className="btn btn-primary btn-lg"
                disabled={submitting}
                style={{ cursor: submitting ? 'wait' : 'pointer', opacity: submitting ? 0.7 : 1 }}>
                {submitting ? 'Submitting…' : 'Download your copy'}
              </button>
            </div>
            {error && (
              <p style={{ color: '#B00020', fontSize: 20, fontWeight: 500, margin: '4px 0 0' }}>
                {error}
              </p>
            )}
          </form>
        )}
      </div>
    </section>
  );
}
window.BookExcerpt = BookExcerpt;