// Pretty Rare Boutique — Visit (real address, hours, contact)

function SiteVisit({ onBook }) {
  const mobile = useMobile();
  return (
    <section data-screen-label="visit" className="section">
      <div className="wrap">
        <div style={{ marginBottom: mobile ? 32 : 56 }}>
          <h2 className="h-1">Pretty Rare<br/><span className="thin">is by appointment.</span></h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 36 : 64, alignItems: 'center' }}>
          {!mobile && (
            <div className="zoom-frame" style={{ width: '100%', aspectRatio: '4/5', boxShadow: 'var(--shadow-md)' }}>
              <div style={{ width: '100%', height: '100%', backgroundImage: `url('assets/imagery/reception-01.jpg')`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
            </div>
          )}

          <div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: mobile ? 24 : 36 }}>
              <VisitBlock label="Boutique" lines={['Shop 3 / 21–25', 'Palm Beach Avenue', 'Palm Beach, Gold Coast']} />
              <VisitBlock label="Hours" lines={['Wed to Sat', '9:00 to 19:30']} />
              <VisitBlock label="Contact" lines={['hello@prettyrareboutique.com', 'Text 0450 466 052']} />
              <VisitBlock label="Instagram" lines={['@prettyrareboutique']} />
            </div>

            <div style={{ marginTop: 36, display: 'flex', flexDirection: mobile ? 'column' : 'row', gap: 14, flexWrap: 'wrap', alignItems: mobile ? 'flex-start' : 'center' }}>
              <a href="https://prettyrareboutique.gettimely.com" target="_blank" rel="noopener noreferrer" className="btn btn--fill" style={{ textDecoration: 'none' }}>Book an appointment</a>
              <a href="https://maps.google.com/?q=21-25+Palm+Beach+Avenue+Palm+Beach" target="_blank" rel="noopener noreferrer" className="link-cap">Open in maps</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function VisitBlock({ label, lines }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 12 }}>{label}</div>
      {lines.map((l, i) => (
        <div key={i} style={{ fontFamily: 'var(--font-sans)', fontWeight: 400, fontSize: 14, lineHeight: 1.7, color: 'var(--fg)' }}>{l}</div>
      ))}
    </div>
  );
}

window.SiteVisit = SiteVisit;