// === JCGASISTAS — Main sections (gás · segurança & autoridade) ===

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

  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 me atender?`;
    // 1) abre o nosso WhatsApp (mensagem completa) dentro do gesto do usuário
    window.open(buildWA(msg), "_blank", "noopener");
    // 2) registra o lead no PhoneTrack (LeadTrack 5645) em segundo plano -> conversão offline no Google Ads
    phtRegisterLead("5645", name.trim(), phone.replace(/\D/g, ""));
  }

  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>
            TÉCNICO CERTIFICADO EM GÁS
          </div>
          <h1>
            {tweaks.headline ? tweaks.headline :
            <>Gasista certificado na Grande SP — <span className="hl">segurança, laudo e garantia</span></>
            }
          </h1>
          <p className="hero-sub">
            Instalação, conversão, manutenção e reparo de vazamento de gás, feitos por técnico habilitado e dentro da norma. A segurança da sua família em primeiro lugar.
          </p>
          <ul className="hero-bullets">
            <li><span className="check">✓</span> Técnico certificado e equipe própria</li>
            <li><span className="check">✓</span> Laudo de estanqueidade válido p/ síndico e seguro</li>
            <li><span className="check">✓</span> Atendimento em toda a Grande São Paulo</li>
            <li><span className="check">✓</span> Garantia em todo serviço executado</li>
          </ul>
          <div className="hero-ctas">
            <a className="btn btn-whatsapp btn-large pht-whatsapp" data-widget="5645" href={buildWA()} target="_blank" rel="noopener" onClick={() => waClick("hero_cta")}>
              <span>💬</span> Falar 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>Clientes satisfeitos em toda a Grande São Paulo</span>
          </div>
        </div>

        <div className="lead-card">
          <div className="trust-banner">
            <span className="trust-icon">🛡️</span>
            <span>Atendimento por <strong>técnico certificado</strong> — segurança garantida</span>
          </div>
          <h3>Peça seu orçamento</h3>
          <p className="form-tag">Preencha e abrimos seu WhatsApp direto com a equipe técnica.</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="(11) 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">
              PEDIR ORÇAMENTO NO WHATSAPP →
            </button>
          </form>
          <div className="lead-badges">
            <span className="lead-badge">Técnico certificado</span>
            <span className="lead-badge">Laudo de estanqueidade</span>
            <span className="lead-badge">Garantia no serviço</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>Tudo em gás, feito com segurança e dentro da norma</h2>
          <p>Toque no serviço que você precisa e fale agora mesmo com nossa equipe técnica 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 me atender?`)}
            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">Falar 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 ao laudo na sua mão</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 WhyTrust() {
  const POINTS = [
    "Técnico habilitado e equipe própria — sem terceirizar a segurança da sua casa",
    "Serviço dentro da norma técnica (ABNT), com teste de pressão",
    "Laudo de estanqueidade válido para síndico, seguradora e regularização",
    "Garantia em todo serviço — e orientação honesta sobre o que precisa, ou não",
  ];
  return (
    <section className="section">
      <div className="container ba-wrap">
        <div className="ba-text">
          <span className="eyebrow">Por que confiar</span>
          <h2>Gás não é serviço para amador</h2>
          <p>Uma instalação mal feita coloca sua família em risco. Por isso aqui cada serviço é executado por profissional certificado, com material adequado e teste de segurança ao final.</p>
          <ul>
            {POINTS.map((p, i) => <li key={i}>{p}</li>)}
          </ul>
          <a className="btn btn-whatsapp btn-large pht-whatsapp" data-widget="5645" href={buildWA("Olá! Quero um orçamento com técnico certificado.")} target="_blank" rel="noopener" onClick={() => waClick("why_trust")}>
            <span>💬</span> Falar com um técnico
          </a>
        </div>
        <div className="feature-img">
          <img src="assets/tecnico-caldeira.jpg" alt="Técnico certificado JCGasistas verificando instalação de gás" loading="lazy" />
          <span className="feature-tag">🛡️ Técnico certificado</span>
        </div>
      </div>
    </section>);

}

function SafetySection() {
  const SIGNS = [
    { icon: "👃", t: "Cheiro de gás", d: "Odor característico perto do fogão, aquecedor ou medidor." },
    { icon: "🔥", t: "Chama amarela ou fraca", d: "A chama do fogão deveria ser azul e firme." },
    { icon: "💨", t: "Som de vazamento", d: "Chiado ou assobio perto da tubulação ou registro." },
    { icon: "🥴", t: "Mal-estar sem causa", d: "Dor de cabeça ou enjoo que melhora ao sair do ambiente." },
  ];
  return (
    <section className="section safety">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow eyebrow-light">Segurança em primeiro lugar</span>
          <h2>Sinais de que algo pode estar errado com seu gás</h2>
          <p>Vazamento de gás é a única real emergência. Se notar qualquer um destes sinais, não improvise — chame um técnico certificado.</p>
        </div>
        <div className="safety-grid">
          {SIGNS.map((s, i) =>
          <div key={i} className="safety-card">
              <div className="safety-icon">{s.icon}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
        <div className="safety-cta">
          <div className="safety-cta-text">
            <strong>Desconfia de vazamento?</strong> Feche o registro, abra as janelas, não acenda luzes e saia do local. Depois fale com a gente.
          </div>
          <a className="btn btn-accent btn-large" href={buildWA("Olá! Desconfio de vazamento de gás. Pode me orientar e atender com prioridade?")} target="_blank" rel="noopener" onClick={() => waClick("safety_cta")}>
            Falar com a equipe agora →
          </a>
        </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</h2>
          <p>Comentários e avaliações de clientes atendidos na Grande São Paulo.</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> Cliente</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}</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>Toda a Grande São Paulo</h2>
          <p>Toque na sua região e fale agora com nossa equipe técnica.</p>
        </div>
        <div className="region-chips">
          {REGIONS.map((r) =>
          <a
            key={r}
            className="region-chip"
            href={buildWA(`Olá! Preciso de um gasista em ${r}. Pode me atender?`)}
            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="13" fontWeight="700" fill="var(--accent)" letterSpacing="3">
              <textPath href="#circle">· TÉCNICO CERTIFICADO · SERVIÇO COM GARANTIA · LAUDO DE ESTANQUEIDADE </textPath>
            </text>
          </svg>
          <div className="guarantee-seal-core">
            <div>
              <div className="num">🛡️</div>
              <div className="lbl">SEGURANÇA</div>
            </div>
          </div>
        </div>
        <span className="eyebrow" style={{ background: "rgba(245,166,35,0.15)", color: "var(--accent)" }}>Nossa Promessa</span>
        <h2>Trabalho certificado, com garantia e laudo</h2>
        <p>Quando o assunto é gás, não existe meio-termo. Fazemos dentro da norma, testamos a instalação e entregamos a documentação — para você ficar tranquilo de verdade.</p>
        <a className="btn btn-accent btn-large" href={buildWA("Olá! Quero contratar com técnico certificado e garantia.")} target="_blank" rel="noopener" onClick={() => waClick("guarantee")}>
          Quero contratar com segurança
        </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(255,255,255,0.12)", color: "white" }}>Fale agora</span>
        <h2>Sua segurança não pode esperar.</h2>
        <p>Chame nossa equipe técnica pelo WhatsApp e tire suas dúvidas sobre instalação, conversão, laudo ou vazamento de gás. Atendimento em toda a Grande São Paulo.</p>
        <a className="btn btn-whatsapp btn-large pht-whatsapp" data-widget="5645" 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 }}>
              Gasista certificado atendendo toda a Grande São Paulo: instalação e manutenção de gás, conversão de equipamentos, aquecedores, laudo de estanqueidade e reparo de vazamento — sempre dentro da norma e com garantia.
            </p>
            <p style={{ marginTop: 12, fontSize: 13 }}>
              💬 WhatsApp <strong style={{ color: "white" }}>{COMPANY.phone}</strong><br />
              📞 Fixo {COMPANY.landline}
            </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>
              {["Moema", "Vila Mariana", "Pinheiros", "Santana", "Tatuapé", "Santo André", "São Bernardo", "Guarulhos"].map((r) =>
              <li key={r}><a href={buildWA(`Olá! Preciso de um gasista em ${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">Regiões atendidas</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</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} JCGasistas · Gás na Grande São Paulo · Técnico certificado</span>
          <span>Instalação · Conversão · Laudo · Vazamento de gás</span>
        </div>
      </div>
    </footer>);

}

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