// Pretty Rare Boutique — Categories (editorial asymmetric grid)

const SITE_CATS = [
  { title: 'Cosmetic',    desc: 'Wrinkle treatment, lip, cheek and masseter.',   image: 'assets/imagery/lips.jpg'         },
  { title: 'Skin',        desc: 'Rejuran, collagen stimulation, PDO threads.',   image: 'assets/imagery/portrait-03.jpg'  },
  { title: 'IV Wellness', desc: 'Hydration, glow and recovery infusions.',       image: 'assets/imagery/iv.jpg'           },
  { title: 'Lymphatic',   desc: 'Brazilian lymphatic drainage massage.',          image: 'assets/imagery/lifestyle-05.jpg' },
];

function CatCard({ cat, onClick, height }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', position: 'relative', overflow: 'hidden', borderRadius: 10, height, flexShrink: 0 }}
    >
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url('${cat.image}')`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        transform: hover ? 'scale(1.06)' : 'scale(1)',
        transition: 'transform 900ms var(--ease-soft)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, transparent 40%, rgba(11,11,11,0.75) 100%)',
        opacity: hover ? 1 : 0.55,
        transition: 'opacity 400ms var(--ease-soft)',
      }} />
      <div style={{ position: 'absolute', bottom: 22, left: 22, right: 22, color: 'var(--pr-off-100)' }}>
        <h3 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em', transform: hover ? 'translateY(-36px)' : 'translateY(0)', transition: 'transform 380ms var(--ease-soft)' }}>{cat.title}</h3>
        <p style={{ margin: '6px 0 0', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, lineHeight: 1.5, color: 'rgba(248,245,244,0.88)', opacity: hover ? 1 : 0, transform: hover ? 'translateY(-32px)' : 'translateY(0)', transition: 'opacity 380ms var(--ease-soft), transform 380ms var(--ease-soft)', maxWidth: 220 }}>{cat.desc}</p>
      </div>
    </div>
  );
}

function SiteCategories({ onPick }) {
  const mobile = useMobile();
  return (
    <section data-screen-label="categories" className="section">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: mobile ? 28 : 48, flexWrap: 'wrap', gap: 16 }}>
          <h2 className="h-1">Personalised treatments,<br/><span className="thin">for every stage of life.</span></h2>
          <a className="link-cap" onClick={onPick} style={{ cursor: 'pointer' }}>The full menu</a>
        </div>

        {mobile ? (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            {SITE_CATS.map(c => <CatCard key={c.title} cat={c} onClick={() => onPick(c)} height={240} />)}
          </div>
        ) : (
          /* Editorial asymmetric grid: one tall feature card + three stacked */
          <div style={{ display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 14 }}>
            {/* Feature card — full height */}
            <CatCard cat={SITE_CATS[0]} onClick={() => onPick(SITE_CATS[0])} height={580} />
            {/* Three stacked cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <CatCard cat={SITE_CATS[1]} onClick={() => onPick(SITE_CATS[1])} height={182} />
              <CatCard cat={SITE_CATS[2]} onClick={() => onPick(SITE_CATS[2])} height={182} />
              <CatCard cat={SITE_CATS[3]} onClick={() => onPick(SITE_CATS[3])} height={182} />
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.SiteCategories = SiteCategories;