// app.jsx — main entry: routing, type system, tweaks panel

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "editorial",
  "nav": "centered",
  "type": "cormorant-inter",
  "density": "regular"
}/*EDITMODE-END*/;

// Type pairings — within brand spirit, all editorial / display-italic + crisp sans
const TYPE_PAIRINGS = {
  'cormorant-inter': {
    label: 'Cormorant + Inter Tight',
    google: 'family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter+Tight:wght@300;400;500;600',
    serif: "'Cormorant Garamond', Georgia, serif",
    sans:  "'Inter Tight', -apple-system, sans-serif",
  },
  'ebgaramond-inter': {
    label: 'EB Garamond + Inter',
    google: 'family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500',
    serif: "'EB Garamond', Georgia, serif",
    sans:  "'Inter', -apple-system, sans-serif",
  },
  'playfair-jost': {
    label: 'Playfair Display + Jost',
    google: 'family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Jost:wght@300;400;500',
    serif: "'Playfair Display', Georgia, serif",
    sans:  "'Jost', -apple-system, sans-serif",
  },
  'libre-archivo': {
    label: 'Libre Caslon + Archivo',
    google: 'family=Libre+Caslon+Text:ital,wght@0,400;1,400&family=Libre+Caslon+Display&family=Archivo:wght@300;400;500',
    serif: "'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif",
    sans:  "'Archivo', -apple-system, sans-serif",
  },
};

function GoogleFontInjector({ family }) {
  useEffectA(() => {
    const id = '__pinnacle_font_link';
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement('link');
      link.id = id;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }
    link.href = `https://fonts.googleapis.com/css2?${family}&display=swap`;
  }, [family]);
  return null;
}

// ───────────────────────────────────────────────────────────────────────
// App
// ───────────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { route } = useHashRoute();

  // Dynamic page title per route
  useEffectA(() => {
    const titles = {
      '':           'Pinnacle Hills Portraits | Family, Maternity & Branding Photographer | Rogers, AR',
      'home':       'Pinnacle Hills Portraits | Family, Maternity & Branding Photographer | Rogers, AR',
      'portfolio':  'Portfolio | Pinnacle Hills Portraits | Northwest Arkansas',
      'about':      'About the Studio | Pinnacle Hills Portraits | Rogers, AR',
      'investment': 'Investment & Pricing | Pinnacle Hills Portraits | Rogers, AR',
      'contact':    'Book a Session | Pinnacle Hills Portraits | Rogers, AR',
    };
    document.title = titles[route] || titles[''];
  }, [route]);

  // Apply type system + density via CSS custom properties on root
  useEffectA(() => {
    const pair = TYPE_PAIRINGS[t.type] || TYPE_PAIRINGS['cormorant-inter'];
    document.documentElement.style.setProperty('--serif', pair.serif);
    document.documentElement.style.setProperty('--sans',  pair.sans);
    document.documentElement.dataset.density = t.density;
  }, [t.type, t.density]);

  // Decide if nav sits over a dark hero (so it can switch tone to cream).
  // Editorial, fullbleed, and carousel all use cream type — nav matches.
  const heroIsDark = t.hero === 'fullbleed' || t.hero === 'carousel' || t.hero === 'editorial';
  const overHero = (route === '' || route === 'home') && heroIsDark;

  const pair = TYPE_PAIRINGS[t.type] || TYPE_PAIRINGS['cormorant-inter'];

  let page;
  switch (route) {
    case 'portfolio':  page = <Portfolio />; break;
    case 'about':      page = <About />; break;
    case 'investment': page = <Investment />; break;
    case 'contact':       page = <Contact />; break;
    case 'questionnaire': page = <Questionnaire />; break;
    default:              page = <Home heroVariant={t.hero} />;
  }

  return (
    <React.Fragment>
      <GoogleFontInjector family={pair.google} />
      <Nav
        variant={t.nav}
        currentRoute={route === '' ? 'home' : route}
        overHero={overHero}
        heroTone="dark"
      />
      {page}
      {route !== 'contact' || true ? <Footer /> : null}

      {/* Tweaks panel */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Page" />
        <TweakSelect label="Page"
          value={'#' + (window.location.hash || '#/').replace(/^#/, '')}
          options={[
            { value: '#/', label: 'Home' },
            { value: '#/portfolio', label: 'Portfolio' },
            { value: '#/about', label: 'About' },
            { value: '#/investment', label: 'Investment' },
            { value: '#/contact', label: 'Contact' },
          ]}
          onChange={(v) => navTo(v)} />

        <TweakSection label="Hero (home only)" />
        <TweakRadio label="Hero treatment" value={t.hero}
          options={[
            { value: 'editorial', label: 'Editorial' },
            { value: 'fullbleed', label: 'Full-bleed' },
            { value: 'carousel',  label: 'Carousel' },
            { value: 'split',     label: 'Split' },
            { value: 'mosaic',    label: 'Mosaic' },
            { value: 'matted',    label: 'Matted' },
          ]}
          onChange={(v) => { setTweak('hero', v); if (route !== '') navTo('#/'); }} />

        <TweakSection label="Navigation" />
        <TweakRadio label="Nav style" value={t.nav}
          options={[
            { value: 'centered', label: 'Centered' },
            { value: 'leftmark', label: 'Left mark' },
            { value: 'minimal',  label: 'Minimal' },
            { value: 'thin',     label: 'Thin' },
          ]}
          onChange={(v) => setTweak('nav', v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Type pairing" value={t.type}
          options={Object.entries(TYPE_PAIRINGS).map(([k, v]) => ({ value: k, label: v.label }))}
          onChange={(v) => setTweak('type', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={[
            { value: 'sparse',  label: 'Sparse' },
            { value: 'regular', label: 'Regular' },
            { value: 'rich',    label: 'Rich' },
          ]}
          onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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