/* global React, Icon, WAButton, CallButton, StarRow, waLink, maskPhone, PHONE_DISPLAY */
const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ============================================================
// HERO
// ============================================================
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" />
      <div className="container hero-grid">
        <div className="hero-left">
          <div className="live-badge"><span className="dot-pulse" /> Equipes em campo agora</div>
          <h1>
            Seu esgoto<br/>não espera.<br/>
            <span className="accent">Equipe em 30 min.</span>
          </h1>
          <p className="hero-sub">
            Desentupimento profissional <b style={{color:'var(--ink)'}}>sem quebradeira</b>, com hidrojateamento de alta pressão e atendimento imediato 24h em toda Goiânia e região metropolitana.
          </p>
          <ul className="hero-bullets">
            {["Sem taxa de visita","Orçamento imediato","Garantia no serviço","Residencial e empresarial"].map(t => (
              <li key={t}><span className="chk"><Icon.Check style={{width:13,height:13}}/></span>{t}</li>
            ))}
          </ul>
          <div className="hero-ctas">
            <WAButton kind="urgent" size="lg" message="Olá! Preciso de atendimento urgente da Desentupidora Rei.">CHAMAR AGORA NO WHATSAPP</WAButton>
            <CallButton kind="ghost" size="lg">LIGAR PARA EQUIPE</CallButton>
          </div>
          <div className="hero-trust">
            <div className="stars-row">
              <StarRow />
              <div className="meta"><b>4.9/5</b> · Google Reviews</div>
            </div>
            <div className="stars-row">
              <div className="avatar-stack">
                <div className="av">RM</div><div className="av">JC</div><div className="av">AP</div><div className="av">+</div>
              </div>
              <div className="trust-pill"><b>+18 mil</b> atendimentos</div>
            </div>
          </div>
        </div>
        <CaptureCard />
      </div>
    </section>
  );
}

// ============================================================
// CAPTURE CARD
// ============================================================
function CaptureCard() {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [problem, setProblem] = useState("");
  const [err, setErr] = useState({});
  const [sec, setSec] = useState(15 * 60);

  useEffect(() => {
    const t = setInterval(() => setSec(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, []);

  const mm = String(Math.floor(sec/60)).padStart(2,"0");
  const ss = String(sec%60).padStart(2,"0");

  function submit(e) {
    e.preventDefault();
    const next = {};
    if (!name.trim() || name.trim().length < 2) next.name = "Informe seu nome";
    const d = phone.replace(/\D/g,"");
    if (d.length < 10) next.phone = "WhatsApp inválido";
    if (!problem) next.problem = "Selecione o problema";
    setErr(next);
    if (Object.keys(next).length) return;
    const msg = `Olá! Sou ${name}. Meu WhatsApp é ${phone}. Problema: ${problem}. Preciso de atendimento urgente.`;
    window.open(waLink(msg), "_blank");
  }

  return (
    <form className="capture-card" onSubmit={submit}>
      <div className="capture-head">
        <div>
          <h3>Atendimento prioritário</h3>
          <div className="sub">Responda em 60 segundos. Sem compromisso.</div>
        </div>
        <div className="timer">
          <div className="lbl">Rota expira</div>
          <div className="clock">{mm}:{ss}</div>
        </div>
      </div>

      <div className={`field ${err.name ? "err" : ""}`}>
        <label>Seu nome</label>
        <input value={name} onChange={e => setName(e.target.value)} placeholder="Ex: Maria Silva" />
        {err.name && <div className="errmsg">{err.name}</div>}
      </div>

      <div className={`field ${err.phone ? "err" : ""}`}>
        <label>WhatsApp</label>
        <input value={phone} onChange={e => setPhone(maskPhone(e.target.value))} placeholder="(62) 99999-9999" inputMode="numeric" />
        {err.phone && <div className="errmsg">{err.phone}</div>}
      </div>

      <div className={`field ${err.problem ? "err" : ""}`}>
        <label>Tipo de problema</label>
        <select value={problem} onChange={e => setProblem(e.target.value)}>
          <option value="">Selecione...</option>
          <option>Esgoto entupido</option>
          <option>Vaso sanitário</option>
          <option>Pia ou ralo</option>
          <option>Caixa de gordura</option>
          <option>Hidrojateamento</option>
          <option>Condomínio / empresa</option>
          <option>Outro</option>
        </select>
        {err.problem && <div className="errmsg">{err.problem}</div>}
      </div>

      <button type="submit" className="btn btn-urgent btn-block btn-lg" style={{marginTop: 18}}>
        <Icon.WA /> QUERO ATENDIMENTO IMEDIATO
      </button>

      <div className="capture-foot" style={{marginTop: 14}}>
        <Icon.Lock /> <span>Seus dados protegidos · Resposta em até 5 min</span>
      </div>
    </form>
  );
}

// ============================================================
// PROOF STRIP
// ============================================================
function ProofStrip() {
  const items = [
    { n: "+18mil", l: "Atendimentos" },
    { n: "4.9", l: "Nota Google" },
    { n: "24h", l: "Disponível" },
    { n: <>90<span className="pct">%</span></>, l: "Resolvido 1ª visita" },
    { n: "+10 anos", l: "De experiência" },
    { n: "8", l: "Equipes em rota" },
  ];
  return (
    <section className="proof-strip">
      <div className="container proof-grid">
        {items.map((it, i) => (
          <div key={i} className="proof-item">
            <div className="num">{it.n}</div>
            <div className="lbl">{it.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// SERVICES
// ============================================================
function Services() {
  const items = [
    { ic: <Icon.Pipe />, t: "Esgoto", d: "Desentupimento de rede de esgoto residencial, predial e industrial." },
    { ic: <Icon.Toilet />, t: "Vaso Sanitário", d: "Desobstrução completa sem quebra de piso ou parede." },
    { ic: <Icon.Drop />, t: "Pia e Ralo", d: "Limpeza profunda de tubulação de cozinha, banheiro e área externa." },
    { ic: <Icon.Wrench />, t: "Caixa de Gordura", d: "Sucção e limpeza completa com descarte ambiental correto." },
    { ic: <Icon.Bolt />, t: "Hidrojateamento", d: "Alta pressão até 4.000 PSI para entupimentos críticos e raízes." },
    { ic: <Icon.Water />, t: "Drenagem Pluvial", d: "Desobstrução de redes pluviais, calhas e bocas de lobo." },
    { ic: <Icon.Factory />, t: "Industrial", d: "Operações em indústrias, restaurantes e grandes condomínios." },
    { ic: <Icon.Grid />, t: "Manutenção", d: "Contratos preventivos com atendimento prioritário." },
  ];

  function onMove(e) {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", `${e.clientX - r.left}px`);
    e.currentTarget.style.setProperty("--my", `${e.clientY - r.top}px`);
  }

  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />SERVIÇOS TÉCNICOS</div>
            <h2 className="section-title">Todos os tipos de<br/>desentupimento.</h2>
          </div>
          <div className="right">
            <p className="section-sub">Equipamentos modernos, equipe técnica especializada e atendimento sem quebradeira em residências, comércios e indústrias.</p>
          </div>
        </div>
        <div className="services-grid">
          {items.map((it, i) => (
            <a key={i} className="svc-card" onMouseMove={onMove} href={waLink(`Olá! Preciso de orçamento para: ${it.t}.`)} target="_blank" rel="noopener">
              <div className="svc-icon">{it.ic}</div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
              <div className="svc-cta">Orçar no WhatsApp <Icon.Arrow /></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// BEFORE / AFTER SLIDER
// ============================================================
function BeforeAfter() {
  const symptoms = [
    { ic: <Icon.Water />, t: "Pia escoando devagar", d: "Acúmulo de gordura na tubulação." },
    { ic: <Icon.Drop />, t: "Água voltando pelo ralo", d: "Obstrução na rede principal." },
    { ic: <Icon.Toilet />, t: "Vaso transbordando", d: "Bloqueio total no sifão ou ramal." },
    { ic: <Icon.Bolt />, t: "Mau cheiro persistente", d: "Caixa de gordura saturada." },
  ];
  return (
    <section className="section" id="problemas">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />SINAIS DE EMERGÊNCIA</div>
            <h2 className="section-title">Identificou o problema?<br/>A gente resolve hoje.</h2>
          </div>
          <div className="right">
            <p className="section-sub">Diagnóstico imediato pelo WhatsApp. Equipe técnica em até 30 min com equipamento certo para cada caso.</p>
          </div>
        </div>

        <div className="symptom-grid">
          {symptoms.map((s, i) => (
            <div key={i} className="symptom-card">
              <div className="symptom-num">0{i+1}</div>
              <div className="symptom-icon">{s.ic}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>

        <div className="symptom-cta">
          <div>
            <div className="eyebrow" style={{color: 'var(--urgent)'}}><span className="dot" style={{background:'var(--urgent)'}} />NÃO ESPERE PIORAR</div>
            <h3 style={{marginTop: 8, fontSize: 24, fontFamily: '"Archivo", sans-serif', letterSpacing: '-0.02em'}}>Quanto mais demora, maior o estrago.</h3>
          </div>
          <WAButton kind="urgent" size="lg" message="Olá! Identifiquei um problema no site, preciso de diagnóstico urgente.">DIAGNÓSTICO IMEDIATO</WAButton>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HOW IT WORKS
// ============================================================
function HowItWorks() {
  const steps = [
    { t: "Você chama", d: "WhatsApp ou ligação 24h. Atendimento humano imediato." },
    { t: "Diagnóstico", d: "Avaliamos o problema e enviamos a equipe certa." },
    { t: "Equipe enviada", d: "Técnico em campo em até 30 min na maior parte de Goiânia." },
    { t: "Desentupimento", d: "Execução sem quebradeira com equipamentos modernos." },
    { t: "Garantia", d: "Serviço entregue com garantia por escrito." },
  ];
  return (
    <section className="section" style={{background: "linear-gradient(180deg, transparent, rgba(250,204,21,0.025))"}}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />FLUXO DE ATENDIMENTO</div>
            <h2 className="section-title">Como funciona,<br/>do call ao final.</h2>
          </div>
        </div>
        <div className="timeline">
          {steps.map((s, i) => (
            <div key={i} className="tl-step">
              <div className="tl-num">{String(i+1).padStart(2,"0")}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TESTIMONIALS
// ============================================================
function Testimonials() {
  const items = [
    { q: "Chamamos às 2h da manhã e chegaram muito rápido no Jardim Goiás. Resolveram sem quebrar nada.", n: "Ricardo M.", w: "Goiânia · Residencial", tag: "Madrugada", in: "RM" },
    { q: "Atendem nosso condomínio há 2 anos. Equipe pontual, limpa o local e emite nota fiscal sempre.", n: "Síndica Patrícia", w: "Edifício Setor Bueno · Condomínio", tag: "Contrato", in: "PA" },
    { q: "Caixa de gordura do restaurante entupiu numa sexta às 19h. Em 40 minutos estavam aqui.", n: "Marcelo Pires", w: "Restaurante · Aparecida", tag: "Comercial", in: "MP" },
    { q: "Hidrojateamento na rede industrial sem precisar quebrar nada. Recomendo demais.", n: "Eng. Lúcia A.", w: "Distrito Industrial · Anápolis", tag: "Industrial", in: "LA" },
    { q: "Achei que ia ser caro e demorado, mas o orçamento foi justo e resolveram em uma hora.", n: "Juliana Costa", w: "Trindade · Residencial", tag: "Residencial", in: "JC" },
    { q: "Equipe extremamente educada, uniformizada. Limparam tudo depois do serviço. Profissionais.", n: "Fernando T.", w: "Senador Canedo · Residencial", tag: "Residencial", in: "FT" },
  ];
  return (
    <section className="section" id="depoimentos">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />+18 MIL ATENDIMENTOS</div>
            <h2 className="section-title">Goiânia confia<br/>na equipe Rei.</h2>
          </div>
          <div className="right">
            <div className="stars-row" style={{justifyContent:'flex-end'}}>
              <StarRow />
              <div className="meta"><b>4.9/5</b> · 1.240 avaliações Google</div>
            </div>
          </div>
        </div>
        <div className="test-grid">
          {items.map((t, i) => (
            <div key={i} className="test-card">
              <span className="test-tag">{t.tag}</span>
              <StarRow />
              <p className="quote">"{t.q}"</p>
              <div className="test-meta">
                <div className="av">{t.in}</div>
                <div>
                  <div className="name">{t.n}</div>
                  <div className="where">{t.w}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// B2B (Condomínios / Empresas)
// ============================================================
function B2B() {
  return (
    <section className="section" id="empresas">
      <div className="container b2b-grid">
        <div>
          <div className="eyebrow"><span className="dot" />CONDOMÍNIOS · EMPRESAS · INDÚSTRIA</div>
          <h2 className="section-title" style={{marginTop: 14}}>Atendimento técnico<br/>para quem não pode parar.</h2>
          <p className="section-sub">Operação contínua para síndicos, gestores prediais e indústrias. Equipe dedicada, SLA reduzido e relatórios técnicos.</p>
          <div className="b2b-features">
            {[
              { ic: <Icon.Shield />, t: "Manutenção preventiva", d: "Cronograma trimestral com hidrojateamento programado." },
              { ic: <Icon.Clock />, t: "Atendimento prioritário", d: "SLA de resposta em até 60 minutos em horário comercial." },
              { ic: <Icon.Factory />, t: "Hidrojateamento industrial", d: "Linhas críticas até 4.000 PSI com técnico NR-33/35." },
              { ic: <Icon.Truck />, t: "Contratos recorrentes", d: "Faturamento mensal, NF-e e relatório fotográfico." },
            ].map((f, i) => (
              <div key={i} className="b2b-feat">
                <div className="icon">{f.ic}</div>
                <h5>{f.t}</h5>
                <p>{f.d}</p>
              </div>
            ))}
          </div>
          <div style={{marginTop: 28, display:'flex', gap: 12, flexWrap:'wrap'}}>
            <WAButton kind="urgent" size="lg" message="Olá! Sou síndico/gestor e gostaria de proposta para contrato recorrente.">FALAR COM ATENDIMENTO B2B</WAButton>
          </div>
        </div>
        <div className="b2b-visual">
          <div className="b2b-visual-top">
            <div className="eyebrow"><span className="dot" />ATENDIMENTO B2B</div>
            <h3>Operação dedicada<br/>com SLA garantido.</h3>
            <ul>
              <li><span className="chk"><Icon.Check style={{width:11,height:11}}/></span>Equipe dedicada e técnico responsável</li>
              <li><span className="chk"><Icon.Check style={{width:11,height:11}}/></span>Faturamento mensal com NF-e</li>
              <li><span className="chk"><Icon.Check style={{width:11,height:11}}/></span>Relatório fotográfico de cada visita</li>
              <li><span className="chk"><Icon.Check style={{width:11,height:11}}/></span>Suporte 24/7 com canal direto</li>
            </ul>
          </div>
          <div className="b2b-stats">
            <div className="b2b-stat"><div className="n">+120</div><div className="l">Contratos ativos</div></div>
            <div className="b2b-stat"><div className="n">60 min</div><div className="l">SLA garantido</div></div>
            <div className="b2b-stat"><div className="n">24/7</div><div className="l">Plantão técnico</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// REGIONS
// ============================================================
function Regions() {
  const cities = ["Goiânia","Aparecida de Goiânia","Anápolis","Senador Canedo","Trindade","Inhumas","Guapó","Hidrolândia","Goianira","Goianápolis"];
  return (
    <section className="section regions">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />REGIÕES ATENDIDAS</div>
            <h2 className="section-title">Toda a região<br/>metropolitana.</h2>
          </div>
          <div className="right">
            <p className="section-sub">Operação 24h com equipes distribuídas em pontos estratégicos para atendimento expresso.</p>
          </div>
        </div>
        <div className="region-chips">
          {cities.map(c => <span key={c} className="region-chip"><span className="pin" />{c}</span>)}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// GUARANTEE
// ============================================================
function Guarantee() {
  return (
    <section className="guarantee">
      <div className="guarantee-bg" />
      <div className="container">
        <div className="seal">
          <div className="seal-outer">
            <svg viewBox="0 0 200 200">
              <defs>
                <path id="circlePath" d="M 100,100 m -85,0 a 85,85 0 1,1 170,0 a 85,85 0 1,1 -170,0" />
              </defs>
              <text>
                <textPath href="#circlePath">GARANTIA DE SERVIÇO · DESENTUPIDORA REI · GARANTIA DE SERVIÇO · DESENTUPIDORA REI · </textPath>
              </text>
            </svg>
          </div>
          <div className="seal-inner">
            <div>
              <div className="big">REI</div>
              <div className="sm">GARANTIA</div>
            </div>
          </div>
        </div>
        <h2>Se o problema retornar, voltamos sem custo.</h2>
        <p>Garantia formal por escrito. Se a obstrução retornar dentro do prazo de garantia, nossa equipe retorna sem nenhum custo adicional.</p>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQ() {
  const items = [
    { q: "Quanto tempo demora o atendimento?", a: "Na maior parte de Goiânia e região metropolitana, nossa equipe chega em até 30 minutos. Em horários de pico ou regiões mais distantes, em até 60 minutos." },
    { q: "Precisa quebrar piso ou parede?", a: "Não. Trabalhamos com equipamentos de hidrojateamento e máquinas de cabo elétrico que desentopem sem quebrar. Apenas em casos extremos avaliamos quebra, sempre com sua aprovação prévia." },
    { q: "Vocês atendem de madrugada?", a: "Sim. Operamos 24 horas por dia, 7 dias por semana, incluindo feriados. Plantão noturno com equipe completa." },
    { q: "Como funciona o orçamento?", a: "Orçamento gratuito, imediato e sem compromisso. Você só aprova se concordar com o valor. Nada de taxa de visita." },
    { q: "Quais formas de pagamento aceitam?", a: "PIX, dinheiro, débito, crédito (todas as bandeiras) e parcelamento. Para empresas, emitimos NF-e com faturamento." },
    { q: "Atendem empresas e indústrias?", a: "Sim. Temos equipe dedicada para condomínios, restaurantes, hospitais e indústria, com contratos de manutenção preventiva." },
    { q: "Preciso aprovar o serviço antes?", a: "Sim. Apresentamos diagnóstico e orçamento por escrito. Nada é executado sem sua aprovação formal." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container" style={{maxWidth: 880}}>
        <div className="eyebrow"><span className="dot" />PERGUNTAS FREQUENTES</div>
        <h2 className="section-title" style={{marginTop: 14}}>Tira-dúvidas rápido.</h2>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="icon"><Icon.Plus style={{width:14,height:14}}/></span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="container final-cta-inner">
        <span className="alarm"><span className="dot" /> Última chamada de rota emergencial</span>
        <h2 style={{marginTop: 18}}>Sua região ainda possui<br/>equipe disponível agora.</h2>
        <p>Clique antes do fechamento da próxima rota emergencial. Atendimento por ordem de chegada.</p>
        <div className="final-cta-ctas">
          <WAButton kind="dark" size="lg" message="Olá! Vi o aviso no site, preciso de atendimento agora.">
            <span style={{display:'inline-flex', alignItems:'center', gap: 10}}>CHAMAR NO WHATSAPP</span>
          </WAButton>
          <CallButton kind="dark" size="lg">LIGAR {PHONE_DISPLAY}</CallButton>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col footer-brand">
            <div className="brand">
              <div className="brand-crown brand-crown-lg"><img src="assets/logo-rei.webp" alt="" /></div>
              <div>
                <div className="brand-name">Desentupidora Rei</div>
                <div className="brand-sub">24h · Goiânia · GO</div>
              </div>
            </div>
            <p>Desentupimento profissional 24h em toda Goiânia, Aparecida, Trindade, Anápolis e região metropolitana. Atendimento residencial, comercial e industrial.</p>
            <p style={{marginTop: 14, fontFamily:'var(--mono)', fontSize: 12, color: 'var(--accent)', letterSpacing:'0.1em'}}>
              {PHONE_DISPLAY}
            </p>
          </div>
          <div className="footer-col">
            <h5>Serviços</h5>
            <ul>
              <li><a href="#servicos">Desentupimento de esgoto</a></li>
              <li><a href="#servicos">Vaso sanitário</a></li>
              <li><a href="#servicos">Pia e ralo</a></li>
              <li><a href="#servicos">Caixa de gordura</a></li>
              <li><a href="#servicos">Hidrojateamento</a></li>
              <li><a href="#servicos">Drenagem pluvial</a></li>
              <li><a href="#servicos">Industrial</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Cidades</h5>
            <ul>
              <li><a href="#">Goiânia</a></li>
              <li><a href="#">Aparecida de Goiânia</a></li>
              <li><a href="#">Anápolis</a></li>
              <li><a href="#">Trindade</a></li>
              <li><a href="#">Senador Canedo</a></li>
              <li><a href="#">Goianira</a></li>
              <li><a href="#">Inhumas</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <ul>
              <li><a href={`tel:+55${"62992910049"}`}>Ligar 24h</a></li>
              <li><a href={waLink()}>WhatsApp</a></li>
              <li><a href="#empresas">Para empresas</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Desentupidora Rei · CNPJ XX.XXX.XXX/0001-XX</span>
          <span>Atendimento 24h em Goiânia e Região</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, ProofStrip, Services, BeforeAfter, HowItWorks, Testimonials, B2B, Regions, Guarantee, FAQ, FinalCTA, Footer });