/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakSlider, TweakToggle, TweakColor */
const { useEffect: useEffectApp, useState: useStateApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "editorial",
  "savingsPct": 16,
  "fontDisplay": "Sora",
  "fontSans": "Plus Jakarta Sans",
  "typeScale": 1,
  "animations": true,
  "primaryGreen": "#155224",
  "accentYellow": "#f5c64a",
  "accentOrange": "#ed6a1c"
}/*EDITMODE-END*/;

const FONT_DISPLAY_OPTIONS = ["Sora", "Space Grotesk", "Manrope", "DM Sans", "Instrument Serif", "Fraunces"];
const FONT_SANS_OPTIONS = ["Plus Jakarta Sans", "Inter", "DM Sans", "Manrope", "IBM Plex Sans", "Geist"];

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

  // apply CSS variables from tweaks
  useEffectApp(() => {
    const r = document.documentElement;
    r.style.setProperty("--green-900", tweaks.primaryGreen);
    r.style.setProperty("--yellow", tweaks.accentYellow);
    r.style.setProperty("--orange", tweaks.accentOrange);
    r.style.setProperty("--font-display", `"${tweaks.fontDisplay}", sans-serif`);
    r.style.setProperty("--font-sans", `"${tweaks.fontSans}", sans-serif`);
    r.style.setProperty("--typescale", tweaks.typeScale);
  }, [tweaks]);

  // dynamically load chosen google fonts
  useEffectApp(() => {
    const id = "dyn-fonts";
    let link = document.getElementById(id);
    if (!link) {
      link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      document.head.appendChild(link);
    }
    const f1 = tweaks.fontDisplay.replace(/ /g, "+");
    const f2 = tweaks.fontSans.replace(/ /g, "+");
    link.href = `https://fonts.googleapis.com/css2?family=${f1}:ital,wght@0,400;0,600;1,400&family=${f2}:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap`;
  }, [tweaks.fontDisplay, tweaks.fontSans]);

  // scroll reveal
  useEffectApp(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.1 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [tweaks.heroVariant]);

  const goToSimulator = () => {
    document.getElementById("simular")?.scrollIntoView({ behavior: "smooth" });
  };

  const Hero = tweaks.heroVariant === "bold" ? window.HeroBoldNumber : window.HeroEditorial;

  return (
    <div className={tweaks.animations ? "anim-on" : "anim-off"}>
      <Nav onCTAClick={goToSimulator} />
      <Hero onCTAClick={goToSimulator} savingsPct={tweaks.savingsPct} />
      <HowItWorks onCTAClick={goToSimulator} />
      <Simulator savingsPct={tweaks.savingsPct} />
      <RealBill onCTAClick={goToSimulator} />
      <VideoSection onCTAClick={goToSimulator} />
      <FAQ />

      <section className="section-cta">
        <div className="container">
          <div className="cta-card">
            <div className="inner">
              <div>
                <h2>
                  Pronto pra <em>começar</em><br/>
                  a economizar?
                </h2>
                <p>Cadastre sua conta agora. Em até 24h você recebe a simulação exata e, se aprovar, o desconto entra na sua próxima fatura CEMIG.</p>
                <div className="actions">
                  <button className="btn btn-primary btn-arrow" onClick={goToSimulator}>
                    Cadastrar minha conta
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
                  </button>
                  <a className="btn btn-wa" href="https://wa.me/5531971425778" target="_blank" rel="noreferrer">
                    Falar no WhatsApp
                  </a>
                </div>
              </div>
              <div style={{display:"flex", flexDirection:"column", gap:14}}>
                <div style={{background:"rgba(255,255,255,0.05)", border:"1px solid rgba(255,255,255,0.08)", padding:"20px 24px", borderRadius: 14, display:"flex", justifyContent:"space-between", alignItems:"center"}}>
                  <div>
                    <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--green-200)"}}>Economia média</div>
                    <div style={{fontFamily:"var(--font-display)", fontSize: 36, color:"white", marginTop:4}}>R$ 670 / ano</div>
                  </div>
                  <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", color:"var(--yellow)", fontSize:48}}>↗</div>
                </div>
                <div style={{background:"rgba(255,255,255,0.05)", border:"1px solid rgba(255,255,255,0.08)", padding:"20px 24px", borderRadius: 14}}>
                  <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.08em", textTransform:"uppercase", color:"var(--green-200)"}}>Sem fidelidade · Sem taxa · Sem instalação</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <WhatsappFab />
      <StickyMobileCTA onCTAClick={goToSimulator} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout">
          <TweakRadio
            label="Hero variant"
            value={tweaks.heroVariant}
            onChange={(v)=>setTweak("heroVariant", v)}
            options={[
              {value:"editorial", label:"Editorial"},
              {value:"bold", label:"Bold Number"},
            ]}
          />
        </TweakSection>

        <TweakSection label="Conteúdo">
          <TweakSlider
            label="Desconto exibido (%)"
            value={tweaks.savingsPct}
            min={10} max={25} step={1}
            onChange={(v)=>setTweak("savingsPct", v)}
          />
        </TweakSection>

        <TweakSection label="Tipografia">
          <TweakSelect
            label="Fonte display (títulos)"
            value={tweaks.fontDisplay}
            options={FONT_DISPLAY_OPTIONS.map(f=>({value:f, label:f}))}
            onChange={(v)=>setTweak("fontDisplay", v)}
          />
          <TweakSelect
            label="Fonte texto"
            value={tweaks.fontSans}
            options={FONT_SANS_OPTIONS.map(f=>({value:f, label:f}))}
            onChange={(v)=>setTweak("fontSans", v)}
          />
          <TweakSlider
            label="Escala"
            value={tweaks.typeScale}
            min={0.85} max={1.15} step={0.05}
            onChange={(v)=>setTweak("typeScale", v)}
          />
        </TweakSection>

        <TweakSection label="Cores">
          <TweakColor
            label="Verde primário"
            value={tweaks.primaryGreen}
            onChange={(v)=>setTweak("primaryGreen", v)}
          />
          <TweakColor
            label="Acento (amarelo)"
            value={tweaks.accentYellow}
            onChange={(v)=>setTweak("accentYellow", v)}
          />
          <TweakColor
            label="Acento (laranja)"
            value={tweaks.accentOrange}
            onChange={(v)=>setTweak("accentOrange", v)}
          />
        </TweakSection>

        <TweakSection label="Animações">
          <TweakToggle
            label="Animações ativas"
            value={tweaks.animations}
            onChange={(v)=>setTweak("animations", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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