// B&L ENGENHARIA — Peças compartilhadas das páginas internas.

/* Cabeçalho escuro genérico de página. `title` aceita JSX (use <span className="italic">). */
function PageHero({ eyebrow, title, lead, meta }) {
  return (
    <header className="page-hero">
      <div className="page-hero-grid" />
      <div className="page-hero-glow" />
      <div className="wrap-wide page-hero-inner">
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="page-hero-title">{title}</h1>
        {lead && <p className="page-hero-lead">{lead}</p>}
        {meta && meta.length > 0 && (
          <div className="page-hero-meta">
            {meta.map((m, i) => (
              <div key={i}>
                {m.num && <span className="num">{m.num}</span>}
                <span>{m.label}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </header>
  );
}

/* Faixa final escura, leva à página de contato. */
function PageCTA({
  eyebrow = "Próximo passo",
  title,
  primaryLabel = "Falar com a B&L",
  primaryHref = "contatos.html",
}) {
  return (
    <section className="page-cta">
      <div className="page-cta-grid" />
      <div className="wrap-wide page-cta-inner">
        <div className="eyebrow on-dark">{eyebrow}</div>
        <h2>{title || (<>O próximo projeto começa em uma <span className="italic">conversa</span>.</>)}</h2>
        <div className="page-cta-row">
          <a href={primaryHref} className="btn btn-primary">
            {primaryLabel}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="https://wa.me/5516996219616" target="_blank" rel="noopener" className="btn btn-ghost">
            WhatsApp · (16) 99621-9616
          </a>
        </div>
      </div>
    </section>
  );
}

/* Grade de valores (página Sobre). */
function Valores() {
  const items = [
    ["V/01", "Confiança", "Uma trajetória de 24 anos construída projeto a projeto, com construtoras que voltam a cada novo empreendimento."],
    ["V/02", "Responsabilidade técnica", "Cada disciplina é revisada e assinada por um dos sócios — núcleo técnico próprio, nunca terceirizado."],
    ["V/03", "Inovação", "Pioneiros em BIM na região: modelamos antes de construir para antecipar problemas no projeto."],
    ["V/04", "Compromisso", "Acompanhamento do anteprojeto ao habite-se, com atendimento direto e prazos honrados."],
  ];
  return (
    <section className="valores">
      <div className="wrap-wide">
        <div className="valores-head">
          <div className="eyebrow">O que nos guia</div>
          <h2>Quatro princípios em <span className="italic">cada entrega</span>.</h2>
        </div>
        <div className="valores-grid">
          {items.map(([n, t, d]) => (
            <div className="val" key={n}>
              <div className="val-num">{n}</div>
              <h3 className="val-title">{t}</h3>
              <p className="val-desc">{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Botão flutuante de WhatsApp (reaproveita .wa do site.css). */
function WaFloat() {
  return (
    <a href="https://wa.me/5516996219616" target="_blank" rel="noopener" className="wa" aria-label="WhatsApp">
      <svg width="26" height="26" viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.61 4.46 1.67 6.33L3 29l6.85-1.6A12.92 12.92 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3Zm6.96 18.16c-.3.83-1.74 1.6-2.41 1.66-.63.05-1.45.18-4.27-.92-3.55-1.4-5.81-5.03-5.99-5.27-.18-.24-1.43-1.93-1.43-3.68 0-1.75.9-2.6 1.22-2.95.3-.33.66-.42.88-.42h.64c.2 0 .48-.08.75.59.27.68.92 2.33 1 2.5.08.18.13.39.03.62-.1.24-.15.39-.3.6-.16.21-.33.46-.47.62-.16.16-.33.34-.14.66.18.32.83 1.36 1.78 2.2 1.22 1.08 2.25 1.42 2.57 1.58.32.16.51.13.7-.08.18-.21.81-.94 1.02-1.27.21-.32.42-.27.71-.16.3.11 1.86.88 2.18 1.04.32.16.53.24.61.38.08.13.08.79-.22 1.62Z" />
      </svg>
    </a>
  );
}

Object.assign(window, { PageHero, PageCTA, Valores, WaFloat });