/* app.jsx – Main app with font tweaks */

const FONT_PAIRS = {
  'Space Grotesk / DM Sans': {
    heading: "'Space Grotesk', system-ui, sans-serif",
    body: "'DM Sans', system-ui, sans-serif",
    import: 'family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700'
  },
  'Manrope / Source Sans 3': {
    heading: "'Manrope', system-ui, sans-serif",
    body: "'Source Sans 3', system-ui, sans-serif",
    import: 'family=Manrope:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600'
  },
  'Syne / Outfit': {
    heading: "'Syne', system-ui, sans-serif",
    body: "'Outfit', system-ui, sans-serif",
    import: 'family=Syne:wght@400;500;600;700&family=Outfit:wght@400;500;600'
  },
  'Work Sans / Nunito Sans': {
    heading: "'Work Sans', system-ui, sans-serif",
    body: "'Nunito Sans', system-ui, sans-serif",
    import: 'family=Work+Sans:wght@400;500;600;700&family=Nunito+Sans:wght@400;500;600'
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPair": "Space Grotesk / DM Sans",
  "accentColor": "#4338CA"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = {
  '#4338CA': { accent: '#4338CA', hover: '#3730A3', light: '#EEF2FF', glow: 'rgba(67,56,202,.06)', block: '#3730A3' },
  '#0E7C6B': { accent: '#0E7C6B', hover: '#0A6B5C', light: '#ECFDF5', glow: 'rgba(14,124,107,.06)', block: '#0A6B5C' },
  '#B91C1C': { accent: '#B91C1C', hover: '#991B1B', light: '#FEF2F2', glow: 'rgba(185,28,28,.06)', block: '#991B1B' },
  '#0369A1': { accent: '#0369A1', hover: '#075985', light: '#F0F9FF', glow: 'rgba(3,105,161,.06)', block: '#075985' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Scroll to hash anchor after React mounts (fixes cross-page navigation)
  React.useEffect(() => {
    const hash = window.location.hash;
    if (hash) {
      const el = document.querySelector(hash);
      if (el) {
        // Jump to just above the section instantly, then smooth scroll in
        const top = el.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top: Math.max(0, top - 160), behavior: 'instant' });
        setTimeout(() => {
          window.scrollTo({ top, behavior: 'smooth' });
        }, 80);
      }
    }
  }, []);

  React.useEffect(() => {
    const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS['Space Grotesk / DM Sans'];
    const root = document.documentElement.style;
    root.setProperty('--font-heading', pair.heading);
    root.setProperty('--font-body', pair.body);
    root.setProperty('--font', pair.body);

    /* Load font if not already loaded */
    const linkId = '__font-import';
    let link = document.getElementById(linkId);
    if (!link) {
      link = document.createElement('link');
      link.id = linkId;
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    }
    link.href = `https://fonts.googleapis.com/css2?${pair.import}&display=swap`;
  }, [t.fontPair]);

  React.useEffect(() => {
    const preset = ACCENT_OPTIONS[t.accentColor] || ACCENT_OPTIONS['#4338CA'];
    const root = document.documentElement.style;
    root.setProperty('--accent', preset.accent);
    root.setProperty('--accent-hover', preset.hover);
    root.setProperty('--accent-light', preset.light);
    root.setProperty('--accent-glow', preset.glow);
    root.setProperty('--accent-block', preset.block);
  }, [t.accentColor]);

  return (
    <React.Fragment>
      <Navbar />
      <main>
        <Hero />
        <About />
        <Services />
        <Materials />
        <FAQ />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Typography" />
        <TweakSelect
          label="Font Pair"
          value={t.fontPair}
          options={Object.keys(FONT_PAIRS)}
          onChange={(v) => setTweak('fontPair', v)}
        />
        <TweakSection label="Colors" />
        <TweakColor
          label="Accent"
          value={t.accentColor}
          options={['#4338CA', '#0E7C6B', '#B91C1C', '#0369A1']}
          onChange={(v) => setTweak('accentColor', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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