// 3 つの特長 — each paired with a real app screen preview.

const Features = ({ theme }) => {
  const t = getAppTheme(theme);

  const items = [
    {
      number: '01',
      latin: 'Daily Comfort',
      title: 'やさしい言葉で、\n気分をそっと整える',
      body: '不安を煽る言い方ではなく、今の気持ちに寄り添う言葉で。\n結果を読んだあとに、少し前を向ける占い体験を目指しています。',
      screen: <ScreenHome t={t}/>,
      flip: false,
    },
    {
      number: '02',
      latin: 'All in One',
      title: '気になることを、\nひとつのアプリで',
      body: '今日の運勢、夢占い、タロット、相性、開運日まで。\n日々の小さな迷いも、人生の節目の悩みも、ひとつのアプリで確認できます。',
      screen: <ScreenMenu t={t}/>,
      flip: true,
    },
    {
      number: '03',
      latin: 'Talk to a Reader',
      title: '毎日の占いだけじゃない、\n占い師にも相談できる',
      body: 'もっと詳しく相談したいときは、占い師への個別相談も選べます。\n気軽な占いと深い相談を、悩みの大きさに合わせて使い分けられます。',
      screen: <ScreenCounselor t={t}/>,
      flip: false,
    },
  ];

  return (
    <section>
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <div className="eyebrow">— Why Mirise —</div>
        <h2 className="section-title">
          毎日ひらきたくなる、<br/>
          <em>やさしい占いの居場所。</em>
        </h2>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
        {items.map((it) => (
          <FeatureCard key={it.number} item={it}/>
        ))}
      </div>
    </section>
  );
};

const FeatureCard = ({ item }) => (
  <article className="card" style={{
    padding: '24px 20px 26px',
    position: 'relative',
    overflow: 'hidden',
  }}>
    {/* Number ornament */}
    <div style={{
      position: 'absolute', top: 14, right: 18,
      fontFamily: 'var(--latin)', fontStyle: 'italic',
      fontSize: 32, color: 'var(--gold-soft)',
      letterSpacing: '0.06em',
      opacity: 0.6,
    }}>{item.number}</div>

    <div className="latin" style={{
      fontSize: 11, color: 'var(--gold)',
      letterSpacing: '0.28em', marginBottom: 6,
    }}>{item.latin}</div>

    <h3 style={{
      fontFamily: 'var(--title-font)',
      fontSize: 18, lineHeight: 1.7,
      letterSpacing: '0.06em',
      color: 'var(--ink)',
      whiteSpace: 'pre-line',
      marginBottom: 12,
    }}>{item.title}</h3>

    <p style={{
      fontSize: 13, color: 'var(--ink-soft)',
      lineHeight: 2, margin: 0, letterSpacing: '0.03em',
      whiteSpace: 'pre-line',
      marginBottom: 20,
    }}>{item.body}</p>

    {/* Phone preview — centered, half-bleed on bottom */}
    <div style={{
      display: 'flex', justifyContent: 'center',
      marginTop: 12, marginBottom: -8,
      position: 'relative',
    }}>
      <div style={{ position: 'relative' }}>
        <PhoneScaled scale={0.62} style={{
          filter: 'drop-shadow(0 16px 30px rgba(150, 100, 130, 0.18))',
        }}>
          {item.screen}
        </PhoneScaled>

        {/* sparkles */}
        <Twinkle size={12} color="var(--gold)" style={{
          position: 'absolute', top: 10, right: -10,
          animation: 'twinkle 3s ease-in-out infinite',
        }}/>
        <Twinkle size={8} color="var(--accent)" style={{
          position: 'absolute', top: 80, left: -10,
          animation: 'twinkle 3.4s ease-in-out infinite 1s',
        }}/>
      </div>
    </div>
  </article>
);

window.Features = Features;