/* global React, waLink, PHONE_DISPLAY, PHONE_TEL, WhatsAppIcon, PhoneIcon, Check, Arrow, StarIcon, Shield */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ============================================================
// SOCIAL PROOF MARQUEE
// ============================================================
function ProofBar() {
  const stats = [
    { n: "+12.000", l: "atendimentos realizados" },
    { n: "30 min", l: "tempo médio de chegada" },
    { n: "4,9 ★", l: "no Google · 1.200+ avaliações" },
    { n: "12 anos", l: "atendendo Goiânia e região" },
    { n: "90 dias", l: "garantia por escrito" },
    { n: "24h", l: "plantão · 7 dias por semana" }
  ];
  return (
    <section className="proof" aria-label="Resultados">
      <div className="container proof__row">
        {stats.map((s, i) => (
          <div className="proof__item" key={i}>
            <strong>{s.n}</strong>
            <span>{s.l}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// SERVICES
// ============================================================
const SERVICES = [
  { t: "Desentupimento de esgoto", d: "Esgoto residencial e predial. Equipamento eletro-mecânico + hidrojato.", emoji: "🚽", icon: "esgoto" },
  { t: "Vaso sanitário", d: "Sem quebrar piso ou parede. Sonda flexível profissional.", emoji: "🚻", icon: "vaso" },
  { t: "Pia, ralo e tanque", d: "Cozinha, banheiro e área de serviço. Atendimento em 30 min.", emoji: "🚰", icon: "pia" },
  { t: "Caixa de gordura", d: "Limpeza completa, descarte legal e laudo emitido na hora.", emoji: "🧴", icon: "gordura" },
  { t: "Limpa fossa séptica", d: "Caminhão limpa-fossa próprio. Sem entrar na fila de espera.", emoji: "🚛", icon: "fossa" },
  { t: "Hidrojateamento", d: "Alta e ultra pressão para tubulações industriais e prediais.", emoji: "💧", icon: "hidro" },
  { t: "Caça-vazamentos", d: "Geofone e câmera de inspeção. Encontramos sem quebrar.", emoji: "🔎", icon: "vaza" },
  { t: "Desobstrução pluvial", d: "Calhas, redes e prumadas. Antes que vire infiltração.", emoji: "🌧️", icon: "pluv" }
];

function Services() {
  return (
    <section className="services section" id="servicos" data-screen-label="03 Servicos">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">SERVIÇOS 24H</span>
          <h2>Resolvemos qualquer entupimento. <span className="hl">No mesmo dia.</span></h2>
          <p>De um vaso entupido às 3 da manhã a uma rede predial inteira: <b>caminhão, equipamento e equipe</b> próprios. Sem terceirizar, sem enrolação.</p>
        </div>

        <div className="services__grid">
          {SERVICES.map((s, i) => (
            <a className="service-card pht-whatsapp" data-widget="3368" key={i} href={waLink(`Olá, preciso de ${s.t.toLowerCase()}.`)} target="_blank" rel="noopener">
              <div className="service-card__icon" aria-hidden="true">{s.emoji}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <span className="service-card__cta">Pedir orçamento <Arrow /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PROCESS / HOW IT WORKS
// ============================================================
function Process() {
  const steps = [
    { n: "1", t: "Você chama", d: "WhatsApp ou ligação. Em até 2 minutos um especialista responde com o orçamento." },
    { n: "2", t: "Equipe a caminho", d: "Despachamos a equipe mais próxima. Chegada em até 30 min em Goiânia." },
    { n: "3", t: "Diagnóstico grátis", d: "Avaliamos o problema sem custo. Você só paga se autorizar o serviço." },
    { n: "4", t: "Resolvemos na hora", d: "Equipamento de ponta. 9 em cada 10 chamados resolvidos na primeira visita." },
    { n: "5", t: "90 dias de garantia", d: "Voltou a entupir? Voltamos sem custo. Garantia por escrito na nota." }
  ];
  return (
    <section className="process section section--alt" id="processo" data-screen-label="04 Processo">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">COMO FUNCIONA</span>
          <h2>Do entupimento à solução em <span className="hl">5 passos simples</span></h2>
        </div>
        <ol className="process__list">
          {steps.map((s, i) => (
            <li className="process__step" key={i}>
              <div className="process__num">{s.n}</div>
              <div className="process__body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
        <div className="process__cta cta-pair">
          <a className="btn btn--wa pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
            <WhatsAppIcon /> Quero começar agora
          </a>
          <a className="btn btn--call" href={PHONE_TEL}>
            <PhoneIcon /> Ligar agora
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// VS COMPETITION
// ============================================================
function Versus() {
  const rows = [
    { c: "Chegada em até 30 minutos", us: true, them: false },
    { c: "Orçamento gratuito por WhatsApp", us: true, them: "às vezes" },
    { c: "Sem taxa de visita", us: true, them: false },
    { c: "Garantia de 90 dias por escrito", us: true, them: "30 dias" },
    { c: "Equipe e caminhão próprios", us: true, them: false },
    { c: "Pagamento em até 6x sem juros", us: true, them: false },
    { c: "Atendimento real 24h/7d", us: true, them: "horário comercial" },
    { c: "Câmera de inspeção + hidrojato", us: true, them: false }
  ];
  return (
    <section className="vs section" id="vs" data-screen-label="05 Versus">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">POR QUE NÓS</span>
          <h2>O que nos diferencia das outras desentupidoras</h2>
        </div>
        <div className="vs__table" role="table">
          <div className="vs__row vs__row--head" role="row">
            <div role="columnheader">Característica</div>
            <div role="columnheader" className="vs__us">Nós</div>
            <div role="columnheader">Concorrência típica</div>
          </div>
          {rows.map((r, i) => (
            <div className="vs__row" role="row" key={i}>
              <div role="cell">{r.c}</div>
              <div role="cell" className="vs__us">
                {r.us === true ? <span className="vs__yes"><Check /></span> : r.us}
              </div>
              <div role="cell" className="vs__them">
                {r.them === true ? <span className="vs__yes"><Check /></span>
                  : r.them === false ? <span className="vs__no">—</span> : r.them}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TESTIMONIALS
// ============================================================
const TESTIMONIALS = [
  { name: "Mariana Costa", area: "Setor Bueno", txt: "Liguei à meia-noite com o esgoto transbordando. Em 25 minutos a equipe chegou e em 1 hora estava tudo resolvido. Educados e limparam tudo depois. Recomendo!", color: "#fde68a" },
  { name: "Roberto Almeida", area: "Aparecida de Goiânia", txt: "Tinha chamado outra empresa que cobrou só pra ir. Aqui o orçamento veio na hora pelo WhatsApp e o preço foi metade. Super honestos.", color: "#bfdbfe" },
  { name: "Cláudia Pereira", area: "Jardim Goiás", txt: "Caixa de gordura do prédio onde sou síndica. Resolveram com hidrojato sem barulho, no horário combinado. Profissionais de verdade.", color: "#bbf7d0" },
  { name: "Eduardo Lima", area: "Setor Marista", txt: "Vaso sanitário entupido na semana da reforma. Pensei que iam quebrar tudo. Não quebraram nada e ainda voltou a entupir e eles voltaram sem cobrar.", color: "#fecaca" },
  { name: "Jéssica Ramos", area: "Setor Oeste", txt: "Atendimento que faltava em Goiânia. Tem que tirar nota máxima. Resolveram a fossa em 2h, com caminhão limpa-fossa próprio.", color: "#e9d5ff" },
  { name: "Thiago Souza", area: "Vila Nova", txt: "Câmera de inspeção achou a raiz que tava entupindo. Outra empresa queria quebrar a varanda. Esses caras salvaram minha grana.", color: "#fed7aa" }
];
function Testimonials() {
  return (
    <section className="testi section section--alt" id="depoimentos" data-screen-label="06 Depoimentos">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">DEPOIMENTOS REAIS</span>
          <h2>Mais de <span className="hl">12.000 clientes</span> em Goiânia já confiaram na gente</h2>
          <div className="google-badge">
            <span className="google-badge__g">G</span>
            <div>
              <div className="trust-stars">
                {"★★★★★".split("").map((s, i) => <span key={i}>★</span>)}
                <b>4,9</b>
              </div>
              <small>Baseado em <b>1.247 avaliações</b> reais no Google</small>
            </div>
          </div>
        </div>

        <div className="testi__grid">
          {TESTIMONIALS.map((t, i) => (
            <article className="testi__card" key={i}>
              <div className="testi__stars">
                {"★★★★★".split("").map((s, j) => <span key={j}>★</span>)}
              </div>
              <p>"{t.txt}"</p>
              <footer>
                <div className="testi__avatar" style={{ background: t.color }}>{t.name[0]}</div>
                <div>
                  <strong>{t.name}</strong>
                  <small>{t.area} · cliente verificado</small>
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// REGIONS
// ============================================================
const REGIONS = [
  "Setor Bueno", "Setor Marista", "Setor Oeste", "Setor Sul", "Setor Central",
  "Jardim Goiás", "Jardim América", "Vila Nova", "Setor Aeroporto", "Setor Universitário",
  "Campinas", "Setor Coimbra", "Vila Maria José", "Setor Pedro Ludovico", "Park Lozandes",
  "Aparecida de Goiânia", "Senador Canedo", "Trindade", "Goianira", "Hidrolândia",
  "Santo Antônio de Goiás", "Nerópolis", "Bela Vista de Goiás", "Inhumas"
];
function Regions() {
  return (
    <section className="regions section" id="regioes" data-screen-label="07 Regioes">
      <div className="container">
        <div className="section__head">
          <span className="eyebrow">ATENDIMENTO LOCAL</span>
          <h2>Atendemos toda <span className="hl">Goiânia e região metropolitana</span></h2>
          <p>Equipes de plantão espalhadas pela cidade — chegamos rápido onde você está.</p>
        </div>
        <div className="regions__grid">
          {REGIONS.map((r, i) => (
            <span className="region-chip" key={i}>📍 {r}</span>
          ))}
        </div>
        <p className="regions__note">Sua região não está na lista? <a className="pht-whatsapp" data-widget="3368" href={waLink("Vocês atendem na minha região?")} target="_blank" rel="noopener">Pergunte no WhatsApp</a> — provavelmente sim.</p>
      </div>
    </section>
  );
}

// ============================================================
// GUARANTEE
// ============================================================
function Guarantee() {
  return (
    <section className="guarantee section section--dark" data-screen-label="08 Garantia">
      <div className="container guarantee__inner">
        <div className="guarantee__seal" aria-hidden="true">
          <svg viewBox="0 0 200 200" width="220" height="220" className="seal-svg">
            <defs>
              <radialGradient id="sealGrad" cx="50%" cy="40%">
                <stop offset="0%" stopColor="#fff" stopOpacity=".25"/>
                <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
              </radialGradient>
              <linearGradient id="ribbonGrad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#ff7a45"/>
                <stop offset="100%" stopColor="#d63f0d"/>
              </linearGradient>
            </defs>
            {/* outer ring */}
            <circle cx="100" cy="100" r="92" fill="none" stroke="#0d6b3d" strokeWidth="3"/>
            <circle cx="100" cy="100" r="86" fill="#0d6b3d"/>
            <circle cx="100" cy="100" r="86" fill="url(#sealGrad)"/>
            {/* inner ring with stars */}
            <circle cx="100" cy="100" r="74" fill="none" stroke="#fff" strokeOpacity=".35" strokeWidth="1"/>
            {/* stars around */}
            {[0,30,60,90,120,150,180,210,240,270,300,330].map(deg => {
              const r = 80;
              const x = 100 + Math.cos((deg-90)*Math.PI/180)*r;
              const y = 100 + Math.sin((deg-90)*Math.PI/180)*r;
              return <circle key={deg} cx={x} cy={y} r="1.6" fill="#ffd700"/>;
            })}
            {/* shield with check */}
            <path d="M100 38 L72 50 L72 96 C72 116 86 134 100 142 C114 134 128 116 128 96 L128 50 Z"
                  fill="#fff" stroke="#0d6b3d" strokeWidth="1.5"/>
            <path d="M85 96 L96 107 L116 84"
                  fill="none" stroke="#0d6b3d" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"/>
            {/* ribbon banner */}
            <path d="M52 138 L100 130 L148 138 L148 168 L130 162 L130 180 L100 168 L70 180 L70 162 L52 168 Z"
                  fill="url(#ribbonGrad)" stroke="#a52e09" strokeWidth="1"/>
            <text x="100" y="158" textAnchor="middle" fill="#fff"
                  fontFamily="Archivo, sans-serif" fontWeight="900" fontSize="22" letterSpacing="1">90 DIAS</text>
          </svg>
          <div className="seal-caption">GARANTIA<br/>POR ESCRITO</div>
        </div>
        <div className="guarantee__copy">
          <span className="eyebrow eyebrow--light">RISCO ZERO</span>
          <h2>Voltou a entupir em 90 dias? <span className="hl">Voltamos sem cobrar.</span></h2>
          <p>Cada serviço sai com nota fiscal e termo de garantia por escrito. Confiamos tanto no nosso trabalho que assumimos o risco — você não.</p>
          <ul>
            <li><Check /> Garantia formal em todos os serviços</li>
            <li><Check /> Sem taxa de visita em retornos</li>
            <li><Check /> Atendimento prioritário para clientes em garantia</li>
          </ul>
          <div className="cta-pair">
            <a className="btn btn--wa pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
              <WhatsAppIcon /> Quero o atendimento garantido
            </a>
            <a className="btn btn--call" href={PHONE_TEL}>
              <PhoneIcon /> Ligar agora
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
const FAQ = [
  { q: "Quanto custa um desentupimento em Goiânia?", a: "O valor depende do tipo de entupimento e do equipamento necessário. Serviços simples começam em R$ 89,90. O orçamento é 100% gratuito e enviado pelo WhatsApp antes de qualquer deslocamento — você decide se aprova." },
  { q: "Em quanto tempo a equipe chega na minha casa?", a: "Em Goiânia, nossa média é de 30 minutos. Trabalhamos com equipes de plantão distribuídas pela cidade, então conseguimos atender emergências mesmo de madrugada e em finais de semana." },
  { q: "Vocês atendem 24 horas mesmo? Inclusive feriado?", a: "Sim. Plantão real, com técnicos a postos 24h, 7 dias por semana, inclusive feriados. Sem atendente que só anota recado — você fala com um técnico." },
  { q: "Vai precisar quebrar parede ou piso?", a: "Em 95% dos casos, não. Usamos sondas flexíveis, máquinas eletro-rotativas e câmera de inspeção que localizam o entupimento sem demolição. Só recomendamos quebra como último recurso." },
  { q: "Qual a forma de pagamento?", a: "Aceitamos Pix, dinheiro, débito e crédito em até 6x sem juros. O pagamento é só após o serviço concluído e aprovado por você." },
  { q: "Tem garantia? Por quanto tempo?", a: "90 dias de garantia por escrito em todos os serviços. Se o problema voltar no mesmo ponto, voltamos sem cobrar nada." },
  { q: "E se o orçamento for caro? Sou obrigado a contratar?", a: "Não. O orçamento é gratuito e sem compromisso. Se você não aprovar, não paga nada — nem taxa de visita." }
];

function Faq() {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="faq section" id="faq" data-screen-label="09 FAQ">
      <div className="container faq__inner">
        <div className="section__head">
          <span className="eyebrow">DÚVIDAS FREQUENTES</span>
          <h2>Perguntas que clientes fazem antes de chamar</h2>
        </div>
        <div className="faq__list">
          {FAQ.map((f, i) => (
            <details key={i} open={open === i} onClick={e => { e.preventDefault(); setOpen(open === i ? -1 : i); }}>
              <summary>
                <span>{f.q}</span>
                <span className="faq__chev" aria-hidden="true">+</span>
              </summary>
              <p>{f.a}</p>
            </details>
          ))}
        </div>

        <div className="faq__contact">
          <p>Não encontrou sua dúvida?</p>
          <div className="cta-pair">
            <a className="btn btn--wa pht-whatsapp" data-widget="3368" href={waLink("Olá, tenho uma dúvida antes de contratar.")} target="_blank" rel="noopener">
              <WhatsAppIcon /> Pergunte no WhatsApp
            </a>
            <a className="btn btn--call" href={PHONE_TEL}>
              <PhoneIcon /> Ligar agora
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA
// ============================================================
function FinalCta() {
  return (
    <section className="finalcta section section--accent" data-screen-label="10 CTA Final">
      <div className="container finalcta__inner">
        <h2>Cada minuto que passa, o entupimento <span className="hl">piora</span>.</h2>
        <p>Vazamento, mau cheiro, infiltração e estrago na obra — tudo isso é evitado com uma ligação. Fale com a gente agora e em 30 minutos seu problema acabou.</p>
        <div className="finalcta__ctas cta-pair">
          <a className="btn btn--wa btn--xl pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
            <WhatsAppIcon /> Chamar no WhatsApp
          </a>
          <a className="btn btn--call btn--xl" href={PHONE_TEL}>
            <PhoneIcon /> Ligar {PHONE_DISPLAY}
          </a>
        </div>
        <small className="finalcta__small">Atendimento 24h · Orçamento grátis · Sem taxa de visita</small>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer({ companyName }) {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div>
          <div className="logo logo--footer">
            <img className="logo__mark" src="assets/logo-mark.png" alt="Desentupidora Goianão" />
            <span className="logo__name">{companyName}</span>
          </div>
          <p>Desentupidora 24h em Goiânia e região metropolitana.</p>
        </div>
        <div>
          <h4>Contato</h4>
          <a href={PHONE_TEL}><PhoneIcon /> {PHONE_DISPLAY}</a>
          <a className="pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener"><WhatsAppIcon /> WhatsApp 24h</a>
        </div>
        <div>
          <h4>Serviços</h4>
          <a href="#servicos">Desentupimento de esgoto</a>
          <a href="#servicos">Limpa fossa</a>
          <a href="#servicos">Hidrojateamento</a>
          <a href="#servicos">Caça-vazamentos</a>
        </div>
        <div>
          <h4>Atendemos</h4>
          <small>Toda Goiânia · Aparecida · Senador Canedo · Trindade · Goianira · Região Metropolitana</small>
        </div>
      </div>
      <div className="footer__bar">
        <small>© 2026 {companyName}. Todos os direitos reservados.</small>
        <small className="footer__agency-inline">
          <a href="https://unboundsales.com" target="_blank" rel="noopener">
            Powered by <strong>UnboundSales Marketing</strong>
          </a>
        </small>
      </div>
    </footer>
  );
}

Object.assign(window, { ProofBar, Services, Process, Versus, Testimonials, Regions, Guarantee, Faq, FinalCta, Footer });