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

// ============================================================
// SHARED HELPERS
// ============================================================
const WHATSAPP_NUM = "5562997019486";
const PHONE_DISPLAY = "(62) 3773-2956";
const PHONE_TEL = "tel:+556237732956";

function waLink(msg) {
  const m = encodeURIComponent(msg || "Olá! Gostaria de mais informações sobre serviços da Desentupidora Goianão.");
  return `https://wa.me/${WHATSAPP_NUM}?text=${m}`;
}

// ============================================================
// COUNTDOWN — perceived scarcity
// ============================================================
function Countdown() {
  const [t, setT] = useState({ m: 14, s: 59 });
  useEffect(() => {
    const id = setInterval(() => {
      setT(prev => {
        let { m, s } = prev;
        if (m === 0 && s === 0) return { m: 14, s: 59 };
        if (s === 0) return { m: m - 1, s: 59 };
        return { m, s: s - 1 };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
  const pad = n => String(n).padStart(2, "0");
  return (
    <span className="countdown" aria-live="polite">
      <span className="countdown__digits">{pad(t.m)}:{pad(t.s)}</span>
    </span>
  );
}

// ============================================================
// HERO + LEAD FORM
// ============================================================
function Hero({ tweaks }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__bg" aria-hidden="true">
        <div className="hero__grid"></div>
      </div>

      <div className="hero__inner container">
        <div className="hero__copy">
          <div className="hero__urgency">
            <span className="pulse-dot"></span>
            <span>EQUIPES EM CAMPO · 24H</span>
          </div>

          <h1 className="hero__title">
            Entupiu? <span className="hl">Em até 30 minutos</span> na sua porta — e o orçamento sai de graça.
          </h1>

          <p className="hero__sub">{tweaks.subhead}</p>

          <div className="hero__ctas cta-pair">
            <a className="btn btn--wa btn--xl pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
              <WhatsAppIcon /> Falar no WhatsApp
            </a>
            <a className="btn btn--call btn--xl" href={PHONE_TEL}>
              <PhoneIcon /> Ligar agora
            </a>
          </div>

          <div className="hero__trust">
            <div className="trust-stars" aria-label="4,9 de 5 estrelas no Google">
              {"★★★★★".split("").map((s, i) => <span key={i}>★</span>)}
              <b>4,9</b><span className="trust-stars__sep">·</span><span>+1.200 avaliações</span>
            </div>
          </div>
        </div>

        <aside className="lead">
          <div className="lead__ribbon">
            <Spark /> OFERTA · TERMINA EM <Countdown />
          </div>
          <div className="lead__card">
            <div className="lead__head">
              <h2>Atendimento expresso</h2>
              <p>Resposta em até <b>2 minutos</b> · a partir de <b>R$ 89,90</b></p>
            </div>

            <ul className="lead__points">
              <li><Check /> Equipe na sua porta em <b>até 30 minutos</b></li>
              <li><Check /> Orçamento <b>100% grátis</b> — sem taxa de visita</li>
              <li><Check /> <b>Garantia de 90 dias</b> por escrito</li>
              <li><Check /> Pague em até <b>6x sem juros</b> · Pix · dinheiro</li>
            </ul>

            <div className="cta-pair lead__cta">
              <a className="btn btn--wa pht-whatsapp" data-widget="3368" href={waLink()} target="_blank" rel="noopener">
                <WhatsAppIcon /> Falar no WhatsApp
              </a>
              <a className="btn btn--call" href={PHONE_TEL}>
                <PhoneIcon /> Ligar agora
              </a>
            </div>

            <p className="lead__legal">
              <Lock /> Atendimento 24h · Resposta em segundos
            </p>
          </div>

          <div className="lead__guarantees">
            <div><Shield /> Garantia 90 dias</div>
            <div><Bolt /> Chegada em 30 min</div>
            <div><Tag /> Sem taxa</div>
          </div>
        </aside>
      </div>
    </section>
  );
}

// ============================================================
// ICONS
// ============================================================
function Check() {
  return (
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" d="M4 12.5l5 5L20 6.5" />
    </svg>
  );
}
function Arrow() {
  return <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" d="M5 12h14M13 6l6 6-6 6" /></svg>;
}
function Lock() {
  return <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z"/></svg>;
}
function Spark() {
  return <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>;
}
function Shield() {
  return <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M12 2 4 5v6c0 5 3.5 9.7 8 11 4.5-1.3 8-6 8-11V5l-8-3z"/></svg>;
}
function Bolt() {
  return <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>;
}
function Tag() {
  return <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M21.4 11 13 2.6A2 2 0 0 0 11.6 2H4a2 2 0 0 0-2 2v7.6a2 2 0 0 0 .6 1.4L11 21.4a2 2 0 0 0 2.8 0l7.6-7.6a2 2 0 0 0 0-2.8zM7 8a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>;
}
function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 32 32" width="22" height="22" aria-hidden="true">
      <path fill="currentColor" d="M16.001 2.667C8.637 2.667 2.667 8.637 2.667 16c0 2.355.617 4.654 1.79 6.683L2.667 29.333l6.85-1.762a13.31 13.31 0 0 0 6.484 1.673h.006c7.36 0 13.327-5.97 13.327-13.333S23.36 2.667 16.001 2.667zm0 24.4h-.005a11.07 11.07 0 0 1-5.643-1.546l-.405-.24-4.067 1.046 1.085-3.96-.264-.42a11.067 11.067 0 1 1 9.299 5.12zm6.072-8.293c-.333-.167-1.97-.973-2.275-1.084-.305-.111-.527-.167-.75.167-.222.333-.86 1.084-1.054 1.306-.194.222-.388.25-.722.084-.333-.167-1.406-.518-2.679-1.653-.99-.883-1.658-1.973-1.852-2.307-.194-.333-.021-.514.146-.68.15-.15.333-.388.5-.583.166-.194.222-.333.333-.555.111-.222.056-.417-.028-.583-.083-.167-.75-1.806-1.027-2.472-.27-.65-.545-.562-.75-.573-.194-.01-.417-.012-.638-.012-.222 0-.583.083-.889.417-.305.333-1.166 1.139-1.166 2.778s1.194 3.222 1.36 3.444c.167.222 2.35 3.59 5.692 5.034.795.343 1.416.547 1.899.7.798.254 1.524.218 2.098.132.64-.096 1.97-.806 2.247-1.583.278-.778.278-1.444.194-1.583-.083-.139-.305-.222-.638-.389z"/>
    </svg>
  );
}
function PhoneIcon() {
  return (
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path fill="currentColor" d="M19.23 15.26l-2.54-.29a1.99 1.99 0 0 0-1.64.57l-1.84 1.84a15.045 15.045 0 0 1-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52a2.001 2.001 0 0 0-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z"/>
    </svg>
  );
}
function StarIcon() { return <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>; }

// Make available across babel script scopes
Object.assign(window, { Hero, waLink, WHATSAPP_NUM, PHONE_DISPLAY, PHONE_TEL, Check, Arrow, Spark, Shield, Bolt, Tag, WhatsAppIcon, PhoneIcon, StarIcon });
