// PC Final CTA — centered card flanked by small floating phones.

const FinalCTAPC = ({ theme, onSignup, signupState }) => {
  const t = getAppTheme(theme);

  return (
    <section style={{ paddingTop: 80, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background:
          'radial-gradient(40% 60% at 50% 50%, rgba(255,255,255,0.5), transparent 70%)',
      }}/>

      <div className="container" style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: '1fr minmax(520px, 700px) 1fr',
        gap: 40, alignItems: 'center',
      }}>
        {/* Left phone */}
        <div style={{
          display: 'flex', justifyContent: 'flex-end',
          animation: 'floatY 9s ease-in-out infinite',
          filter: 'drop-shadow(0 24px 50px rgba(150, 100, 130, 0.3))',
          transform: 'rotate(-6deg)',
        }}>
          <PhoneScaled scale={0.65}>
            <ScreenDreamResult t={t}/>
          </PhoneScaled>
        </div>

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

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

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

        {/* Right phone */}
        <div style={{
          display: 'flex', justifyContent: 'flex-start',
          animation: 'floatY 8s ease-in-out infinite 1s',
          filter: 'drop-shadow(0 24px 50px rgba(150, 100, 130, 0.3))',
          transform: 'rotate(6deg)',
        }}>
          <PhoneScaled scale={0.65}>
            <ScreenTarot t={t}/>
          </PhoneScaled>
        </div>
      </div>
    </section>
  );
};

const WaitlistFormCenteredPC = ({ onSignup, state }) => {
  const [email, setEmail] = React.useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.trim() || !email.includes('@')) return;
    onSignup(email);
  };

  if (state === 'done') {
    return (
      <div className="card fade-in" style={{
        textAlign: 'center', padding: '32px 28px',
        maxWidth: 520, margin: '0 auto',
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%', margin: '0 auto 16px',
          background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 26,
        }}>✓</div>
        <div style={{
          fontFamily: 'var(--title-font)', fontSize: 18,
          letterSpacing: '0.12em', color: 'var(--ink)',
        }}>ご登録ありがとうございます</div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex', gap: 10,
      maxWidth: 520, margin: '0 auto',
    }}>
      <input
        type="email"
        placeholder="your@email.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        style={{
          flex: 1,
          padding: '18px 22px',
          fontSize: 15,
          fontFamily: 'var(--body-font)',
          color: 'var(--ink)',
          background: 'rgba(255, 255, 255, 0.9)',
          border: '1px solid rgba(203, 168, 104, 0.35)',
          borderRadius: 999,
          outline: 'none',
        }}
      />
      <button type="submit" className="btn-primary">
        登録する <span style={{ fontSize: 13 }}>✦</span>
      </button>
    </form>
  );
};

window.FinalCTAPC = FinalCTAPC;