// Pretty Rare Boutique — Categories (responsive)

const SITE_CATS = [
  { title: 'Cosmetic',     desc: 'Lip refinement, wrinkle treatment.',         image: 'assets/imagery/lips.jpg',         height: 480, offset: 0  },
  { title: 'Skin',         desc: 'Rejuran, collagen stimulators, biological.', image: 'assets/imagery/portrait-03.jpg',  height: 540, offset: 40 },
  { title: 'IV Infusions', desc: 'Restorative drips for wellness and energy.', image: 'assets/imagery/lifestyle-04.jpg', height: 480, offset: 0  },
  { title: 'Ritual',       desc: 'Supportive treatments and review visits.',   image: 'assets/imagery/interior-03.jpg',  height: 540, offset: 40 },
];

function SiteCategoryCard({ cat, onClick, mobile }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', marginTop: mobile ? 0 : cat.offset }}
    >
      <div style={{
        position: 'relative', overflow: 'hidden', borderRadius: 12,
        height: mobile ? 260 : cat.height,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transition: 'box-shadow 320ms var(--ease-soft)',
      }}>
        <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 50%, rgba(11, 11, 11, 0.72) 100%)',
          opacity: hover ? 1 : 0.45,
          transition: 'opacity 320ms var(--ease-soft)',
        }} />

        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: 'var(--pr-off-100)' }}>
          <h3 style={{
            margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 600,
            fontSize: 24, letterSpacing: '-0.025em',
            transform: hover ? 'translateY(-44px)' : 'translateY(0)',
            transition: 'transform 380ms var(--ease-soft)',
          }}>{cat.title}</h3>
          <p style={{
            margin: '8px 0 0 0',
            fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 13, lineHeight: 1.5,
            color: 'rgba(248, 245, 244, 0.92)',
            opacity: hover ? 1 : 0,
            transform: hover ? 'translateY(-40px)' : 'translateY(0)',
            transition: 'opacity 380ms var(--ease-soft), transform 380ms var(--ease-soft)',
            maxWidth: 240,
          }}>{cat.desc}</p>
        </div>

        <div style={{
          position: 'absolute', top: 18, right: 18,
          width: 40, height: 40, borderRadius: 999,
          background: 'rgba(248, 245, 244, 0.92)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--fg)',
          transform: hover ? 'rotate(45deg)' : 'rotate(0)',
          transition: 'transform 380ms var(--ease-soft)',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 11L11 3M11 3H4M11 3V10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
      </div>
    </div>
  );
}

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

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: mobile ? 16 : 24,
          alignItems: 'flex-start',
        }}>
          {SITE_CATS.map((c) => (
            <SiteCategoryCard key={c.title} cat={c} onClick={() => onPick(c)} mobile={mobile} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.SiteCategories = SiteCategories;