// Thesis Findings — Presentation page
// Standalone landing page with email gate.
// Visitor enters their email → added to Resend General audience → presentation link appears.

function PresentationPage() {
  const [email, setEmail]       = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading]   = React.useState(false);
  const [err, setErr]           = React.useState('');

  const PRESENTATION_URL = 'https://nrxauaha.com/presentation/';

  async function handleSubmit(e) {
    e.preventDefault();
    setErr('');
    if (!email.trim()) return;
    setLoading(true);
    try {
      const res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), source: 'presentation' }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Something went wrong');
      setSubmitted(true);
    } catch (e) {
      setErr(e.message || 'Something went wrong. Please try again.');
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="route-enter">

      {/* ── Hero ──────────────────────────────────────────────────────────── */}
      <section style={{ paddingTop: 80, paddingBottom: 80, background: 'var(--ink)' }}>
        <div className="container">
          <div style={{ maxWidth: 680 }}>

            <span className="mono" style={{
              fontSize: 10, letterSpacing: '0.14em',
              color: 'rgba(239,230,218,0.5)', display: 'block', marginBottom: 24,
            }}>
              THESIS FINDINGS · PRESENTATION
            </span>

            <h1 style={{
              fontFamily: 'var(--f-sans)', fontWeight: 600,
              fontSize: 'clamp(1.8rem, 4vw, 3rem)',
              color: 'var(--bg)', lineHeight: 1.2, margin: '0 0 28px',
            }}>
              Ethical AI and Indigenous Storytelling in Aotearoa
            </h1>

            {/* Event context */}
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 8,
              marginBottom: 32,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span className="mono" style={{ fontSize: 9, color: 'var(--accent)', letterSpacing: '0.12em', flexShrink: 0 }}>
                  PRESENTED AT
                </span>
                <span style={{ fontSize: 14, color: 'rgba(239,230,218,0.7)', lineHeight: 1.5 }}>
                  AcademyEX Converge Symposium · 2026
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span className="mono" style={{ fontSize: 9, color: 'var(--accent)', letterSpacing: '0.12em', flexShrink: 0, visibility: 'hidden' }}>
                  PRESENTED AT
                </span>
                <span style={{ fontSize: 14, color: 'rgba(239,230,218,0.7)', lineHeight: 1.5 }}>
                  AI Safety Australia and New Zealand Conference · 2026
                </span>
              </div>
            </div>

            <p style={{
              fontSize: 15, color: 'rgba(239,230,218,0.75)',
              lineHeight: 1.8, margin: '0 0 32px', maxWidth: '52ch',
            }}>
              This is a brief overview of the key findings from my Master's research —
              what emerged from ten expert interviews on AI governance, Māori data
              sovereignty, and what ethical technology actually requires in Aotearoa.
            </p>

            {/* Thesis link */}
            <Link to="thesis" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 13, color: 'var(--accent)',
              fontFamily: 'var(--f-mono)', letterSpacing: '0.08em',
              textDecoration: 'none',
            }}>
              WANT THE FULL THESIS? READ IT HERE →
            </Link>

          </div>
        </div>
      </section>

      {/* ── Email gate ────────────────────────────────────────────────────── */}
      <section style={{ padding: '80px 0', background: 'var(--bg-2)' }}>
        <div className="container">
          <div style={{ maxWidth: 560 }}>

            {!submitted ? (
              <>
                <h2 style={{
                  fontFamily: 'var(--f-sans)', fontWeight: 600,
                  fontSize: '1.2rem', color: 'var(--ink)',
                  margin: '0 0 12px',
                }}>
                  Enter your email to access the presentation.
                </h2>
                <p style={{
                  fontSize: 14, color: 'var(--muted)',
                  lineHeight: 1.7, margin: '0 0 32px',
                }}>
                  I'll also add you to my occasional newsletter — writing on ethical AI,
                  career transitions, and the slow work of change. No noise, no weekly cadence.
                </p>

                <form onSubmit={handleSubmit} style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                    placeholder="you@example.com"
                    required
                    style={{
                      flex: 1, minWidth: 220,
                      padding: '13px 16px',
                      border: '1px solid var(--hair)',
                      borderRadius: 6,
                      fontSize: 15,
                      fontFamily: 'var(--f-body)',
                      background: 'var(--bg)',
                      color: 'var(--ink)',
                      outline: 'none',
                    }}
                  />
                  <button
                    type="submit"
                    disabled={loading}
                    style={{
                      padding: '13px 24px',
                      background: loading ? 'var(--muted)' : 'var(--accent)',
                      color: '#fff',
                      border: 'none',
                      borderRadius: 6,
                      fontSize: 14,
                      fontWeight: 600,
                      fontFamily: 'var(--f-body)',
                      cursor: loading ? 'not-allowed' : 'pointer',
                      whiteSpace: 'nowrap',
                    }}
                  >
                    {loading ? 'One moment…' : 'Access presentation →'}
                  </button>
                </form>

                {err && (
                  <p style={{ marginTop: 12, fontSize: 13, color: 'var(--rust)' }}>{err}</p>
                )}
              </>
            ) : (
              /* ── Success: show the presentation link ── */
              <div>
                <span className="mono" style={{
                  fontSize: 10, color: 'var(--accent)',
                  letterSpacing: '0.12em', display: 'block', marginBottom: 16,
                }}>
                  YOU'RE IN
                </span>
                <h2 style={{
                  fontFamily: 'var(--f-sans)', fontWeight: 600,
                  fontSize: '1.2rem', color: 'var(--ink)',
                  margin: '0 0 12px',
                }}>
                  Ngā mihi — here's the presentation.
                </h2>
                <p style={{
                  fontSize: 14, color: 'var(--muted)',
                  lineHeight: 1.7, margin: '0 0 28px',
                }}>
                  I've also sent a confirmation to your inbox. Enjoy, and feel free to share.
                </p>
                <a
                  href={PRESENTATION_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '14px 24px',
                    background: 'var(--ink)',
                    color: 'var(--bg)',
                    borderRadius: 6,
                    fontSize: 14, fontWeight: 600,
                    fontFamily: 'var(--f-body)',
                    textDecoration: 'none',
                  }}
                >
                  Open presentation →
                </a>
              </div>
            )}

          </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { PresentationPage });