// PC 3 STEPS — horizontal 3-column flow with phones below each step.

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

  const steps = [
    {
      num: '01',
      latin: 'STEP 01',
      title: '生年月日を登録',
      body: 'はじめに生年月日などの基本情報を入力。\nあなたに合わせた占い結果を受け取りやすくします。',
      screen: <ScreenOnboarding t={t}/>,
    },
    {
      num: '02',
      latin: 'STEP 02',
      title: '占いたいものを選ぶ',
      body: '今日の運勢、夢占い、タロット、相性診断など、\n気になるメニューを選ぶだけで始められます。',
      screen: <ScreenMenu t={t}/>,
    },
    {
      num: '03',
      latin: 'STEP 03',
      title: 'やさしい結果が届く',
      body: '結果はわかりやすく、前向きな言葉で表示。\n気になる鑑定はあとから見返せます。',
      screen: <ScreenTodayResult t={t}/>,
    },
  ];

  return (
    <section>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div className="eyebrow">— How It Works —</div>
          <h2 className="section-title">
            3つのステップで、<em>はじめての占い。</em>
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr auto 1fr',
          gap: 24, alignItems: 'start',
        }}>
          <StepColPC step={steps[0]}/>
          <StepArrowPC/>
          <StepColPC step={steps[1]}/>
          <StepArrowPC/>
          <StepColPC step={steps[2]}/>
        </div>
      </div>
    </section>
  );
};

const StepColPC = ({ step }) => (
  <div style={{
    textAlign: 'center',
    display: 'flex', flexDirection: 'column', alignItems: 'center',
    gap: 22,
  }}>
    {/* Number disc */}
    <div style={{
      width: 64, height: 64, borderRadius: '50%',
      background: 'linear-gradient(180deg, var(--accent), var(--accent-deep))',
      color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--latin)', fontStyle: 'italic',
      fontSize: 30, fontWeight: 600,
      boxShadow: '0 12px 24px -10px rgba(194, 90, 130, 0.5)',
    }}>{step.num}</div>

    <div>
      <div className="latin" style={{
        fontSize: 11, color: 'var(--gold)',
        letterSpacing: '0.32em', marginBottom: 6,
      }}>{step.latin}</div>
      <h3 style={{
        fontFamily: 'var(--title-font)',
        fontSize: 24, lineHeight: 1.5,
        letterSpacing: '0.08em',
        color: 'var(--ink)', marginBottom: 12,
      }}>{step.title}</h3>
      <p style={{
        fontSize: 14, color: 'var(--ink-soft)',
        lineHeight: 2, margin: 0, whiteSpace: 'pre-line',
        maxWidth: 280, marginInline: 'auto',
      }}>{step.body}</p>
    </div>

    {/* Phone */}
    <div style={{
      padding: 8,
      borderRadius: 36,
      background: 'rgba(255, 255, 255, 0.5)',
      border: '1px solid rgba(203, 168, 104, 0.3)',
      boxShadow: '0 24px 50px -24px rgba(150, 100, 130, 0.4)',
      backdropFilter: 'blur(8px)',
    }}>
      <PhoneScaled scale={0.78}>
        {step.screen}
      </PhoneScaled>
    </div>
  </div>
);

const StepArrowPC = () => (
  <div style={{
    paddingTop: 80, color: 'var(--gold)',
    display: 'flex', alignItems: 'center',
  }}>
    <svg width="56" height="20" viewBox="0 0 56 20" fill="none">
      <path d="M2 10 H 50 M 42 4 L 50 10 L 42 16"
        stroke="currentColor" strokeWidth="1.2"
        strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </div>
);

window.StepsPC = StepsPC;