// Facette — Locations page

const { BRANCHES: BRANCH_DATA } = window.FacetteData;

function Locations({ branch, setBranch, openBook, isMobile }) {
  return (
    <React.Fragment>
      <section className="loc-hero">
        <div className="loc-hero-inner">
          <div className="eyebrow"><span className="dot"></span>Find us</div>
          <h1>Two doors,<br/><em>same therapists.</em></h1>
          <p className="lede">
            Jumeirah is the residential outpost — quieter rooms, longer windows. Business Bay is the flagship — bigger team, later last-bookings.
            Pick the one closer to your week.
          </p>
        </div>
      </section>

      <section className="loc-grid">
        <div className="loc-grid-inner">
          <LocCard b={BRANCH_DATA.jumeirah} active={branch === 'jumeirah'} onPick={() => setBranch('jumeirah')} openBook={openBook} />
          <LocCard b={BRANCH_DATA.business_bay} active={branch === 'business_bay'} onPick={() => setBranch('business_bay')} openBook={openBook} />
        </div>
      </section>

      <section className="section" style={{ background: 'var(--bg-warm)' }}>
        <div className="container">
          <SectionHead
            eyebrow="On the map"
            title="Both branches are <em>15 minutes</em> apart."
            lede="Stay an Airbnb in Business Bay, breakfast in Jumeirah — we will see you at either."
          />
          <div className="location-map-grid">
            <LocationMapCard b={BRANCH_DATA.jumeirah} />
            <LocationMapCard b={BRANCH_DATA.business_bay} />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Visiting Dubai?"
            title="<em>Hotel pickup</em><br/>by request."
            lede="If you are staying at a hotel within 15 minutes of either branch, we will arrange the car. Drop a note when you book."
            action={<button className="btn btn-primary" onClick={() => openBook()}>Book now</button>}
          />
        </div>
      </section>
    </React.Fragment>
  );
}

function Legend({ color, label }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
      <div style={{ width: 10, height: 10, borderRadius: 999, background: color }}></div>
      <div style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>{label}</div>
    </div>
  );
}

function LocationMapCard({ b }) {
  const query = encodeURIComponent(`${b.name} ${b.address} ${b.addressLine2} ${b.addressLine3} Dubai`);
  return (
    <div className="location-map-card">
      <iframe
        title={`Google Maps for ${b.name}`}
        src={`https://www.google.com/maps?q=${query}&z=15&output=embed`}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
      />
      <div className="location-map-card__footer">
        <div>
          <strong>{b.name}</strong>
          <span>{b.address} · {b.addressLine2}</span>
        </div>
        <a href={`https://www.google.com/maps/search/?api=1&query=${query}`} target="_blank" rel="noopener">
          Open map
        </a>
      </div>
    </div>
  );
}

function LocCard({ b, active, onPick, openBook }) {
  return (
    <div className={`loc-card ${b.flagship ? 'flagship' : ''}`} style={{
      borderColor: active ? 'var(--ink)' : 'var(--rule)',
      borderWidth: active ? 2 : 1,
    }}>
      <div className="lc-img">
        {b.id === 'jumeirah'
          ? <Img src="media/interior-facette-10.webp" alt={b.name} />
          : <Img label={`Business Bay\ninterior shot · TBC`} />}
      </div>
      <div className="lc-body">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h3>{b.name}</h3>
          {active && <div className="chip chip-dark">Active branch</div>}
        </div>
        <div className="lc-row">
          <div className="lc-lab">Address</div>
          <div className="lc-val">
            {b.address}<br/>
            {b.addressLine2}<br/>
            {b.addressLine3}
            <br/>
            <span style={{ fontFamily: '"Courier New", monospace', fontSize: 11, color: 'var(--ink-3)' }}>Plus code · {b.pluscode}</span>
          </div>
        </div>
        <div className="lc-row">
          <div className="lc-lab">Phone</div>
          <div className="lc-val">
            <a href={b.phoneHref}>{b.phone}</a>
            {b.altPhone && <><br/><a href={`tel:${b.altPhone.replace(/\s/g, '')}`}>{b.altPhone}</a></>}
          </div>
        </div>
        <div className="lc-row">
          <div className="lc-lab">Hours</div>
          <div className="lc-val">{b.hours}</div>
        </div>
        <div className="lc-row">
          <div className="lc-lab">Booking</div>
          <div className="lc-val">
            <a href={b.fresha} target="_blank" rel="noopener">Fresha direct →</a>
            <br/>
            <a href={window.FacetteData.WHATSAPP} target="_blank" rel="noopener">WhatsApp →</a>
          </div>
        </div>
        <div className="lc-ctas">
          {!active && (
            <button className="btn btn-primary btn-sm" onClick={onPick}>Use this branch</button>
          )}
          <button className="btn btn-secondary btn-sm" onClick={() => { onPick(); openBook(); }}>Book at {b.short}</button>
        </div>
      </div>
    </div>
  );
}

window.Locations = Locations;