// How-to flow — 4 steps

function HowTo({ tweaks }) {
  const accent = tweaks.accentColor;
  const steps = [
    {
      n: '01',
      label: 'DOWNLOAD',
      title: 'App Storeから\nダウンロード',
      body: 'iPhone・iPad に対応。無料で始められます。',
      icon: <DLIcon />,
    },
    {
      n: '02',
      label: 'DIG',
      title: 'AIが趣味の合う\nプレイリストを提案',
      body: '知らないジャンル、知らない人。あなたの「好き」を起点に掘り進める。',
      icon: <ConnectIcon />,
    },
    {
      n: '03',
      label: 'PLAY',
      title: '普段使ってる\n音楽サービスで再生',
      body: '聴くのは Spotify / Apple Music。 DIGME はあくまで音楽との出会いの場。',
      icon: <SyncIcon />,
    },
    {
      n: '04',
      label: 'SHARE',
      title: '自分の音楽を、\nみんなに広げよう',
      body: 'あなたの選曲がだれかの「次の一枚」になる。それが DIGME の楽しみ方。',
      icon: <ShareIcon />,
    },
  ];

  return (
    <section id="howto" style={{
      padding: '160px 0',
      borderTop: '1px solid var(--line)',
      background: 'linear-gradient(180deg, transparent 0%, rgba(255,107,26,0.03) 50%, transparent 100%)',
      position: 'relative',
    }}>
      <div className="container">
        <Reveal>
          <SectionHead
            kicker="HOW IT WORKS / 使い方"
            title={<>4ステップで、<br />あなたの音楽が世界に。</>}
          />
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24,
          position: 'relative',
        }} className="howto-grid">

          {/* connecting line */}
          <div style={{
            position: 'absolute', top: 56, left: '6%', right: '6%',
            height: 1,
            background: `linear-gradient(to right, transparent, ${accent}40, ${accent}40, transparent)`,
            zIndex: 0,
          }} className="howto-line"></div>

          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div style={{
                position: 'relative', zIndex: 1,
                display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
                gap: 16,
              }}>
                {/* step circle */}
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: '#0a0a0a',
                  border: `1.5px solid ${accent}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  position: 'relative',
                  marginBottom: 4,
                }}>
                  <span style={{ color: accent }}>{s.icon}</span>
                  <span style={{
                    position: 'absolute', top: -10, right: -10,
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 10, fontWeight: 700,
                    background: accent, color: '#000',
                    padding: '3px 7px', borderRadius: 4,
                    letterSpacing: '0.05em',
                  }}>{s.n}</span>
                </div>

                <span className="uppercase-tag" style={{ color: accent }}>{s.label}</span>

                <h3 className="display" style={{
                  fontSize: 'clamp(20px, 1.7vw, 26px)',
                  fontWeight: 700, lineHeight: 1.2,
                  letterSpacing: '-0.02em',
                  whiteSpace: 'pre-line',
                }}>{s.title}</h3>

                <p style={{
                  fontSize: 14, lineHeight: 1.7,
                  color: 'rgba(245,243,238,0.6)',
                }}>{s.body}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <style>{`
          @media (max-width: 860px) {
            .howto-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
            .howto-line { display: none; }
          }
          @media (max-width: 480px) {
            .howto-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function DLIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v13M6 11l6 6 6-6M4 21h16" />
    </svg>
  );
}
function ConnectIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="12" r="2.5"/>
      <path d="M8.5 12h7"/>
    </svg>
  );
}
function SyncIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 12a9 9 0 0 1-15 6.7L3 16"/>
      <path d="M21 4v4h-4M3 20v-4h4"/>
    </svg>
  );
}
function ShareIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="18" cy="18" r="2.5"/>
      <path d="M8 11l8-4M8 13l8 4"/>
    </svg>
  );
}

window.HowTo = HowTo;