/* =========================================================================
   ASPIRE FC — router, tweaks & mount
   ========================================================================= */

const ROUTES = {
  home: HomePage, about: AboutPage, programs: ProgramsPage,
  apex: ApexPage, commitments: CommitsPage, camps: CampsPage, sponsors: SponsorsPage, shop: ShopPage, tryouts: TryoutsPage, locations: LocationsPage, contact: ContactPage,
  'first-step': FirstStepPage, adp: AdpPage,
};

function useRoute() {
  const parse = () => {
    const h = window.location.hash.replace(/^#\/?/, '').trim();
    return ROUTES[h] ? h : 'home';
  };
  const [route, setRoute] = React.useState(parse());
  React.useEffect(() => {
    const on = () => setRoute(parse());
    window.addEventListener('hashchange', on);
    return () => window.removeEventListener('hashchange', on);
  }, []);
  return route;
}

/* ---- Tweak definitions ---- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#CBA379",
  "fontPair": "anton-montserrat",
  "radius": 5,
  "ctaHeadline": "greatness"
}/*EDITMODE-END*/;

// Closing call-to-action headline options (pick via Tweaks)
const CTA_HEADLINES = {
  greatness: 'Greatness starts here.',
  made: 'This is where players are made.',
  rise: 'Rise with the best.',
  place: 'Earn your place.',
  next: 'Your next level is calling.',
  ready: 'Ready to aspire?',
};

// Shared context so CTABand (in home.jsx) can read the chosen headline
window.__CtaCtx = window.__CtaCtx || React.createContext(CTA_HEADLINES.greatness);

// Curated accent swatches — brand gold first, plus on-brand alternates.
const ACCENTS = ['#CBA379', '#A6A6A6', '#1F1D1D', '#B98A4B', '#0E7C66', '#9E2B25'];

const FONT_PAIRS = {
  'anton-montserrat': { display: "'Anton'",      head: "'Montserrat'",        body: "'Montserrat'",    label: 'Anton · Montserrat (brand)' },
  'anton-barlow':     { display: "'Anton'",      head: "'Barlow Condensed'", body: "'Barlow'",        label: 'Anton · Barlow (sporty)' },
  'oswald-mont':      { display: "'Oswald'",     head: "'Oswald'",           body: "'Montserrat'",    label: 'Oswald · Montserrat (clean)' },
  'bebas-barlow':     { display: "'Bebas Neue'", head: "'Barlow Condensed'", body: "'Barlow'",        label: 'Bebas · Barlow (bold)' },
};

function applyTweaks(t) {
  const root = document.documentElement.style;
  // accent → derive accent-ink (darker) and keep fg white
  root.setProperty('--accent', t.accent);
  root.setProperty('--accent-ink', `color-mix(in oklch, ${t.accent} 78%, black)`);
  root.setProperty('--radius', t.radius + 'px');
  const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS['anton-barlow'];
  root.setProperty('--font-display', `${fp.display}, 'Arial Narrow', sans-serif`);
  root.setProperty('--font-head', `${fp.head}, 'Arial Narrow', sans-serif`);
  root.setProperty('--font-body', `${fp.body}, system-ui, sans-serif`);
}

function App() {
  const route = useRoute();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const Page = ROUTES[route];
  const CtaCtx = window.__CtaCtx;

  React.useEffect(() => { applyTweaks(t); }, [t]);
  useReveal();

  return (
    <>
      <Navbar route={route} />
      <CtaCtx.Provider value={CTA_HEADLINES[t.ctaHeadline] || CTA_HEADLINES.greatness}>
        <main>
          <Page />
        </main>
      </CtaCtx.Provider>
      <Footer />
      <PromoModal />

      <TweaksPanel>
        <TweakSection label="Brand color" />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS} onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Font pairing" value={t.fontPair}
          options={Object.keys(FONT_PAIRS).map((k) => ({ value: k, label: FONT_PAIRS[k].label }))}
          onChange={(v) => setTweak('fontPair', v)} />
        <TweakSection label="Shape" />
        <TweakSlider label="Corner radius" value={t.radius} min={0} max={18} step={2} unit="px" onChange={(v) => setTweak('radius', v)} />
        <TweakSection label="Copy" />
        <TweakSelect label="Closing headline" value={t.ctaHeadline}
          options={Object.keys(CTA_HEADLINES).map((k) => ({ value: k, label: CTA_HEADLINES[k] }))}
          onChange={(v) => setTweak('ctaHeadline', v)} />
      </TweaksPanel>
    </>
  );
}

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