/* global React, ReactDOM */
const { useEffect } = React;

// Hooks/components do tweaks-panel.jsx (expostos no window)
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;

const PALETTES = {
  "Vitral azul (padrão)": {
    bg: "#f6f1e7", "bg-2": "#ede5d3",
    ink: "#1a1f2e", "ink-soft": "#3a4254", muted: "#6b7184",
    line: "rgba(26, 31, 46, 0.12)",
    accent: "#1e4f8f", "accent-deep": "#0f2e5c",
    paper: "#fbf7ee",
  },
  "Marfim & dourado": {
    bg: "#faf6ec", "bg-2": "#f1ead7",
    ink: "#23201a", "ink-soft": "#4a4538", muted: "#8a826f",
    line: "rgba(35, 32, 26, 0.12)",
    accent: "#9c6f1f", "accent-deep": "#6e4c10",
    paper: "#fdfbf3",
  },
  "Pedra & bordô": {
    bg: "#eeeae3", "bg-2": "#e2ddd2",
    ink: "#1f1a18", "ink-soft": "#3e3633", muted: "#7a7268",
    line: "rgba(31, 26, 24, 0.12)",
    accent: "#7a2330", "accent-deep": "#4f1620",
    paper: "#f5f1e9",
  },
};

const FONT_PAIRS = {
  "Editorial (Cormorant + Inter)": {
    display: '"Cormorant Garamond", Georgia, serif',
    body: '"Inter", system-ui, sans-serif',
    href: "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap",
  },
  "Clássica (Playfair + Lora)": {
    display: '"Playfair Display", Georgia, serif',
    body: '"Lora", Georgia, serif',
    href: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Lora:wght@400;500&family=JetBrains+Mono:wght@400&display=swap",
  },
  "Moderna (Fraunces + Sans)": {
    display: '"Fraunces", Georgia, serif',
    body: '"DM Sans", system-ui, sans-serif',
    href: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400&display=swap",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Vitral azul (padrão)",
  "fonts": "Editorial (Cormorant + Inter)",
  "dark": false
}/*EDITMODE-END*/;

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES["Vitral azul (padrão)"];
  const r = document.documentElement;
  Object.entries(p).forEach(([k, v]) => r.style.setProperty(`--${k}`, v));
}
function applyFonts(name) {
  const f = FONT_PAIRS[name] || FONT_PAIRS["Editorial (Cormorant + Inter)"];
  let link = document.getElementById("__tweaks_fonts");
  if (!link) {
    link = document.createElement("link");
    link.id = "__tweaks_fonts";
    link.rel = "stylesheet";
    document.head.appendChild(link);
  }
  link.href = f.href;
  document.documentElement.style.setProperty("--font-display", f.display);
  document.documentElement.style.setProperty("--font-body", f.body);
}

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

  useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  useEffect(() => { applyFonts(tweaks.fonts); }, [tweaks.fonts]);
  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.dark ? "dark" : "";
  }, [tweaks.dark]);

  return (
    <>
      <window.Nav />
      <window.Hero />
      <window.LiveMass />
      <window.Schedule />
      <window.History />
      <window.Verse />
      <window.Paroco />
      <window.Gallery />
      <window.News items={window.NEWS_ITEMS} />
      <window.Atendimento />
      <window.Contact />
      <window.Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <TweakRadio
            label="Cores"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={Object.keys(PALETTES)}
          />
        </TweakSection>
        <TweakSection label="Tipografia">
          <TweakRadio
            label="Pareamento"
            value={tweaks.fonts}
            onChange={(v) => setTweak("fonts", v)}
            options={Object.keys(FONT_PAIRS)}
          />
        </TweakSection>
        <TweakSection label="Modo">
          <TweakToggle
            label="Modo escuro"
            value={tweaks.dark}
            onChange={(v) => setTweak("dark", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Expor NEWS pra App
window.NEWS_ITEMS = [
  { date: "22 / 07 / 2025", cat: "Tradição", title: "Festa de Sant'Ana celebra tradição e fé", excerpt: "A comunidade se reuniu em torno da padroeira para a tradicional novena, procissão e missa solene de encerramento." },
  { date: "12 / 05 / 2025", cat: "Diocese", title: "Missa abriu o Ano Jubilar da Diocese", excerpt: "Dom Bruno presidiu a celebração de abertura do Ano Jubilar, reunindo o clero e fiéis de toda a diocese." },
  { date: "17 / 04 / 2025", cat: "Liturgia", title: "Tríduo Pascal celebrado na Catedral", excerpt: "Da Ceia do Senhor à Vigília Pascal, três dias que conduzem ao mistério central da fé cristã." },
];

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