/* app.jsx — composes the homepage + Tweaks (Hero / Services / Portfolio variations) */
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "marquee",
  "servicesVariant": "cards",
  "portfolioVariant": "rows",
  "accent": "oxblood"
}/*EDITMODE-END*/;

const ACCENTS = {
  oxblood: { '--oxblood': '#7B1E23', '--oxblood-hi': '#8E2A2F', '--oxblood-lo': '#631418', '--bloodstone': '#C4565C', '--oxblood-12': 'rgba(123,30,35,0.12)', '--oxblood-06': 'rgba(123,30,35,0.06)' },
  wine:    { '--oxblood': '#5E1B2E', '--oxblood-hi': '#73223A', '--oxblood-lo': '#4A1424', '--bloodstone': '#B85A78', '--oxblood-12': 'rgba(94,27,46,0.14)', '--oxblood-06': 'rgba(94,27,46,0.06)' },
  bronze:  { '--oxblood': '#8A4A24', '--oxblood-hi': '#9E5A30', '--oxblood-lo': '#6E3717', '--bloodstone': '#C98A4E', '--oxblood-12': 'rgba(138,74,36,0.13)', '--oxblood-06': 'rgba(138,74,36,0.06)' },
};

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

  // apply accent preset to the document root
  useEffectApp(() => {
    const vars = ACCENTS[t.accent] || ACCENTS.oxblood;
    Object.entries(vars).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [t.accent]);

  const { TweaksPanel, TweakSection, TweakRadio } = window;

  return (
    <div ref={reveal}>
      <Nav lightHero={t.heroVariant === 'statement'} />
      <main>
        <Hero variant={t.heroVariant} />
        <Services variant={t.servicesVariant} />
        <HowWeWork />
        <Portfolio variant={t.portfolioVariant} />
        <Pricing />
        <TrustSection />
        <Testimonials />
        <Faq />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Style" value={t.heroVariant}
          options={[{ value: 'spotlight', label: 'Spotlight' }, { value: 'editorial', label: 'Editorial' }, { value: 'minimal', label: 'Minimal' }, { value: 'statement', label: 'Statement' }, { value: 'marquee', label: 'Marquee' }]}
          onChange={(v) => setTweak('heroVariant', v)} />

        <TweakSection label="Services" />
        <TweakRadio label="Layout" value={t.servicesVariant}
          options={[{ value: 'cards', label: 'Cards' }, { value: 'rows', label: 'Rows' }]}
          onChange={(v) => setTweak('servicesVariant', v)} />

        <TweakSection label="Portfolio" />
        <TweakRadio label="Layout" value={t.portfolioVariant}
          options={[{ value: 'rows', label: 'Feature rows' }, { value: 'grid', label: 'Grid' }]}
          onChange={(v) => setTweak('portfolioVariant', v)} />

        <TweakSection label="Brand accent" />
        <TweakRadio label="Accent" value={t.accent}
          options={[{ value: 'oxblood', label: 'Oxblood' }, { value: 'wine', label: 'Wine' }, { value: 'bronze', label: 'Bronze' }]}
          onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </div>
  );
}

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