/* Us Para Você — App root with Tweaks */
const { useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryAccent": "#E69161",
  "navy": "#1B2E4B",
  "gold": "#D4AF37",
  "displayFont": "Fraunces",
  "uiFont": "Manrope",
  "heroAlign": "left",
  "heroBgStyle": "blobs",
  "showVipBadge": true,
  "showWhatsAppFab": true
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "Fraunces": { display: "Fraunces", url: "Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600" },
  "Instrument Serif": { display: "Instrument Serif", url: "Instrument+Serif:ital@0;1" },
  "Playfair Display": { display: "Playfair Display", url: "Playfair+Display:wght@400;500;600;700" },
  "DM Serif Display": { display: "DM Serif Display", url: "DM+Serif+Display" },
};

const UI_FONTS = {
  "Manrope": "Manrope:wght@400;500;600;700;800",
  "Plus Jakarta Sans": "Plus+Jakarta+Sans:wght@400;500;600;700;800",
  "Figtree": "Figtree:wght@400;500;600;700;800",
};

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

  // Apply tokens
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--terracotta", tweaks.primaryAccent);
    r.style.setProperty("--navy", tweaks.navy);
    r.style.setProperty("--gold", tweaks.gold);
    r.style.setProperty("--f-display", `"${tweaks.displayFont}", Georgia, serif`);
    r.style.setProperty("--f-ui", `"${tweaks.uiFont}", Helvetica, Arial, sans-serif`);

    // Inject Google Fonts dynamically
    const id = "uspv-fonts";
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement("link");
      link.id = id; link.rel = "stylesheet";
      document.head.appendChild(link);
    }
    const dispUrl = FONT_PAIRS[tweaks.displayFont]?.url || FONT_PAIRS.Fraunces.url;
    const uiUrl = UI_FONTS[tweaks.uiFont] || UI_FONTS.Manrope;
    link.href = `https://fonts.googleapis.com/css2?family=${dispUrl}&family=${uiUrl}&display=swap`;
  }, [tweaks]);

  // Apply hero align
  React.useEffect(() => {
    const grid = document.querySelector(".hero-grid");
    if (grid) {
      grid.style.textAlign = tweaks.heroAlign === "center" ? "center" : "left";
      const sub = grid.querySelector(".hero-sub");
      if (sub) sub.style.margin = tweaks.heroAlign === "center" ? "0 auto 32px" : "0 0 32px";
      const cta = grid.querySelector(".hero-cta-row");
      if (cta) cta.style.justifyContent = tweaks.heroAlign === "center" ? "center" : "flex-start";
      const trust = grid.querySelector(".hero-trust");
      if (trust) trust.style.justifyContent = tweaks.heroAlign === "center" ? "center" : "flex-start";
    }
  }, [tweaks.heroAlign]);

  // VIP badge visibility
  React.useEffect(() => {
    document.querySelectorAll(".svc-vip-badge").forEach(el => {
      el.style.display = tweaks.showVipBadge ? "" : "none";
    });
  }, [tweaks.showVipBadge, tweaks]);

  // Hero blob visibility
  React.useEffect(() => {
    document.querySelectorAll(".hero-blob").forEach(el => {
      el.style.display = tweaks.heroBgStyle === "blobs" ? "" : "none";
    });
    const hero = document.querySelector(".hero");
    if (hero) {
      if (tweaks.heroBgStyle === "gradient") {
        hero.style.background = `linear-gradient(180deg, var(--bg) 0%, var(--terracotta-tint) 100%)`;
      } else if (tweaks.heroBgStyle === "navy") {
        hero.style.background = `linear-gradient(170deg, ${tweaks.navy} 0%, #2B4063 100%)`;
        hero.style.color = "white";
      } else {
        hero.style.background = "";
        hero.style.color = "";
      }
    }
  }, [tweaks.heroBgStyle, tweaks.navy]);

  return (
    <>
      <Header />
      <main>
        <Hero />
        <Jornada />
        <Servicos />
      </main>
      <FAQFooter />
      {tweaks.showWhatsAppFab && <WhatsAppFAB />}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Tipografia">
          <TweakSelect label="Fonte de display" value={tweaks.displayFont}
            onChange={v => setTweak("displayFont", v)}
            options={Object.keys(FONT_PAIRS).map(k => ({ value: k, label: k }))} />
          <TweakSelect label="Fonte de UI" value={tweaks.uiFont}
            onChange={v => setTweak("uiFont", v)}
            options={Object.keys(UI_FONTS).map(k => ({ value: k, label: k }))} />
        </TweakSection>

        <TweakSection title="Cores da marca">
          <TweakColor label="Acento Terracota" value={tweaks.primaryAccent}
            onChange={v => setTweak("primaryAccent", v)} />
          <TweakColor label="Azul Marinho" value={tweaks.navy}
            onChange={v => setTweak("navy", v)} />
          <TweakColor label="Dourado VIP" value={tweaks.gold}
            onChange={v => setTweak("gold", v)} />
        </TweakSection>

        <TweakSection title="Hero">
          <TweakRadio label="Alinhamento" value={tweaks.heroAlign}
            onChange={v => setTweak("heroAlign", v)}
            options={[{ value: "left", label: "Esquerda" }, { value: "center", label: "Centro" }]} />
          <TweakRadio label="Fundo" value={tweaks.heroBgStyle}
            onChange={v => setTweak("heroBgStyle", v)}
            options={[
              { value: "blobs", label: "Blobs" },
              { value: "gradient", label: "Gradiente" },
              { value: "navy", label: "Marinho" },
            ]} />
        </TweakSection>

        <TweakSection title="Elementos">
          <TweakToggle label="Selo VIP nos serviços" value={tweaks.showVipBadge}
            onChange={v => setTweak("showVipBadge", v)} />
          <TweakToggle label="Botão WhatsApp flutuante" value={tweaks.showWhatsAppFab}
            onChange={v => setTweak("showWhatsAppFab", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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