/* app.jsx — compõe a página + painel de Tweaks (Dark Luxury) */

const ACCENTS = {
  "Ouro clássico": { base: "#C9A24B", bright: "#E2C57A", deep: "#A6802F" },
  "Champanhe":     { base: "#CBB377", bright: "#E6D6A6", deep: "#A8915A" },
  "Ouro rosé":     { base: "#C99878", bright: "#E5BEA3", deep: "#A77A5C" },
  "Latão antigo":  { base: "#B08D3C", bright: "#CFAE5E", deep: "#8C6E2A" },
};
const SURFACES = {
  "Carvão (padrão)": { bg: "#0E1116", bg2: "#141922", bg3: "#1C222C", bg4: "#232B37", foot: "#090B0F" },
  "Tinta azulada":   { bg: "#0C1018", bg2: "#121826", bg3: "#1A2233", bg4: "#222C40", foot: "#080B12" },
  "Ônix neutro":     { bg: "#101012", bg2: "#17171A", bg3: "#1F1F23", bg4: "#28282E", foot: "#0A0A0C" },
};
const DISPLAY_FONTS = {
  "Schibsted Grotesk": "'Schibsted Grotesk', sans-serif",
  "Space Grotesk": "'Space Grotesk', sans-serif",
  "Hanken Grotesk": "'Hanken Grotesk', sans-serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Ouro clássico",
  "surface": "Carvão (padrão)",
  "displayFont": "Schibsted Grotesk",
  "rounded": 18
}/*EDITMODE-END*/;

function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS["Ouro clássico"];
    r.setProperty("--gold", a.base);
    r.setProperty("--gold-bright", a.bright);
    r.setProperty("--gold-deep", a.deep);
    r.setProperty("--gold-soft", hexA(a.base, 0.14));
    r.setProperty("--gold-tint", hexA(a.base, 0.09));
    const s = SURFACES[t.surface] || SURFACES["Carvão (padrão)"];
    r.setProperty("--bg", s.bg);
    r.setProperty("--bg-2", s.bg2);
    r.setProperty("--bg-3", s.bg3);
    r.setProperty("--bg-4", s.bg4);
    r.setProperty("--footer-bg", s.foot);
    r.setProperty("--display", DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["Schibsted Grotesk"]);
    r.setProperty("--radius", t.rounded + "px");
    r.setProperty("--radius-sm", Math.max(6, t.rounded - 7) + "px");
  }, [t]);

  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Credentials />
      <BrunoCase />
      <Testimonials />
      <ContentPillars />
      <Comparison />
      <FitFilter />
      <RyanBlock />
      <Pillars />
      <Process />
      <FaqSection />
      <Vacancies />
      <FinalCTA />
      <Footer />
      <VideoModal />

      <TweaksPanel>
        <TweakSection label="Acabamento dourado" />
        <TweakColor label="Tom do ouro" value={ACCENTS[t.accent].base}
          options={Object.values(ACCENTS).map((a) => a.base)}
          onChange={(v) => {
            const key = Object.keys(ACCENTS).find((k) => ACCENTS[k].base === v);
            if (key) setTweak("accent", key);
          }} />
        <TweakSelect label="Superfície escura" value={t.surface}
          options={Object.keys(SURFACES)} onChange={(v) => setTweak("surface", v)} />
        <TweakSection label="Tipografia" />
        <TweakSelect label="Fonte dos títulos" value={t.displayFont}
          options={Object.keys(DISPLAY_FONTS)} onChange={(v) => setTweak("displayFont", v)} />
        <TweakSection label="Forma" />
        <TweakSlider label="Cantos" value={t.rounded} min={2} max={26} step={2} unit="px"
          onChange={(v) => setTweak("rounded", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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