// Main app — assembles the prototype with current hero variant + sections + tweaks panel

const { useState: appUS, useEffect: appUE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "centered",
  "budgetTreatment": "rightBleed",
  "tealAccent": true,
  "motion": "medium",
  "transparentHeader": true,
  "density": "regular"
}/*EDITMODE-END*/;

function RLCSite({ heroOverride, motionOverride, hideTweaks, budgetTreatmentOverride }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const heroChoice = heroOverride || t.hero;
  const motion = motionOverride || t.motion;
  const budgetTreatment = budgetTreatmentOverride || t.budgetTreatment;
  const [scrolled, setScrolled] = appUS(false);

  appUE(() => {
    const root = document.querySelector(`#rlc-scroll-${heroOverride || "main"}`) || window;
    const onScroll = () => {
      const y = root === window ? window.scrollY : root.scrollTop;
      setScrolled(y > 40);
    };
    root.addEventListener("scroll", onScroll);
    return () => root.removeEventListener("scroll", onScroll);
  }, [heroOverride]);

  const HeroComponent = heroChoice === "editorial" ? HeroEditorial : heroChoice === "markart" ? HeroMarkArt : HeroCentered;

  return (
    <div style={{ background: "#ffffff", color: "#0c1624", fontFamily: "Outfit, sans-serif" }}>
      <HeroComponent motion={motion} transparent={t.transparentHeader} scrolled={scrolled} budgetTreatment={budgetTreatment} />
      <AboutSection density={t.density} motion={motion} />
      <ServicesSection density={t.density} motion={motion} tealAccent={t.tealAccent} />
      <ExperienceSection density={t.density} motion={motion} />
      <BilingualSection density={t.density} motion={motion} />
      <ExpertiseSection density={t.density} motion={motion} />
      <ImpactSection density={t.density} motion={motion} />
      <ContactSection density={t.density} motion={motion} />
      <Footer />

      {!hideTweaks && (
        <TweaksPanel>
          <TweakSection label="Hero" />
          <TweakRadio label="Layout" value={t.hero} options={[
            { value: "centered", label: "Centered" },
            { value: "editorial", label: "Editorial" },
            { value: "markart", label: "Mark-as-art" },
          ]} onChange={(v) => setTweak("hero", v)} />
          {heroChoice === "centered" && (
            <TweakRadio label="Budget photo" value={t.budgetTreatment} options={[
              { value: "card", label: "Card" },
              { value: "rightBleed", label: "Right bleed" },
              { value: "fullBleed", label: "Watermark" },
            ]} onChange={(v) => setTweak("budgetTreatment", v)} />
          )}
          <TweakToggle label="Transparent header" value={t.transparentHeader} onChange={(v) => setTweak("transparentHeader", v)} />

          <TweakSection label="Motion" />
          <TweakRadio label="Animation" value={t.motion} options={["subtle", "medium", "rich"]} onChange={(v) => setTweak("motion", v)} />

          <TweakSection label="Visual" />
          <TweakToggle label="Teal accents on cards" value={t.tealAccent} onChange={(v) => setTweak("tealAccent", v)} />
          <TweakRadio label="Density" value={t.density} options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
        </TweaksPanel>
      )}
    </div>
  );
}

window.RLCSite = RLCSite;