// 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>
        </h2>
        <p style={{
          fontSize: 13, color: 'var(--ink-soft)',
          letterSpacing: '0.08em', marginTop: 18, lineHeight: 2,
        }}>
          メールアドレスだけで登録できます。<br/>
          リリース時期が決まり次第、無料占いの開始情報をお知らせします。
        </p>
      </div>


      <div className="card" style={{
        padding: '20px 20px', marginBottom: 24,
        background: 'linear-gradient(160deg, rgba(255,255,255,0.86), var(--card-alt))',
      }}>
        <div style={{
          fontFamily: 'var(--title-font)', fontSize: 13,
          color: 'var(--ink)', letterSpacing: '0.14em',
          textAlign: 'center', marginBottom: 14,
        }}>先行登録で受け取れること</div>
        {[
          'メールアドレスだけで無料登録できる',
          'リリース時期が決まり次第、最初にお知らせ',
          '無料占いの開始情報を受け取れる',
          '配信はいつでも停止できます',
        ].map((text, i) => (
          <div key={i} style={{
            display: 'flex', gap: 10, alignItems: 'flex-start',
            padding: '8px 0',
            borderTop: i === 0 ? 'none' : '1px solid rgba(203, 168, 104, 0.18)',
          }}>
            <span style={{ color: 'var(--gold)', lineHeight: 1.8 }}>✦</span>
            <span style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.85, letterSpacing: '0.04em' }}>{text}</span>
          </div>
        ))}
      </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;