/* global React */
const { useState, useEffect, useRef } = React;

/* ================= ICONS ================= */
const Icon = ({ name, size = 20, stroke = 1.8 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  const P = {
    phone: <svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
    wpp:   <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z"/></svg>,
    clock: <svg {...common}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
    shield:<svg {...common}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>,
    check: <svg {...common}><polyline points="20 6 9 17 4 12"/></svg>,
    arrow: <svg {...common}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
    star:  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>,
    sink:  <svg {...common}><path d="M3 11h18l-1.5 7.5a2 2 0 0 1-2 1.5h-11a2 2 0 0 1-2-1.5L3 11z"/><path d="M12 11V4"/><path d="M9 4h6"/><circle cx="12" cy="7" r="1"/></svg>,
    drain: <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></svg>,
    toilet:<svg {...common}><path d="M5 4h14v6a7 7 0 0 1-14 0V4z"/><path d="M9 17l-2 4"/><path d="M15 17l2 4"/></svg>,
    pipe:  <svg {...common}><path d="M3 7h6a3 3 0 0 1 3 3v4a3 3 0 0 0 3 3h6"/><path d="M3 17h4"/><path d="M17 3v4"/></svg>,
    drop:  <svg {...common}><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>,
    bug:   <svg {...common}><rect x="8" y="6" width="8" height="14" rx="4"/><path d="M12 6V3"/><path d="M8 10H4"/><path d="M16 10h4"/><path d="M8 16H4"/><path d="M16 16h4"/></svg>,
    mail:  <svg {...common}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
    pin:   <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
    cash:  <svg {...common}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>,
    tool:  <svg {...common}><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4l-7 7 2 2 7-7a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z"/></svg>,
    truck: <svg {...common}><path d="M1 3h15v13H1z"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>,
    google:<svg width={size} height={size} viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>,
  };
  return P[name] || null;
};

/* ================= URGENCY TOP BAR ================= */
function UrgencyBar() {
  return (
    <div className="urgency-bar">
      <div className="urgency-bar__inner">
        <div className="urgency-bar__left">
          <span className="urgency-pulse"></span>
          <span>PLANTÃO 24h ATIVO · Atendimento em até 30 minutos em Goiânia</span>
        </div>
        <div className="urgency-bar__right">
          <a href="tel:+556237732727" onClick={() => trackConversion('phone_click', {location: 'topbar'})}>
            <Icon name="phone" size={14} /> (62) 3773-2727
          </a>
        </div>
      </div>
    </div>
  );
}

/* ================= HEADER ================= */
function Header({ brandName, brandTagline }) {
  return (
    <header className="site-header">
      <div className="container site-header__inner">
        <div className="brand">
          <img src="assets/logo.png" alt="Delta Desentupidora" className="brand__logo" />
          <div className="brand__name">{brandName}
            <span>{brandTagline}</span>
          </div>
        </div>
        <nav className="nav">
          <a href="#servicos">Serviços</a>
          <a href="#processo">Como funciona</a>
          <a href="#avaliacoes">Avaliações</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="header__cta">
          <div className="header__phone">
            <small>Plantão 24h</small>
            <a href="tel:+556237732727" onClick={() => trackConversion('phone_click', {location: 'header'})}>(62) 3773-2727</a>
          </div>
          <a href={whatsappLink('Olá! Vi o site e preciso de um desentupimento.')}
             className="btn btn--wpp"
             onClick={() => trackConversion('whatsapp_click', {location: 'header'})}
             target="_blank" rel="noopener">
            <Icon name="wpp" size={18} /> WhatsApp
          </a>
        </div>
      </div>
    </header>
  );
}

/* ================= HELPERS ================= */
function whatsappLink(text) {
  return `https://api.whatsapp.com/send?phone=5562993988999&text=${encodeURIComponent(text)}`;
}
function maskPhone(v) {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}

/* ================= HERO ================= */
function Hero({ headline, highlight, sub, ctaPrimary }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="container hero__grid">
        <div>
          <span className="hero__eyebrow"><span className="dot"></span> DISPONÍVEL AGORA · GOIÂNIA E REGIÃO</span>
          <h1>
            {headline} <span className="hl">{highlight}</span>
          </h1>
          <p className="hero__sub">{sub}</p>

          <div className="hero__ctas">
            <a href={whatsappLink('Olá! Preciso de desentupimento urgente. Pode me passar um orçamento?')}
               className="btn btn--cta btn--lg"
               target="_blank" rel="noopener"
               onClick={() => trackConversion('whatsapp_click', {location: 'hero'})}>
              <Icon name="wpp" size={20} /> {ctaPrimary}
            </a>
            <a href="tel:+556237732727"
               className="btn btn--ghost btn--lg"
               style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }}
               onClick={() => trackConversion('phone_click', {location: 'hero'})}>
              <Icon name="phone" size={20} /> Ligar agora
            </a>
          </div>

          <div className="hero__trust">
            <div className="trust-item">
              <span className="trust-item__icon"><Icon name="clock" size={16} /></span>
              <div><strong>30 min</strong><span>Atendimento médio</span></div>
            </div>
            <div className="trust-item">
              <span className="trust-item__icon"><Icon name="shield" size={16} /></span>
              <div><strong>Garantia</strong><span>de 90 dias</span></div>
            </div>
            <div className="trust-item">
              <span className="trust-item__icon"><Icon name="cash" size={16} /></span>
              <div><strong>Orçamento</strong><span>grátis na hora</span></div>
            </div>
            <div className="trust-item">
              <span className="trust-item__icon"><Icon name="truck" size={16} /></span>
              <div><strong>+8.000</strong><span>atendimentos</span></div>
            </div>
          </div>
        </div>

        <LeadForm />
      </div>
    </section>
  );
}

/* ================= LEAD FORM ================= */
function LeadForm() {
  const [data, setData] = useState({ name: '', phone: '', service: '', address: '' });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const set = (k) => (e) => {
    const v = k === 'phone' ? maskPhone(e.target.value) : e.target.value;
    setData({ ...data, [k]: v });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (data.name.trim().length < 2) errs.name = 'Informe seu nome';
    const digits = data.phone.replace(/\D/g, '');
    if (digits.length < 10) errs.phone = 'Telefone inválido';
    if (!data.service) errs.service = 'Selecione o serviço';
    if (Object.keys(errs).length) return setErrors(errs);

    trackConversion('generate_lead', { service: data.service, value: 1.0, currency: 'BRL' });

    // Mensagem pré-formatada que abre o WhatsApp já com os dados do lead
    const msg = `Olá! Preciso de orçamento.\n\nNome: ${data.name}\nTelefone: ${data.phone}\nServiço: ${data.service}${data.address ? '\nBairro/Endereço: ' + data.address : ''}`;
    window.open(whatsappLink(msg), '_blank');
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="lead-card">
        <div className="lead-success">
          <div className="lead-success__icon">
            <Icon name="check" size={32} stroke={3} />
          </div>
          <h3>Pedido enviado!</h3>
          <p>Estamos abrindo o WhatsApp com seus dados. Caso não abra automaticamente, <a href={whatsappLink('Olá!')} target="_blank" rel="noopener" style={{color: 'var(--c-blue)', textDecoration: 'underline'}}>clique aqui</a>.</p>
        </div>
      </div>
    );
  }

  return (
    <form className="lead-card" onSubmit={submit} noValidate>
      <span className="lead-card__badge">Orçamento em 60s</span>
      <h3>Receba seu orçamento agora</h3>
      <p className="lead-card__sub">Preencha e nosso plantão liga em até <strong style={{color: 'var(--c-orange-deep)'}}>2 minutos</strong>.</p>

      <div className={`field ${errors.name ? 'field--error' : ''}`}>
        <label>Seu nome</label>
        <input type="text" value={data.name} onChange={set('name')} placeholder="Ex: Maria Silva" />
        {errors.name && <div className="field__err">{errors.name}</div>}
      </div>

      <div className={`field ${errors.phone ? 'field--error' : ''}`}>
        <label>WhatsApp / Telefone</label>
        <input type="tel" inputMode="numeric" value={data.phone} onChange={set('phone')} placeholder="(62) 9 9999-9999" />
        {errors.phone && <div className="field__err">{errors.phone}</div>}
      </div>

      <div className={`field ${errors.service ? 'field--error' : ''}`}>
        <label>O que está entupido?</label>
        <select value={data.service} onChange={set('service')}>
          <option value="">Selecione o serviço</option>
          <option>Pia de cozinha / banheiro</option>
          <option>Ralo</option>
          <option>Vaso sanitário</option>
          <option>Esgoto</option>
          <option>Rede pluvial</option>
          <option>Outro / não sei</option>
        </select>
        {errors.service && <div className="field__err">{errors.service}</div>}
      </div>

      <div className="field">
        <label>Bairro (opcional, ajuda na agilidade)</label>
        <input type="text" value={data.address} onChange={set('address')} placeholder="Ex: Setor Bueno, Jardim Goiás..." />
      </div>

      <button type="submit" className="btn btn--cta btn--block btn--lg">
        Quero ser atendido agora <Icon name="arrow" size={18} />
      </button>

      <div className="lead-card__or">ou</div>

      <a href="tel:+556237732727"
         className="btn btn--ghost btn--block"
         onClick={() => trackConversion('phone_click', {location: 'lead_form'})}>
        <Icon name="phone" size={18} /> Ligar: (62) 3773-2727
      </a>

      <p className="lead-card__legal">Seus dados são usados apenas para entrar em contato. Não enviamos spam.</p>
    </form>
  );
}

/* ================= PROOF STRIP ================= */
function ProofStrip() {
  return (
    <div className="proof-strip">
      <div className="container proof-strip__inner">
        <div className="proof-stat">
          <div>
            <div className="stars">{[0,1,2,3,4].map(i => <Icon key={i} name="star" size={14} />)}</div>
            <div className="proof-stat__num">4.9</div>
          </div>
          <div className="proof-stat__lbl">Avaliação<br/>Google Reviews</div>
        </div>
        <div className="proof-stat">
          <div className="proof-stat__num">+8K</div>
          <div className="proof-stat__lbl">Desentupimentos<br/>realizados</div>
        </div>
        <div className="proof-stat">
          <div className="proof-stat__num">30<span style={{fontSize: 18}}>min</span></div>
          <div className="proof-stat__lbl">Tempo médio<br/>de chegada</div>
        </div>
        <div className="proof-stat">
          <div className="proof-stat__num">24<span style={{fontSize: 18}}>h</span></div>
          <div className="proof-stat__lbl">Plantão todos os dias<br/>inclusive feriados</div>
        </div>
      </div>
    </div>
  );
}

/* ================= SERVICES ================= */
const SERVICES = [
  { icon: 'sink',  title: 'Desentupimento de Pias',          desc: 'Gordura, sabão e restos travando o escoamento. Resolvemos sem quebrar.', from: 'R$ 120' },
  { icon: 'drain', title: 'Desentupimento de Ralos',         desc: 'Box, lavanderia, área de serviço. Limpamos e desobstruímos por completo.', from: 'R$ 90' },
  { icon: 'toilet',title: 'Desentupimento de Vasos Sanitários', desc: 'Papel, fralda, objetos. Removemos o entupimento sem trincar o vaso.', from: 'R$ 150' },
  { icon: 'pipe',  title: 'Desentupimento de Esgotos',       desc: 'Equipamento hidrojato de alta pressão. Para o esgoto fluir como novo.', from: 'R$ 280' },
  { icon: 'drop',  title: 'Desobstrução de Redes Pluviais',  desc: 'Calhas, tubulações e galerias para evitar alagamento na próxima chuva.', from: 'R$ 220' },
];

function Services() {
  return (
    <section id="servicos" className="services" data-screen-label="02 Serviços">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">O que resolvemos</span>
          <h2>Todos os tipos de entupimento, em uma só equipe</h2>
          <p>Atendimento residencial, comercial e industrial. Equipamento próprio, profissionais uniformizados.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <a key={i} href={whatsappLink(`Olá! Preciso de ${s.title}.`)}
               className="svc-card"
               target="_blank" rel="noopener"
               onClick={() => trackConversion('whatsapp_click', {location: 'service_card', service: s.title})}>
              <div className="svc-card__icon"><Icon name={s.icon} size={26} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="svc-card__foot">
                <div className="svc-card__price">A partir de <strong>{s.from}</strong></div>
                <span className="svc-card__cta">Solicitar <Icon name="arrow" size={14} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= WHY US ================= */
function WhyUs() {
  const items = [
    { n: '30min', t: 'Atendimento expresso', d: 'Equipe a postos 24h em Goiânia. Chegamos em até 30 minutos na maioria dos bairros.' },
    { n: '90d',   t: 'Garantia escrita',     d: 'Se o problema voltar dentro de 90 dias no mesmo ponto, refazemos sem custo.' },
    { n: '0',     t: 'Sem quebrar parede',   d: 'Usamos hidrojato e cabos rotativos. Sua casa fica limpa, sem obra.' },
    { n: 'R$0',   t: 'Orçamento honesto',    d: 'Cobramos só após você aprovar o valor. Sem taxas escondidas, sem visita paga.' },
  ];
  return (
    <section className="why" data-screen-label="03 Diferenciais">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">Por que a Delta</span>
          <h2>Rapidez de plantão, qualidade de empresa séria</h2>
          <p>Há mais de 8 anos atendendo Goiânia com equipamento profissional e equipe registrada.</p>
        </div>
        <div className="why-grid">
          {items.map((x, i) => (
            <div key={i} className="why-card">
              <div className="why-card__num">{x.n}</div>
              <h4>{x.t}</h4>
              <p>{x.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= PROCESS ================= */
function Process() {
  const steps = [
    { n: '01', t: 'Você chama', d: 'WhatsApp ou telefone. Conte o problema e o bairro.', time: '60 segundos' },
    { n: '02', t: 'Confirmamos', d: 'Orçamento aprovado por escrito. Você sabe o valor antes.', time: '5 minutos' },
    { n: '03', t: 'Chegamos', d: 'Técnico uniformizado, com equipamento e identificação.', time: 'até 30 min' },
    { n: '04', t: 'Resolvido', d: 'Testamos o escoamento na sua frente e damos garantia.', time: 'mesmo dia' },
  ];
  return (
    <section id="processo" data-screen-label="04 Processo">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">Como funciona</span>
          <h2>Do problema à solução em 4 passos</h2>
          <p>Processo direto, sem rodeios. Você sabe exatamente o que vai acontecer e quanto vai custar.</p>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div key={i} className="process-step">
              <div className="process-step__badge">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <span className="process-step__time">⏱ {s.time}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= GALLERY ================= */
function Gallery() {
  const items = [
    { t: 'Pia de cozinha', loc: 'Setor Bueno' },
    { t: 'Vaso sanitário', loc: 'Jardim Goiás' },
    { t: 'Esgoto externo', loc: 'Setor Marista' },
  ];
  return (
    <section className="gallery" data-screen-label="05 Antes e depois">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">Serviços realizados</span>
          <h2>Antes e depois reais dos nossos atendimentos</h2>
          <p>Casos recentes em Goiânia. Tudo resolvido no mesmo dia, sem quebrar nenhuma parede.</p>
        </div>
        <div className="gal-grid">
          {items.map((it, i) => (
            <div key={i} className="gal-item">
              <div className="gal-item__media">
                <div className="gal-placeholder"><span>ANTES — foto real</span></div>
                <div className="gal-placeholder gal-placeholder--after"><span>DEPOIS — foto real</span></div>
              </div>
              <div className="gal-item__cap">
                <h5>{it.t}</h5>
                <small>📍 {it.loc}</small>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= COVERAGE ================= */
const CITIES = [
  'Goiânia', 'Aparecida de Goiânia', 'Senador Canedo', 'Trindade',
  'Goianira', 'Nerópolis', 'Hidrolândia', 'Bela Vista de Goiás',
];

function Coverage() {
  return (
    <section className="coverage" data-screen-label="06 Cobertura">
      <div className="container coverage__grid">
        <div>
          <span className="section-head__eyebrow">Onde atendemos</span>
          <h2>Goiânia e cidades vizinhas, 24h por dia</h2>
          <p>Nossa frota está distribuída pela região metropolitana para chegar rápido em qualquer bairro. Não está na lista? <a href={whatsappLink('Olá! Atendem na minha cidade?')} target="_blank" rel="noopener" style={{color: 'var(--c-blue)', textDecoration: 'underline', fontWeight: 700}}>Chama no WhatsApp</a> e confirmamos.</p>
          <ul className="cities">
            {CITIES.map((c, i) => <li key={i}>{c}</li>)}
          </ul>
          <a href={whatsappLink('Olá! Quero confirmar atendimento na minha região.')}
             className="btn btn--cta"
             target="_blank" rel="noopener"
             onClick={() => trackConversion('whatsapp_click', {location: 'coverage'})}>
            <Icon name="wpp" size={18} /> Confirmar atendimento
          </a>
        </div>
        <div className="coverage-map">
          {/* Mapa estilizado SVG placeholder */}
          <svg viewBox="0 0 400 320" xmlns="http://www.w3.org/2000/svg" style={{width: '100%'}}>
            <defs>
              <radialGradient id="cov" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="oklch(0.72 0.18 45 / 0.35)" />
                <stop offset="70%" stopColor="oklch(0.72 0.18 45 / 0.08)" />
                <stop offset="100%" stopColor="oklch(0.72 0.18 45 / 0)" />
              </radialGradient>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="oklch(0.92 0.008 245)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="400" height="320" fill="url(#grid)" />
            {/* Cobertura blob */}
            <ellipse cx="200" cy="160" rx="160" ry="120" fill="url(#cov)" />
            {/* Estrada simplificada */}
            <path d="M 0 200 Q 150 100 400 180" stroke="oklch(0.85 0.012 245)" strokeWidth="3" fill="none" strokeDasharray="4 6"/>
            <path d="M 80 0 Q 200 150 320 320" stroke="oklch(0.85 0.012 245)" strokeWidth="3" fill="none" strokeDasharray="4 6"/>
            {/* Pin central — Goiânia */}
            <g transform="translate(200 160)">
              <circle r="38" fill="oklch(0.72 0.18 45 / 0.18)">
                <animate attributeName="r" values="38;48;38" dur="2.4s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.6;0.1;0.6" dur="2.4s" repeatCount="indefinite"/>
              </circle>
              <circle r="14" fill="oklch(0.62 0.20 38)" />
              <circle r="6" fill="#fff" />
            </g>
            <text x="200" y="200" textAnchor="middle" fontFamily="Archivo, sans-serif" fontWeight="800" fontSize="14" fill="oklch(0.22 0.08 245)">GOIÂNIA</text>
            {/* Outros pinos */}
            {[
              {x: 130, y: 100, l: 'Trindade'},
              {x: 290, y: 110, l: 'Sen. Canedo'},
              {x: 250, y: 250, l: 'Ap. de Goiânia'},
              {x: 110, y: 230, l: 'Goianira'},
              {x: 320, y: 220, l: 'Nerópolis'},
            ].map((p, i) => (
              <g key={i} transform={`translate(${p.x} ${p.y})`}>
                <circle r="5" fill="oklch(0.45 0.15 245)"/>
                <text x="0" y="20" textAnchor="middle" fontFamily="Manrope, sans-serif" fontWeight="600" fontSize="10" fill="oklch(0.42 0.02 245)">{p.l}</text>
              </g>
            ))}
          </svg>
        </div>
      </div>
    </section>
  );
}

/* ================= TESTIMONIALS ================= */
const TESTIMONIALS = [
  { n: 'Ana Silva',     loc: 'Setor Oeste · Goiânia',  txt: 'Pia da cozinha entupiu no domingo de manhã. Liguei e em 25 minutos o rapaz estava aqui. Resolveu super rápido, sem fazer sujeira. Recomendo demais!' },
  { n: 'Felipe Oliveira',loc: 'Empresário · Setor Marista', txt: 'Tive um problema sério no esgoto da minha empresa, achei que ia precisar quebrar tudo. A equipe Delta usou um equipamento que limpou tudo sem obra. Salvou meu dia.' },
  { n: 'Mariana Santos', loc: 'Jardim Goiás · Goiânia', txt: 'Já é a segunda vez que chamo. Preço justo, atendimento educado, e o melhor: passam o valor antes pelo WhatsApp. Sem surpresas. Empresa séria.' },
];

function Testimonials() {
  return (
    <section id="avaliacoes" className="testimonials" data-screen-label="07 Depoimentos">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">Quem já chamou</span>
          <h2>4.9 estrelas no Google Reviews</h2>
          <p>Mais de 800 avaliações reais de clientes em Goiânia. Veja o que dizem sobre o atendimento.</p>
          <div style={{marginTop: 14, display: 'flex', justifyContent: 'center', gap: 8, alignItems: 'center'}}>
            <span className="google-badge">
              <Icon name="google" size={14} /> Google Reviews
            </span>
            <span className="google-badge" style={{color: 'oklch(0.78 0.16 75)'}}>
              {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={12} />)}
              <span style={{color: 'var(--c-ink)', marginLeft: 4}}>4.9 / 5</span>
            </span>
          </div>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testi-card">
              <div className="testi-card__stars">
                {[0,1,2,3,4].map(j => <Icon key={j} name="star" size={16} />)}
              </div>
              <p className="testi-card__quote">"{t.txt}"</p>
              <div className="testi-card__author">
                <div className="testi-card__avatar">{t.n.split(' ').map(s => s[0]).slice(0,2).join('')}</div>
                <div className="testi-card__name">{t.n}<small>{t.loc}</small></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= GUARANTEE ================= */
function Guarantee() {
  return (
    <section className="guarantee" data-screen-label="08 Garantia">
      <div className="container guarantee__grid">
        <div className="guarantee__seal">
          <div>
            <strong>90</strong>
            <span>dias de garantia</span>
          </div>
        </div>
        <div>
          <h2>Se entupir de novo, voltamos sem cobrar nada.</h2>
          <p>Toda intervenção da Delta é garantida por 90 dias no mesmo ponto. É o nosso compromisso por escrito: ou resolvemos definitivamente, ou voltamos quantas vezes for preciso. Sem letras miúdas.</p>
        </div>
      </div>
    </section>
  );
}

/* ================= FAQ ================= */
const FAQ_ITEMS = [
  { q: 'Em quanto tempo vocês chegam?',
    a: 'Em Goiânia e região metropolitana, nosso tempo médio é 30 minutos. Em horários de pico ou bairros mais distantes pode chegar a 1 hora. Confirmamos o tempo exato no momento da ligação.' },
  { q: 'Vocês atendem 24 horas mesmo? E nos feriados?',
    a: 'Sim. Temos plantão 24h, 7 dias por semana, inclusive feriados nacionais. A taxa de plantão noturno é informada e aprovada antes do envio da equipe.' },
  { q: 'Qual o valor do desentupimento?',
    a: 'Depende do serviço e da gravidade. Atendimentos simples (pia, ralo) começam em R$ 90. Esgoto, a partir de R$ 280. Sempre passamos o orçamento exato pelo WhatsApp antes de ir, e você só paga após o serviço aprovado.' },
  { q: 'Vão precisar quebrar minha parede ou piso?',
    a: 'Na grande maioria dos casos, não. Usamos hidrojato de alta pressão e cabos rotativos profissionais que desentopem por dentro da tubulação, sem obra e sem sujeira.' },
  { q: 'Vocês dão garantia?',
    a: 'Sim. 90 dias de garantia escrita no mesmo ponto. Se o problema voltar nesse prazo, voltamos sem custo nenhum.' },
  { q: 'Atendem empresas e condomínios?',
    a: 'Atendemos residências, comércios, indústrias e condomínios. Emitimos nota fiscal e podemos faturar para CNPJ. Para clientes recorrentes, oferecemos contrato de manutenção preventiva.' },
  { q: 'Quais formas de pagamento aceitam?',
    a: 'Dinheiro, Pix, cartão de débito e crédito (até 3x sem juros na maquininha). Para empresas, faturamento em boleto mediante aprovação.' },
];

function FAQ() {
  return (
    <section id="faq" className="faq" data-screen-label="09 FAQ">
      <div className="container">
        <div className="section-head">
          <span className="section-head__eyebrow">Dúvidas frequentes</span>
          <h2>Tirando as dúvidas antes de você chamar</h2>
          <p>Se sua pergunta não estiver aqui, fale com a gente no WhatsApp — respondemos em minutos.</p>
        </div>
        <div className="faq__list">
          {FAQ_ITEMS.map((item, i) => (
            <details key={i} className="faq__item" onToggle={(e) => e.target.open && trackConversion('faq_open', { q: item.q })}>
              <summary>{item.q}</summary>
              <p>{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= FINAL CTA ================= */
function FinalCTA() {
  return (
    <section className="final-cta" data-screen-label="10 CTA Final">
      <div className="container">
        <h2>Não deixe o entupimento estragar seu dia. <span className="hl">Chame a Delta agora.</span></h2>
        <p>Atendimento em até 30 minutos, orçamento honesto, garantia de 90 dias. Mais de 8.000 clientes em Goiânia já confiaram na gente.</p>
        <div className="final-cta__ctas">
          <a href={whatsappLink('Olá! Preciso de desentupimento urgente.')}
             className="btn btn--cta btn--lg"
             target="_blank" rel="noopener"
             onClick={() => trackConversion('whatsapp_click', {location: 'final_cta'})}>
            <Icon name="wpp" size={20} /> Chamar pelo WhatsApp
          </a>
          <a href="tel:+556237732727"
             className="btn btn--ghost btn--lg"
             style={{color: '#fff', borderColor: 'rgba(255,255,255,0.3)'}}
             onClick={() => trackConversion('phone_click', {location: 'final_cta'})}>
            <Icon name="phone" size={20} /> Ligar agora
          </a>
        </div>
        <a href="tel:+556237732727" className="final-cta__phone" onClick={() => trackConversion('phone_click', {location: 'final_phone_link'})}>
          <Icon name="phone" size={18} /> (62) 3773-2727 — atendimento humano 24h
        </a>
      </div>
    </section>
  );
}

/* ================= FOOTER ================= */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="brand" style={{marginBottom: 14}}>
              <img src="assets/logo.png" alt="Delta Desentupidora" className="brand__logo brand__logo--footer" />
              <div className="brand__name" style={{color: '#fff'}}>Delta Desentupidora
                <span>Goiânia · Plantão 24h</span>
              </div>
            </div>
            <p style={{maxWidth: 320}}>Soluções profissionais em desentupimento e hidrojateamento para residências, empresas e indústrias em Goiânia e região metropolitana.</p>
          </div>
          <div>
            <h5>Serviços</h5>
            <ul>
              <li><a href="#servicos">Desentupimento de pia</a></li>
              <li><a href="#servicos">Desentupimento de ralo</a></li>
              <li><a href="#servicos">Vaso sanitário</a></li>
              <li><a href="#servicos">Esgoto</a></li>
              <li><a href="#servicos">Rede pluvial</a></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href="tel:+556237732727"><Icon name="phone" size={12} /> (62) 3773-2727</a></li>
              <li><a href={whatsappLink('Olá!')} target="_blank" rel="noopener"><Icon name="wpp" size={12} /> WhatsApp 24h</a></li>
              <li><a href="mailto:contato@deltadesentupidora.com.br"><Icon name="mail" size={12} /> contato@deltadesentupidora.com.br</a></li>
              <li><Icon name="pin" size={12} /> Goiânia / GO</li>
            </ul>
          </div>
          <div>
            <h5>Horário</h5>
            <ul>
              <li><strong style={{color: '#fff'}}>24 horas</strong></li>
              <li>Todos os dias da semana</li>
              <li>Inclusive feriados</li>
              <li style={{marginTop: 8, color: 'oklch(0.78 0.16 145)'}}>● Online agora</li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© 2026 Delta Desentupidora · Todos os direitos reservados</div>
          <div>CNPJ disponível mediante consulta · Política de Privacidade</div>
        </div>
      </div>
    </footer>
  );
}

/* ================= EXIT INTENT POPUP ================= */
const EXIT_STORAGE_KEY = 'delta_exit_popup_seen';
const COUPON_CODE = 'DELTA10';

function ExitIntentPopup() {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const armedRef = useRef(false);

  useEffect(() => {
    // Se já viu nesta sessão, não dispara
    if (sessionStorage.getItem(EXIT_STORAGE_KEY)) return;

    let mobileTimer;
    let scrollUpCount = 0;
    let lastScrollY = window.scrollY;
    let lastScrollT = Date.now();

    const trigger = (source) => {
      if (armedRef.current) return;
      armedRef.current = true;
      sessionStorage.setItem(EXIT_STORAGE_KEY, '1');
      setOpen(true);
      trackConversion('exit_intent_shown', { source });
    };

    // ── Desktop: mouseleave pelo topo ──
    const onMouseLeave = (e) => {
      if (e.clientY <= 0) trigger('desktop_mouseleave');
    };

    // ── Mobile: scroll-up rápido (gesto de "voltar / sair") ──
    const onScroll = () => {
      const y = window.scrollY;
      const t = Date.now();
      const dy = y - lastScrollY;
      const dt = t - lastScrollT;
      // Subiu rápido (> 400px em < 500ms) e já passou 30% da página
      if (dy < -400 && dt < 500 && y < document.body.scrollHeight * 0.3 && y > 200) {
        trigger('mobile_scrollup');
      }
      lastScrollY = y;
      lastScrollT = t;
    };

    // ── Mobile fallback: visibilitychange (trocou de aba/app) após 15s ──
    const onVisibility = () => {
      if (document.hidden) trigger('tab_hidden');
    };

    // Espera 8s antes de armar (não disparar logo na entrada)
    const armTimeout = setTimeout(() => {
      document.documentElement.addEventListener('mouseleave', onMouseLeave);
      window.addEventListener('scroll', onScroll, { passive: true });
      document.addEventListener('visibilitychange', onVisibility);
    }, 8000);

    // Fallback final: se ficou parado 90s sem disparar, mostra mesmo assim
    mobileTimer = setTimeout(() => trigger('time_fallback'), 90000);

    return () => {
      clearTimeout(armTimeout);
      clearTimeout(mobileTimer);
      document.documentElement.removeEventListener('mouseleave', onMouseLeave);
      window.removeEventListener('scroll', onScroll);
      document.removeEventListener('visibilitychange', onVisibility);
    };
  }, []);

  // Bloqueia scroll do body quando aberto
  useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  const close = () => {
    setOpen(false);
    trackConversion('exit_intent_dismissed');
  };

  const claim = () => {
    trackConversion('exit_intent_claimed', { coupon: COUPON_CODE });
    const msg = `Olá! Vim do site e quero usar o cupom *${COUPON_CODE}* de 10% de desconto. Preciso de orçamento para desentupimento.`;
    window.open(whatsappLink(msg), '_blank');
  };

  const copy = async () => {
    try {
      await navigator.clipboard.writeText(COUPON_CODE);
      setCopied(true);
      trackConversion('exit_intent_coupon_copied', { coupon: COUPON_CODE });
      setTimeout(() => setCopied(false), 2200);
    } catch(e) { /* fallback silencioso */ }
  };

  if (!open) return null;

  return (
    <div className="exit-overlay" onClick={close} role="dialog" aria-modal="true">
      <div className="exit-popup" onClick={(e) => e.stopPropagation()}>
        <button className="exit-popup__close" onClick={close} aria-label="Fechar">×</button>

        <div className="exit-popup__ribbon">
          <span className="exit-popup__ribbon-icon">⚡</span>
          ESPERA AÍ!
        </div>

        <div className="exit-popup__body">
          <h3>Antes de sair, leva esse desconto.</h3>
          <p className="exit-popup__sub">10% OFF no seu desentupimento. Válido pelas próximas 24h, para qualquer serviço da Delta em Goiânia.</p>

          <div className="exit-popup__coupon">
            <div className="exit-popup__coupon-label">SEU CUPOM</div>
            <div className="exit-popup__coupon-code">
              <span>{COUPON_CODE}</span>
              <button onClick={copy} className="exit-popup__copy" aria-label="Copiar cupom">
                {copied ? '✓ Copiado' : 'Copiar'}
              </button>
            </div>
            <div className="exit-popup__coupon-disc">10%<small>OFF</small></div>
          </div>

          <button className="btn btn--cta btn--lg btn--block" onClick={claim}>
            <Icon name="wpp" size={20} /> Resgatar agora no WhatsApp
          </button>

          <p className="exit-popup__fineprint">
            Mostre o cupom para o atendente na hora do orçamento. Não cumulativo com outras promoções.
          </p>
        </div>
      </div>
    </div>
  );
}

/* ================= FLOATING ELEMENTS ================= */
function FloatingWpp() {
  return (
    <>
      <a href={whatsappLink('Olá! Vim do site da Delta. Preciso de ajuda.')}
         className="fab-wpp"
         target="_blank" rel="noopener"
         onClick={() => trackConversion('whatsapp_click', {location: 'floating_button'})}
         aria-label="Falar no WhatsApp">
        <Icon name="wpp" size={28} />
      </a>
      <div className="mobile-cta-bar">
        <a href="tel:+556237732727" className="btn btn--ghost"
           onClick={() => trackConversion('phone_click', {location: 'mobile_bar'})}>
          <Icon name="phone" size={16} /> Ligar
        </a>
        <a href={whatsappLink('Olá! Preciso de desentupimento urgente.')}
           className="btn btn--cta"
           target="_blank" rel="noopener"
           onClick={() => trackConversion('whatsapp_click', {location: 'mobile_bar'})}>
          <Icon name="wpp" size={16} /> WhatsApp
        </a>
      </div>
    </>
  );
}

/* Export for app.jsx */
Object.assign(window, {
  UrgencyBar, Header, Hero, ProofStrip, Services, WhyUs, Process,
  Gallery, Coverage, Testimonials, Guarantee, FAQ, FinalCTA, Footer, FloatingWpp,
  ExitIntentPopup,
  Icon, whatsappLink
});