// Pretty Rare Boutique — Treatment menu (responsive, real pricing)

const ALL_TREATMENTS = [
  { name: 'Cosmetic consultation',               dur: '20 mins',  price: 'Complimentary', img: 'assets/imagery/consultation-01.jpg', cat: 'Consult' },
  { name: 'Wrinkle treatment + consultation',    dur: '35 mins',  price: 'From $390',     img: 'assets/imagery/portrait-01.jpg',     cat: 'Cosmetic' },
  { name: 'Lip consult + treatment',             dur: '1 hour',   price: 'From $690',     img: 'assets/imagery/lips.jpg',            cat: 'Cosmetic' },
  { name: 'Volumising consult + treatment',      dur: '1 hour',   price: 'From $790',     img: 'assets/imagery/portrait-03.jpg',     cat: 'Cosmetic' },
  { name: 'Rejuran consult + treatment',         dur: '45 mins',  price: 'From $590',     img: 'assets/imagery/portrait-02.jpg',     cat: 'Skin' },
  { name: 'Collagen stimulator + treatment',     dur: '30 mins',  price: 'From $890',     img: 'assets/imagery/lifestyle-04.jpg',    cat: 'Skin' },
  { name: 'Brazilian lymphatic drainage',        dur: '45 mins',  price: 'From $180',     img: 'assets/imagery/lifestyle-05.jpg',    cat: 'Lymphatic' },
  { name: 'Restorative IV infusion',             dur: '40 mins',  price: 'From $280',     img: 'assets/imagery/lifestyle-06.jpg',    cat: 'IV' },
  { name: 'Review appointment',                  dur: '30 mins',  price: 'Complimentary', img: 'assets/imagery/interior-01.jpg',     cat: 'Ritual' },
];

function SiteMenuRow({ t, onBook, onHover, hovered, idx, mobile }) {
  const isMe = hovered === idx;
  const someoneElse = hovered !== null && !isMe;

  if (mobile) {
    return (
      <div style={{
        padding: '20px 0',
        borderBottom: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
      }}>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 16, letterSpacing: '-0.015em', color: 'var(--fg)', marginBottom: 4 }}>{t.name}</div>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, color: 'var(--fg-muted)' }}>{t.dur} · {t.price}</div>
        </div>
        <button onClick={() => onBook(t)} className="btn btn--sm" style={{ flexShrink: 0 }}>Book</button>
      </div>
    );
  }

  return (
    <div
      onMouseEnter={() => onHover(idx)}
      style={{
        display: 'grid',
        gridTemplateColumns: '60px 1fr auto auto auto',
        gap: 32, alignItems: 'center',
        padding: '26px 0',
        borderBottom: '1px solid var(--border)',
        opacity: someoneElse ? 0.4 : 1,
        transition: 'opacity 320ms var(--ease-soft)',
        cursor: 'pointer',
      }}
    >
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: isMe ? 'var(--accent)' : 'var(--fg-muted)', transition: 'color 320ms var(--ease-soft)' }}>{String(idx + 1).padStart(2, '0')}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 22, letterSpacing: '-0.025em', color: 'var(--fg)', transform: isMe ? 'translateX(8px)' : 'translateX(0)', transition: 'transform 320ms var(--ease-soft)' }}>{t.name}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 13, color: 'var(--fg-muted)', letterSpacing: '0.02em', minWidth: 60, textAlign: 'right' }}>{t.dur}</div>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 15, letterSpacing: '-0.005em', color: 'var(--fg)', minWidth: 130, textAlign: 'right' }}>{t.price}</div>
      <button onClick={() => onBook(t)} className="link-cap" style={{ background: 'transparent', border: 'none', padding: 0, paddingBottom: 4, borderBottom: '1px solid var(--fg)', opacity: isMe ? 1 : 0.6, transition: 'opacity 220ms var(--ease-soft)' }}>Book</button>
    </div>
  );
}

function SiteMenu({ onBook }) {
  const [hovered, setHovered] = React.useState(null);
  const mobile = useMobile();
  const previewIdx = hovered ?? 0;

  return (
    <section data-screen-label="menu" className="section" style={{ position: 'relative' }} onMouseLeave={() => setHovered(null)}>
      <div className="wrap">
        <div style={{ marginBottom: mobile ? 32 : 56, display: 'flex', flexDirection: mobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: mobile ? 'flex-start' : 'flex-end', flexWrap: 'wrap', gap: 16 }}>
          <h2 className="h-1">Considered. Personalised.<br/><span className="thin">Always yours.</span></h2>
          <p className="body body--sm" style={{ maxWidth: 320 }}>Starting prices shown. Personalised quote in consultation. Every treatment includes a complimentary two-week review.</p>
        </div>

        {mobile ? (
          <div>
            {ALL_TREATMENTS.map((t, i) => (
              <SiteMenuRow key={t.name + i} t={t} idx={i} hovered={hovered} onHover={setHovered} onBook={onBook} mobile={true} />
            ))}
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'flex-start' }}>
            <div>
              {ALL_TREATMENTS.map((t, i) => (
                <SiteMenuRow key={t.name + i} t={t} idx={i} hovered={hovered} onHover={setHovered} onBook={onBook} mobile={false} />
              ))}
            </div>
            <div style={{ position: 'sticky', top: 120, aspectRatio: '3/4', overflow: 'hidden', borderRadius: 12, boxShadow: 'var(--shadow-md)' }}>
              {ALL_TREATMENTS.map((t, i) => (
                <div key={i} style={{ position: 'absolute', inset: 0, backgroundImage: `url('${t.img}')`, backgroundSize: 'cover', backgroundPosition: 'center', opacity: i === previewIdx ? 1 : 0, transform: i === previewIdx ? 'scale(1)' : 'scale(1.06)', transition: 'opacity 600ms var(--ease-soft), transform 1200ms var(--ease-soft)' }} />
              ))}
              <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: 'var(--pr-off-100)', textShadow: '0 2px 16px rgba(0,0,0,0.5)' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 10, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(248, 245, 244, 0.92)', marginBottom: 8 }}>{ALL_TREATMENTS[previewIdx].cat}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 18, letterSpacing: '-0.02em', maxWidth: 240, lineHeight: 1.2 }}>{ALL_TREATMENTS[previewIdx].name}</div>
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{String(previewIdx + 1).padStart(2, '0')}/{String(ALL_TREATMENTS.length).padStart(2, '0')}</div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.SiteMenu = SiteMenu;