const { Button, Icon, Badge, IconBadge } = window.PodeJDesignSystem_c00e32;
const { useState, useEffect, useRef } = React;

/* ===========================================================================
   CONFIG — plug real values here before go-live.
   These are the placeholders the brief asked to keep until confirmed.
   =========================================================================== */
const WHATSAPP_NUMBER = "[WHATSAPP_NUMBER]"; // ex.: "5511999999999"
const LINK_PRIVACIDADE = "[LINK_PRIVACIDADE]";
const LINK_INSTAGRAM = "https://www.instagram.com/podeja.oficial/";

/* URL do app do Pode Já (frontend Next 16). Resolução em cascata:
   1) query ?pj-target=<url> — se presente, salva em localStorage e usa
   2) localStorage.pj-target — override persistente (dev/QA)
   3) hostname detection — fallback default (prod real vs preview/local)

   Uso pra apontar pra outro app (ex.: local):
     - visite: https://.../?pj-target=http://localhost:3000  (uma vez, persiste)
     - console: localStorage.setItem("pj-target", "http://localhost:3000")
     - limpar override: localStorage.removeItem("pj-target") ou ?pj-target=reset
*/
const PODEJA_APP_URL = (() => {
  if (typeof window === "undefined") return "https://app.sandbox.podeja.com.br";

  const qs = new URLSearchParams(window.location.search);
  const qsTarget = qs.get("pj-target");
  if (qsTarget === "reset") {
    try { localStorage.removeItem("pj-target"); } catch(_) {}
  } else if (qsTarget) {
    try { localStorage.setItem("pj-target", qsTarget); } catch(_) {}
  }

  try {
    const stored = localStorage.getItem("pj-target");
    if (stored) return stored.replace(/\/$/, "");
  } catch(_) {}

  const h = window.location.hostname;
  if (h === "podeja.com.br" || h.endsWith(".podeja.com.br")) {
    return "https://app.podeja.com.br";
  }
  return "https://app.sandbox.podeja.com.br";
})();
const waHref = WHATSAPP_NUMBER.startsWith("[")
  ? "#"
  : `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent("Olá! Quero saber mais sobre a Pode Já.")}`;

const LOGO_BRANCA = "assets/logo-branca.svg";
const LOGO_PRETA = "assets/logo-preta.svg";

/* Phone mask: (00) 00000-0000 */
function maskPhone(v){
  const d = v.replace(/\D/g,"").slice(0,11);
  if(d.length<=2) return d.length?`(${d}`:"";
  if(d.length<=7) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}

/* Opens the signup modal (CTAs across the page dispatch this). */
function scrollToForm(){ window.dispatchEvent(new Event("pj:open-signup")); }

/* ---------------- Header ---------------- */
function Header(){
  return (
    <header className="site-header">
      <div className="container">
        <div className="brand-lockup">
          <img src={LOGO_BRANCA} alt="Pode Já" />
        </div>
      </div>
    </header>
  );
}

/* ---------------- Signup form ---------------- */
function SignupForm(){
  const [nome,setNome]=useState("");
  const [tel,setTel]=useState("");
  const [email,setEmail]=useState("");
  const [touched,setTouched]=useState({});
  const [done,setDone]=useState(false);

  const nomeOk = nome.trim().split(" ").filter(Boolean).length>=1 && nome.trim().length>=2;
  const telDigits = tel.replace(/\D/g,"");
  const telOk = telDigits.length>=10 && telDigits.length<=11;
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  function submit(e){
    e.preventDefault();
    setTouched({nome:true,tel:true,email:true});
    if(!(nomeOk && telOk && emailOk)) return;
    /* ==== INTEGRAÇÃO BACKEND ====
       Enviar o pré-cadastro aqui. Sem redirecionamento — a página faz o pré-signup.
       Ex.:
       fetch("/api/pre-signup", { method:"POST",
         headers:{ "Content-Type":"application/json" },
         body: JSON.stringify({ nome, telefone: telDigits, email: email.trim() || null,
                                origem: new URLSearchParams(location.search).get("utm_source") }) })
         .then(...)
       ============================= */
    window.dispatchEvent(new CustomEvent("pj:redirect",{detail:{
      firstName: nome.trim().split(" ")[0],
      fullName: nome.trim(),
      email: email.trim(),
      phone: telDigits,
    }}));
  }

  if(done){
    return (
      <div className="signup-card" id="cadastro">
        <div className="signup-success">
          <div className="check"><Icon name="check_circle" size={40} color="var(--pj-success)" fill /></div>
          <h2>Pronto, {nome.trim().split(" ")[0]}! Seu lugar tá guardado.</h2>
          <p>A gente já começou a preparar o que é seu. Fica de olho no seu WhatsApp — o próximo passo chega por lá, sem pressa e sem compromisso.</p>
        </div>
      </div>
    );
  }

  return (
    <form className="signup-card" id="cadastro" onSubmit={submit} noValidate>
      <h2>Crie sua conta grátis e<br /><span style={{color:"var(--pj-orange)"}}>descubra o que já temos para você.</span></h2>

      <div className={"field"+(touched.nome&&!nomeOk?" show-err":"")}>
        <label htmlFor="f-nome">Nome</label>
        <input id="f-nome" type="text" inputMode="text" autoComplete="name" placeholder="Como podemos te chamar?"
          className={touched.nome&&!nomeOk?"invalid":""} value={nome}
          onChange={e=>setNome(e.target.value)} onBlur={()=>setTouched(t=>({...t,nome:true}))} />
        <span className="err">Conta pra gente o seu nome.</span>
      </div>

      <div className={"field"+(touched.tel&&!telOk?" show-err":"")}>
        <label htmlFor="f-tel">Celular</label>
        <input id="f-tel" type="tel" inputMode="numeric" autoComplete="tel" placeholder="(11) 90000-0000"
          className={touched.tel&&!telOk?"invalid":""} value={tel}
          onChange={e=>setTel(maskPhone(e.target.value))} onBlur={()=>setTouched(t=>({...t,tel:true}))} />
        <span className="err">Coloca um celular com DDD, com WhatsApp de preferência.</span>
      </div>

      <div className={"field"+(touched.email&&!emailOk?" show-err":"")}>
        <label htmlFor="f-email">E-mail</label>
        <input id="f-email" type="email" inputMode="email" autoComplete="email" placeholder="voce@email.com"
          className={touched.email&&!emailOk?"invalid":""} value={email}
          onChange={e=>setEmail(e.target.value)} onBlur={()=>setTouched(t=>({...t,email:true}))} />
        <span className="err">Confere esse e-mail pra gente.</span>
      </div>

      <Button variant="primary" size="lg" fullWidth icon="arrow_forward" type="submit" style={{marginTop:6}}>Continuar</Button>

      <div className="trust-micro">
        <span>Ao continuar, você aceita os <a href="#" target="_blank" rel="noreferrer">Termos de Uso</a> e a <a href="#" target="_blank" rel="noreferrer">Política de Privacidade</a>.</span>
      </div>

    </form>
  );
}

/* ---------------- Redirect transition ---------------- */
function RedirectScreen(){
  const [state,setState]=useState(null);
  useEffect(()=>{
    const h=e=>setState(e.detail||null);
    window.addEventListener("pj:redirect",h);
    return()=>window.removeEventListener("pj:redirect",h);
  },[]);
  useEffect(()=>{
    if(!state) return;
    document.body.style.overflow="hidden";
    // Passa name/email/phone via query pra pré-preencher step 1 do signup no
    // app do Pode Já; signup salta direto pro step 2 (CPF).
    const params = new URLSearchParams({
      from: "podeja",
      name: state.fullName || "",
      email: state.email || "",
      phone: state.phone || "",
    });
    const target = `${PODEJA_APP_URL}/signup?${params.toString()}`;
    const t = setTimeout(()=>{ window.location.href = target; }, 3200);
    return()=>{clearTimeout(t);document.body.style.overflow="";};
  },[state]);
  if(!state) return null;
  return (
    <div className="redirect-screen" role="status" aria-live="polite">
      <div className="redirect-inner">
        <img className="redirect-logo" src={LOGO_BRANCA} alt="Pode Já" />
        <h2 className="redirect-title">Tudo que é seu, finalmente ao seu alcance.</h2>
        <p className="redirect-sub">Estamos te levando para finalizar seu cadastro na Pode Já</p>
        <div className="redirect-bar"><span></span></div>
      </div>
    </div>
  );
}

/* ---------------- Hero ---------------- */
function Hero(){
  return (
    <section className="hero">
      <div className="hero-photo" aria-hidden="true"><img src="assets/hero-familia.webp" alt="Família sorrindo no sofá enquanto usa o celular" loading="eager" /></div>
      <div className="hero-scrim" aria-hidden="true"></div>
      <img className="hero-swoosh" src="assets/hero-swoosh.svg" alt="" aria-hidden="true" />
      <div className="hero-content">
        <div className="hero-inner">
          <h1 className="hero-title">O que é seu já está esperando por você.</h1>
          <p className="hero-sub">A <strong>Pode Já</strong> une crédito e economia nas contas do mês, organizando sua vida financeira de forma simples e sem julgamento.</p>
          <button type="button" className="hero-cta" onClick={scrollToForm}>Descubra agora <Icon name="arrow_forward" size={22} /></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Signup modal ---------------- */
function SignupModal(){
  const [open,setOpen]=useState(false);
  useEffect(()=>{
    const o=()=>setOpen(true);
    window.addEventListener("pj:open-signup",o);
    return ()=>window.removeEventListener("pj:open-signup",o);
  },[]);
  useEffect(()=>{
    if(!open) return;
    const prev=document.body.style.overflow;
    document.body.style.overflow="hidden";
    const esc=e=>{ if(e.key==="Escape") setOpen(false); };
    window.addEventListener("keydown",esc);
    return ()=>{ document.body.style.overflow=prev; window.removeEventListener("keydown",esc); };
  },[open]);
  return (
    <div className={"signup-overlay"+(open?" open":"")} aria-hidden={!open} onClick={e=>{ if(e.target===e.currentTarget) setOpen(false); }}>
      <div className="signup-modal" role="dialog" aria-modal="true" aria-label="Criar conta">
        <button type="button" className="signup-close" onClick={()=>setOpen(false)} aria-label="Fechar"><Icon name="close" size={22} /></button>
        <SignupForm />
      </div>
    </div>
  );
}

/* ---------------- Belief ---------------- */
function Belief(){
  return (
    <section className="band band-white belief" style={{background:"var(--pj-surface-warm)"}}>
      <div className="container">
        <h2 className="section-title"><span className="pj-em" style={{display:"block"}}>Crédito não é favor,</span><span className="pj-em" style={{display:"block"}}>é direito</span></h2>
        <p style={{marginTop:20,color:"#3A342E"}}>Por isso a <b>Pode Já</b> começa te ajudando a enxergar o que já está disponível para você. E não para aí: a gente fica do seu lado para você se organizar no dia a dia e ir mais longe, no seu ritmo.</p>
        <div className="belief-chips">
          <div className="belief-chip"><span className="chip-check"><Icon name="check" size={18} color="#156A92" /></span>Sem burocracia</div>
          <div className="belief-chip"><span className="chip-check"><Icon name="check" size={18} color="#156A92" /></span>Sem julgamento</div>
          <div className="belief-chip"><span className="chip-check"><Icon name="check" size={18} color="#156A92" /></span>Sem letra miúda</div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Products ---------------- */
function ProdCard({img,title,desc,note,cta,onCta,accent,tag}){
  return (
    <button type="button" className="prod-card" onClick={onCta} style={accent?{border:"4px solid "+accent}:undefined}>
      <img className="pc-img" src={img} alt="" loading="lazy" decoding="async" />
      {tag && <span className="pc-tag">{tag}</span>}
      <div className="pc-body">
        <div className="pc-title">{title}</div>
        <p className="pc-desc">{desc}</p>
        {note && <p className="pc-note">{note}</p>}
        <span className="pc-link">{cta} <Icon name="chevron_right" size={18} color="#fff" /></span>
      </div>
    </button>
  );
}

function Products(){
  const go = scrollToForm;
  return (
    <section className="band" id="produtos" style={{background:"transparent"}}>
      <div className="container">
        <h2 className="section-title" style={{color:"#231E19"}}>Do crédito à economia<br />do dia a dia</h2>
        <p className="section-intro" style={{color:"#3A342E"}}>Tudo o que a gente faz <b>por você</b> em um só lugar.</p>

        <div className="group-label" style={{color:"var(--pj-sun-200)"}}><Icon name="account_balance_wallet" size={26} weight={300} color="var(--pj-sun-200)" /> Para acessar o seu crédito</div>
        <div className="prod-grid">
          <ProdCard accent="var(--pj-sun-200)" cta="Simular agora" img="assets/card-pessoal.webp" title="Crédito Pessoal"
            desc="Mais flexibilidade para o que a vida pedir. Você compara e escolhe." onCta={go} />
          <ProdCard accent="var(--pj-sun-200)" cta="Consultar agora" img="assets/card-consignado.webp" title="Crédito Consignado CLT"
            desc="Para carteira assinada, com parcela fixa em folha." onCta={go} />
          <ProdCard accent="var(--pj-sun-200)" tag="Em breve" cta="Simular agora" img="assets/card-fgts.webp" title="Antecipação do FGTS"
            desc="Seu saldo do FGTS na mão quando precisar, sem burocracia." onCta={go} />
        </div>
        <p className="grid-note">Produtos sujeitos à análise.</p>

        <div className="group-label" style={{color:"var(--pj-ocean-200)"}}><Icon name="shield" size={26} weight={300} color="var(--pj-ocean-200)" /> Para economizar e proteger o que importa</div>
        <div className="prod-grid">
          <ProdCard accent="var(--pj-ocean-200)" cta="Simular economia" img="assets/card-luz.webp" title="Economia na conta de luz"
            desc="Pague menos na conta de luz todo mês, sem obra e sem trocar nada em casa." onCta={go} />
          <ProdCard accent="var(--pj-ocean-200)" cta="Conhecer" img="assets/card-assistencia.webp" title="Assistências"
            desc="Saúde, odonto, pet, psicologia e previdência, com desconto de verdade. Você monta o seu pacote." onCta={go} />
          <ProdCard accent="var(--pj-ocean-200)" cta="Contratar" img="assets/card-seguro.webp" title="Seguro de vida"
            desc="Proteção simples para a sua família, do jeito que cabe no seu bolso."
            note="Sujeito à análise da seguradora parceira." onCta={go} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- How it works ---------------- */
function How(){
  const steps = [
    "Crie sua conta gratuitamente.",
    "A gente mostra o crédito e a economia disponíveis para o seu perfil.",
    "Você entende, compara e decide. Sem pressa e sem compromisso.",
  ];
  const wrap = React.useRef(null);
  const [prog,setProg] = React.useState(0);
  React.useEffect(()=>{
    const onScroll=()=>{
      const el=wrap.current; if(!el) return;
      const r=el.getBoundingClientRect();
      const anchor=window.innerHeight*0.72;
      const p=(anchor-r.top)/Math.max(r.height,1);
      setProg(Math.min(1,Math.max(0,p)));
    };
    onScroll();
    window.addEventListener("scroll",onScroll,{passive:true});
    window.addEventListener("resize",onScroll);
    return()=>{window.removeEventListener("scroll",onScroll);window.removeEventListener("resize",onScroll);};
  },[]);
  return (
    <section className="band band-white" id="como-funciona">
      <div className="container">
        <p className="section-eyebrow">Simples assim</p>
        <h2 className="section-title">Do primeiro clique à decisão, <span className="pj-em">sem enrolação.</span></h2>
        <div className="steps" ref={wrap}>
          <div className="steps-rail"><div className="steps-fill" style={{height:prog*100+"%"}}></div></div>
          {steps.map((s,i)=>(
            <div className="step" key={i}>
              <div className="step-num">{i+1}</div>
              <div className="step-body">{s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Trust ---------------- */
function Trust(){
  const items = [
    ["encrypted","Seus dados protegidos pela LGPD."],
    ["shield_lock","Operação segura e criptografada."],
    ["visibility","Transparência em todas as operações."],
  ];
  return (
    <section className="band trust-band" id="seguranca">
      <div className="container trust-inner">
        <div className="trust-mock"><img src="assets/mockup-celular-v3.webp" alt="App da Pode Já no celular" width="869" height="1200" /></div>
        <div className="trust-copy">
          <p className="section-eyebrow">Confiança</p>
          <h2 className="section-title"><span style={{display:"inline-block"}}>Pode confiar.</span> <span className="pj-em" style={{display:"inline-block"}}>É seu, e é seguro.</span></h2>
          <div className="trust-grid">
            {items.map(([ic,tx])=>(
              <div className="trust-item" key={ic}>
                <div className="ti-icon"><Icon name={ic} size={24} color="var(--pj-orange)" /></div>
                <div className="ti-text">{tx}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Final banner ---------------- */
function FinalBanner(){
  return (
    <section className="final-band">
      <div className="container">
        <div className="final-inner">
          <img className="fb-graf" src="assets/grafismo5.svg" alt="" aria-hidden="true" />
          <div className="fb-copy">
          <h2>Você tem mais crédito do que te contaram.</h2>
          <p className="fb-text">Crie sua conta e descubra em poucos passos.</p>
          <button type="button" className="fb-cta" onClick={scrollToForm}>Descobrir agora <Icon name="arrow_forward" size={20} /></button>
          </div>
          <div className="fb-art"><img src="assets/atendente-wpp-v3.webp" alt="" width="760" height="900" /></div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- WhatsApp band ---------------- */
function WhatsBand(){
  return (
    <section className="wa-band">
      <div className="container wa-inner">
        <div className="wa-icon"><img src="assets/icone-wpp.svg" alt="" aria-hidden="true" /></div>
        <div className="wa-copy">
          <h2 className="wa-title">Ficou com dúvida?</h2>
          <a href={waHref} target="_blank" rel="noopener" className="wa-cta"><span>Fala com a gente no WhatsApp</span></a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer(){
  return (
    <footer className="site-footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <img src={LOGO_BRANCA} alt="Pode Já" />
        </div>
        <div className="footer-body">
          <p className="footer-legal">A Pode Já pertence a TAYA TECH INTERMEDIAÇÃO LTDA, inscrita sob o CNPJ n° 49.235.430/0001-81, localizada à Rua Versolato, n° 111, Centro, São Bernardo do Campo - SP. As condições apresentadas dependem de análise do seu perfil e das instituições e seguradoras parceiras.</p>
          <div className="footer-links">
            <a href={LINK_INSTAGRAM} target="_blank" rel="noopener">Instagram</a>
            <a href={LINK_PRIVACIDADE}>Política de privacidade</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Sticky mobile CTA ---------------- */
function StickyCTA(){
  const [show,setShow]=useState(false);
  useEffect(()=>{
    const hero = document.querySelector(".hero");
    const footer = document.querySelector(".site-footer");
    function onScroll(){
      const past = hero ? (hero.getBoundingClientRect().bottom < 40) : false;
      const nearEnd = footer ? (footer.getBoundingClientRect().top < window.innerHeight) : false;
      setShow(past && !nearEnd);
    }
    window.addEventListener("scroll",onScroll,{passive:true});
    onScroll();
    return ()=>window.removeEventListener("scroll",onScroll);
  },[]);
  return (
    <div className={"sticky-cta"+(show?" show":"")}>
      <Button variant="primary" size="md" fullWidth icon="arrow_forward" onClick={scrollToForm}>Descobrir agora</Button>
    </div>
  );
}

/* ---------------- Scroll header ---------------- */
function ScrollHeader(){
  const [show,setShow]=useState(false);
  useEffect(()=>{
    const hero=document.querySelector(".hero");
    const footer=document.querySelector(".site-footer");
    function onScroll(){
      const past = hero ? (hero.getBoundingClientRect().bottom < 20) : false;
      const atFooter = footer ? (footer.getBoundingClientRect().top < window.innerHeight) : false;
      setShow(past && !atFooter);
    }
    window.addEventListener("scroll",onScroll,{passive:true});
    onScroll();
    return ()=>window.removeEventListener("scroll",onScroll);
  },[]);
  return (
    <div className={"scroll-header"+(show?" show":"")}>
      <div className="container"><img src={LOGO_PRETA} alt="Pode Já" /></div>
    </div>
  );
}

function Reveal(){
  React.useEffect(()=>{
    const els=document.querySelectorAll(".rv");
    if(!("IntersectionObserver" in window)){els.forEach(e=>e.classList.add("in"));return;}
    const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add("in");io.unobserve(e.target);}})},{threshold:0.25});
    els.forEach(e=>io.observe(e));
    return()=>io.disconnect();
  },[]);
  return null;
}

function App(){  return (
    <>
      <Reveal />
      <Header />
      <Hero />
      <Belief />
      <Products />
      <div className="graphic-divider" aria-hidden="true"><img src="assets/grafismo-divider.svg" alt="" /></div>
      <How />
      <Trust />
      <FinalBanner />
      <WhatsBand />
      <Footer />
      <StickyCTA />
      <ScrollHeader />
      <SignupModal />
      <RedirectScreen />
    </>
  );
}

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