/* app.jsx — root component + Tweaks panel + reveal observer */

const { useEffect } = React;

const ACCENT_MAP = {
  violet:   ["#A855F7", "#E040FB"],
  magenta:  ["#E040FB", "#FF7AD8"],
  electric: ["#7C3AED", "#22D3EE"],
  sunset:   ["#FF5E8A", "#FFB347"],
};
const CTA_MAP = {
  green:   ["#2ECC71", "#00E676"],
  magenta: ["#E040FB", "#FF7AD8"],
  cyan:    ["#22D3EE", "#7C3AED"],
  white:   ["#FFFFFF", "#EFE6FF"],
};

function App() {
  const t = useTweaks({
    vibe: "energy",
    accent: "violet",
    bgDark: 8,
    cta: "green",
    ctaStyle: "gradient",
    fonts: "auto",
  });

  // Apply CSS variables based on tweaks
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-vibe", t.vibe);
    r.setAttribute("data-cta", t.ctaStyle);
    if (t.fonts !== "auto") r.setAttribute("data-fonts", t.fonts);
    else r.removeAttribute("data-fonts");

    const [a1,a2] = ACCENT_MAP[t.accent] || ACCENT_MAP.violet;
    r.style.setProperty("--accent", a1);
    r.style.setProperty("--accent-2", a2);

    const [g1,g2] = CTA_MAP[t.cta] || CTA_MAP.green;
    r.style.setProperty("--green-a", g1);
    r.style.setProperty("--green-b", g2);
    // Recolor button text for non-green CTAs
    const dark = (t.cta === "white");
    r.style.setProperty("--btn-ink", dark ? "#1a0322" : "#06371d");

    r.style.setProperty("--bgDark", t.bgDark + "%");
  }, [t]);

  // Scroll reveal
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Announce/>
      <div className="page">
        <Hero/>
        <div className="sep"></div>
        <ValueOpening/>
        <div className="sep"></div>
        <Pillars/>
        <Numbers/>
        <div className="sep"></div>
        <Speakers/>
        <Pain/>
        <div className="sep"></div>
        <Offer/>
        <Urgency/>
        <FAQ/>
        <Foot/>
      </div>
      <StickyCTA/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Vibe">
          <TweakRadio tweakKey="vibe" options={[
            {value:"energy", label:"High-energy"},
            {value:"elegant", label:"Elegant"},
          ]}/>
        </TweakSection>
        <TweakSection title="Accent color">
          <TweakRadio tweakKey="accent" options={[
            {value:"violet", label:"Violet"},
            {value:"magenta", label:"Magenta"},
            {value:"electric", label:"Electric"},
            {value:"sunset", label:"Sunset"},
          ]}/>
        </TweakSection>
        <TweakSection title="Background darkness">
          <TweakSlider tweakKey="bgDark" min={4} max={16} step={1} suffix="%"/>
        </TweakSection>
        <TweakSection title="CTA color">
          <TweakRadio tweakKey="cta" options={[
            {value:"green", label:"Green"},
            {value:"magenta", label:"Magenta"},
            {value:"cyan", label:"Cyan"},
            {value:"white", label:"White"},
          ]}/>
        </TweakSection>
        <TweakSection title="CTA style">
          <TweakRadio tweakKey="ctaStyle" options={[
            {value:"gradient", label:"Gradient"},
            {value:"solid", label:"Solid"},
            {value:"outline", label:"Outline"},
          ]}/>
        </TweakSection>
        <TweakSection title="Font pairing">
          <TweakRadio tweakKey="fonts" options={[
            {value:"auto", label:"Auto (follows vibe)"},
            {value:"modern", label:"Modern"},
            {value:"editorial", label:"Editorial"},
            {value:"condensed", label:"Condensed"},
          ]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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