// OneQuestion.jsx — Section 4. The newsletter, framed as an invitation to a
// question, not a content subscription. Light, spacious, centered.
function OneQuestion() {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [focused, setFocused] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (email.trim()) setSent(true); };

  return (
    <section className="section" style={{ background:'var(--sanctuary)' }}>
      <div className="reveal" style={{ maxWidth:560, margin:'0 auto', textAlign:'center' }}>
        <div style={{ fontFamily:'var(--sans-body)', fontWeight:400, fontSize:12, letterSpacing:'0.26em', textTransform:'uppercase', fontVariant:'all-small-caps', color:'var(--fg-faint)' }}>
          One Question
        </div>
        <h2 style={{ fontFamily:'var(--serif-display)', fontWeight:300, fontSize:'clamp(30px,4.2vw,48px)', lineHeight:1.12, color:'var(--tides-dark)', margin:'18px 0 0' }}>
          One question a week worth sitting with.
        </h2>
        <p style={{ fontFamily:'var(--sans-body)', fontWeight:300, fontSize:17, lineHeight:1.68, color:'var(--fg-muted)', margin:'24px auto 0', maxWidth:480 }}>
          Not content to consume. A real question drawn from real conversations — about navigating the unknown, building something meaningful, and finding your way back to yourself.
        </p>
        <p style={{ fontFamily:'var(--sans-body)', fontWeight:300, fontSize:17, lineHeight:1.68, color:'var(--fg-muted)', margin:'16px auto 0', maxWidth:480 }}>
          No answers handed to you. Just the question, and the invitation to go deeper.
        </p>

        {!sent ? (
          <form onSubmit={submit} style={{ margin:'clamp(36px,5vw,48px) auto 0', maxWidth:400 }}>
            <div style={{
              display:'flex', alignItems:'center', gap:12,
              borderBottom:`1px solid ${focused ? 'var(--fiorella-sand)' : 'var(--stone-line)'}`,
              paddingBottom:12, transition:'border-color 400ms var(--ease-settle)',
            }}>
              <input type="email" required placeholder="Your email" value={email}
                onChange={(e)=>setEmail(e.target.value)}
                onFocus={()=>setFocused(true)} onBlur={()=>setFocused(false)}
                style={{ flex:1, minWidth:0, border:'none', background:'transparent', outline:'none',
                  fontFamily:'var(--sans-body)', fontWeight:300, fontSize:17, color:'var(--tides-dark)' }} />
              <button type="submit" style={{
                fontFamily:'var(--sans-body)', fontWeight:400, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
                color:'var(--on-dark)', background:'var(--sea-glass)', border:'none', borderRadius:999,
                padding:'11px 26px', cursor:'pointer', flex:'0 0 auto', transition:'background 400ms ease',
              }}
                onMouseEnter={(e)=>e.currentTarget.style.background='var(--sea-glass-deep)'}
                onMouseLeave={(e)=>e.currentTarget.style.background='var(--sea-glass)'}>
                Join
              </button>
            </div>
            <p style={{ fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:15, color:'var(--fg-faint)', margin:'16px 0 0' }}>
              No noise. Unsubscribe anytime.
            </p>
          </form>
        ) : (
          <div style={{ margin:'clamp(36px,5vw,48px) auto 0', fontFamily:'var(--serif-display)', fontStyle:'italic', fontWeight:400, fontSize:'clamp(22px,2.6vw,27px)', color:'var(--tides-dark)' }}>
            Welcome. The first question arrives soon.
          </div>
        )}
      </div>
    </section>
  );
}
window.OneQuestion = OneQuestion;