/* VillaCash — App shell + Tweaks */
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B9912F",
  "warmth": "default",
  "display": "Hanken Grotesk"
}/*EDITMODE-END*/;

function darken(hex, amt = 0.16) {
  const h = hex.replace('#', '');
  const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r * (1 - amt)); g = Math.round(g * (1 - amt)); b = Math.round(b * (1 - amt));
  return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
}

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

  useEffectA(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-dk', darken(t.accent, 0.18));
    root.style.setProperty('--display', `'${t.display}', system-ui, sans-serif`);
    root.setAttribute('data-warmth', t.warmth);
  }, [t.accent, t.warmth, t.display]);

  return (
    <>
      <Nav />
      <Hero />
      <Marquee />
      <Premise />
      <ValueStack />
      <Marquee light />
      <Reels />
      <ReelsPlans />
      <BookingDemo />
      <Offer />
      <Faq />
      <FinalCta />
      <Footer />
      <OfferBar />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Brand accent" value={t.accent}
          options={['#3C7A57', '#C1654A', '#2E7D7B', '#B9912F']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Surface" />
        <TweakRadio label="Background warmth" value={t.warmth}
          options={['cool', 'default', 'warm']}
          onChange={(v) => setTweak('warmth', v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Display font" value={t.display}
          options={['Schibsted Grotesk', 'Space Grotesk', 'Sora', 'Hanken Grotesk']}
          onChange={(v) => setTweak('display', v)} />
      </TweaksPanel>
    </>
  );
}

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