/* app.jsx — root, tweaks panel wiring */
const { useState: useSA, useEffect: useEA } = React;

const ACCENTS = [
  { id: "red",    label: "Vermelho neon",  swatch: "#ff2e3a" },
  { id: "amber",  label: "Âmbar arcade",   swatch: "#ffb020" },
  { id: "green",  label: "Verde matrix",   swatch: "#22e07a" },
  { id: "cyan",   label: "Ciano HUD",      swatch: "#22d3ee" },
  { id: "violet", label: "Violeta neo",    swatch: "#a855f7" },
];

const useReadableScrollFX = () => {
  useEA(() => {
    const targets = Array.from(document.querySelectorAll("main.site-flow > section, main.site-flow > footer"));
    targets.forEach((el) => el.classList.add("scroll-reveal"));

    const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion || !("IntersectionObserver" in window)) {
      targets.forEach((el) => el.classList.add("is-visible"));
      return;
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("is-visible");
        } else if (entry.boundingClientRect.top > window.innerHeight) {
          entry.target.classList.remove("is-visible");
        }
      });
    }, {
      root: null,
      threshold: 0.12,
      rootMargin: "0px 0px -8% 0px",
    });

    targets.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);
};

const DISCORD_URL = "https://discord.gg/CFw33ukueK";

const MobileUnsupported = () => (
  <section className="mobile-unsupported" aria-label="Celular não suportado">
    <div className="mobile-card">
      <div className="mobile-logo">
        <span className="logo-mark">LS</span>
        <div>
          <strong>LINA SOLUTIONS</strong>
          <small>OPTIMIZER · PERFORMANCE DIRECTOR</small>
        </div>
      </div>

      <div className="mobile-status">DISPOSITIVO DETECTADO: CELULAR</div>

      <h1>Celular não suportado</h1>
      <p>
        O Lina Optimizer é um aplicativo para Windows.
        Para baixar, testar ou falar sobre acesso beta, abra pelo computador.
      </p>

      <a className="btn btn-primary mobile-discord" href={DISCORD_URL} target="_blank" rel="noreferrer">
        Conversar com nossa equipe no Discord
      </a>

      <span className="mobile-note">Suporte, beta, dúvidas e compra direta.</span>
    </div>
  </section>
);

const App = () => {
  const [tweaks, setTweak] = useTweaks(window.__LINA_TWEAKS || {
    accent: "red", scanlines: false, gridDensity: "medium", glow: "low",
  });

  useReadableScrollFX();

  // apply data-attrs to root
  useEA(() => {
    const r = document.documentElement;
    r.setAttribute("data-accent", tweaks.accent || "red");
    r.setAttribute("data-scanlines", String(tweaks.scanlines !== false));
    r.setAttribute("data-grid", tweaks.gridDensity || "medium");
    r.setAttribute("data-glow", tweaks.glow || "medium");
  }, [tweaks]);

  return (
    <>
      <MobileUnsupported />

      <div className="desktop-site">
        <div className="bg-vignette"></div>
        <div className="bg-grid"></div>
        <div className="scanlines"></div>

        <Navbar />
        <div style={{ paddingTop: 64 }}>
          <StatusTicker />
        </div>

        <main className="site-flow">
          <Hero />
          <SectionDiferencial />
          <SectionRecursos />
          <SectionAntesDepois />
          <SectionControle />
          <SectionPCFraco />
          <SectionTecnologia />
          <SectionPrecos />
          <SectionDepoimentos />
          <SectionFAQ />
          <SectionCTA />
          <Footer />
        </main>

        <TweaksPanel title="TWEAKS · LINA" subtitle="// painel de design" width={300}>
          <TweakSection label="Cor de destaque">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
              {ACCENTS.map(a => (
                <button key={a.id} onClick={() => setTweak("accent", a.id)} title={a.label}
                  style={{
                    height: 32,
                    background: a.swatch,
                    border: tweaks.accent === a.id ? "2px solid #fff" : "1px solid #444",
                    cursor: "pointer",
                    boxShadow: tweaks.accent === a.id ? `0 0 12px ${a.swatch}` : "none",
                  }}/>
              ))}
            </div>
            <div style={{ marginTop: 8, fontSize: 11, color: "var(--fg-dim)", fontFamily: "var(--font-mono)", letterSpacing: "0.1em" }}>
              {ACCENTS.find(a => a.id === tweaks.accent)?.label || "—"}
            </div>
          </TweakSection>

          <TweakSection label="Visual">
            <TweakToggle label="Scanlines / CRT" value={tweaks.scanlines !== false} onChange={(v) => setTweak("scanlines", v)} />
            <TweakRadio
              label="Densidade do grid"
              value={tweaks.gridDensity || "medium"}
              onChange={(v) => setTweak("gridDensity", v)}
              options={[
                { value: "sparse", label: "Sparse" },
                { value: "medium", label: "Médio" },
                { value: "dense",  label: "Dense" },
              ]}/>
            <TweakRadio
              label="Glow"
              value={tweaks.glow || "medium"}
              onChange={(v) => setTweak("glow", v)}
              options={[
                { value: "off",    label: "Off" },
                { value: "low",    label: "Low" },
                { value: "medium", label: "Med" },
                { value: "high",   label: "High" },
              ]}/>
          </TweakSection>
        </TweaksPanel>
      </div>
    </>
  );
};

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