// Pretty Rare Boutique — Hero (responsive)

function SiteHero({ onBook, onExplore }) {
  const mobile = useMobile();
  return (
    <section data-screen-label="hero" style={{
      position: 'relative',
      paddingTop: mobile ? 100 : 180,
      paddingBottom: mobile ? 60 : 96,
      overflow: 'hidden',
    }}>
      <div className="halo" style={{ top: '5%', right: '-10%', width: 720, height: 720 }} />

      <div className="wrap" style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.1fr 0.9fr',
        gap: mobile ? 40 : 80,
        alignItems: 'center',
      }}>
        {mobile && (
          <div className="fade" style={{ position: 'relative' }}>
            <div className="arch zoom-frame" style={{ width: '100%', aspectRatio: '4/3', boxShadow: 'var(--shadow-lg)' }}>
              <div style={{
                width: '100%', height: '100%',
                backgroundImage: `url('assets/imagery/interior-02.jpg')`,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }} />
            </div>
          </div>
        )}

        <div className="fade">
          <div className="eyebrow" style={{ marginBottom: mobile ? 20 : 32 }}>Cosmetic clinic · Palm Beach, Gold Coast</div>

          <h1 className="h-display">
            Pretty<br/>
            <span className="thin">should feel</span><br/>
            authentic.
          </h1>

          <p className="body" style={{ maxWidth: 440, marginTop: mobile ? 20 : 36 }}>
            A boutique aesthetic experience. Luxury treatments and IV infusions in
            a space designed to feel personal.
          </p>

          <div style={{ display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: mobile ? 16 : 28, marginTop: mobile ? 28 : 40, alignItems: mobile ? 'flex-start' : 'center' }}>
            <button className="btn btn--fill" onClick={onBook}>Book an appointment</button>
            <a className="link-cap" onClick={onExplore}>Explore treatments</a>
          </div>
        </div>

        {!mobile && (
          <div className="fade fade--d2" style={{ position: 'relative' }}>
            <div className="arch zoom-frame" style={{ width: '100%', aspectRatio: '3/4', boxShadow: 'var(--shadow-lg)' }}>
              <div style={{
                width: '100%', height: '100%',
                backgroundImage: `url('assets/imagery/interior-02.jpg')`,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }} />
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.SiteHero = SiteHero;