// Silk and Blow — homepage Salon Suites banner (Duluth)
const SUITES_HREF = window.SUITES_HREF || '/suites.html';

function SuitesBanner() {
  return (
    <section id="suites" className="section bleed" style={{ position: 'relative', background: '#fff', borderTop: '1px solid rgba(194,163,94,.28)', borderBottom: '1px solid rgba(194,163,94,.28)', overflow: 'hidden' }}>
      <div className="orb orb-champ orb-float" style={{ width: 420, height: 420, top: '-140px', right: '6%', opacity: 0.45 }} />
      <div className="wrap mem-grid" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: 'minmax(0,1.04fr) minmax(0,.96fr)', gap: 'clamp(34px,5vw,84px)', alignItems: 'center' }}>
        <div>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
            <span className="gold-tick" /><span className="gold-eyebrow">Salon Suites · Duluth, GA</span>
          </div>
          <h2 className="display reveal" data-d="1" style={{ fontSize: 'clamp(34px,4.4vw,62px)', margin: 0 }}>Duluth is a suite<br />house, not a salon.</h2>
          <div className="gold-rule reveal" data-d="1" style={{ maxWidth: 200, marginTop: 26 }} />
          <p className="lead reveal" data-d="2" style={{ marginTop: 26, maxWidth: 560 }}>Lawrenceville and East Point are our walk-in chairs. Duluth is Salon Suites by Silk &amp; Blow &mdash; a house of private suites rented by independent stylists who keep their own books and their own hours.</p>
          <p className="lead reveal" data-d="3" style={{ marginTop: 18, maxWidth: 560 }}>If you are coming to Duluth, you book directly with your stylist. If you are a professional looking for a room of your own, we would love to hear from you.</p>
          <div className="reveal mem-cta" data-d="4" style={{ marginTop: 34, display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 20 }}>
            <a className="btn btn--gold" href={SUITES_HREF}>Meet our suite stylists <Icon name="arrowRight" size={16} /></a>
            <a className="linkline" href={(window.BOOKING_URLS || {}).suitesAllStylists} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>Book with a suite stylist <Icon name="arrowRight" size={14} className="arr" /></a>
          </div>
        </div>
        <div className="reveal" data-d="2">
          <div className="tile mem-photo" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--glass-radius)' }}>
            <img src="/assets/images/loc-duluth.png" alt="The Duluth location, home to Salon Suites by Silk and Blow" />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 52%, rgba(20,28,40,.42))' }} />
            <span className="tagbadge" style={{ position: 'absolute', top: 18, left: 18 }}>Eight Private Suites</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SuitesBanner, SUITES_HREF });