// 3C Detailing — main app

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3a5e8a",
  "showFeatureBanner": true,
  "heroLayout": "split",
  "font": "schibsted"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  schibsted:  { name: 'Schibsted Grotesk', stack: '"Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif', display: '500', italic: true,  letterSpacing: '-.035em' },
  geist:      { name: 'Geist',              stack: '"Geist", ui-sans-serif, system-ui, sans-serif',             display: '500', italic: false, letterSpacing: '-.04em' },
  manrope:    { name: 'Manrope',            stack: '"Manrope", ui-sans-serif, system-ui, sans-serif',           display: '600', italic: false, letterSpacing: '-.045em' },
  bricolage:  { name: 'Bricolage',          stack: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif', display: '500', italic: false, letterSpacing: '-.03em' },
  instrument: { name: 'Instrument',         stack: '"Instrument Serif", ui-serif, Georgia, serif',              display: '400', italic: true,  letterSpacing: '-.02em' },
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen]   = useStateApp(false);
  const [bookPrefill, setBookPrefill] = useStateApp(null);

  // Apply tweaks
  useEffectApp(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // accent-soft / accent-line derived
    const rgb = hexToRgb(t.accent);
    document.documentElement.style.setProperty('--accent-soft', `rgba(${rgb}, .14)`);
    document.documentElement.style.setProperty('--accent-line', `rgba(${rgb}, .32)`);
  }, [t.accent]);

  useEffectApp(() => {
    const f = FONT_STACKS[t.font] || FONT_STACKS.schibsted;
    document.documentElement.style.setProperty('--serif', f.stack);
    document.documentElement.style.setProperty('--sans',  f.stack);
    document.documentElement.style.setProperty('--display-weight', f.display);
    document.documentElement.style.setProperty('--display-tracking', f.letterSpacing);
    document.documentElement.setAttribute('data-font', t.font);
  }, [t.font]);

  // Reveal on scroll
  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  const openBook = (prefill) => {
    setBookPrefill(prefill && typeof prefill === 'object' && !prefill.nativeEvent ? prefill : null);
    setBookOpen(true);
  };

  return (
    <>
      <Nav onBook={openBook} />
      <Hero onBook={openBook} />
      {t.showFeatureBanner && <FeatureBanner onBook={openBook} />}
      <Services onBook={openBook} />
      <PricingMatrix onBook={openBook} />
      <Process />
      <ShopPreview />
      <FAQ />
      <Gallery />
      <Testimonials />
      <CTAStrip onBook={openBook} />
      <Footer />
      <BookingModal open={bookOpen} prefill={bookPrefill} onClose={() => setBookOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#3a5e8a','#2c4d75','#1e3a5f','#4a78ab','#c8a24b','#1a1a1a']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Typeface" />
        <TweakRadio
          label="Font"
          value={t.font}
          options={Object.keys(FONT_STACKS)}
          onChange={(v) => setTweak('font', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle
          label="12-month banner"
          value={t.showFeatureBanner}
          onChange={(v) => setTweak('showFeatureBanner', v)}
        />
      </TweaksPanel>
    </>
  );
}

function hexToRgb(hex) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map((c) => c + c).join('') : h, 16);
  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
}

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