// Silk and Blow — homepage app: data, state, mount

// ---------------- data ----------------
const LOCATIONS = [
  { id: 'eastpoint', city: 'East Point', address: '2841 Main Street, Suite 4', hours: 'Tue–Sun · 9–7', image: '/assets/images/loc-east-point.png' },
  { id: 'lawrenceville', city: 'Lawrenceville', address: '118 Crogan Street', hours: 'Mon–Sat · 9–8', image: '/assets/images/loc-lawrenceville.png' },
  { id: 'duluth', city: 'Duluth', address: '3580 Breckinridge Boulevard, Suite 103', hours: 'Tue–Sun · 10–7', image: '/assets/images/loc-duluth.png' },
];

// salon cards for the booking band: salon links + landmark from location.jsx, photo from LOCATIONS
const SALON_CARDS = SALONS.map((s) => ({ ...s, image: (LOCATIONS.find((l) => l.id === s.id) || {}).image }));

// ---------------- app ----------------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "fullbleed",
  "accent": ["#a8853f", "#e0c789", "#b8924a"],
  "action": "sky",
  "calmMotion": false
}/*EDITMODE-END*/;

function App() {
  const t = TWEAK_DEFAULTS; // live tweak panel is a design-tool feature; production uses the committed values
  const [atTop, setAtTop] = React.useState(true);

  // accent + action theming -> CSS vars
  React.useEffect(() => {
    const root = document.documentElement;
    const a = Array.isArray(t.accent) ? t.accent : ['#a8853f', '#e0c789', '#b8924a'];
    root.style.setProperty('--gold-deep', a[0]);
    root.style.setProperty('--gold', a[2] || a[0]);
    root.style.setProperty('--grad-gold-text', `linear-gradient(90deg, ${a[0]} 0%, ${a[1]} 45%, ${a[2] || a[0]} 100%)`);
    root.style.setProperty('--grad-gold-rule', `linear-gradient(90deg, ${a[0]}00 0%, ${a[0]}b3 50%, ${a[0]}00 100%)`);
    const actionMap = { sky: '#008afc', royal: '#0d63d1', slate: '#283446' };
    root.style.setProperty('--sky-blue', actionMap[t.action] || '#008afc');
  }, [t.accent, t.action]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--reveal-on', t.calmMotion ? '0' : '1');
  }, [t.calmMotion]);

  // header transparency only when fullbleed hero at top
  React.useEffect(() => {
    const onScroll = () => setAtTop(window.scrollY < 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // scroll reveals
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.is-in)');
    if (t.calmMotion) { els.forEach((e) => e.classList.add('is-in')); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, [t.heroVariant, t.calmMotion]);

  const headerOnDark = atTop && t.heroVariant === 'fullbleed';

  // ---- nav ----
  const nav = (id) => {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 70; window.scrollTo({ top: y, behavior: 'smooth' }); }
  };

  // ---- booking ----
  // Every salon reserve / membership CTA opens the salon modal; nothing is stored.
  const sal = useSalonModal();

  return (
    <React.Fragment>
      <Header atTop={headerOnDark} showCart={false}
        onBook={sal.run} onNav={nav} />

      <main>
        <Hero variant={t.heroVariant} onBook={sal.run} onNav={nav} />
        <Booking salons={SALON_CARDS} onReserve={sal.run} suitesHref={window.SUITES_HREF} />
        <Services salons={SALONS} onReserve={sal.run} />
        <PressClub onJoin={sal.run} />
        <SuitesBanner />
        <Founder onBook={sal.run} />
        <SocialProof />
        <Footer locations={LOCATIONS.map((l) => (l.id === 'duluth'
          ? { ...l, hours: 'Salon Suites · hours set by each stylist', cta: { label: 'See Salon Suites', fn: () => { window.location.href = window.SUITES_HREF; } } }
          : { ...l, cta: { label: 'Reserve your chair', fn: sal.run } }))} onBook={sal.run} onNav={nav} />
      </main>

      <SalonModal open={sal.open} onClose={sal.close} onChoose={sal.choose} suitesHref={window.SUITES_HREF} />

    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);