// app.jsx — root component. Wires Tweaks state to CSS vars and composes sections.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#06070A", "#00E6FF", "#8B5CF6"],
  "typography": "grotesk",
  "heroVariant": "network",
  "servicesLayout": "grid",
  "theme": "dark"
}/*EDITMODE-END*/;

// palette = [bg, accent, accent2]
const PALETTES = [
  ["#06070A", "#00E6FF", "#8B5CF6"], // electric (default) — cyan + violet
  ["#0A0510", "#FF2D7E", "#FFB400"], // plasma — magenta + amber
  ["#06120E", "#7CFF8A", "#00E6FF"], // quantum — green + cyan
  ["#0E0906", "#FF7A2D", "#F0C04A"], // solar — orange + amber
];

const TYPO = {
  grotesk: {
    label: "Space Grotesk",
    href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600&display=swap",
    display: '"Space Grotesk", ui-sans-serif, system-ui, sans-serif',
    sans: '"Space Grotesk", ui-sans-serif, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
  },
  geist: {
    label: "Geist",
    href: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap",
    display: '"Geist", ui-sans-serif, system-ui, sans-serif',
    sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
    mono: '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace',
  },
  manrope: {
    label: "Manrope",
    href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap",
    display: '"Manrope", ui-sans-serif, system-ui, sans-serif',
    sans: '"Manrope", ui-sans-serif, system-ui, sans-serif',
    mono: '"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace',
  },
};

function applyTheme(t) {
  const root = document.documentElement;
  const [bg, accent, accent2] = t.palette;
  // theme attr
  root.setAttribute("data-theme", t.theme);

  // background per palette only applies in dark mode; light mode keeps light bg
  if (t.theme === "dark") {
    root.style.setProperty("--bg", bg);
    root.style.setProperty("--bg-rgb", hexToRgb(bg));
    // derive surfaces from bg
    root.style.setProperty("--surface", lighten(bg, 0.04));
    root.style.setProperty("--surface-2", lighten(bg, 0.08));
  } else {
    root.style.removeProperty("--bg");
    root.style.removeProperty("--bg-rgb");
    root.style.removeProperty("--surface");
    root.style.removeProperty("--surface-2");
  }

  root.style.setProperty("--accent", accent);
  root.style.setProperty("--accent-2", accent2);
  root.style.setProperty("--accent-glow", hexA(accent, 0.35));

  const typo = TYPO[t.typography] || TYPO.grotesk;
  root.style.setProperty("--display", typo.display);
  root.style.setProperty("--sans", typo.sans);
  root.style.setProperty("--mono", typo.mono);

  // ensure font css is loaded
  ensureFont(typo.href);
}

function ensureFont(href) {
  if (!href) return;
  if (document.querySelector(`link[data-font-href="${href}"]`)) return;
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  link.setAttribute("data-font-href", href);
  document.head.appendChild(link);
}

function hexToRgb(hex) {
  const h = String(hex).replace("#", "");
  const x = h.length === 3 ? h.replace(/./g, (c) => c + c) : h.padEnd(6, "0");
  const n = parseInt(x.slice(0, 6), 16);
  return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
}

function hexA(hex, a) {
  return `rgba(${hexToRgb(hex)}, ${a})`;
}

// crude lightener: blend toward white at fraction f. Good enough for surface tints.
function lighten(hex, f) {
  const [r, g, b] = hexToRgb(hex).split(",").map((n) => parseInt(n.trim(), 10));
  const mix = (c) => Math.round(c + (255 - c) * f * 0.18);
  const to = (c) => c.toString(16).padStart(2, "0");
  return `#${to(mix(r))}${to(mix(g))}${to(mix(b))}`;
}

// reveal-on-scroll
function useReveal() {
  React.useEffect(() => {
    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 -40px 0px" }
    );
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const contactRef = React.useRef(null);

  React.useEffect(() => { applyTheme(t); }, [t]);
  useReveal();

  const scrollToContact = () => {
    contactRef.current?.scrollIntoView?.({ behavior: "smooth", block: "start" });
  };

  const [bg, accent, accent2] = t.palette;

  return (
    <>
      <Nav onContact={scrollToContact} />
      <Hero heroVariant={t.heroVariant} accent={accent} accent2={accent2} />
      <Sobre />
      <Servicos layout={t.servicesLayout} />
      <Beneficios />
      <Cases accent={accent} accent2={accent2} />
      <Contato contactRef={contactRef} />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakColor
            label="Cores"
            value={t.palette}
            options={PALETTES}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>

        <TweakSection label="Tipografia">
          <TweakRadio
            label="Família"
            value={t.typography}
            options={[
              { value: "grotesk", label: "Grotesk" },
              { value: "geist",   label: "Geist" },
              { value: "manrope", label: "Manrope" },
            ]}
            onChange={(v) => setTweak("typography", v)}
          />
        </TweakSection>

        <TweakSection label="Hero">
          <TweakRadio
            label="Fundo"
            value={t.heroVariant}
            options={[
              { value: "network", label: "Rede" },
              { value: "flow",    label: "Fluxo" },
              { value: "off",     label: "Estático" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>

        <TweakSection label="Serviços">
          <TweakRadio
            label="Layout"
            value={t.servicesLayout}
            options={[
              { value: "grid",  label: "Grade" },
              { value: "list",  label: "Lista" },
              { value: "cards", label: "Cards" },
            ]}
            onChange={(v) => setTweak("servicesLayout", v)}
          />
        </TweakSection>

        <TweakSection label="Tema">
          <TweakRadio
            label="Modo"
            value={t.theme}
            options={[
              { value: "dark",  label: "Escuro" },
              { value: "light", label: "Claro" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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