// PC Hero — 2-column split. Brand + copy + CTA on left, phone collage on right.

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

  const copyByGen = {
    '20s': {
      kicker: 'Move Forward · Spring 2026',
      title: <>毎日を、<em>すこし前へ。</em><br/>背中を押す、やさしい占い。</>,
      sub: '今日の運勢、夢占い、タロット、相性診断まで。\n迷ったときに見返せる、前向きなヒントを毎日届けます。',
    },
    '30s': {
      kicker: 'Your Future, a Step Forward',
      title: <>占いで描く、<br/><em>あなたの未来図。</em></>,
      sub: '今日の運勢、夢占い、タロット、相性診断まで。\n気になることを気軽に占えて、毎日を前向きに整えられるアプリです。',
    },
    '40s': {
      kicker: 'Future + Rise · Mirise',
      title: <>自分の歩幅で、<br/><em>未来をひらく。</em></>,
      sub: '不安を煽らず、今の気持ちに寄り添う占い体験。\n毎日の小さな迷いから、大切な選択の前までやさしく支えます。',
    },
  };
  const copy = copyByGen[generation] || copyByGen['30s'];

  return (
    <section style={{ paddingTop: 80, paddingBottom: 60, position: 'relative' }}>
      <HeroSkyPC/>

      <div className="container" style={{
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 520px',
        gap: 60, alignItems: 'center',
      }}>
        {/* ── Left column: copy + CTA */}
        <div className="fade-in">
          {/* Logo + brand */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 28 }}>
            <img src="assets/mirise-logo.png" alt="Mirise" style={{
              width: 76, height: 76, borderRadius: '50%', display: 'block',
              boxShadow: '0 14px 32px -12px rgba(194, 90, 130, 0.4)',
            }}/>
            <div>
              <div className="latin" style={{
                fontSize: 12, color: 'var(--gold)', letterSpacing: '0.4em',
              }}>{copy.kicker}</div>
              <div style={{
                fontFamily: 'var(--latin)', fontSize: 36, color: 'var(--ink)',
                letterSpacing: '0.18em', fontWeight: 500,
                fontStyle: 'italic', lineHeight: 1.1,
              }}>Mirise <span style={{
                fontSize: 16, color: 'var(--ink-soft)',
                fontFamily: 'var(--title-font)',
                fontStyle: 'normal', letterSpacing: '0.5em', marginLeft: 8,
              }}>ミライズ</span></div>
            </div>
          </div>

          {/* Name origin */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 18px', marginBottom: 28,
            background: 'rgba(255, 255, 255, 0.6)',
            border: '1px solid rgba(203, 168, 104, 0.35)',
            borderRadius: 999,
            fontFamily: 'var(--title-font)',
            fontSize: 12, color: 'var(--ink-soft)',
            letterSpacing: '0.14em',
            backdropFilter: 'blur(6px)',
          }}>
            <span style={{ color: 'var(--ink)' }}>未来</span>
            <span style={{ color: 'var(--gold)', fontFamily: 'var(--latin)', fontSize: 14, fontStyle: 'italic' }}>+</span>
            <span style={{ color: 'var(--ink)' }}>Rise</span>
            <span style={{ color: 'var(--gold)', fontFamily: 'var(--latin)', fontSize: 14, fontStyle: 'italic' }}>=</span>
            <span style={{ color: 'var(--accent-deep)', fontWeight: 600 }}>ミライズ</span>
          </div>

          {/* Headline */}
          <h1 style={{
            fontFamily: 'var(--title-font)',
            fontSize: 60, lineHeight: 1.5,
            letterSpacing: '0.06em',
            color: 'var(--ink)', marginBottom: 26,
            textWrap: 'pretty',
          }}>{copy.title}</h1>

          {/* Sub copy */}
          <p style={{
            whiteSpace: 'pre-line',
            fontSize: 16, color: 'var(--ink-soft)', lineHeight: 2,
            marginBottom: 28, maxWidth: 540,
          }}>{copy.sub}</p>

          {/* Capability chips */}
          <CapabilityChipsPC/>

          {/* Waitlist form */}
          <div style={{ marginTop: 36 }}>
            <WaitlistFormPC onSignup={onSignup} state={signupState}/>
          </div>

          {/* Trust line */}
          <div style={{
            marginTop: 24, display: 'flex', alignItems: 'center', gap: 20,
            fontSize: 12, color: 'var(--ink-mute)',
            letterSpacing: '0.2em', fontFamily: 'var(--title-font)',
          }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <Star4 size={9} color="var(--gold)"/> 登録は無料
            </span>
            <span style={{ width: 1, height: 14, background: 'var(--gold)', opacity: 0.4 }}/>
            <span>リリース情報をお届け</span>

          </div>
        </div>

        {/* ── Right column: phone collage */}
        <HeroPhonesPC t={t}/>
      </div>
    </section>
  );
};

const CapabilityChipsPC = () => {
  const chips = ['今日の運勢', '夢占い', 'タロット', '相性', '人生', '占い師相談'];
  return (
    <div style={{
      display: 'flex', flexWrap: 'wrap', gap: 8,
      maxWidth: 540,
    }}>
      {chips.map((c) => (
        <span key={c} style={{
          fontSize: 13, padding: '8px 16px',
          background: 'rgba(255, 255, 255, 0.7)',
          border: '1px solid rgba(203, 168, 104, 0.3)',
          color: 'var(--ink)',
          borderRadius: 999, letterSpacing: '0.14em',
          fontFamily: 'var(--title-font)',
          backdropFilter: 'blur(6px)',
        }}>{c}</span>
      ))}
    </div>
  );
};

const WaitlistFormPC = ({ 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: 540,
      }}>
        <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: 20,
          letterSpacing: '0.12em', color: 'var(--ink)', marginBottom: 10,
        }}>ご登録ありがとうございます</div>
        <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 2 }}>
          リリース準備が整い次第、最新情報をお知らせします。
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex', gap: 10, maxWidth: 540,
    }}>
      <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.85)',
          border: '1px solid rgba(203, 168, 104, 0.35)',
          borderRadius: 999,
          outline: 'none',
          letterSpacing: '0.04em',
        }}
      />
      <button type="submit" className="btn-primary" style={{ whiteSpace: 'nowrap' }}>先行登録する ✦</button>
    </form>
  );
};

// Floating phone collage — main Home screen + offset secondary screen behind.
const HeroPhonesPC = ({ t }) => (
  <div style={{
    position: 'relative',
    width: 520, height: 720,
  }}>
    {/* Background sky disc */}
    <div style={{
      position: 'absolute', top: -40, left: -40, right: -40, bottom: -40,
      background:
        'radial-gradient(50% 50% at 55% 50%, rgba(255, 255, 255, 0.5), transparent 70%)',
      pointerEvents: 'none',
    }}/>

    {/* Back phone — ScreenTodayResult, slightly behind/right */}
    <div style={{
      position: 'absolute', top: 80, right: -30,
      transform: 'rotate(6deg)',
      animation: 'floatY 9s ease-in-out infinite 1s',
      filter: 'drop-shadow(0 24px 50px rgba(150, 100, 130, 0.3))',
    }}>
      <PhoneScaled scale={0.85}>
        <ScreenTodayResult t={t}/>
      </PhoneScaled>
    </div>

    {/* Front phone — ScreenHome, centered/left */}
    <div style={{
      position: 'absolute', top: 0, left: 20,
      animation: 'floatY 8s ease-in-out infinite',
      filter: 'drop-shadow(0 30px 60px rgba(150, 100, 130, 0.35))',
      zIndex: 2,
    }}>
      <PhoneScaled scale={1}>
        <ScreenHome t={t}/>
      </PhoneScaled>
    </div>

    {/* Floating ornaments */}
    <Twinkle size={28} color="var(--gold)" style={{
      position: 'absolute', top: -10, left: 30,
      animation: 'twinkle 3s ease-in-out infinite',
      zIndex: 3,
    }}/>
    <Twinkle size={20} color="var(--accent)" style={{
      position: 'absolute', bottom: 80, left: -10,
      animation: 'twinkle 3.4s ease-in-out infinite 1s',
      zIndex: 3,
    }}/>
    <Star4 size={14} color="var(--gold)" style={{
      position: 'absolute', top: 200, right: 20,
      animation: 'twinkle 4s ease-in-out infinite 0.5s',
      zIndex: 3,
    }}/>
    <Star4 size={10} color="var(--gold)" style={{
      position: 'absolute', top: 460, left: 0,
      animation: 'twinkle 3.6s ease-in-out infinite 2s',
      zIndex: 3,
    }}/>
  </div>
);

// Sky background — wide soft clouds behind the whole hero.
const HeroSkyPC = () => (
  <div style={{
    position: 'absolute', inset: 0, overflow: 'hidden',
    pointerEvents: 'none',
  }}>
    <CloudShape style={{
      position: 'absolute', top: '-10%', left: '-8%', width: '40%',
      animation: 'floatY 11s ease-in-out infinite',
    }} color="#ffffff" opacity={0.9}/>
    <CloudShape style={{
      position: 'absolute', top: '6%', right: '-6%', width: '32%',
      animation: 'floatY 13s ease-in-out infinite 1s',
    }} color="#ffffff" opacity={0.78}/>
    <CloudShape style={{
      position: 'absolute', bottom: '8%', right: '20%', width: '28%',
      animation: 'floatY 12s ease-in-out infinite 2s',
    }} color="#f3e6f7" opacity={0.7}/>
    <CloudShape style={{
      position: 'absolute', bottom: '-4%', left: '4%', width: '32%',
      animation: 'floatY 10s ease-in-out infinite 0.5s',
    }} color="#fff5f8" opacity={0.7}/>

    <MoonCrescent size={110} color="#fff5f8" style={{
      position: 'absolute', top: '8%', right: '40%',
      filter: 'drop-shadow(0 8px 24px rgba(217, 122, 153, 0.25))',
    }}/>

    {[
      { top: '14%', left: '12%', size: 14, delay: 0 },
      { top: '36%', left: '6%', size: 18, delay: 0.6 },
      { top: '24%', left: '38%', size: 10, delay: 1.4 },
      { bottom: '30%', left: '8%', size: 12, delay: 2 },
      { top: '70%', left: '46%', size: 9, delay: 1.2 },
    ].map((s, i) => (
      <Twinkle key={i} size={s.size} color="var(--gold)" style={{
        position: 'absolute', ...s,
        animation: `twinkle 3.4s ease-in-out infinite ${s.delay}s`,
      }}/>
    ))}
  </div>
);

window.HeroPC = HeroPC;
window.WaitlistFormPC = WaitlistFormPC;