/* artsol-solution-page.jsx
   Página dedicada de cada solução · template compartilhado
   Dados em SOLUTIONS_DATA, slug definido em window.ARTSOL_SLUG
*/

const { useState: useStateSP } = React;

const HOME_URL = "index.html";

/* ── DATA ─────────────────────────────────────────────────────────────── */

const SOLUTIONS_DATA = {
  fotovoltaica: {
    slug: "fotovoltaica",
    n: "01",
    tag: "energia · conta de luz",
    title: "Energia Solar Fotovoltaica",
    short: "Fotovoltaica",
    hero: {
      headline: ["Até ", { accent: "90% menos" }, " na conta de luz, todo mês."],
      blurb: "Painéis fotovoltaicos no seu telhado geram a eletricidade que sua casa consome. O excedente vira crédito na Neoenergia, usado em meses nublados ou à noite. Em Brasília, uma das melhores irradiações do país — o retorno fica entre 2 e 5 anos.",
      image: "assets/sol-fotovoltaica.webp",
      imageAlt: "Casa residencial com painéis solares fotovoltaicos instalados no telhado em Brasília"
    },
    quickSpecs: [
      ["90%", "redução média na conta de luz"],
      ["25+", "anos de vida útil dos painéis"],
      ["2–5", "anos de retorno típico em Brasília"],
      ["bidirecional", "medidor homologado Neoenergia"]
    ],
    benefits: [
      { icon: "panel", title: "Energia limpa, conta enxuta", desc: "Reduz até 90% da conta de luz. O sistema atende a casa em tempo real e o excedente vira crédito por até 60 meses." },
      { icon: "diamond", title: "Vida útil 25+ anos", desc: "Painéis mantêm ≥80% da capacidade após 25 anos. Garantia de performance que cobre quase três décadas de operação." },
      { icon: "clock", title: "Retorno em 2 a 5 anos", desc: "Em Brasília, o investimento volta rápido. A partir do 6º ano é só economia, sem mensalidade, sem reajuste tarifário." },
      { icon: "check", title: "Homologação inclusa", desc: "Projeto, ART, acesso à rede e troca do medidor com a Neoenergia. Você não fala com a concessionária, a gente cuida de tudo." },
    ],
    howItWorks: [
      ["Painéis solares", "Captam a radiação solar no telhado e geram corrente contínua durante o dia."],
      ["Inversor/Microinversor", "Converte CC em corrente alternada, a mesma que sua casa já usa nos pontos de tomada."],
      ["Quadro de Energia", "A energia gerada abate o consumo da casa em tempo real, antes de ir para a rede da concessionária."],
      ["Crédito na rede", "O excedente vai para a rede e vira crédito Neoenergia, usado em meses nublados ou à noite. Válido por até 60 meses e pode ser usado em outras residências ou comércios no seu nome."],
    ],
    specs: [
      ["Indicado pra", "Casa, comércio, condomínio, agronegócio"],
      ["Retorno típico", "2 a 5 anos"],
      ["Capacidade residencial", "3 a 15 kWp"],
      ["Painéis", "Monocristalinos 545–720 W"],
      ["Inversor", "Growatt, Fronius, Sungrow"],
      ["Garantia performance", "25 anos (≥80% capacidade)"],
      ["Garantia mão de obra", "1 ano · ARTSOL"],
      ["Manutenção", "Limpeza anual recomendada"],
    ],
    testimonial: {
      quote: "Sou cliente da ARTSOL. Colocaram as placas de energia solar em minha casa, trocaram as caixas d'água e todos os serviços que preciso, oferecido pela empresa, recorro a eles os quais me atendem com atenção e competência. Elogio especial para Luis Felipe, Sr. João e Lúcio. Obrigado.",
      name: "Sena Agra",
      sub: "Cliente ARTSOL · ★ Avaliação Google"
    },
    faqs: [
      ["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 as variações sazonais. Brasília tem uma das melhores irradiações do Brasil."],
      ["Preciso de bateria?", "Não. O sistema usa a rede da Neoenergia como 'bateria': o excedente vira crédito para você consumir quando precisar (até 60 meses). Se preferir armazenar energia própria, também montamos sistema híbrido com bateria — indicado pra quem quer backup em caso de queda de energia."],
      ["Posso colocar em telhado de fibrocimento?", "Sim, com a estrutura de fixação adequada. Avaliamos durante a vistoria técnica para garantir que o telhado suporta o peso e a fixação correta."],
      ["Existe parcelamento?", "Sim, em até 60x com bancos parceiros. Em muitos casos, a parcela do financiamento é menor que a economia mensal. O sistema se paga sozinho desde o primeiro mês."],
    ],
    bgArt: "panel"
  },

  banho: {
    slug: "banho",
    n: "02",
    tag: "água quente · chuveiro",
    title: "Aquecimento Solar Banho",
    short: "Aquec. banho",
    hero: {
      headline: ["Até ", { accent: "40% menos" }, " na conta de luz, sem abrir mão do banho quente."],
      blurb: "Coletores no telhado aquecem a água que abastece chuveiros e torneiras. Boiler isolado mantém a temperatura por mais de 24 horas. Resistência elétrica de backup para garantir conforto em dias frios.",
      image: "assets/sol-banho.webp",
      imageAlt: "Chuveiro com água quente abastecida por aquecimento solar"
    },
    quickSpecs: [
      ["40%", "economia média na conta de luz"],
      ["10+", "anos de vida útil"],
      ["2–3", "anos de retorno"],
      ["24h", "água quente sem sol"]
    ],
    benefits: [
      { icon: "shower", title: "Economia direta no chuveiro elétrico", desc: "Chuveiro elétrico é o vilão da conta de luz — chega a 35% do consumo. Solar substitui sem perda de conforto." },
      { icon: "clock", title: "Retorno em 2 a 3 anos", desc: "Menor entrada e payback mais rápido entre as soluções ARTSOL. Funciona como porta de entrada para energia solar." },
      { icon: "diamond", title: "Durabilidade 10+ anos", desc: "Coletores em alumínio anodizado, boiler em aço inox 304. Mantém eficiência por mais de uma década." },
      { icon: "check", title: "Backup elétrico inteligente", desc: "Resistência aciona só quando a água do boiler cai abaixo do setpoint. Você nunca toma banho frio." },
    ],
    howItWorks: [
      ["Coletores solares", "Placas instaladas no telhado aquecem a água que circula em seu interior."],
      ["Termossifão", "A água quente sobe naturalmente — sem bombas, sem peças móveis — até o reservatório."],
      ["Boiler isolado", "Reservatório em aço inox com isolamento térmico mantém a água quente por 24h+."],
      ["Backup elétrico", "Em dias frios consecutivos, uma resistência de baixíssimo consumo garante o conforto."],
    ],
    specs: [
      ["Indicado pra", "Famílias de 4 a 12 pessoas"],
      ["Retorno típico", "2 a 3 anos"],
      ["Coletores", "3 a 6 coletores no telhado"],
      ["Boiler", "400 a 1000 litros (aço inox)"],
      ["Temperatura padrão", "55 °C no boiler"],
      ["Backup", "Resistência 4–6 kW · automática"],
      ["Garantia coletor", "3 anos"],
      ["Garantia boiler", "1 a 3 anos"],
    ],
    testimonial: {
      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!",
      name: "Antônio Henrique",
      sub: "Cliente ARTSOL · ★ Avaliação Google"
    },
    faqs: [
      ["Precisa de obra na casa?", "Para casas em construção, a tubulação é integrada sem complexidade. Em reforma, na maioria dos casos é possível aproveitar a tubulação existente — avaliamos na vistoria."],
      ["E quando der uma semana toda de chuva?", "O boiler mantém a água por 24-48h sem sol. Em períodos longos de frio, a resistência elétrica entra de forma automática, consumindo bem menos que um chuveiro tradicional."],
      ["Serve para piscinas também?", "Não. Para piscinas usamos um sistema diferente, otimizado para grandes volumes. Veja a página de Aquecimento Solar Piscina."],
      ["Funciona em apartamento?", "Sim, mas depende da disposição do prédio. Casos comuns: cobertura, condomínios horizontais e edifícios com permissão da assembleia."],
    ],
    bgArt: "drops"
  },

  piscina: {
    slug: "piscina",
    n: "03",
    tag: "piscina aquecida",
    title: "Aquecimento Solar para Piscina",
    short: "Aquec. piscina",
    hero: {
      headline: ["Piscina ", { accent: "usável o ano todo" }, ", sem conta de aquecimento."],
      blurb: "Coletores específicos para piscina circulam a água pelo telhado, onde ela aquece naturalmente — sem consumir nada depois de instalados. Quando o projeto pede temperatura garantida em qualquer dia, entra também a bomba de calor. Em Brasília o inverno é frio, mas ensolarado: dá pra usar a piscina em junho, julho e agosto.",
      image: "assets/sol-piscina.webp",
      imageAlt: "Piscina residencial aquecida por sistema solar com água cristalina"
    },
    quickSpecs: [
      ["100%", "uso da piscina o ano todo"],
      ["R$ 0", "custo de operação dos coletores"],
      ["15+", "anos de vida útil"],
      ["cloro", "resistente ao tratamento"]
    ],
    benefits: [
      { icon: "pool", title: "Piscina utilizável o ano todo", desc: "Brasília tem inverno seco e frio. Sem aquecimento, a piscina fica parada de junho a agosto. Com solar, a água mantém 28–30 °C." },
      { icon: "check", title: "Coletor solar, bomba de calor ou os dois", desc: "O coletor aquece sem consumir energia — instalou, acabou a conta. A bomba de calor puxa calor do ar e garante temperatura em qualquer dia, consumindo pouco: entrega cerca de 5 kWh de calor para cada 1 kWh gasto." },
      { icon: "diamond", title: "Materiais resistentes ao cloro", desc: "Coletores em polipropileno especial, não corroem em contato com a água tratada da piscina." },
      { icon: "panel", title: "Integra com a bomba existente", desc: "Aproveita a bomba de filtragem que você já tem. Adição mínima de potência elétrica, sem reformar a casa de máquinas." },
    ],
    howItWorks: [
      ["Bomba de filtragem", "A bomba que você já usa para filtrar a água passa também por uma derivação de aquecimento."],
      ["Coletores no telhado", "Placas em polipropileno preto absorvem o calor solar e o transferem para a água que circula dentro."],
      ["Retorno à piscina", "A água sai dos coletores aquecida e volta pela tubulação de retorno, distribuindo o calor pela piscina."],
      ["Controlador automático", "Sensor de temperatura ativa o sistema só quando o sol está aquecendo mais do que a piscina está perdendo. Havendo bomba de calor no projeto, o mesmo controlador decide qual fonte usar."],
    ],
    specs: [
      ["Indicado pra", "Piscinas residenciais e clubes"],
      ["Configurações", "Coletor solar · bomba de calor · os dois"],
      ["Área de coletor", "70 a 100% da área da piscina"],
      ["Temperatura média mantida", "28 a 30 °C"],
      ["Bomba de filtragem", "Reutilização da existente"],
      ["Coletor", "Polipropileno · resistente ao cloro"],
      ["Controlador", "Sensor diferencial automático"],
      ["Garantia coletor", "10 anos"],
      ["Vida útil estimada", "15+ anos"],
    ],
    testimonial: {
      quote: "O trabalho foi realizado com muita presteza e de forma muito eficiente. Gostei muito e recomendo esta empresa.",
      name: "João Batista",
      sub: "Cliente ARTSOL · ★ Avaliação Google"
    },
    faqs: [
      ["Funciona no inverno seco de Brasília?", "Sim, é justamente o caso de uso. Brasília tem inverno frio mas com muitos dias ensolarados — perfeito para aquecimento solar. A piscina mantém 28–30 °C nos meses mais frios."],
      ["E em dias de chuva?", "Sem sol o sistema não gera calor, mas a piscina segura boa parte do que já acumulou. Uma capa térmica à noite retém esse calor e resolve a maioria dos casos. Se você precisa de temperatura garantida independente do tempo, é aí que entra a bomba de calor."],
      ["Coletor solar ou bomba de calor: qual escolher?", "O coletor não consome nada, mas depende do sol. A bomba de calor (ou trocador de calor) puxa calor do ar e garante temperatura em qualquer dia, gastando 1 kWh para cada 5 de calor. Coletor para custo zero, bomba para temperatura fixa, os dois juntos em piscina grande. Definimos na vistoria."],
      ["O cloro destrói os coletores?", "Não. Os coletores ARTSOL para piscina são em polipropileno especial, material inerte ao cloro e ao pH típico de piscinas tratadas."],
      ["Posso usar com piscina existente?", "Sim, é o caso mais comum. Aproveitamos a casa de máquinas e a tubulação existentes; o que adicionamos é a derivação de aquecimento e os coletores no telhado."],
    ],
    bgArt: "waves"
  },

  "carregador-ev": {
    slug: "carregador-ev",
    n: "04",
    tag: "mobilidade elétrica",
    title: "Carregador para Carro Elétrico",
    short: "Carregador EV",
    isNew: true,
    hero: {
      headline: ["Recarregue seu carro elétrico ", { accent: "em casa, com sol." }],
      blurb: "Wallbox doméstico de 7 a 22 kW instalado pela ARTSOL. Compatível com todas as marcas: Tesla, BYD, Volvo, Porsche, GWM, Renault. Combine com sistema fotovoltaico e abasteça com energia 100% solar.",
      image: "assets/sol-ev.webp",
      imageAlt: "Carregador wallbox conectado a um carro elétrico em garagem residencial"
    },
    quickSpecs: [
      ["5×", "mais rápido que tomada comum"],
      ["7–22 kW", "potência configurável"],
      ["100%", "compatível com todas as marcas"],
      ["app", "controle e agendamento"]
    ],
    benefits: [
      { icon: "ev", title: "Carrega até 5× mais rápido", desc: "Tomada doméstica leva 24-30h para carga completa. Wallbox 11 kW faz o mesmo em 5-7h, perfeito para a noite." },
      { icon: "panel", title: "Carrega com sol no dia", desc: "Combine com seu sistema fotovoltaico e direcione a geração solar excedente para o carro. Combustível ≈ R$ 0,15/km." },
      { icon: "check", title: "Compatível com todas as marcas", desc: "Conector Tipo 2 (padrão global) e suporte a CCS2. Funciona com Tesla, BYD, Volvo, Porsche, GWM, Renault, Caoa e demais." },
      { icon: "clock", title: "App de controle inteligente", desc: "Agende a carga para horário de menor tarifa ou quando o solar está gerando mais. Monitore consumo e custo em tempo real." },
    ],
    howItWorks: [
      ["Wallbox na garagem", "Equipamento fixo conectado ao quadro de força da casa, com proteções dedicadas (DR e disjuntor próprios)."],
      ["Conexão tipo 2", "Cabo soquete padrão europeu — compatível com 100% dos carros elétricos e híbridos plug-in vendidos no Brasil."],
      ["Inteligência de carga", "Wallbox conversa com o carro, modula a potência e protege a bateria. Para no nível certo, sem desgaste."],
      ["Integra com fotovoltaica", "Se você tem solar instalado, o carregador prioriza a energia gerada na hora. Economia composta."],
    ],
    specs: [
      ["Indicado pra", "Quem tem carro elétrico ou híbrido plug-in"],
      ["Potências disponíveis", "7,4 kW · 11 kW · 22 kW"],
      ["Tempo de carga típico", "4 a 8 horas (carga completa)"],
      ["Conector", "Tipo 2 · padrão universal"],
      ["Alimentação", "Monofásico 220V ou Trifásico 380V"],
      ["Controle", "App iOS / Android · Wi-Fi"],
      ["Proteções", "DR + disjuntor + supervisão térmica"],
      ["Garantia", "3 anos de equipamento · 1 ano de instalação"],
    ],
    testimonial: {
      quote: "Excelente. Produto bom, entrega no prazo, preço combinado, instalação no dia e na hora marcados. Recomendo.",
      name: "Diaulas Costa",
      sub: "Cliente ARTSOL · ★ Avaliação Google"
    },
    faqs: [
      ["Preciso de obra na garagem?", "Não. Em 90% dos casos, basta um circuito dedicado novo do quadro de força até a parede da garagem. Nossa equipe avalia a infraestrutura na vistoria."],
      ["Funciona com todas as marcas?", "Sim. O conector Tipo 2 é padrão global e está em todos os carros elétricos vendidos no Brasil. Para CHAdeMO (Nissan Leaf antigo) usamos adaptador."],
      ["Combina com energia solar?", "Sim. É o combo recomendado. O wallbox inteligente prioriza a geração solar do momento e, no que excede, puxa da rede. Custo por km cai drasticamente."],
      ["Posso instalar antes de comprar o carro?", "Sim. Muitos clientes preparam a infraestrutura primeiro. Configuramos o wallbox para liberar a potência conforme o carro chegar."],
    ],
    bgArt: "circuit"
  }
};

const SLUG_ORDER = ["fotovoltaica", "banho", "piscina", "carregador-ev"];

const SLUG_TO_PAGE = {
  "fotovoltaica":   "solucao-fotovoltaica.html",
  "banho":          "solucao-aquec-banho.html",
  "piscina":        "solucao-aquec-piscina.html",
  "carregador-ev":  "solucao-carregador-ev.html"
};

/* slugs que têm simulador embutido nesta página (o script da calculadora
   precisa estar no .html correspondente) */
const SIMULADOR_NA_PAGINA = { banho: true };

/* ── helpers ─────────────────────────────────────────────────────────── */

/* Para onde vai o botão de cálculo. Sem simulador próprio, mandar o lead pro
   simulador fotovoltaico da home é pior que não ter botão — ele pede conta de
   luz e responde em kWp, que não é o que essa página vende. */
function ctaCalculo(data) {
  if (SIMULADOR_NA_PAGINA[data.slug]) return { href: "#simulador" };
  if (data.slug === "fotovoltaica") return { href: HOME_URL + "#simulador" };
  return {
    href: "https://api.whatsapp.com/send?phone=556133271000&text=" +
      encodeURIComponent(`Olá ARTSOL! Quero um orçamento de ${data.title}.`),
    externo: true,
    orcamento: true
  };
}

function renderHeadline(parts) {
  return parts.map((p, i) => {
    if (typeof p === "string") return <React.Fragment key={i}>{p}</React.Fragment>;
    if (p.accent) return <span key={i} className="uline">{p.accent}</span>;
    return null;
  });
}

function getIcon(name) {
  return window.Icon?.[name] || null;
}

/* ── Solution Hero ───────────────────────────────────────────────────── */

function SolutionHero({ data }) {
  const cta = ctaCalculo(data);
  return (
    <section className={"sol-hero wrap art-" + data.bgArt}>
      <div className="sol-hero-grid">
        <div className="sol-hero-text reveal">
          <div className="sol-crumb">
            <a href={HOME_URL}>Início</a>
            <span aria-hidden>·</span>
            <a href={HOME_URL + "#solucoes"}>Soluções</a>
            <span aria-hidden>·</span>
            <span className="sol-crumb-current">{data.short}</span>
          </div>

          <h1 className="h1 sol-h1">{renderHeadline(data.hero.headline)}</h1>
          <p className="subhead">{data.hero.blurb}</p>

          <div className="hero-cta sol-hero-cta">
            <a
              className="btn btn-primary btn-lg"
              href={cta.href}
              {...(cta.externo ? { target: "_blank", rel: "noopener" } : {})}>
              {cta.orcamento ? "Pedir orçamento" : "Calcular minha economia"} <span className="arr">→</span>
            </a>
            <a className="btn btn-secondary btn-lg" href="https://api.whatsapp.com/send?phone=556133271000" target="_blank" rel="noopener">
              Falar no WhatsApp
            </a>
          </div>
        </div>

        <div className="sol-hero-media reveal" style={{ transitionDelay: ".08s" }}>
          <div className="sol-hero-img">
            <img src={data.hero.image} alt={data.hero.imageAlt} loading="eager" />
          </div>
          {data.isNew && <span className="sol-hero-badge">Novo · 2025</span>}
          <div className="sol-hero-tag">
            <span className="lbl">solução</span>
            <span className="val">{data.n}<small>/04</small></span>
          </div>
        </div>
      </div>

      <div className="sol-quickspecs reveal" style={{ transitionDelay: ".14s" }}>
        {data.quickSpecs.map(([n, l], i) =>
          <div className="qs-cell" key={i}>
            <div className="qs-n">{n}</div>
            <div className="qs-l">{l}</div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ── Benefits ────────────────────────────────────────────────────────── */

function SolutionBenefits({ data }) {
  return (
    <section className="wrap sol-benefits">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">benefícios · por que essa solução</span>
          <h2 className="h2">O que muda na sua casa.</h2>
        </div>
      </div>

      <div className="benefits-grid">
        {data.benefits.map((b, i) =>
          <div key={i} className="benefit reveal" style={{ transitionDelay: `${i * .06}s` }}>
            <div className="benefit-ic" style={{ color: "var(--accent)" }}>{getIcon(b.icon)}</div>
            <h3 className="h3">{b.title}</h3>
            <p>{b.desc}</p>
          </div>
        )}
      </div>
    </section>
  );
}

/* ── How it Works ────────────────────────────────────────────────────── */

function SolutionHow({ data }) {
  return (
    <section className="wrap">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">como funciona · {data.howItWorks.length} estágios</span>
          <h2 className="h2">Do sol até a sua casa.</h2>
        </div>
        <span style={{ fontSize: 13, color: "var(--fg-2)" }}>
          {data.slug === "carregador-ev" ? "Da garagem ao carro — em horas, não em dias." : "Tecnologia simples, comprovada por décadas."}
        </span>
      </div>

      <div className="steps reveal">
        {data.howItWorks.map(([t, b], i) =>
          <div key={i} className="step">
            <span className="num">estágio {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>
  );
}

/* ── Specs Table ─────────────────────────────────────────────────────── */

function SolutionSpecs({ data }) {
  return (
    <section className="wrap sol-specs">
      <div className="sol-specs-grid">
        <div className="reveal">
          <span className="h-eyebrow" style={{ display: "block", marginBottom: 12 }}>detalhes técnicos</span>
          <h2 className="h2">Especificação completa do sistema.</h2>
          <p className="subhead" style={{ marginTop: 18 }}>
            Cada projeto ARTSOL é dimensionado individualmente. Os números abaixo são a faixa típica para residência. Na vistoria refinamos para o seu caso.
          </p>
          <a className="btn btn-secondary" href={HOME_URL + "#simulador"} style={{ marginTop: 22 }}>
            Dimensionar para minha casa <span className="arr">→</span>
          </a>
        </div>

        <div className="reveal" style={{ transitionDelay: ".08s" }}>
          <dl className="specs-list">
            {data.specs.map(([k, v], i) =>
              <div key={i} className="specs-row">
                <dt>{k}</dt>
                <dd>{v}</dd>
              </div>
            )}
          </dl>
        </div>
      </div>
    </section>
  );
}

/* ── Testimonial ─────────────────────────────────────────────────────── */

function SolutionTestimonial({ data }) {
  return (
    <section className="wrap sol-tst-wrap">
      <div className="sol-tst reveal">
        <div className="stars">★★★★★</div>
        <blockquote>"{data.testimonial.quote}"</blockquote>
        <div className="meta">
          <div className="avt" />
          <div>
            <div className="name">{data.testimonial.name}</div>
            <div className="sub">{data.testimonial.sub}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Related / Combos ────────────────────────────────────────────────── */

function SolutionRelated({ currentSlug }) {
  const others = SLUG_ORDER.filter(s => s !== currentSlug).map(s => SOLUTIONS_DATA[s]);

  return (
    <section className="wrap sol-related">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">combos · economia composta</span>
          <h2 className="h2">Combine soluções e amplifique o resultado.</h2>
        </div>
        <span style={{ fontSize: 13, color: "var(--fg-2)" }}>
          Mesmo time. Mesmo projeto. Sem juntar fornecedores diferentes.
        </span>
      </div>

      <div className="related-grid">
        {others.map((s, i) =>
          <a key={s.slug} href={SLUG_TO_PAGE[s.slug]} className="related-card reveal" style={{ transitionDelay: `${i * .06}s` }}>
            <div className="related-img">
              <img src={s.hero.image} alt={s.hero.imageAlt} loading="lazy" />
            </div>
            <div className="related-body">
              <span className="h-eyebrow">solução {s.n} · {s.tag}</span>
              <h3 className="h3">{s.title}</h3>
              <span className="more" style={{ color: "var(--accent)" }}>Saiba mais →</span>
            </div>
          </a>
        )}
      </div>
    </section>
  );
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

function SolutionFAQ({ data }) {
  const [open, setOpen] = useStateSP(0);

  return (
    <section 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">Sobre {data.short.toLowerCase()}.</h2>
          <p className="subhead" style={{ marginTop: 18 }}>
            Não achou sua dúvida? A gente responde em alguns minutos pelo WhatsApp.
          </p>
          <a className="btn btn-secondary" href="https://api.whatsapp.com/send?phone=556133271000" target="_blank" rel="noopener" style={{ marginTop: 22 }}>
            Falar com especialista <span className="arr">→</span>
          </a>
        </div>

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

/* ── Simulador ───────────────────────────────────────────────────────── */

function SolutionSimulador({ data }) {
  // sem o script da calculadora carregado no .html, a seção simplesmente não existe
  const Calc = SIMULADOR_NA_PAGINA[data.slug] ? window.CalculatorBanho : null;
  if (!Calc) return null;

  return (
    <section id="simulador" className="wrap sol-sim">
      <div className="sec-head reveal">
        <div className="title-block">
          <span className="h-eyebrow">simulador · sua casa</span>
          <h2 className="h2">Quanto você gasta hoje com banho.</h2>
        </div>
      </div>

      <div className="sol-sim-grid">
        <div className="sol-sim-text reveal">
          <p>
            O chuveiro elétrico liga <b>5.500 W</b> direto na rede e fica assim durante todo o
            banho — é o aparelho que mais consome numa casa em Brasília. Ajuste os três campos
            e veja quanto isso custa por ano na sua.
          </p>
          <p>
            A conta usa a tarifa residencial da Neoenergia e considera que o sol cobre cerca de
            85% do ano aqui, com a resistência de apoio entrando só nos dias frios.
          </p>
          <p className="sol-sim-note">
            O preço do sistema depende do seu telhado e da hidráulica existente — por isso ele
            não aparece aqui. Peça a proposta e a gente calcula com a sua planta.
          </p>
        </div>
        <div className="reveal" style={{ transitionDelay: ".08s" }}>
          <Calc />
        </div>
      </div>
    </section>
  );
}

/* ── Final CTA ───────────────────────────────────────────────────────── */

function SolutionFinalCTA({ data }) {
  const cta = ctaCalculo(data);
  return (
    <section className="wrap">
      <div className="final-cta reveal">
        <div className="inner">
          <div>
            <span className="h-eyebrow" style={{ color: "var(--accent)", display: "block", marginBottom: 14 }}>
              pronto pra começar?
            </span>
            <h2 className="h2">
              Vamos calcular sua economia <br />
              com {data.short.toLowerCase()}.
            </h2>
            <p className="subhead" style={{ marginTop: 18, color: "rgba(255,255,255,.7)" }}>
              Em ~30 segundos você tem uma estimativa. Em até 24h, um especialista te chama.
            </p>
          </div>
          <div className="cta-actions">
            <a
              className="btn btn-primary btn-lg"
              href={cta.href}
              {...(cta.externo ? { target: "_blank", rel: "noopener" } : {})}>
              {cta.orcamento ? "Pedir orçamento" : "Calcular agora"} <span className="arr">→</span>
            </a>
            <a className="btn btn-dark btn-lg" href="https://api.whatsapp.com/send?phone=556133271000" target="_blank" rel="noopener">
              WhatsApp · (61) 3327-1000
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── PAGE ────────────────────────────────────────────────────────────── */

function SolutionPage({ slug }) {
  const data = SOLUTIONS_DATA[slug];
  if (!data) {
    return <div style={{ padding: 40 }}>Solução não encontrada: <code>{slug}</code></div>;
  }

  // update document title
  React.useEffect(() => {
    document.title = `ARTSOL · ${data.title}`;
  }, [slug]);

  return (
    <>
      <main>
        <SolutionHero data={data} />
        <SolutionBenefits data={data} />
        <SolutionHow data={data} />
        <SolutionSpecs data={data} />
        <SolutionTestimonial data={data} />
        <SolutionSimulador data={data} />
        <SolutionRelated currentSlug={slug} />
        <SolutionFAQ data={data} />
        <SolutionFinalCTA data={data} />
      </main>
    </>
  );
}

window.SolutionPage = SolutionPage;
window.SOLUTIONS_DATA = SOLUTIONS_DATA;