// app.jsx — main shell, router, tweaks, modal state

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "cycle",
  "timeOfDay": "auto",
  "headlineFont": "cormorant",
  "showPromise": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  cormorant: "'Cormorant Garamond', 'Times New Roman', serif",
  marcellus: "'Marcellus', serif",
  italiana:  "'Italiana', serif",
  tenor:     "'Tenor Sans', sans-serif",
  newsreader:"'Newsreader', Georgia, serif",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => {
    const hash = window.location.hash.replace('#', '');
    return ['home','tours','sky','prepare','booking'].includes(hash) ? hash : 'home';
  });
  const [bookingOpen, setBookingOpen] = React.useState(false);
  const [bookingTour, setBookingTour] = React.useState(null);
  const [hour, setHour] = React.useState(() => getSedonaHour(t.timeOfDay));

  // Apply headline font as a CSS var override
  React.useEffect(() => {
    document.documentElement.style.setProperty('--f-display', FONT_MAP[t.headlineFont] || FONT_MAP.cormorant);
  }, [t.headlineFont]);

  // Re-compute hour when timeOfDay tweak changes; tick on auto
  React.useEffect(() => {
    setHour(getSedonaHour(t.timeOfDay));
    if (t.timeOfDay === 'auto') {
      const id = setInterval(() => setHour(getSedonaHour('auto')), 60000);
      return () => clearInterval(id);
    }
  }, [t.timeOfDay]);

  const phase = getPhase(hour);

  // Sticky route in hash for shareability
  React.useEffect(() => {
    window.location.hash = route;
    window.scrollTo({ top: 0, behavior: 'auto' });
  }, [route]);

  const go = (r) => setRoute(r);
  const openBooking = (tour) => {
    setBookingTour(tour && tour.id ? tour : null);
    setBookingOpen(true);
  };

  const headerNight = route === 'home' && (phase === 'night' || phase === 'twilight' || phase === 'dawn' || phase === 'sunset');

  let Page = null;
  if (route === 'home') Page = <HomePage hour={hour} phase={phase} heroVariant={t.hero} showPromise={t.showPromise} onBook={openBooking} go={go} />;
  if (route === 'tours') Page = <ToursPage onBook={openBooking} go={go} />;
  if (route === 'sky') Page = <SkyPage onBook={openBooking} go={go} />;
  if (route === 'prepare') Page = <PreparePage onBook={openBooking} />;
  if (route === 'booking') Page = <BookingPage onBook={openBooking} go={go} />;

  return (
    <>
      <Header route={route} go={go} night={headerNight} onBook={() => openBooking()} />
      {Page}
      <Footer go={go} onBook={() => openBooking()} />
      <MobileStickyCTA onBook={() => openBooking()} phase={phase} />
      <BookingModal open={bookingOpen} onClose={() => setBookingOpen(false)} initialTour={bookingTour} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero" />
        <TweakSelect
          label="Hero variant"
          value={t.hero}
          options={[
            { value: 'cycle',    label: 'Live day/night cycle' },
            { value: 'twilight', label: 'Parallax twilight' },
            { value: 'starmap',  label: 'Constellation star map' },
            { value: 'reticle',  label: 'Telescope reticle' },
          ]}
          onChange={(v) => setTweak('hero', v)}
        />
        <TweakSelect
          label="Time of day"
          value={t.timeOfDay}
          options={[
            { value: 'auto',      label: 'Auto (live Sedona time)' },
            { value: 'morning',   label: 'Morning' },
            { value: 'afternoon', label: 'Afternoon' },
            { value: 'sunset',    label: 'Sunset' },
            { value: 'twilight',  label: 'Twilight' },
            { value: 'night',     label: 'Night' },
          ]}
          onChange={(v) => setTweak('timeOfDay', v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Headline font"
          value={t.headlineFont}
          options={[
            { value: 'cormorant',  label: 'Cormorant Garamond' },
            { value: 'marcellus',  label: 'Marcellus (carved)' },
            { value: 'italiana',   label: 'Italiana (couture)' },
            { value: 'tenor',      label: 'Tenor Sans (clean)' },
            { value: 'newsreader', label: 'Newsreader (editorial)' },
          ]}
          onChange={(v) => setTweak('headlineFont', v)}
        />

        <TweakSection label="Sections" />
        <TweakToggle
          label="Show Dark Sky Promise"
          value={t.showPromise}
          onChange={(v) => setTweak('showPromise', v)}
        />
      </TweaksPanel>
    </>
  );
}

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