// HowItWorks.jsx — buyer flow, three-step walkthrough

const steps = [
  {
    n: '01',
    title: 'Find your section.',
    copy: 'Browse tickets from real fans near your seats.',
    tag: 'Browse',
  },
  {
    n: '02',
    title: 'Message the seller.',
    copy: 'Chat directly. Ask about the view. No black box.',
    tag: 'Connect',
  },
  {
    n: '03',
    title: 'Buy. Walk in. Enjoy.',
    copy: 'Zero fees. Instant transfer. Seatmates in-app.',
    tag: 'Gameday',
  },
];

const HowItWorks = () => {
  const [active, setActive] = React.useState(0);

  return (
    <section id="how-it-works" style={{ padding: '120px 0', scrollMarginTop: 80 }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60, gap: 60 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>How it works</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: 0, maxWidth: 700 }}>
              Every seller, <em>one message away</em>.
            </h2>
          </div>
          <div style={{ fontSize: 14, color: 'var(--ink-4)', maxWidth: 240 }}>
            Three steps. Zero middlemen. Every seller is a real fan.
          </div>
        </div>

        <div className="sc-card-grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
          {steps.map((s, i) => {
            const isActive = i === active;
            return (
              <div key={i}
                onMouseEnter={() => setActive(i)}
                style={{
                  background: isActive ? 'var(--ink)' : 'var(--card)',
                  color: isActive ? 'var(--bg)' : 'var(--ink)',
                  border: '1px solid var(--line)',
                  borderRadius: 24,
                  padding: 32,
                  minHeight: 340,
                  display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  transition: 'all 0.35s ease',
                  cursor: 'pointer',
                  position: 'relative', overflow: 'hidden',
                }}>
                {isActive && (
                  <div style={{
                    position: 'absolute', top: -60, right: -60, width: 200, height: 200,
                    background: 'radial-gradient(circle, color-mix(in oklab, var(--accent) 40%, transparent), transparent 65%)',
                  }}/>
                )}
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between' }}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontSize: 48, lineHeight: 1,
                    color: isActive ? 'var(--accent-2)' : 'var(--ink-5)',
                  }}>{s.n}</span>
                  <span style={{
                    fontSize: 11, fontFamily: 'var(--font-mono)', textTransform: 'uppercase',
                    letterSpacing: '0.12em', padding: '6px 10px', borderRadius: 999,
                    border: '1px solid', borderColor: isActive ? 'rgba(255,255,255,0.2)' : 'var(--line)',
                    color: isActive ? 'var(--ink-5)' : 'var(--ink-4)',
                    alignSelf: 'flex-start',
                  }}>{s.tag}</span>
                </div>
                <div style={{ position: 'relative' }}>
                  <h3 className="display" style={{ fontSize: 28, margin: '0 0 10px' }}>{s.title}</h3>
                  <p style={{
                    fontSize: 14, lineHeight: 1.55,
                    color: isActive ? 'color-mix(in oklab, var(--bg) 70%, transparent)' : 'var(--ink-3)',
                    margin: 0,
                  }}>{s.copy}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { HowItWorks });