// Shared UI: header, footer, WhatsApp FAB, helpers
const WA_NUMBER = "5568984054309";
const WA_TEXT = encodeURIComponent("Olá! Vim pelo site da 8Bits Tecnologia e gostaria de conversar.");
const WA_LINK = `https://wa.me/${WA_NUMBER}?text=${WA_TEXT}`;

function WhatsAppIcon({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M.057 24l1.687-6.163a11.867 11.867 0 0 1-1.587-5.946C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 0 1 8.413 3.488 11.82 11.82 0 0 1 3.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 0 1-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/>
    </svg>
  );
}

function Brand({ white }) {
  return (
    <a href="#/home" className="brand" aria-label="8Bits Tecnologia — Início">
      <img src={white ? "assets/logo-white.png" : "assets/logo-color.png"} alt="8Bits Tecnologia" />
    </a>
  );
}

function Header({ route, setRoute }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    ["home", "Home"],
    ["solucoes", "Soluções"],
    ["tutoriais", "Tutoriais"],
    ["downloads", "Downloads"],
    ["sobre", "Sobre"],
    ["contato", "Contato"],
  ];
  const go = (k) => (e) => {
    e.preventDefault();
    setOpen(false);
    window.location.hash = "/" + k;
  };
  return (
    <>
      <div className="top-strip">
        <div className="wrap">
          <span><span className="dot" /> Atendimento rápido • Seg–Sáb</span>
          <div className="strip-right">
            <span>Rio Branco — AC</span>
            <span className="strip-hide">CNPJ 32.088.571/0001-16</span>
            <span>(68) 98405-4309</span>
          </div>
        </div>
      </div>
      <header className="site">
        <div className="wrap">
          <Brand />
          <nav className={"primary " + (open ? "open" : "")}>
            {links.map(([k, l]) => (
              <a key={k} href={"#/" + k} onClick={go(k)} className={route === k ? "active" : ""}>
                {l}
              </a>
            ))}
          </nav>
          <div className="nav-cta">
            <a className="btn btn-wa btn-sm" href={WA_LINK} target="_blank" rel="noreferrer">
              <WhatsAppIcon size={16} /> WhatsApp
            </a>
            <button className="menu-btn" onClick={() => setOpen(!open)} aria-label="Menu">
              <span /><span /><span />
            </button>
          </div>
        </div>
      </header>
    </>
  );
}

function Footer() {
  const go = (k) => (e) => { e.preventDefault(); window.location.hash = "/" + k; };
  return (
    <footer className="site">
      <div className="wrap">
        <div className="top">
          <div>
            <img src="assets/logo-white.png" alt="8Bits Tecnologia" />
            <p style={{ margin: 0, maxWidth: "38ch", fontSize: 14, lineHeight: 1.6 }}>
              Tecnologia que resolve. Suporte, ERP, automação comercial e soluções fiscais para pequenas e médias empresas de Rio Branco e região.
            </p>
          </div>
          <div>
            <h5>Navegar</h5>
            <ul>
              <li><a href="#/home" onClick={go("home")}>Home</a></li>
              <li><a href="#/solucoes" onClick={go("solucoes")}>Soluções</a></li>
              <li><a href="#/tutoriais" onClick={go("tutoriais")}>Tutoriais</a></li>
              <li><a href="#/downloads" onClick={go("downloads")}>Downloads</a></li>
              <li><a href="#/sobre" onClick={go("sobre")}>Sobre</a></li>
              <li><a href="#/contato" onClick={go("contato")}>Contato</a></li>
            </ul>
          </div>
          <div>
            <h5>Contato</h5>
            <ul>
              <li>WhatsApp: (68) 98405-4309</li>
              <li>Rio Branco — AC</li>
              <li>Bairro Aeroporto Velho</li>
              <li>Seg–Sex, 08h às 18h</li>
            </ul>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li>8Bits Tecnologia</li>
              <li>CNPJ 32.088.571/0001-16</li>
              <li>Fundada em 2018</li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <span>© {new Date().getFullYear()} 8Bits Tecnologia — Todos os direitos reservados</span>
          <span>Rio Branco / AC — Brasil</span>
        </div>
      </div>
    </footer>
  );
}

function FabWA() {
  return (
    <a className="fab-wa" href={WA_LINK} target="_blank" rel="noreferrer" aria-label="Abrir WhatsApp">
      <WhatsAppIcon size={20} />
      <span className="tx">Fale no WhatsApp</span>
    </a>
  );
}

function FinalCTA() {
  return (
    <section className="cta-band">
      <div className="wrap">
        <h2 className="h-section">Um problema pra resolver? Chama a 8Bits.</h2>
        <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noreferrer">
            <WhatsAppIcon /> (68) 98405-4309
          </a>
          <a className="btn btn-ghost" href="#/contato">Formulário de contato</a>
        </div>
      </div>
    </section>
  );
}

// Pixel icon: 4x4 grid from string pattern (# = ink, r = red, . = empty)
function PxIcon({ pattern }) {
  const rows = pattern.trim().split(/\s+/);
  const cells = [];
  for (const row of rows) {
    for (const ch of row) {
      const cls = ch === "#" ? "" : ch === "r" ? "r" : "e";
      cells.push(cls);
    }
  }
  return (
    <div className="icon">
      {cells.map((c, i) => <i key={i} className={c} />)}
    </div>
  );
}

Object.assign(window, { WA_LINK, WA_NUMBER, WhatsAppIcon, Brand, Header, Footer, FabWA, FinalCTA, PxIcon });