// Pretty Rare Boutique — How it works (no template numbers, no section header)

const STEPS = [
  { t: 'We meet.',         d: 'A quiet 20-minute conversation about you: your concerns, your hopes, what matters most. No obligation to proceed. No pressure to decide anything on the day.', img: 'assets/imagery/consultation-01.jpg' },
  { t: 'We care for you.', d: 'A treatment shaped around your face and your wishes. Gentle, considered, never rushed. You can pause or stop at any moment. No explanation needed.', img: 'assets/imagery/treatment-room-01.jpg' },
  { t: 'We check in.',     d: 'A complimentary review at two to four weeks. Because our care for you doesn\'t end at the door.', img: 'assets/imagery/lifestyle-04.jpg' },
];

function SiteHow() {
  const mobile = useMobile();
  return (
    <section data-screen-label="how" className="section">
      <div className="wrap">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {STEPS.map((s, i) => (
            <HowRow key={s.t} s={s} i={i} mobile={mobile} />
          ))}
        </div>
      </div>
    </section>
  );
}

function HowRow({ s, i, mobile }) {
  const [hover, setHover] = React.useState(false);
  const imageLeft = i % 2 === 0;

  if (mobile) {
    return (
      <div style={{ paddingBottom: 40, marginBottom: 40, borderBottom: i < 2 ? '1px solid var(--border)' : 'none' }}>
        <div style={{ borderRadius: 10, overflow: 'hidden', aspectRatio: '16/9', marginBottom: 24 }}>
          <div style={{ width: '100%', height: '100%', backgroundImage: `url('${s.img}')`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
        </div>
        <h3 className="h-2" style={{ marginBottom: 10 }}>{s.t}</h3>
        <p className="body body--sm">{s.d}</p>
      </div>
    );
  }

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 0,
        borderTop: '1px solid var(--border)',
        padding: '56px 0',
        transition: 'background 320ms var(--ease-soft)',
        background: hover ? 'var(--pr-blush-50)' : 'transparent',
        borderRadius: hover ? 12 : 0,
        cursor: 'default',
      }}
    >
      {/* Image */}
      <div style={{ order: imageLeft ? 0 : 1, padding: imageLeft ? '0 48px 0 0' : '0 0 0 48px' }}>
        <div style={{ borderRadius: 10, overflow: 'hidden', aspectRatio: '16/9', boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)', transition: 'box-shadow 320ms var(--ease-soft)' }}>
          <div style={{ width: '100%', height: '100%', backgroundImage: `url('${s.img}')`, backgroundSize: 'cover', backgroundPosition: 'center', transform: hover ? 'scale(1.04)' : 'scale(1)', transition: 'transform 900ms var(--ease-soft)' }} />
        </div>
      </div>

      {/* Text */}
      <div style={{ order: imageLeft ? 1 : 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: imageLeft ? '0 0 0 0' : '0 48px 0 0' }}>
        <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 'clamp(28px, 3vw, 40px)', letterSpacing: '-0.025em', color: 'var(--fg)', margin: '0 0 16px' }}>{s.t}</h3>
        <p className="body" style={{ maxWidth: 380 }}>{s.d}</p>
      </div>
    </div>
  );
}

window.SiteHow = SiteHow;