// Silk and Blow — salon choice modal.
// Nothing is stored: the choice is made fresh every time a salon CTA is clicked.
// ?location=lawrenceville | eastpoint pre-selects for shared and campaign links only.
// Salon Suites (Duluth) never routes through here.

const SALONS = [
  { id: 'lawrenceville', city: 'Lawrenceville', address: '118 Crogan Street, Lawrenceville, GA', landmark: 'Next to Bahamas Breeze', hours: 'Mon–Sat · 9–8',
    membershipUrl: 'https://app.perceny.com/site/silk-and-blow-salon-lawrenceville?purchaseMembership=true' },
  { id: 'eastpoint', city: 'East Point', address: '2841 Main Street, Suite 4, East Point, GA', landmark: 'Inside the Marketplace behind Burlington', hours: 'Tue–Sun · 9–7',
    membershipUrl: 'https://app.perceny.com/site/silk-and-blow-salon?purchaseMembership=true' },
];

const salonById = (id) => SALONS.find((s) => s.id === id) || null;

function readParamSalon() {
  try {
    const q = new URLSearchParams(window.location.search).get('location');
    return q && salonById(q) ? q : null;
  } catch (e) { return null; }
}

// useSalonModal() — every salon reserve / membership CTA calls run()
function useSalonModal() {
  const [open, setOpen] = React.useState(false);
  const paramSalon = React.useRef(readParamSalon());

  const go = (id) => {
    const s = salonById(id);
    if (s) window.open(s.membershipUrl, '_blank', 'noopener');
  };

  const run = () => {
    if (paramSalon.current) { go(paramSalon.current); return; }
    setOpen(true);
  };

  const choose = (id) => { setOpen(false); go(id); };

  return { open, run, choose, close: () => setOpen(false) };
}

function SalonModal({ open, onClose, onChoose, suitesHref }) {
  const sheetRef = React.useRef(null);
  const returnRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) { if (returnRef.current) { try { returnRef.current.focus(); } catch (e) {} returnRef.current = null; } return; }
    returnRef.current = document.activeElement;
    const el = sheetRef.current;
    if (el) { const first = el.querySelector('.salon-card'); (first || el).focus(); }
    const onKey = (e) => {
      if (e.key === 'Escape') { onClose(); return; }
      if (e.key !== 'Tab' || !el) return;
      const f = el.querySelectorAll('button, a[href]');
      if (!f.length) return;
      const a = f[0], z = f[f.length - 1];
      if (e.shiftKey && document.activeElement === a) { e.preventDefault(); z.focus(); }
      else if (!e.shiftKey && document.activeElement === z) { e.preventDefault(); a.focus(); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="loc-scrim" onClick={onClose}>
      <div className="loc-sheet" role="dialog" aria-modal="true" aria-labelledby="salon-modal-title" ref={sheetRef} tabIndex="-1" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
          <div>
            <span className="gold-eyebrow">Two salons</span>
            <h3 id="salon-modal-title" className="display" style={{ fontSize: 'clamp(26px,3.2vw,38px)', margin: '12px 0 0' }}>Which salon?</h3>
            <p style={{ fontFamily: 'var(--font-display)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--slate-70)', margin: '12px 0 0', maxWidth: 440 }}>Walk in at either salon any time, no appointment needed. To reserve a chair ahead, join Press Club.</p>
          </div>
          <button className="iconbtn" onClick={onClose} aria-label="Close"><Icon name="close" size={18} /></button>
        </div>

        <div className="loc-opts">
          {SALONS.map((s) => (
            <div key={s.id} className="salon-card" role="button" tabIndex="0"
              onClick={() => onChoose(s.id)}
              onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onChoose(s.id); } }}>
              <h4 className="display" style={{ fontSize: 'clamp(24px,2.8vw,32px)', margin: 0 }}>{s.city}</h4>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 15, lineHeight: 1.5, color: 'var(--slate-70)', margin: '10px 0 0' }}>{s.address}</p>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 14, lineHeight: 1.5, color: 'var(--slate-45)', margin: '6px 0 0' }}>{s.landmark}</p>
              <p style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--slate-45)', margin: '12px 0 0' }}>
                <Icon name="clock" size={13} /> {s.hours}
              </p>
              <span className="btn btn--gold btn--full" style={{ marginTop: 20, pointerEvents: 'none' }}>{`Reserve at ${s.city}`}</span>
            </div>
          ))}
        </div>

        <div className="loc-suites">
          <p style={{ fontFamily: 'var(--font-display)', fontSize: 14, color: 'var(--slate-70)', margin: 0 }}>Looking for Salon Suites in Duluth? Book directly with a stylist.</p>
          <a className="linkline" href={suitesHref || '/suites.html'} style={{ textDecoration: 'none', marginTop: 8 }}>See the suites <Icon name="arrowRight" size={14} className="arr" /></a>
        </div>
      </div>
    </div>
  );
}

// Walk-in first, membership second — the pairing that sits beside every salon CTA.
function WalkInNote({ tone, align }) {
  const light = tone === 'light';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, textAlign: align || 'left', maxWidth: 520 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(17px,1.7vw,20px)', lineHeight: 1.35, color: light ? '#fff' : 'var(--slate)' }}>Walk in anytime &mdash; no appointment needed, ever.</span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 14.5, lineHeight: 1.5, color: light ? 'rgba(255,255,255,.78)' : 'var(--slate-70)' }}>Or reserve your chair &mdash; online booking is a Press Club member benefit.</span>
    </div>
  );
}

Object.assign(window, { SALONS, salonById, useSalonModal, SalonModal, WalkInNote });