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

/* =====================================================
   Digital Valor — UI primitives + Header + Footer
   ===================================================== */

/* ---------- Brand contact (single source of truth) ---------- */
const DV_CONTACT = {
  whatsappPhone: "+55 11 93390-4582",
  whatsappPhoneRaw: "5511933904582",
  whatsappUrl: "https://api.whatsapp.com/send/?phone=5511933904582&text=Ol%C3%A1%2C+estou+vindo+pelo+site+e+gostaria+de+mais+informa%C3%A7%C3%B5es+sobre+a+Digital+Valor&type=phone_number&app_absent=0",
  email: "comercial@digitalvalor.com.br",
  emailHref: "mailto:comercial@digitalvalor.com.br",
  cnpj: "44.039.062/0001-82",
  instagram: "https://www.instagram.com/digital_valor/",
  siteUrl: "https://digitalvalor.com.br/",
};

/* Open WhatsApp in a new tab — used by every primary CTA */
function openWhatsApp() {
  window.open(DV_CONTACT.whatsappUrl, "_blank", "noopener,noreferrer");
}

/* ---------- Logo ---------- */
/* The horizontal logo has aspect ~1.65 (1123×682). Size it by HEIGHT;
   width comes from the file. Passing `size` keeps backwards-compat. */
function DVLogo({ size = 40, height, href = "Home.html", variant = "horizontal" }) {
  const h = height || size;
  const src = variant === "symbol"
    ? "assets/logo-digital-valor-symbol.png"
    : "assets/logo-digital-valor-horizontal.png";
  return (
    <a href={href} className="logo" aria-label="Digital Valor — ir para a Home" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
      <img
        src={src}
        alt="Digital Valor"
        style={{ height: h, width: "auto", objectFit: "contain", display: "block" }}
        draggable="false"
      />
    </a>
  );
}

/* ---------- Chip ---------- */
function Chip({ children }) {
  return (
    <span className="dv-chip">
      <span className="dot" />
      {children}
    </span>
  );
}

/* ---------- Eyebrow ---------- */
function Eyebrow({ children, purple = false }) {
  return <div className={"eyebrow" + (purple ? " purple" : "")}>{children}</div>;
}

/* ---------- Button ----------
   - href starting with http(s) → opens in new tab with rel=noopener
   - onClick still supported
   - aria-label supported
*/
function Button({ children, variant = "primary", arrow = true, onClick, href, className = "", style, ariaLabel, type }) {
  const cls = `btn btn-${variant} ${className}`.trim();
  const inner = (
    <React.Fragment>
      <span>{children}</span>
      {arrow && <span className="arrow" aria-hidden="true">→</span>}
    </React.Fragment>
  );
  if (href) {
    const external = /^https?:\/\//i.test(href) || href.startsWith("mailto:") || href.startsWith("tel:");
    return (
      <a
        className={cls}
        href={href}
        onClick={onClick}
        style={style}
        aria-label={ariaLabel}
        target={external ? "_blank" : undefined}
        rel={external ? "noopener noreferrer" : undefined}
      >
        {inner}
      </a>
    );
  }
  return <button className={cls} onClick={onClick} style={style} aria-label={ariaLabel} type={type || "button"}>{inner}</button>;
}

/* ---------- CTA "Solicitar Diagnóstico" (always WhatsApp) ---------- */
function CTAButton({ children = "Solicitar Diagnóstico", variant = "primary", className = "", ariaLabel = "Solicitar diagnóstico no WhatsApp" }) {
  return (
    <Button
      variant={variant}
      className={className}
      href={DV_CONTACT.whatsappUrl}
      ariaLabel={ariaLabel}
    >
      {children}
    </Button>
  );
}

const NAV_LINKS = [
  { label: "Início",       href: "Home.html",        key: "home" },
  { label: "Método EDVA",  href: "metodo-edva.html", key: "metodo" },
  { label: "Soluções",     href: "solucoes.html",    key: "solucoes" },
  { label: "Segmentos",    href: "segmentos.html",   key: "segmentos" },
  { label: "Sobre",        href: "sobre.html",       key: "sobre" },
  { label: "Diagnóstico",  href: "diagnostico.html", key: "diagnostico" },
];

function Header({ active = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <header className={"dv-header" + (scrolled ? " scrolled" : "")}>
        <div className="container row">
          <DVLogo size={44} />
          <nav className="dv-nav" aria-label="Navegação principal">
            {NAV_LINKS.map(l => (
              <a key={l.key} href={l.href} className={l.key === active ? "active" : ""} aria-current={l.key === active ? "page" : undefined}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="header-cta">
            <CTAButton className="btn-sm">Solicitar Diagnóstico</CTAButton>
          </div>
          <button className="dv-burger" aria-label={menuOpen ? "Fechar menu" : "Abrir menu"} aria-expanded={menuOpen} onClick={() => setMenuOpen(v => !v)}>
            <span />
          </button>
        </div>
      </header>
      {menuOpen && (
        <div className="dv-mobile-menu" role="menu">
          {NAV_LINKS.map(l => (
            <a key={l.key} href={l.href} className={l.key === active ? "active" : ""} role="menuitem" onClick={() => setMenuOpen(false)}>{l.label}</a>
          ))}
          <CTAButton>Solicitar Diagnóstico</CTAButton>
        </div>
      )}
    </React.Fragment>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="dv-footer" data-screen-label="Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <DVLogo size={56} />
            <p className="footer-tagline">
              Aquisição e vendas previsíveis para empresas que querem crescer com controle.
            </p>
            <a
              className="footer-wa"
              href={DV_CONTACT.whatsappUrl}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Falar com a Digital Valor no WhatsApp"
            >
              <span className="ic" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" /></svg>
              </span>
              Falar com a Digital Valor no WhatsApp
            </a>
          </div>

          <div>
            <h4 className="footer-h">Navegação</h4>
            <ul className="footer-list">
              <li><a href="Home.html">Início</a></li>
              <li><a href="metodo-edva.html">Método EDVA</a></li>
              <li><a href="solucoes.html">Soluções</a></li>
              <li><a href="segmentos.html">Segmentos</a></li>
              <li><a href="sobre.html">Sobre</a></li>
              <li><a href="diagnostico.html">Diagnóstico</a></li>
            </ul>
          </div>

          <div>
            <h4 className="footer-h">Segmentos</h4>
            <ul className="footer-list">
              <li><a href="segmentos.html#academias">Academias e Fitness</a></li>
              <li><a href="segmentos.html#imobiliario">Mercado Imobiliário</a></li>
              <li><a href="segmentos.html#comercio">Comércios Locais</a></li>
              <li><a href="segmentos.html#clinicas">Clínicas e Estética</a></li>
              <li><a href="segmentos.html#servicos">Prestadores de Serviço</a></li>
              <li><a href="segmentos.html#b2b">B2B e Venda Consultiva</a></li>
            </ul>
          </div>

          <div>
            <h4 className="footer-h">Contato</h4>
            <ul className="footer-list footer-contact">
              <li>
                <a
                  href={DV_CONTACT.whatsappUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={`WhatsApp ${DV_CONTACT.whatsappPhone}`}
                >
                  <span className="footer-lab">WhatsApp</span>
                  <span className="footer-val">{DV_CONTACT.whatsappPhone}</span>
                </a>
              </li>
              <li>
                <a href={DV_CONTACT.emailHref} aria-label={`Enviar e-mail para ${DV_CONTACT.email}`}>
                  <span className="footer-lab">E-mail</span>
                  <span className="footer-val">{DV_CONTACT.email}</span>
                </a>
              </li>
              <li>
                <a href={DV_CONTACT.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram Digital Valor">
                  <span className="footer-lab">Instagram</span>
                  <span className="footer-val">@digital_valor</span>
                </a>
              </li>
              <li className="footer-cnpj">
                <span className="footer-lab">CNPJ</span>
                <span className="footer-val">{DV_CONTACT.cnpj}</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="footer-bar">
          <div>© 2026 Digital Valor · Todos os direitos reservados</div>
          <div className="footer-meta">
            <span className="green">Marketing é combustível. Estrutura é motor.</span>
          </div>
          <div className="footer-policy">
            <a href="#" aria-label="Política de Privacidade">Política de Privacidade</a>
            <span className="sep" aria-hidden="true">·</span>
            <a href="#" aria-label="Termos de Uso">Termos de Uso</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  DVLogo, Chip, Eyebrow, Button, CTAButton,
  Header, Footer, NAV_LINKS,
  DV_CONTACT, openWhatsApp,
});