// Hero / FV — logo, brand, tagline, real app screen preview, waitlist CTA

const Hero = ({ generation, theme, 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: 56, paddingBottom: 56, position: 'relative' }}>
      <HeroSky/>

      <div style={{ position: 'relative', zIndex: 1 }} className="fade-in">
        {/* Logo image — the brand mark */}
        <div style={{
          width: 124, height: 124, margin: '0 auto 18px',
          borderRadius: '50%',
          overflow: 'hidden',
          boxShadow:
            '0 18px 40px -16px rgba(194, 90, 130, 0.4),' +
            '0 4px 14px -4px rgba(150, 100, 130, 0.25),' +
            'inset 0 0 0 1px rgba(255, 255, 255, 0.5)',
          animation: 'floatY 8s ease-in-out infinite',
        }}>
          <img src="assets/mirise-logo.png" alt="Mirise"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
        </div>

        {/* Brand mark */}
        <div style={{ textAlign: 'center', marginBottom: 26 }}>
          <div className="latin" style={{
            fontSize: 12, color: 'var(--gold)', letterSpacing: '0.4em',
          }}>{copy.kicker}</div>
          <div style={{
            fontFamily: 'var(--latin)', fontSize: 44, color: 'var(--ink)',
            letterSpacing: '0.18em', fontWeight: 500, marginTop: 6,
            fontStyle: 'italic',
          }}>Mirise</div>
          <div style={{
            fontFamily: 'var(--title-font)', fontSize: 13, color: 'var(--ink-soft)',
            letterSpacing: '0.6em', marginTop: 2, paddingLeft: '0.6em',
          }}>ミライズ</div>

          {/* Name origin badge */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', marginTop: 12,
            background: 'rgba(255, 255, 255, 0.6)',
            border: '1px solid rgba(203, 168, 104, 0.35)',
            borderRadius: 999,
            fontFamily: 'var(--title-font)',
            fontSize: 10.5, 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: 13, fontStyle: 'italic' }}>+</span>
            <span style={{ color: 'var(--ink)' }}>Rise</span>
            <span style={{ color: 'var(--gold)', fontFamily: 'var(--latin)', fontSize: 13, fontStyle: 'italic' }}>=</span>
            <span style={{ color: 'var(--accent-deep)', fontWeight: 600 }}>ミライズ</span>
          </div>
        </div>

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

        {/* Sub copy */}
        <p style={{
          textAlign: 'center', whiteSpace: 'pre-line',
          fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 2,
          marginBottom: 18,
        }}>{copy.sub}</p>

        {/* Capability chips — concrete "what it does" */}
        <CapabilityChips/>

        {/* Phone preview — REAL app Home screen */}
        <div style={{ marginTop: 28 }}>
          <HeroPhonePreview t={t}/>
        </div>

        {/* Waitlist form */}
        <div style={{ marginTop: 38 }}>
          <WaitlistForm onSignup={onSignup} state={signupState} variant="hero"/>
        </div>

        {/* Trust line */}
        <div className="divider-gold" style={{ marginTop: 36, marginBottom: 12 }}>
          <Star4 size={9} color="var(--gold)"/>
        </div>
        <p style={{
          textAlign: 'center', fontSize: 11, color: 'var(--ink-mute)',
          letterSpacing: '0.24em', margin: 0,
        }}>登録無料 · リリース情報をお届け</p>
      </div>
    </section>
  );
};

const WaitlistForm = ({ onSignup, state, variant }) => {
  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: '28px 24px' }}>
        <div style={{
          width: 48, height: 48, borderRadius: '50%', margin: '0 auto 14px',
          background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 22,
        }}>✓</div>
        <div style={{
          fontFamily: 'var(--title-font)', fontSize: 16,
          letterSpacing: '0.12em', color: 'var(--ink)', marginBottom: 8,
        }}>ご登録ありがとうございます</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.9 }}>
          リリース準備が整い次第、<br/>最新情報をお知らせします。
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={submit} className="card" style={{ padding: '22px 20px' }}>
      <label style={{
        display: 'block',
        fontFamily: 'var(--title-font)',
        fontSize: 12, color: 'var(--ink-soft)',
        letterSpacing: '0.24em', marginBottom: 12, textAlign: 'center',
      }}>先行登録 · ウェイトリスト</label>

      <input
        type="email"
        placeholder="your@email.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        style={{
          width: '100%',
          padding: '14px 18px',
          fontSize: 14,
          fontFamily: 'var(--body-font)',
          color: 'var(--ink)',
          background: 'rgba(255, 255, 255, 0.7)',
          border: '1px solid rgba(203, 168, 104, 0.3)',
          borderRadius: 14,
          outline: 'none',
          marginBottom: 14,
          letterSpacing: '0.04em',
        }}
      />
      <button type="submit" className="btn-primary" style={{
        width: '100%',
        whiteSpace: 'nowrap',
        letterSpacing: '0.08em',
      }}>先行登録する ✦</button>
      <div style={{
        fontSize: 10, color: 'var(--ink-mute)',
        textAlign: 'center', marginTop: 12, lineHeight: 1.8,
        letterSpacing: '0.08em',
      }}>
        登録すると、リリース通知と最新情報が届きます。<br/>
        配信はいつでも停止できます。
      </div>
    </form>
  );
};

// Real app Home screen, scaled to fit, with floating ornaments around it.
const HeroPhonePreview = ({ t }) => (
  <div style={{
    position: 'relative',
    margin: '0 auto',
    width: 'fit-content',
    animation: 'floatY 7s ease-in-out infinite',
  }}>
    <div style={{ position: 'relative' }}>
      <PhoneScaled scale={0.78}>
        <ScreenHome t={t}/>
      </PhoneScaled>

      {/* Floating sparkles around the phone */}
      <Twinkle size={20} color="var(--gold)" style={{
        position: 'absolute', top: -14, right: -10,
        animation: 'twinkle 2.8s ease-in-out infinite',
        pointerEvents: 'none',
      }}/>
      <Twinkle size={14} color="var(--accent)" style={{
        position: 'absolute', bottom: 24, left: -18,
        animation: 'twinkle 3.2s ease-in-out infinite 1s',
        pointerEvents: 'none',
      }}/>
      <Star4 size={10} color="var(--gold)" style={{
        position: 'absolute', top: 88, right: -14,
        animation: 'twinkle 4s ease-in-out infinite 2s',
        pointerEvents: 'none',
      }}/>
      <Star4 size={8} color="var(--gold)" style={{
        position: 'absolute', top: 160, left: -10,
        animation: 'twinkle 3.6s ease-in-out infinite 0.5s',
        pointerEvents: 'none',
      }}/>
    </div>
  </div>
);

window.Hero = Hero;
window.WaitlistForm = WaitlistForm;

// Capability chips — concrete listing of the major occult categories.
const CapabilityChips = () => {
  const chips = ['今日の運勢', '夢占い', 'タロット', '相性', '人生', '占い師相談'];
  return (
    <div style={{
      display: 'flex', flexWrap: 'wrap', gap: 6,
      justifyContent: 'center',
      maxWidth: 320, margin: '0 auto',
    }}>
      {chips.map((c) => (
        <span key={c} style={{
          fontSize: 11, padding: '6px 12px',
          background: 'rgba(255, 255, 255, 0.7)',
          border: '1px solid rgba(203, 168, 104, 0.3)',
          color: 'var(--ink)',
          borderRadius: 999, letterSpacing: '0.12em',
          fontFamily: 'var(--title-font)',
          backdropFilter: 'blur(6px)',
        }}>{c}</span>
      ))}
    </div>
  );
};