/* app.jsx — assembly, tweaks, sticky CTA */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "cinematic",
  "accent": "#aa00ee",
  "titleFont": "Rubik",
  "showBadges": true
} /*EDITMODE-END*/;

const ACCENTS = {
  "#aa00ee": ["#aa00ee", "#8400b8", "#cf6bff"],
  "#7a3cff": ["#7a3cff", "#5e23d6", "#a986ff"],
  "#e0249a": ["#e0249a", "#b3157a", "#f06ec0"],
  "#2f7bff": ["#2f7bff", "#1c5ad6", "#7aa9ff"]
};

function scrollToContact() {
  document.getElementById("contato")?.scrollIntoView({ behavior: "smooth" });
}

function StickyCTA() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const contato = document.getElementById("contato");
      const past = window.scrollY > window.innerHeight * 0.7;
      const nearForm = contato && contato.getBoundingClientRect().top < window.innerHeight * 0.9;
      setShow(past && !nearForm);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="sticky-cta" style={{
      position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 45, padding: "12px 16px calc(12px + env(safe-area-inset-bottom))",
      background: "rgba(7,5,7,.86)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)", borderTop: "1px solid var(--border-dark)",
      transform: show ? "translateY(0)" : "translateY(120%)", transition: "transform .45s var(--ease)"
    }}>
      <button className="btn btn-primary" onClick={scrollToContact} style={{ width: "100%", padding: "1.05em" }}>
        Quero desenvolver meu E‑Commerce<ArrowIcon />
      </button>
      <style>{`.sticky-cta{display:none}@media(max-width:760px){.sticky-cta{display:block}}`}</style>
    </div>);

}

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

  useEffect(() => {
    const move = (e) => {
      document.querySelectorAll(".spot-card").forEach((el) => {
        const r = el.getBoundingClientRect();
        el.style.setProperty("--x", e.clientX - r.left + "px");
        el.style.setProperty("--y", e.clientY - r.top + "px");
      });
    };
    window.addEventListener("pointermove", move, { passive: true });
    return () => window.removeEventListener("pointermove", move);
  }, []);

  useEffect(() => {
    const trio = ACCENTS[t.accent] || ACCENTS["#aa00ee"];
    const r = document.documentElement.style;
    r.setProperty("--purple", trio[0]);
    r.setProperty("--purple-700", trio[1]);
    r.setProperty("--purple-300", trio[2]);
    r.setProperty("--purple-glow", trio[0] + "73");
  }, [t.accent]);

  useEffect(() => {
    document.documentElement.style.setProperty("--title-font", t.titleFont);
    document.querySelectorAll("h1,h2,h3,h4,.display,.h2,.h3").forEach((el) => el.style.fontFamily = `"${t.titleFont}", sans-serif`);
  }, [t.titleFont, t.heroVariant]);

  return (
    <>
      <main style={{ paddingTop: 0 }}>
        <div className="hero-block" style={{ minHeight: "100svh", display: "flex", flexDirection: "column", background: "linear-gradient(180deg,#070507 0%,#0d0810 46%,#0c0811 76%,#070507 100%)", position: "relative" }}>
          <Hero variant={t.heroVariant} onCTA={scrollToContact} />
          <MarqueeSection />
        </div>
        <ExperienceSection />
        <ProcessSection />
        <IncludedSection />
        <SupportSection />
        <FaqSection />
        <div className="closing" style={{ background: "linear-gradient(180deg,#070507 0%,#160f1c 70%,#160f1c 100%)", position: "relative" }}>
          <ContactSection />
          <Footer />
        </div>
      </main>
      <StickyCTA />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect label="Layout do Hero" value={t.heroVariant}
        options={[
        { value: "split", label: "Split — assimétrico" },
        { value: "cinematic", label: "Cinematic — centralizado" },
        { value: "depth", label: "Depth — cluster em camadas" }]
        }
        onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label="Marca" />
        <TweakColor label="Cor de destaque" value={t.accent}
        options={["#aa00ee", "#7a3cff", "#e0249a", "#2f7bff"]}
        onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Fonte dos títulos" value={t.titleFont}
        options={["Rubik", "Inter"]}
        onChange={(v) => setTweak("titleFont", v)} />
      </TweaksPanel>
    </>);

}

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