// LP HowItWorks — 始めるのは3ステップ(導入の心理障壁を解く)
function HowItWorks() {
  const steps = [
    { n: '01', t: '材料を組み合わせて、メニューを作る', d: '材料のリストから選択して、分量を入力すれば、簡単にメニューが作れます。' },
    { n: '02', t: '仕込み品を作っておけば他のメニューにも使える', d: 'どの一品が利益を運んでいるかが見える。' },
    { n: '03', t: '販売数をつける', d: '1日の終わりに売れた数を入れるだけで、お店全体の理論原価率が分かる。仕込みのための材料使用量が自動で計算されます。' },
  ];
  return (
    <section className="ee-grain" data-screen-label="How It Works" style={{ background: 'var(--paper)', padding: 'var(--space-10) 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'relative', zIndex: 2, maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--content-pad)' }}>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14 }}>
          <span style={{ fontFamily: 'var(--font-display-en)', fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', whiteSpace: 'nowrap', color: 'var(--flame)' }}>How It Works</span>
          <h2 style={{ fontSize: 'var(--text-h2)' }}>始めるのは、3ステップ。</h2>
          <p style={{ fontSize: 16, lineHeight: 2 }}>直感的な操作で、店主が現場で使えている——それがいちばんの証明です。</p>
        </div>
        <div className="lp-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 52 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ position: 'relative', background: 'var(--paper-bright)', border: '2px solid var(--ink)', borderRadius: 'var(--radius-xl)', padding: '30px 28px 28px', boxShadow: 'var(--shadow-print)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="ee-num" style={{ fontSize: 44, color: 'var(--flame)' }}>{s.n}</span>
                {i < 2 && <span aria-hidden="true" style={{ fontFamily: 'var(--font-display-en)', fontSize: 22, color: 'var(--ink-faint)', marginLeft: 'auto' }}>→</span>}
              </div>
              <h3 style={{ fontSize: 20, marginTop: 14 }}>{s.t}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 2, marginTop: 10 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.LPHowItWorks = HowItWorks;