/* ============================================
   PRODUZ SITE — App root + Nav + Tweaks
   ============================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "density": "comfortable",
  "showPromo": true,
  "showScarcity": true,
  "slotsLeft": 4,
  "accentStyle": "violet-orange"
}/*EDITMODE-END*/;

const Nav = () => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#hero" className="nav-brand">
          <img src="produzsite/assets/logo.png" alt="Produz Site" />
          <span>Produz Site</span>
        </a>
        <div className="nav-links">
          <a href="#hero" className="active">Início</a>
          <a href="#included">Incluso</a>
          <a href="#cases">Cases</a>
          <a href="#pricing">Preços</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a
            href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Vim do site da Produz Site.")}`}
            target="_blank"
            rel="noopener noreferrer"
            className="btn btn-ghost"
            style={{ padding: "10px 14px" }}
            aria-label="Falar no WhatsApp"
          >
            <Icon name="whatsapp" size={16} />
          </a>
          <a href="#pricing" className="btn btn-cta" style={{ padding: "10px 18px", fontSize: 14 }}>
            Começar
            <Icon name="arrow-up-right" size={14} />
          </a>
        </div>
      </div>
    </nav>
  );
};

const PromoBanner = () => (
  <div className="promo-banner">
    <span className="pulse"></span>
    <strong>Oferta por tempo limitado:</strong> setup grátis na contratação.
  </div>
);

const WhatsAppFloat = () => (
  <a
    href={`https://wa.me/5582999083808?text=${encodeURIComponent("Olá! Vim do site da Produz Site e gostaria de mais informações.")}`}
    target="_blank"
    rel="noopener noreferrer"
    className="wa-float"
    aria-label="Falar no WhatsApp"
  >
    <Icon name="whatsapp" size={26} />
  </a>
);

/* ===== Tweaks Panel ===== */
const TweaksUI = ({ tweaks, setTweak }) => {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Tema">
        <TweakRadio
          label="Modo"
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" },
          ]}
        />
        <TweakRadio
          label="Densidade"
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "compact", label: "Compacto" },
            { value: "comfortable", label: "Conforto" },
            { value: "spacious", label: "Amplo" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Promoção">
        <TweakToggle
          label="Tag de promo no hero"
          value={tweaks.showPromo}
          onChange={(v) => setTweak("showPromo", v)}
        />
        <TweakToggle
          label="Aviso de oferta"
          value={tweaks.showScarcity}
          onChange={(v) => setTweak("showScarcity", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

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

  // Apply theme + density to body
  useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.body.dataset.density = tweaks.density;
  }, [tweaks.theme, tweaks.density]);

  return (
    <>
      <div className="page-bg"></div>
      <div className="neon-blob one"></div>
      <div className="neon-blob two"></div>
      <div className="neon-blob three"></div>

      <PromoBanner />
      <Nav />
      <main>
        <Hero tweaks={tweaks} />
        <Pain />
        <Solution />
        <Included />
        <Audience />
        <Authority />
        <Cases />
        <Pricing tweaks={tweaks} />
        <HowItWorks />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <WhatsAppFloat />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>
  );
};

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