/* artsol-sections.jsx — todas as seções da landing
   Estrutura A (Calculator-first)
*/

const LOGO = "assets/artsol-logo.png";

/* fonte única das 4 soluções — usada no dropdown da nav e no rodapé */
const SOLUCOES = [
  ["solucao-fotovoltaica.html",  "Fotovoltaica"],
  ["solucao-aquec-banho.html",   "Aquecimento de banho"],
  ["solucao-aquec-piscina.html", "Aquecimento de piscina"],
  ["solucao-carregador-ev.html", "Carregador EV"],
];

/* ── ICONS (inline SVG, premium hairline) ───────────────────────────── */
const Icon = {
  panel:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="14" rx="1.2" />
      <path d="M3 9h18M3 14h18M9 4v14M15 4v14M9 21h6" />
    </svg>,

  shower:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 4v3" />
      <circle cx="12" cy="9" r="3.5" />
      <path d="M8.5 13l-1 4M11 13.2v4M13 13.2v4M15.5 13l1 4" />
    </svg>,

  pool:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 16c1.5 0 1.5 1.5 3 1.5S7.5 16 9 16s1.5 1.5 3 1.5S13.5 16 15 16s1.5 1.5 3 1.5S19.5 16 21 16" />
      <path d="M3 19.5c1.5 0 1.5 1.5 3 1.5s1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5" />
      <path d="M7 14V6a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v8M17 14V6a2 2 0 0 0-2-2h0a2 2 0 0 0-2 2" />
    </svg>,

  ev:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 17V8a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v9" />
      <path d="M3 17h11M5 11h7" />
      <circle cx="6" cy="19" r="1.5" /><circle cx="11" cy="19" r="1.5" />
      <path d="M14 9h3l3 3v5a1.5 1.5 0 0 1-3 0V14h-3" />
      <path d="M10 4l-2 3h3l-2 3" stroke="var(--accent)" />
    </svg>,

  clock:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" />
    </svg>,

  diamond:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 3h12l4 6-10 12L2 9z" /><path d="M2 9h20M9 3l3 6 3-6M9 9l3 12 3-12" />
    </svg>,

  check:
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 6 9 17l-5-5" />
    </svg>,

  arrow: <span className="arr" aria-hidden>→</span>
};

/* ── NAV ─────────────────────────────────────────────────────────────── */
function Nav({ dark, onToggleDark, active, homeUrl = "" }) {
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

  const links = [
  [homeUrl || "#top", "Início"],
  [homeUrl + "#solucoes", "Soluções"],
  [homeUrl + "#sobre", "Sobre"],
  [homeUrl + "#processo", "Como funciona"],
  [homeUrl + "#depoimentos", "Depoimentos"],
  [homeUrl + "#faq", "FAQ"]];

  const caret =
  <svg className="nav-drop-caret" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="m6 9 6 6 6-6" />
    </svg>;

  return (
    <React.Fragment>
    <header className="nav">
      <div className="nav-inner">
        <a href={homeUrl || "#top"} className="nav-logo" aria-label="ARTSOL">
          <img src={LOGO} alt="ARTSOL" />
        </a>
        <nav className="nav-links">
          {links.map(([h, t]) => t === "Soluções" ?
            <div key={h} className="nav-drop">
              <a href={h} className={active === t ? "is-active" : undefined}>{t}{caret}</a>
              <div className="nav-drop-menu">
                {SOLUCOES.map(([sh, st]) => <a key={sh} href={sh}>{st}</a>)}
              </div>
            </div> :
            <a key={h} href={h} className={active === t ? "is-active" : undefined}>{t}</a>
          )}
        </nav>
        <div className="nav-cta">
          <span className="nav-phone">(61) 3327-1000</span>
          <button
            className={"theme-toggle" + (dark ? " is-dark" : "")}
            onClick={onToggleDark}
            aria-label={dark ? "Mudar para tema claro" : "Mudar para tema escuro"}
            title={dark ? "Tema claro" : "Tema escuro"}>

            <svg className="ic-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="4" />
              <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
            </svg>
            <svg className="ic-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
            </svg>
          </button>
          <a className="btn btn-primary btn-sm" href={homeUrl + "#simulador"}>Calcular economia</a>
          <button
            className="nav-burger"
            aria-label={open ? "fechar menu" : "abrir menu"}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}>
            {open
              ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
              : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 7h18M3 12h18M3 17h18" /></svg>
            }
          </button>
        </div>
      </div>
    </header>
    {open && (
      <div className="nav-mobile is-open" onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}>
        <div className="nav-mobile-inner">
          {links.map(([h, t]) => (
            <React.Fragment key={h}>
              <a href={h} className={active === t ? "is-active" : undefined} onClick={() => setOpen(false)}>{t}</a>
              {t === "Soluções" && SOLUCOES.map(([sh, st]) => (
                <a key={sh} href={sh} className="is-sub" onClick={() => setOpen(false)}>{st}</a>
              ))}
            </React.Fragment>
          ))}
          <a className="btn btn-primary" href={homeUrl + "#simulador"} style={{ marginTop: 8 }} onClick={() => setOpen(false)}>
            Calcular economia <span className="arr">→</span>
          </a>
        </div>
      </div>
    )}
    </React.Fragment>);

}

/* ── HERO ────────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="hero-bg" aria-hidden>
        <img src="assets/hero-brasilia.webp" alt="" fetchpriority="high" decoding="async" />
      </div>
      <div className="hero-orna" aria-hidden />
      <div className="wrap hero-grid">
        <div className="reveal">
          <span className="hero-eyebrow h-eyebrow">
            <span className="pulse" />
            Brasília / DF · desde 1998
          </span>
          <h1 className="h1">
            Energia solar que <span className="uline">paga sozinha</span> a sua próxima conta de luz.
          </h1>
          <p className="subhead" style={{ marginTop: 22 }}>Desde 1998 construindo confiança e transformando a luz do sol em economia para famílias e empresas de Brasília/DF e região. Cuidamos de todo o processo: projeto, homologação na Neoenergia e instalação. Você só aproveita a economia.


          </p>
          <div className="hero-cta">
            <a href="#simulador" className="btn btn-primary btn-lg">
              Calcular minha economia <span className="arr">→</span>
            </a>
            <a href="#solucoes" className="btn btn-secondary btn-lg">Ver soluções</a>
          </div>
          <div className="hero-trust">
            <div className="avatars" aria-hidden>
              {[1, 2, 3, 4, 5].map((i) => (
                <img key={i} src={`assets/depo-${i}.png`} alt="" width="32" height="32" />
              ))}
            </div>
            <div>
              <div className="stars" aria-label="4,9 de 5 estrelas">★★★★★</div>
              <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 2 }}>
                <b style={{ color: "var(--fg)" }}>4,9 / 5</b> · 36.000+ clientes atendidos
              </div>
            </div>
          </div>
        </div>

        <div id="simulador" className="reveal" style={{ transitionDelay: ".12s" }}>
          <Calculator />
        </div>
      </div>
    </section>);

}

/* ── STATS ───────────────────────────────────────────────────────────── */
function Stats() {
  const data = [
  ["28", " anos", "operando ininterruptamente em Brasília"],
  ["300", "+", "projetos fotovoltaicos concluídos"],
  ["36k", "+", "clientes (sistemas de aquecimento)"],
  ["50k", " m²", "de coletores solares para piscina instalados"]];

  return (
    <section className="stats tight" aria-label="Números ARTSOL">
      <div className="wrap" style={{ padding: 0, maxWidth: "var(--max)" }}>
        <div className="stats-grid">
          {data.map(([n, s, l], i) =>
          <div key={i} className="cell reveal" style={{ transitionDelay: `${i * .06}s` }}>
              <div className="n">{n}<span className="suf">{s}</span></div>
              <div className="l">{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── SOLUTIONS ───────────────────────────────────────────────────────── */
function Solutions() {
  const sols = [
  {
    tag: "energia · conta de luz",
    title: "Energia Solar Fotovoltaica",
    blurb: "Painéis no telhado reduzem até 90% da conta de luz. Vida útil de 25+ anos.",
    icon: Icon.panel,
    src: "assets/sol-fotovoltaica.webp",
    alt: "Casa residencial com painéis solares fotovoltaicos no telhado",
    href: "solucao-fotovoltaica.html",
    isNew: false
  },
  {
    tag: "água quente · chuveiro",
    title: "Aquecimento Solar Banho",
    blurb: "Chuveiros e torneiras com água quente o ano inteiro. Economia de até 40%.",
    icon: Icon.shower,
    src: "assets/sol-banho.webp",
    alt: "Pessoa tomando banho com água aquecida pelo sol",
    href: "solucao-aquec-banho.html",
    isNew: false
  },
  {
    tag: "piscina aquecida",
    title: "Aquecimento Solar Piscina",
    blurb: "Piscina utilizável o ano todo, sem custo de operação. Resistente ao cloro.",
    icon: Icon.pool,
    src: "assets/sol-piscina.webp",
    alt: "Piscina aquecida com água cristalina",
    href: "solucao-aquec-piscina.html",
    isNew: false
  },
  {
    tag: "mobilidade elétrica",
    title: "Carregador para Carro Elétrico",
    blurb: "Wallbox 7 a 22 kW. Combine com solar e carregue o carro de graça no dia.",
    icon: Icon.ev,
    src: "assets/sol-ev.webp",
    alt: "Carro elétrico carregando no wallbox doméstico",
    href: "solucao-carregador-ev.html",
    isNew: true
  }];

  return (
    <section id="solucoes" className="wrap">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">soluções · 4 frentes</span>
          <h2 className="h2">Uma solução para cada parte da sua casa.</h2>
        </div>
        <a href="#processo" className="btn btn-secondary">Como funciona <span className="arr">→</span></a>
      </div>

      <div className="sols-grid">
        {sols.map((s, i) =>
        <article key={i} className="sol reveal" style={{ transitionDelay: `${i * .06}s` }}>
            {s.isNew && <span className="badge-new">Novo · 2025</span>}
            <div className="sol-img">
              {s.src ?
            <img src={s.src} alt={s.alt} loading="lazy" /> :
            <div className={"ph " + (i === 0 ? "sun" : "")}>
                  {i === 0 && <div className="ph-art" />}
                  <span className="ph-tag">{s.photo}</span>
                </div>
            }
            </div>
            <div className="sol-body">
              <span style={{ color: "var(--accent)", display: "inline-flex" }}>{s.icon}</span>
              <h3 className="h3">{s.title}</h3>
              <p>{s.blurb}</p>
              <a href={s.href} className="more">Saiba mais {Icon.arrow}</a>
            </div>
          </article>
        )}
      </div>
    </section>);

}

/* ── ABOUT ───────────────────────────────────────────────────────────── */
function About() {
  return (
    <section id="sobre" className="wrap">
      <div className="about-grid">
        <div className="about-img reveal">
          <img src="assets/edimar-e-felipe.webp" alt="Dois profissionais da ARTSOL conversando em campo, com tablet em mãos e painéis solares ao fundo" loading="lazy" />
          <div className="floating-stat">
            <div className="n">28 anos</div>
            <div className="l">em Brasília sem interrupção</div>
          </div>
        </div>

        <div className="reveal" style={{ transitionDelay: ".1s" }}>
          <span className="h-eyebrow" style={{ display: "block", marginBottom: 12 }}>sobre · diferenciais</span>
          <h2 className="h2">
            Não somos startup. <br />
            Somos <span className="uline">instituição.</span>
          </h2>
          <p className="subhead" style={{ marginTop: 22 }}>Desde 1998 em Brasília, a ARTSOL constrói relacionamentos de longo prazo. Mais do que instalar painéis solares, oferecemos soluções completas, com equipe própria, fornecedores parceiros e a segurança de que estaremos presentes quando você precisar.



          </p>

          <div className="pillars">
            <div className="pillar">
              <div className="ic">{Icon.clock}</div>
              <div> 
                <h4>28 anos de mercado</h4>
                <p>Quando você precisar de suporte daqui a 10 anos, a gente ainda vai estar aqui. Outros concorrentes mal completaram 5 anos.</p>
              </div>
            </div>
            <div className="pillar">
              <div className="ic">{Icon.diamond}</div>
              <div>
                <h4>Portfólio diversificado</h4>
                <p>Fotovoltaica, Aquecimento Solar (banho e piscina), Trocador de Calor para Piscina, Carregador Veicular, Manutenção Preventiva e Corretiva. Tudo em um só lugar.</p>
              </div>
            </div>
            <div className="pillar">
              <div className="ic">{Icon.check}</div>
              <div>
                <h4>Serviço completo, fim a fim</h4>
                <p>Projeto personalizado, homologação junto à Neoenergia, instalação por equipe própria e pós-venda. Você não toca em nada.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── PROCESS ─────────────────────────────────────────────────────────── */
function Process() {
  const steps = [
  ["Proposta / Dimensionamento", "Analisamos seu consumo e necessidade energética ou térmica — energia elétrica, banho ou piscina. Enviamos a proposta técnica em até 24h."],
  ["Vistoria técnica", "Visitamos o local para validar estrutura, posicionamento, hidráulica ou elétrica existente e os requisitos técnicos do projeto."],
  ["Projeto + Aprovação", "Desenvolvemos o projeto técnico e cuidamos da aprovação junto à concessionária. Você acompanha tudo sem lidar com burocracia."],
  ["Instalação", "Equipe própria instala o sistema completo — fotovoltaico ou aquecimento solar — com testes, comissionamento e entrega em funcionamento."]];

  return (
    <section id="processo" className="wrap">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">como funciona · 4 etapas</span>
          <h2 className="h2">Do contato à sua economia em até ~30 dias.</h2>
        </div>
        <span style={{ fontSize: 13, color: "var(--fg-2)" }}>Você só decide começar, nós cuidamos do restante.</span>
      </div>

      <div className="steps reveal">
        {steps.map(([t, b], i) =>
        <div key={i} className="step">
            <span className="num">etapa {String(i + 1).padStart(2, "0")}</span>
            <span className="big-num">{String(i + 1).padStart(2, "0")}</span>
            <h4>{t}</h4>
            <p>{b}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ── TESTIMONIALS ────────────────────────────────────────────────────── */
function Testimonials() {
  return (
    <section id="depoimentos" className="wrap">
      <div className="sec-head tst-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">depoimentos · ★ 4,9 no Google</span>
          <h2 className="h2">Histórias reais, contas menores.</h2>
        </div>
      </div>

      <div className="tsts">
        <div className="tst feature reveal">
          <div className="stars" style={{ color: "var(--accent-2)" }}>★★★★★</div>
          <div className="quote">"Sou cliente há décadas, mais de um produto, e permaneço fiel em razão da qualidade do serviço e da excelência no atendimento."


          </div>
          <div className="meta">
            <div className="avt" />
            <div>
              <div className="name">André Almeida</div>
              <div className="sub">Cliente ARTSOL · ★ Avaliação Google</div>
            </div>
          </div>
        </div>

        <div className="tst reveal" style={{ transitionDelay: ".08s" }}>
          <div className="stars">★★★★★</div>
          <div className="quote">
            "Fiz meu aquecimento solar com eles há mais de 20 anos. Foi um projeto personalizado
            e funciona muitíssimo bem. Se ligo 3 vezes por ano o boiler é muito! Recomendo!"
          </div>
          <div className="meta">
            <div className="avt" />
            <div>
              <div className="name">Antônio Henrique</div>
              <div className="sub">Cliente ARTSOL · ★ Avaliação Google</div>
            </div>
          </div>
        </div>

        <div className="tst reveal" style={{ transitionDelay: ".16s" }}>
          <div className="stars">★★★★★</div>
          <div className="quote">
            "Equipe nota 10. Em especial Sr. João e Lúcio. Prestativos, pontuais e honestos na
            avaliação do serviço a ser prestado. Gostei muito!"
          </div>
          <div className="meta">
            <div className="avt" />
            <div>
              <div className="name">Cristina Lopes</div>
              <div className="sub">Cliente ARTSOL · ★ Avaliação Google</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
  ["Quanto tempo até o sistema se pagar?",
  "Em Brasília, o retorno fica entre 2 e 5 anos para sistemas residenciais bem dimensionados. O simulador no topo da página te dá uma estimativa em segundos com base na sua conta atual."],
  ["O sistema funciona em dias nublados?",
  "Sim. A irradiação difusa em dias nublados ainda gera energia — menos do que em dias claros, mas o cálculo anual já considera todas as variações. Em Brasília a irradiação é uma das melhores do país."],
  ["Vocês cuidam da homologação na Neoenergia?",
  "Cuidamos de toda a parte burocrática: projeto, ART, solicitação de acesso e troca do medidor bidirecional. Você não precisa falar com a concessionária."],
  ["Existe parcelamento?",
  "Sim. Trabalhamos com financiamento em até 60x com bancos parceiros. Em muitos casos, a parcela é menor que a economia mensal — ou seja, o sistema se paga sozinho desde o primeiro mês."],
  ["Qual a garantia dos painéis e do sistema?",
  "Painéis: garantia de fabricação de 12 anos e performance de 25 anos. Inversor: 5 a 10 anos conforme modelo. Instalação ARTSOL: garantia de 1 ano sobre a mão de obra."],
  ["E se eu mudar de casa?",
  "O sistema valoriza o imóvel — pesquisa de 2023 mostra valorização média de 4 a 6%. Se preferir, dá pra desinstalar e remontar no novo endereço (custo separado da instalação original)."]];

  return (
    <section id="faq" className="wrap">
      <div className="faq-grid">
        <div className="reveal">
          <span className="h-eyebrow" style={{ display: "block", marginBottom: 12 }}>dúvidas frequentes</span>
          <h2 className="h2">Tudo o que perguntam antes de comprar.</h2>
          <p className="subhead" style={{ marginTop: 18 }}>
            Não achou sua dúvida? A gente responde em alguns minutos pelo WhatsApp.
          </p>
          <a href="#contato" className="btn btn-secondary" style={{ marginTop: 22 }}>
            Falar com especialista <span className="arr">→</span>
          </a>
        </div>

        <div className="faq-list reveal" style={{ transitionDelay: ".08s" }}>
          {items.map(([q, a], i) =>
          <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── FINAL CTA ───────────────────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section id="contato" className="wrap">
      <div className="final-cta reveal">
        <div className="inner">
          <div>
            <span className="h-eyebrow" style={{ color: "currentColor", opacity: .7 }}>último passo</span>
            <h2 className="h2" style={{ marginTop: 10 }}>
              Pronto pra ver quanto<br />você economiza?
            </h2>
            <p className="subhead" style={{ color: "inherit", opacity: .75, marginTop: 14 }}>
              Simule em 30 segundos ou fale agora com nosso time pelo WhatsApp.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "stretch", minWidth: 260 }}>
            <a href="#simulador" className="btn btn-primary btn-lg" style={{ justifyContent: "center" }}>
              Simular agora <span className="arr">→</span>
            </a>
            <a href="https://api.whatsapp.com/send?phone=556133271000" className="btn btn-secondary btn-lg" style={{ justifyContent: "center" }}>
              WhatsApp (61) 3327-1000
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ── FOOTER ──────────────────────────────────────────────────────────── */
function Footer({ homeUrl = "" }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <div className="footer-logo">
              <img src={LOGO} alt="ARTSOL" />
            </div>
            <p style={{ color: "rgb(245, 244, 239)" }}>Energia solar em Brasília desde 1998.</p>
            <p style={{ marginTop: 12, color: "rgb(245, 244, 239)" }}>SHIN CA 5, Lote D3, Loja 16</p>
            <p style={{ color: "rgb(245, 244, 239)" }}>Ed. Varandas do Lago Norte I · Brasília – DF</p>
            <p style={{ marginTop: 12, color: "rgb(245, 244, 239)" }}>artsol@artsol.com.br · (61) 3327-1000</p>
          </div>
          <div>
            <h5>Soluções</h5>
            <ul>
              {SOLUCOES.map(([h, t]) => <li key={h}><a href={h}>{t}</a></li>)}
            </ul>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li><a href={homeUrl + "#sobre"}>Sobre nós</a></li>
              <li><a href={homeUrl + "#processo"}>Como funciona</a></li>
              <li><a href={homeUrl + "#depoimentos"}>Depoimentos</a></li>
              <li><a href={homeUrl + "#faq"}>FAQ</a></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li><a href="https://api.whatsapp.com/send?phone=556133271000">WhatsApp</a></li>
              <li><a href="tel:+556133271000">(61) 3327-1000</a></li>
              <li><a href="https://www.instagram.com/artsolenergiasolar/">Instagram</a></li>
              <li><a href="https://www.facebook.com/artsolenergiasolar">Facebook</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ARTSOL Energia Solar · CNPJ 05.989.640/0001-90</span>
          <span className="footer-legal">
            <a href="politica-de-privacidade.html">Política de Privacidade</a>
            <span aria-hidden> · </span>
            <a href="termos-de-uso.html">Termos de Uso</a>
          </span>
          <span>Brasília · Distrito Federal · Brasil 🇧🇷</span>
        </div>
      </div>
    </footer>);

}

/* ── floating WhatsApp ───────────────────────────────────────────────── */
function WhatsAppFloat() {
  return (
    <a className="wa" href="https://api.whatsapp.com/send?phone=556133271000" aria-label="WhatsApp ARTSOL" target="_blank" rel="noopener">
      <svg viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 3C9.4 3 4 8.4 4 15c0 2.4.7 4.7 2 6.6L4 29l7.5-2c1.8 1 3.9 1.5 6 1.5h.5C24.6 28.5 30 23.1 30 16.5S24.6 4.5 18 4.5h-.5C17 4.2 16.5 3 16 3zm0 2.5c.3 0 .5 0 .8.1l-.5 1.4h.2c5.5 0 10 4.5 10 10s-4.5 10-10 10c-1.8 0-3.5-.5-5-1.4l-.4-.2-3.8 1 1-3.7-.3-.4A9.9 9.9 0 0 1 6.5 15c0-5.5 4.5-10 10-10v.5zm-4.5 5c-.3 0-.7.1-1.1.5-.4.4-1.4 1.4-1.4 3.4 0 2 1.4 3.9 1.6 4.2.2.3 2.8 4.3 6.9 5.9 3.4 1.3 4.1 1 4.8 1 .7 0 2.4-1 2.7-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5-.4-.2-2.4-1.2-2.8-1.3-.4-.1-.7-.2-1 .2-.3.4-1.1 1.3-1.3 1.6-.2.3-.5.3-.9.1-.4-.2-1.7-.6-3.2-2-1.2-1.1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.3.3-.5.4-.8.1-.3 0-.5-.1-.7-.1-.2-.9-2.2-1.3-3-.3-.7-.7-.6-1-.6h-.3z" />
      </svg>
    </a>);

}

/* ── voltar ao topo ──────────────────────────────────────────────────── */
function BackToTop() {
  const [on, setOn] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setOn(window.scrollY > 600);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const toTop = () => {
    const reduz = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    window.scrollTo({ top: 0, behavior: reduz ? "auto" : "smooth" });
  };

  return (
    <button
      className={"to-top" + (on ? " is-on" : "")}
      onClick={toTop}
      aria-label="Voltar ao topo da página"
      title="Voltar ao topo"
      tabIndex={on ? 0 : -1}>

      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="M12 19V5M5 12l7-7 7 7" />
      </svg>
    </button>);

}

Object.assign(window, {
  Nav, Hero, Stats, Solutions, About, Process, Testimonials, FAQ, FinalCTA, Footer, WhatsAppFloat, BackToTop, Icon
});