// ============================================================
// Qubi app shell — composes sections, wires display-font Tweaks.
// ============================================================
const Q = window.Q;

const FONT_OPTIONS = [
  { name: "Bricolage Grotesque", stack: '"Bricolage Grotesque", system-ui, sans-serif', weight: 800, tracking: "-0.02em", leading: 0.95 },
  { name: "Anton",               stack: '"Anton", Impact, sans-serif',                   weight: 400, tracking: "0.005em", leading: 0.92 },
  { name: "Big Shoulders",       stack: '"Big Shoulders Display", system-ui, sans-serif', weight: 800, tracking: "0em", leading: 0.94 },
  { name: "Syne",                stack: '"Syne", system-ui, sans-serif',                 weight: 800, tracking: "-0.01em", leading: 0.97 },
  { name: "Unbounded",           stack: '"Unbounded", system-ui, sans-serif',            weight: 700, tracking: "-0.02em", leading: 1.0 },
  { name: "DM Serif Display",    stack: '"DM Serif Display", Georgia, serif',            weight: 400, tracking: "0em", leading: 0.98 },
  { name: "Space Grotesk",       stack: '"Space Grotesk", system-ui, sans-serif',        weight: 700, tracking: "-0.03em", leading: 0.98 },
];

const App = () => {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    const opt = FONT_OPTIONS.find(f => f.name === t.displayFont) || FONT_OPTIONS[0];
    const root = document.documentElement;
    root.style.setProperty("--display", opt.stack);
    root.style.setProperty("--display-weight", String(opt.weight));
  }, [t.displayFont]);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--display-tracking", `${t.titleTracking}em`);
    root.style.setProperty("--display-leading", String(t.titleLeading));
  }, [t.titleTracking, t.titleLeading]);

  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    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" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <style>{`.display{ font-family: var(--display) !important; font-weight: var(--display-weight, 800) !important; }`}</style>

      <a id="top"></a>
      <Header />
      <main>
        <Hero />
        <HowItWorks />
        <QubiToSection />
        <QubiChatSection />
        <Modules />
        <UseCases />
        <Pricing />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Estilo Qubi">
        <TweakSection label="Tipografía de títulos" />
        <FontPicker value={t.displayFont} options={FONT_OPTIONS} onChange={(v) => setTweak("displayFont", v)} />
        <TweakSection label="Ajuste fino" />
        <TweakSlider label="Espaciado" value={t.titleTracking} min={-0.06} max={0.04} step={0.005} unit="em" onChange={(v) => setTweak("titleTracking", Math.round(v * 1000) / 1000)} />
        <TweakSlider label="Interlineado" value={t.titleLeading} min={0.85} max={1.2} step={0.01} onChange={(v) => setTweak("titleLeading", Math.round(v * 100) / 100)} />
      </TweaksPanel>
    </>
  );
};

const FontPicker = ({ value, options, onChange }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: 4 }}>
    {options.map(opt => {
      const active = opt.name === value;
      return (
        <button key={opt.name} onClick={() => onChange(opt.name)} style={{
          appearance: "none", textAlign: "left",
          background: active ? "rgba(237,93,45,.12)" : "rgba(0,0,0,.03)",
          border: active ? "2px solid #ED5D2D" : "1.5px solid rgba(0,0,0,.1)",
          borderRadius: 10, padding: "9px 12px", cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8,
        }}>
          <span style={{ fontFamily: opt.stack, fontWeight: opt.weight, fontSize: 22, letterSpacing: opt.tracking, lineHeight: 1, color: "#2B1B12" }}>Qubi</span>
          <span style={{ fontSize: 10.5, color: "rgba(43,27,18,.55)", fontWeight: 600 }}>{opt.name}</span>
        </button>
      );
    })}
  </div>
);

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