/* global React, ReactDOM, I18N */
const { useState: useState_app, useEffect: useEffect_app, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "headline": "A",
  "ctaCopy": "B",
  "heroBgGlow": "subtle"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  gold:    { gold: "#D4B36A", gold2: "#E8C77A", goldDeep: "#A88543", glow: "rgba(212,179,106,0.18)" },
  ice:     { gold: "#BFD3E8", gold2: "#E2EDF8", goldDeep: "#7E97B2", glow: "rgba(191,211,232,0.20)" },
  mint:    { gold: "#7BC9A1", gold2: "#A9DEC1", goldDeep: "#3F8A65", glow: "rgba(123,201,161,0.22)" },
  magenta: { gold: "#D27EB3", gold2: "#E8AED1", goldDeep: "#993F76", glow: "rgba(210,126,179,0.22)" },
};

const HEADLINE_VARIANTS = {
  pt: {
    A: { pre: "Seu negócio com",        accent: "IA e tecnologia de ponta",         post: "— sem precisar montar um time técnico" },
    B: { pre: "A equipe de tecnologia", accent: "que o seu negócio precisava,",     post: "sem os custos de contratar uma" },
    C: { pre: "Da ideia ao app",        accent: "funcionando",                       post: "— com IA, mobile e web entregues por quem já fez isso antes" },
  },
  en: {
    A: { pre: "Your business with",     accent: "AI and serious engineering",        post: "— without hiring a tech team" },
    B: { pre: "The tech team",          accent: "your business needed,",             post: "without the cost of hiring one" },
    C: { pre: "From idea to a",         accent: "working app",                       post: "— with AI, mobile and web shipped by people who've done it before" },
  },
};

const CTA_VARIANTS = {
  pt: {
    A: "Quero conhecer a Dowsnux",
    B: "Quero um parceiro técnico de confiança",
  },
  en: {
    A: "I want to meet Dowsnux",
    B: "I want a technical partner I can trust",
  },
};

function App(){
  const [t_tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState_app(() => {
    const saved = localStorage.getItem("dowsnux:lang");
    return saved === "en" ? "en" : "pt";
  });
  const [modalOpen, setModalOpen] = useState_app(false);
  const [scrollPct, setScrollPct] = useState_app(0);

  useEffect_app(() => { localStorage.setItem("dowsnux:lang", lang); }, [lang]);
  useEffect_app(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setScrollPct(max > 0 ? (window.scrollY / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Patch headline + CTA copy into the i18n bundle based on tweaks
  const t = useMemo(() => {
    const base = JSON.parse(JSON.stringify(I18N[lang]));
    const h = HEADLINE_VARIANTS[lang][t_tw.headline] || HEADLINE_VARIANTS[lang].A;
    base.hero.h1Pre = h.pre;
    base.hero.h1Accent = h.accent;
    base.hero.h1Post = h.post;
    const cta = CTA_VARIANTS[lang][t_tw.ctaCopy] || CTA_VARIANTS[lang].B;
    base.hero.cta = cta;
    return base;
  }, [lang, t_tw.headline, t_tw.ctaCopy]);

  // Apply accent palette via CSS vars
  useEffect_app(() => {
    const p = ACCENT_PALETTES[t_tw.accent] || ACCENT_PALETTES.gold;
    document.documentElement.style.setProperty("--gold", p.gold);
    document.documentElement.style.setProperty("--gold-2", p.gold2);
    document.documentElement.style.setProperty("--gold-deep", p.goldDeep);
    document.documentElement.style.setProperty("--gold-glow", p.glow);
  }, [t_tw.accent]);

  // Hero glow intensity
  useEffect_app(() => {
    const map = { off: 0, subtle: 0.12, strong: 0.28 };
    document.documentElement.style.setProperty("--hero-glow-a", map[t_tw.heroBgGlow] || 0.12);
  }, [t_tw.heroBgGlow]);

  const openModal = () => setModalOpen(true);
  const closeModal = () => setModalOpen(false);

  return (
    <>
      <div className="scroll-progress" style={{ width: `${scrollPct}%` }}></div>
      <Nav t={t} lang={lang} setLang={setLang} openModal={openModal} />
      <Hero t={t} openModal={openModal} />
      <Marquee items={t.marquee} />
      <ValueProp t={t} />
      <Pain t={t} openModal={openModal} />
      <Solution t={t} />
      <Benefits t={t} />
      <Proof t={t} />
      <Offer t={t} openModal={openModal} />
      <Objections t={t} />
      <Guarantee t={t} />
      <Urgency t={t} />
      <FAQ t={t} openModal={openModal} />
      <FinalCTA t={t} openModal={openModal} />
      <PS t={t} openModal={openModal} />
      <Footer t={t} />
      <ContactModal t={t} open={modalOpen} close={closeModal} lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "pt" ? "Cor de destaque" : "Accent color"} />
        <TweakColor
          label={lang === "pt" ? "Paleta" : "Palette"}
          value={t_tw.accent}
          options={["gold", "ice", "mint", "magenta"]}
          onChange={(v) => setTweak("accent", v)}
          render={(opt) => {
            const p = ACCENT_PALETTES[opt];
            return p ? p.gold : "#000";
          }}
        />

        <TweakSection label={lang === "pt" ? "Variação de headline" : "Headline variation"} />
        <TweakRadio
          label={lang === "pt" ? "Ângulo" : "Angle"}
          value={t_tw.headline}
          options={["A", "B", "C"]}
          onChange={(v) => setTweak("headline", v)}
        />
        <div style={{
          padding: "6px 10px", fontSize: 10.5, lineHeight: 1.35,
          color: "rgba(41,38,27,0.65)", marginTop: -4,
        }}>
          {{
            A: lang === "pt" ? "IA + transformação" : "AI + transformation",
            B: lang === "pt" ? "Parceria contínua"    : "Continuous partnership",
            C: lang === "pt" ? "Velocidade + resultado" : "Speed + result",
          }[t_tw.headline]}
        </div>

        <TweakSection label={lang === "pt" ? "CTA principal" : "Primary CTA"} />
        <TweakRadio
          label={lang === "pt" ? "Copy" : "Copy"}
          value={t_tw.ctaCopy}
          options={["A", "B"]}
          onChange={(v) => setTweak("ctaCopy", v)}
        />
        <div style={{
          padding: "6px 10px", fontSize: 10.5, lineHeight: 1.35,
          color: "rgba(41,38,27,0.65)", marginTop: -4,
        }}>
          “{CTA_VARIANTS[lang][t_tw.ctaCopy]}”
        </div>

        <TweakSection label={lang === "pt" ? "Brilho do hero" : "Hero glow"} />
        <TweakRadio
          label={lang === "pt" ? "Intensidade" : "Intensity"}
          value={t_tw.heroBgGlow}
          options={["off", "subtle", "strong"]}
          onChange={(v) => setTweak("heroBgGlow", v)}
        />

        <TweakSection label={lang === "pt" ? "Idioma" : "Language"} />
        <TweakRadio
          label="UI"
          value={lang}
          options={["pt", "en"]}
          onChange={setLang}
        />
      </TweaksPanel>
    </>
  );
}

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