// AI Virtuvė — main App

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "showtime",
  "price": 19,
  "accentColor": "#FFD23F"
}/*EDITMODE-END*/;

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

  // Apply accent color to root vars
  React.useEffect(() => {
    document.documentElement.style.setProperty("--neon-yellow", t.accentColor);
  }, [t.accentColor]);

  const HeroComp = HEROES[t.heroStyle] || HEROES.showtime;

  return (
    <div data-screen-label="AI Virtuvė landing">
      <Nav />
      <HeroComp />
      <SectionAudience />
      <SectionAIMenu />
      <SectionTransformation />
      <SectionHosts />
      <SectionTestimonials />
      <SectionTools />
      <SectionCountdown />
      <SectionPricing price={t.price} />
      <SectionFAQ />
      <SectionRegistration price={t.price} />
      <Footer />
      <MobileStickyCTA />

      <TweaksPanel>
        <TweakSection label="Hero stilius" />
        <TweakSelect
          label="Variantas"
          value={t.heroStyle}
          options={[
            { value: "showtime", label: "Showtime — full-bleed nuotrauka" },
            { value: "recipe", label: "Receptas — su ingredientų sąrašu" },
            { value: "studio", label: "Studija — TV transliacijos rėmas" },
          ]}
          onChange={(v) => setTweak("heroStyle", v)}
        />

        <TweakSection label="Kaina" />
        <TweakRadio
          label="€/mėn."
          value={t.price}
          options={[19, 27, 29]}
          onChange={(v) => setTweak("price", Number(v))}
        />

        <TweakSection label="Spalva" />
        <TweakColor
          label="Akcentas"
          value={t.accentColor}
          options={["#FFD23F", "#FF9D2C", "#4FB3FF", "#A78BFA"]}
          onChange={(v) => setTweak("accentColor", v)}
        />
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);