// === LIMPMIL — Main sections ===

function Hero({ tweaks }) {
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [service, setService] = React.useState("");
  const [errors, setErrors] = React.useState({});
  const [seconds, setSeconds] = React.useState(15 * 60);

  React.useEffect(() => {
    const t = setInterval(() => {
      setSeconds((s) => s <= 1 ? 15 * 60 : s - 1);
    }, 1000);
    return () => clearInterval(t);
  }, []);

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

  function submit(e) {
    e.preventDefault();
    const errs = {};
    if (!name.trim()) errs.name = "Digite seu nome";
    if (!validPhone(phone)) errs.phone = "WhatsApp inválido";
    if (!service) errs.service = "Escolha um serviço";
    setErrors(errs);
    if (Object.keys(errs).length) {
      trackEvent("form_error", { form: "hero_lead", errors: Object.keys(errs).join(",") });
      return;
    }
    trackEvent("generate_lead", {
      form: "hero_lead",
      service,
      source: "hero_form",
    });
    waClick("hero_form", service);
    const msg = `Olá! Sou ${name}. Preciso de ${service}. Meu WhatsApp: ${phone}. Pode atender agora?`;
    window.open(buildWA(msg), "_blank", "noopener");
  }

  return (
    <section className="hero">
      <div className="hero-bg"></div>
      <div className="hero-photo"></div>
      <div className="container hero-grid">
        <div>
          <div className="badge-pulse">
            <span className="badge-dot"></span>
            EQUIPES EM CAMPO AGORA
          </div>
          <h1>
            {tweaks.headline ? tweaks.headline :
            <>Chegamos em até <span className="hl">30 minutos</span> em Goiânia — ou você não paga a visita</>
            }
          </h1>
          <p className="hero-sub">
            Desentupimento 24 horas com atendimento imediato para residências, condomínios e empresas. Sem quebrar piso, sem dor de cabeça.
          </p>
          <ul className="hero-bullets">
            <li><span className="check">✓</span> Atendimento imediato 24h, todos os dias</li>
            <li><span className="check">✓</span> Sem quebrar pisos ou paredes</li>
            <li><span className="check">✓</span> Orçamento grátis e sem compromisso</li>
            <li><span className="check">✓</span> Garantia real de 90 dias no serviço</li>
          </ul>
          <div className="hero-ctas">
            <a className="btn btn-whatsapp btn-large" href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("hero_cta")}>
              <span>💬</span> Chamar no WhatsApp
            </a>
            <a className="btn btn-accent btn-large" href={`tel:+${COMPANY.phoneDigits}`} onClick={() => trackEvent("phone_click", { source: "hero_cta" })}>
              <span>📞</span> Ligar Agora
            </a>
          </div>
          <div className="hero-trust">
            <Stars value={5} />
            <span><strong style={{ color: "white" }}>4.9</strong> no Google · milhares de atendimentos realizados</span>
          </div>
        </div>

        <div className="lead-card">
          <div className="countdown-banner">
            <span className="countdown-icon">⚡</span>
            <span>Equipe disponível pelos próximos <span className="countdown-time">{mm}:{ss}</span></span>
          </div>
          <h3>Receba atendimento imediato</h3>
          <p className="form-tag">Preencha e abrimos seu WhatsApp direto com a equipe.</p>
          <form onSubmit={submit} noValidate>
            <div className="form-row">
              <label>Seu nome</label>
              <input
                type="text"
                placeholder="Ex: João Silva"
                value={name}
                onChange={(e) => setName(e.target.value)}
                className={errors.name ? "err" : ""} />
              
              {errors.name && <div className="form-err">{errors.name}</div>}
            </div>
            <div className="form-row">
              <label>WhatsApp com DDD</label>
              <input
                type="tel"
                placeholder="(62) 99999-9999"
                value={phone}
                onChange={(e) => setPhone(maskPhone(e.target.value))}
                className={errors.phone ? "err" : ""} />
              
              {errors.phone && <div className="form-err">{errors.phone}</div>}
            </div>
            <div className="form-row">
              <label>Serviço desejado</label>
              <select value={service} onChange={(e) => setService(e.target.value)} className={errors.service ? "err" : ""}>
                <option value="">Selecione o serviço...</option>
                {SERVICES.map((s) => <option key={s.id} value={s.title}>{s.title}</option>)}
                <option value="Outro serviço">Outro / Não sei especificar</option>
              </select>
              {errors.service && <div className="form-err">{errors.service}</div>}
            </div>
            <button type="submit" className="form-submit">
              RECEBER ATENDIMENTO IMEDIATO →
            </button>
          </form>
          <div className="lead-badges">
            <span className="lead-badge">Sem taxa de visita</span>
            <span className="lead-badge">Garantia de 90 dias</span>
            <span className="lead-badge">Resposta em até 2 min</span>
          </div>
        </div>
      </div>
    </section>);

}

function ProofBar() {
  return (
    <section className="proof-bar">
      <div className="container">
        <div className="proof-grid">
          {PROOF_STATS.map((s, i) =>
          <div key={i} className="proof-item">
              <div className="proof-num">{s.num}</div>
              <div className="proof-lbl">{s.lbl}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Services() {
  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Nossos Serviços</span>
          <h2>Resolvemos qualquer tipo de entupimento — em minutos</h2>
          <p>Toque no serviço que você precisa e fale agora mesmo com nossa equipe via WhatsApp.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s) =>
          <a
            key={s.id}
            className="service-card"
            href={buildWA(`Olá! Preciso de ${s.title.toLowerCase()}. Pode atender agora?`)}
            target="_blank"
            rel="noopener"
            onClick={() => waClick("service_card", s.id)}>
              <div className="service-icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-cta">Chamar no WhatsApp →</div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

function HowItWorks() {
  return (
    <section className="section how-it-works">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Como funciona</span>
          <h2>Do primeiro contato à garantia entregue</h2>
        </div>
        <div className="steps">
          {STEPS.map((s) =>
          <div key={s.num} className="step">
              <div className="step-num">{s.num}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function BeforeAfter() {
  const [clip, setClip] = React.useState(50);
  const ref = React.useRef(null);
  const dragging = React.useRef(false);

  function move(e) {
    if (!ref.current) return;
    const rect = ref.current.getBoundingClientRect();
    const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    const pct = Math.max(0, Math.min(100, x / rect.width * 100));
    setClip(pct);
  }
  function down(e) {dragging.current = true;move(e);}
  function up() {dragging.current = false;}

  React.useEffect(() => {
    function onMove(e) {if (dragging.current) move(e);}
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseup", up);
    window.addEventListener("touchmove", onMove);
    window.addEventListener("touchend", up);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseup", up);
      window.removeEventListener("touchmove", onMove);
      window.removeEventListener("touchend", up);
    };
  }, []);

  return (
    <section className="section">
      <div className="container ba-wrap">
        <div className="ba-text">
          <span className="eyebrow">Antes & Depois</span>
          <h2>Veja a diferença que o hidrojateamento faz</h2>
          <p>Arraste a barra para comparar. Removemos décadas de gordura, sedimentos e raízes sem precisar quebrar nada.</p>
          <ul>
            <li>Tubulação 100% desobstruída na primeira visita</li>
            <li>Sem cheiro, sem sujeira na sua casa</li>
            <li>Diagnóstico com câmera quando necessário</li>
            <li>Garantia de 90 dias após a limpeza</li>
          </ul>
          <a className="btn btn-whatsapp btn-large" href={buildWA("Olá! Quero saber sobre hidrojateamento.")} target="_blank" rel="noopener" onClick={() => waClick("before_after")}>
            <span>💬</span> Quero um orçamento agora
          </a>
        </div>
        <div
          className="ba-slider"
          ref={ref}
          onMouseDown={down}
          onTouchStart={down}
          style={{ "--clip": `${clip}%` }}>
          
          <div className="ba-before"></div>
          <div className="ba-after"></div>
          <span className="ba-label before">ANTES</span>
          <span className="ba-label after">DEPOIS</span>
          <div className="ba-handle"></div>
        </div>
      </div>
    </section>);

}

function UrgencyCalc() {
  const [issue, setIssue] = React.useState(null);
  const [where, setWhere] = React.useState(null);
  const [when, setWhen] = React.useState(null);

  const score =
  (issue === "Já transbordou" ? 3 : issue === "Está lento" ? 1 : issue === "Não escoa" ? 2 : 0) + (
  where === "Esgoto principal" ? 3 : where === "Vaso" ? 2 : where === "Pia/ralo" ? 1 : 0) + (
  when === "Agora" ? 3 : when === "Algumas horas" ? 2 : when === "Há mais tempo" ? 1 : 0);


  const maxScore = 9;
  const pct = Math.min(100, score / maxScore * 100);
  let level = "Selecione as opções";
  let msg = "Responda as 3 perguntas para ver sua urgência.";
  let time = "—";

  if (score >= 7) {level = "🔴 CRÍTICA";msg = "Atendimento emergencial necessário. Não espere!";time = "30 min";} else
  if (score >= 4) {level = "🟡 ALTA";msg = "Recomendamos atendimento ainda hoje.";time = "1-2 h";} else
  if (score >= 1) {level = "🟢 MODERADA";msg = "Pode ser resolvido sem grande urgência.";time = "Hoje";}

  const Q = ({ label, options, value, set }) =>
  <div className="calc-q">
      <label>{label}</label>
      <div className="calc-opts">
        {options.map((o) =>
      <button key={o} className={`calc-opt ${value === o ? "active" : ""}`} onClick={() => set(o)}>{o}</button>
      )}
      </div>
    </div>;


  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Calculadora de Urgência</span>
          <h2>Seu problema é emergência? Descubra em 10 segundos.</h2>
        </div>
        <div className="calc-card">
          <div className="calc-questions">
            <Q label="Qual a situação?" options={["Está lento", "Não escoa", "Já transbordou"]} value={issue} set={setIssue} />
            <Q label="Onde está o problema?" options={["Pia/ralo", "Vaso", "Esgoto principal"]} value={where} set={setWhere} />
            <Q label="Quando começou?" options={["Há mais tempo", "Algumas horas", "Agora"]} value={when} set={setWhen} />
          </div>
          <div className="calc-result">
            <div className="calc-level">{level}</div>
            <div className="calc-meter">
              <div className="calc-meter-fill" style={{ transform: `scaleX(${pct / 100})` }}></div>
            </div>
            <div className="calc-msg">{msg}</div>
            <div className="calc-time">Tempo de atendimento: <strong>{time}</strong></div>
            <a
              className="btn btn-accent btn-large"
              style={{ width: "100%" }}
              href={buildWA(`Olá! Minha situação: ${issue || "—"} / ${where || "—"} / ${when || "—"}. Pode atender agora?`)}
              target="_blank"
              rel="noopener"
              onClick={() => { trackEvent("urgency_calc_submit", { issue, where, when, level: level.replace(/[^A-Z ]/g, "").trim() }); waClick("urgency_calc"); }}>
              Quero atendimento agora →
            </a>
          </div>
        </div>
      </div>
    </section>);

}

function Testimonials() {
  return (
    <section className="section how-it-works">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Avaliações</span>
          <h2>O que dizem nossos clientes em Goiânia</h2>
          <p><Stars value={5} /> &nbsp; <strong>4.9</strong> de média no Google · milhares de atendimentos</p>
        </div>
        <div className="testimonials-grid">
          {TESTIMONIALS.map((t, i) =>
          <div key={i} className="testimonial">
              <div className="t-head">
                <Stars value={5} />
                <span className="t-google"><span className="t-google-dot"></span> via Google</span>
              </div>
              <div className="t-body">"{t.text}"</div>
              <div className="t-foot">
                <div className="t-avatar">{t.initials}</div>
                <div className="t-meta">
                  <div className="t-name">{t.name} <span className="t-verified">✓ verificado</span></div>
                  <div className="t-place">{t.place} · {t.problem}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function RegionsSection() {
  return (
    <section className="section regions" id="regioes">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Onde Atendemos</span>
          <h2>Goiânia, Aparecida e toda a Região Metropolitana</h2>
          <p>Toque no seu bairro e fale agora com a equipe mais próxima.</p>
        </div>
        <div className="region-chips">
          {REGIONS.map((r) =>
          <a
            key={r}
            className="region-chip"
            href={buildWA(`Olá! Preciso de desentupimento no ${r}. Pode atender agora?`)}
            target="_blank"
            rel="noopener"
            onClick={() => waClick("region_chip", r)}>
              {r}
            </a>
          )}
        </div>
      </div>
    </section>);

}

function Guarantee() {
  return (
    <section className="section guarantee">
      <div className="container">
        <div className="guarantee-seal">
          <svg viewBox="0 0 220 220">
            <defs>
              <path id="circle" d="M 110,110 m -90,0 a 90,90 0 1,1 180,0 a 90,90 0 1,1 -180,0" />
            </defs>
            <text fontFamily="Sora" fontSize="14" fontWeight="700" fill="#facc15" letterSpacing="4">
              <textPath href="#circle">GARANTIA · LIMPMIL · 90 DIAS · GARANTIA · LIMPMIL · 90 DIAS · </textPath>
            </text>
          </svg>
          <div className="guarantee-seal-core">
            <div>
              <div className="num">90</div>
              <div className="lbl">DIAS</div>
            </div>
          </div>
        </div>
        <span className="eyebrow" style={{ background: "rgba(250,204,21,0.15)", color: "var(--accent)" }}>Nossa Promessa</span>
        <h2>Garantia real de 90 dias em todo serviço</h2>
        <p>Se o problema voltar dentro da garantia, retornamos sem custo nenhum. Sem letras miúdas, sem desculpas.</p>
        <a className="btn btn-accent btn-large" href={buildWA("Olá! Quero saber mais sobre a garantia.")} target="_blank" rel="noopener" onClick={() => waClick("guarantee")}>
          Quero contratar com garantia
        </a>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Dúvidas Frequentes</span>
          <h2>Tudo o que você precisa saber antes de chamar</h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => { setOpen(open === i ? -1 : i); if (open !== i) trackEvent("faq_open", { question: f.q }); }}>
                <span>{f.q}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA() {
  return (
    <section className="section cta-final">
      <div className="container cta-final-inner">
        <span className="eyebrow" style={{ background: "rgba(15,61,76,0.12)", color: "var(--primary)" }}>Última Chamada</span>
        <h2>Sua equipe ainda está disponível em Goiânia.</h2>
        <p>Chame agora antes da próxima rota fechar. Atendemos em até 30 minutos, com orçamento grátis e garantia de 90 dias.</p>
        <a className="btn btn-whatsapp btn-large" href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("final_cta")}>
          <span>💬</span> Falar com a equipe AGORA
        </a>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-about">
            <Logo light />
            <p style={{ marginTop: 12 }}>
              Mais de 10 anos resolvendo desentupimento em Goiânia, Aparecida e Região Metropolitana. Plantão 24 horas, orçamento grátis e garantia de 90 dias em todo serviço.
            </p>
            <p style={{ marginTop: 12, fontSize: 13 }}>
              📞 <strong style={{ color: "white" }}>{COMPANY.phone}</strong><br />
              💬 WhatsApp 24h
            </p>
          </div>
          <div>
            <h5>Serviços</h5>
            <ul>
              {SERVICES.slice(0, 7).map((s) =>
              <li key={s.id}><a href={buildWA(`Olá! Quero ${s.title.toLowerCase()}.`)} target="_blank" rel="noopener" onClick={() => waClick("footer_service", s.id)}>{s.title}</a></li>
              )}
            </ul>
          </div>
          <div>
            <h5>Regiões atendidas</h5>
            <ul>
              {["Setor Bueno", "Setor Marista", "Jardim Goiás", "Setor Oeste", "Flamboyant", "Aparecida", "Centro", "Eldorado"].map((r) =>
              <li key={r}><a href={buildWA(`Olá! Preciso de atendimento no ${r}.`)} target="_blank" rel="noopener" onClick={() => waClick("footer_region", r)}>{r}</a></li>
              )}
            </ul>
          </div>
          <div>
            <h5>Links rápidos</h5>
            <ul>
              <li><a href="#servicos">Serviços</a></li>
              <li><a href="#regioes">Bairros atendidos</a></li>
              <li><a href="#faq">Perguntas frequentes</a></li>
              <li><a href={`tel:+${COMPANY.phoneDigits}`} onClick={() => trackEvent("phone_click", { source: "footer" })}>Ligar agora</a></li>
              <li><a href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("footer_whatsapp")}>WhatsApp 24h</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} LIMPMIL Desentupidora e Dedetizadora · Goiânia/GO · CNPJ XX.XXX.XXX/0001-XX</span>
          <span>Atendimento 24h · Plantão emergencial</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Hero, ProofBar, Services, HowItWorks, BeforeAfter, UrgencyCalc,
  Testimonials, RegionsSection, Guarantee, FAQ, FinalCTA, Footer
});