// Final CTA — second waitlist signup, framed as a soft invitation

const FinalCTA = ({ onSignup, signupState }) => {
  return (
    <section style={{ paddingTop: 48, paddingBottom: 48, position: 'relative' }}>
      {/* soft cloud halo behind */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background:
          'radial-gradient(60% 50% at 50% 40%, rgba(255,255,255,0.7), transparent 80%)',
      }}/>

      <div style={{ position: 'relative', textAlign: 'center', marginBottom: 32 }}>
        <Twinkle size={20} color="var(--gold)" style={{
          margin: '0 auto', display: 'block', marginBottom: 16,
          animation: 'twinkle 3s ease-in-out infinite',
        }}/>
        <div className="eyebrow">— Be the First to Know —</div>
        <h2 className="section-title" style={{ marginTop: 10 }}>
          ふっと心がほどける<br/>
          <em>あたらしい占い</em>を、<br/>
          一足先に。
        </h2>
        <p style={{
          fontSize: 13, color: 'var(--ink-soft)',
          letterSpacing: '0.08em', marginTop: 18, lineHeight: 2,
        }}>
          リリース準備が整い次第、<br/>
          最新情報をメールでお知らせします。
        </p>
      </div>

      <WaitlistForm onSignup={onSignup} state={signupState}/>

      <div style={{
        textAlign: 'center', marginTop: 28,
        fontSize: 10, color: 'var(--ink-mute)',
        letterSpacing: '0.2em', lineHeight: 2,
      }}>
        登録は無料です。配信はいつでも停止できます。<br/>
        登録により、プライバシーポリシーに同意したものとみなされます。
      </div>
    </section>
  );
};

window.FinalCTA = FinalCTA;