/* ---------- App entry ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e11d2e",
  "background": "deep-black",
  "heroVariant": "showcase",
  "density": "comfortable"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty("--accent", t.accent);
  // derive related colors
  const hex = t.accent.replace("#", "");
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  root.style.setProperty("--accent-soft", `rgba(${r}, ${g}, ${b}, 0.12)`);
  root.style.setProperty("--accent-glow", `rgba(${r}, ${g}, ${b}, 0.32)`);
  const darker = `rgb(${Math.max(0, r - 60)}, ${Math.max(0, g - 8)}, ${Math.max(0, b - 14)})`;
  root.style.setProperty("--accent-dark", darker);

  // background tone
  if (t.background === "deep-black") {
    root.style.setProperty("--bg", "#0a0a0c");
    root.style.setProperty("--bg-2", "#111114");
    root.style.setProperty("--bg-3", "#16161a");
  } else if (t.background === "midnight") {
    root.style.setProperty("--bg", "#06080f");
    root.style.setProperty("--bg-2", "#0c1020");
    root.style.setProperty("--bg-3", "#121736");
  } else if (t.background === "graphite") {
    root.style.setProperty("--bg", "#16181c");
    root.style.setProperty("--bg-2", "#1c1f24");
    root.style.setProperty("--bg-3", "#23262d");
  }

  // density
  if (t.density === "compact") {
    root.style.setProperty("--pad-x", "clamp(16px, 3vw, 40px)");
  } else if (t.density === "spacious") {
    root.style.setProperty("--pad-x", "clamp(28px, 5vw, 72px)");
  } else {
    root.style.setProperty("--pad-x", "clamp(20px, 4vw, 56px)");
  }
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = React.useState("inicio");

  React.useEffect(() => { applyTweaks(tweaks); }, [tweaks]);

  // active section observer
  React.useEffect(() => {
    const sections = ["inicio", "servicos", "diferenciais", "contato", "sobre"];
    const els = sections.map(id => document.getElementById(id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      const vis = entries.filter(e => e.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
      if (vis) setActive(vis.target.id);
    }, { rootMargin: "-30% 0px -55% 0px", threshold: [0.1, 0.3, 0.6] });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);

  const onNav = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <React.Fragment>
      <a href="#main-content" className="skip-link"
         style={{
           position: "absolute",
           left: "-10000px",
           top: "12px",
           width: "1px",
           height: "1px",
           overflow: "hidden",
           clip: "rect(0 0 0 0)",
           clipPath: "inset(50%)",
           whiteSpace: "nowrap",
         }}
         onFocus={(e) => {
           Object.assign(e.target.style, {
             left: "12px", width: "auto", height: "auto",
             overflow: "visible", clip: "auto", clipPath: "none",
             padding: "10px 18px", background: "#e11d2e", color: "#fff",
             borderRadius: "6px", fontWeight: 600, zIndex: 1000,
           });
         }}
         onBlur={(e) => {
           Object.assign(e.target.style, {
             left: "-10000px", width: "1px", height: "1px",
             overflow: "hidden", clip: "rect(0 0 0 0)", clipPath: "inset(50%)",
             padding: 0, background: "transparent",
           });
         }}>Ir para o conteúdo principal</a>
      <Header active={active} onNav={onNav} />
      <main id="main-content">
        <Hero onNav={onNav} />
        <Services />
        <StatsStrip />
        <WhatWeDo />
        <VideoBanner />
        <Brands />
        <WhyUs />
        <Process />
        <Testimonials />
        <Contact />
      </main>
      <Footer onNav={onNav} />

      <a className="fab" href="https://wa.me/5541995205000" target="_blank" rel="noreferrer" aria-label="Falar no WhatsApp">
        <I.Whatsapp s={24} />
      </a>

      <TweaksPanel title="Tweaks">
          <TweakSection label="Cor de destaque">
            <TweakColor
              label="Accent"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#e11d2e", "#2563eb", "#16a34a", "#f97316", "#7c3aed"]}
            />
          </TweakSection>
          <TweakSection label="Tom de fundo">
            <TweakRadio
              label="Background"
              value={tweaks.background}
              onChange={(v) => setTweak("background", v)}
              options={[
                { value: "deep-black", label: "Black" },
                { value: "midnight", label: "Midnight" },
                { value: "graphite", label: "Graphite" },
              ]}
            />
          </TweakSection>
          <TweakSection label="Densidade">
            <TweakRadio
              label="Density"
              value={tweaks.density}
              onChange={(v) => setTweak("density", v)}
              options={[
                { value: "compact", label: "Compact" },
                { value: "comfortable", label: "Comfort" },
                { value: "spacious", label: "Spacious" },
              ]}
            />
          </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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