// Pretty Rare Boutique — How it works (responsive)

const STEPS = [
  { n: '01', t: 'Book.',   d: 'A quiet consultation. We listen first.', img: 'assets/imagery/consultation-01.jpg' },
  { n: '02', t: 'Treat.',  d: 'A plan shaped around your face.',         img: 'assets/imagery/treatment-room-01.jpg' },
  { n: '03', t: 'Review.', d: 'Complimentary follow-up at two weeks.',   img: 'assets/imagery/lifestyle-04.jpg' },
];

function SiteHow() {
  const mobile = useMobile();
  return (
    <section data-screen-label="how" className="section">
      <div className="wrap">
        <div style={{ marginBottom: mobile ? 40 : 64, textAlign: 'center' }}>
          <div className="eyebrow" style={{ marginBottom: 24, justifyContent: 'center' }}>How it works</div>
          <h2 className="h-1">
            Three quiet steps.<br/>
            <span className="thin">No rush. No pressure.</span>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: mobile ? 40 : 32 }}>
          {STEPS.map((s) => (
            <div key={s.n} style={{ display: mobile ? 'grid' : 'block', gridTemplateColumns: mobile ? '120px 1fr' : undefined, gap: mobile ? 20 : 0, alignItems: 'flex-start' }}>
              <div className="zoom-frame" style={{
                width: '100%', aspectRatio: mobile ? '1/1' : '4/5', marginBottom: mobile ? 0 : 24,
                boxShadow: 'var(--shadow-sm)',
              }}>
                <div style={{
                  width: '100%', height: '100%',
                  backgroundImage: `url('${s.img}')`,
                  backgroundSize: 'cover', backgroundPosition: 'center',
                }} />
              </div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontSize: 10,
                  letterSpacing: '0.32em', textTransform: 'uppercase',
                  fontWeight: 500, color: 'var(--accent)', marginBottom: 8,
                  marginTop: mobile ? 0 : 0,
                }}>Step {s.n}</div>
                <h3 className="h-2" style={{ fontSize: mobile ? 24 : 32, marginBottom: 8 }}>{s.t}</h3>
                <p className="body body--sm">{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteHow = SiteHow;