/* ---------- Config ---------- */
const CATALOG_URL = "https://catalogo.computer4u.com.br/"; // troque pelo link externo do catálogo

// Web3Forms — chave de acesso para envio do formulário.
// 1. Cadastre seu e-mail em https://web3forms.com (grátis, ilimitado)
// 2. Confirme o e-mail e copie a "Access Key" que aparece no painel
// 3. Cole a chave abaixo substituindo "SUA_CHAVE_AQUI"
const WEB3FORMS_ACCESS_KEY = "cc271c5f-3817-4293-b57e-eef33045b96f";

// Número de WhatsApp para onde o cliente é redirecionado após enviar o
// formulário (formato internacional, só dígitos). Recebe e-mail E WhatsApp.
const WHATSAPP_NUMBER = "5541995205000";

/* ---------- Icons (inline SVG, brand-neutral) ---------- */
const I = {
  Whatsapp: ({ s = 20 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 21l1.65-4.05a8 8 0 1 1 3.4 3.36L3 21z" />
      <path d="M8.5 9.5c.4 1.6 2.4 3.6 4 4 1 .2 1.4-.2 1.7-.5l.7-.7c.2-.2.5-.2.7-.1l1.6.8c.3.1.4.5.2.7-.4.8-1.3 1.4-2.2 1.5-2.6.3-5.9-2.9-6.2-5.5-.1-.9.5-1.8 1.3-2.2.2-.1.6 0 .7.2l.8 1.6c.1.2.1.5-.1.7l-.7.7c-.3.3-.7.7-.5 1.7z" />
    </svg>,

  Cart: ({ s = 20 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="9" cy="20" r="1.5" /><circle cx="18" cy="20" r="1.5" />
      <path d="M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.2a2 2 0 0 0 2-1.5L20 8H6" />
    </svg>,

  Arrow: ({ s = 16 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>,

  ArrowDown: ({ s = 18 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M6 13l6 6 6-6" />
    </svg>,

  Building: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="3" width="16" height="18" rx="1" />
      <path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2M10 21v-3h4v3" />
    </svg>,

  Boxes: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2 8l4-2 4 2v6l-4 2-4-2zM10 8l4-2 4 2v6l-4 2-4-2zM6 4l4-2 4 2" />
    </svg>,

  Catalog: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 4h12a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2zM8 7h6M8 11h6M8 15h4" />
    </svg>,

  Headset: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 13v-2a8 8 0 0 1 16 0v2" />
      <path d="M4 14a2 2 0 0 1 2-2h1v6H6a2 2 0 0 1-2-2zM17 12h1a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-1zM17 18v1a3 3 0 0 1-3 3h-2" />
    </svg>,

  Laptop: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="12" rx="1.5" />
      <path d="M2 20h20" />
    </svg>,

  Monitor: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="3" width="20" height="14" rx="1.5" />
      <path d="M8 21h8M12 17v4" />
    </svg>,

  Server: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="6" rx="1" />
      <rect x="3" y="14" width="18" height="6" rx="1" />
      <path d="M7 7h.01M7 17h.01M11 7h6M11 17h6" />
    </svg>,

  Printer: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
      <rect x="6" y="14" width="12" height="7" rx="1" />
    </svg>,

  Network: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="14" width="20" height="7" rx="1" />
      <path d="M6 18h.01M10 18h.01M7 14V8h10v6M12 8V4" />
    </svg>,

  Phone: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="2" width="12" height="20" rx="2" />
      <path d="M11 19h2" />
    </svg>,

  Mouse: ({ s = 24 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="3" width="12" height="18" rx="6" />
      <path d="M12 7v5" />
    </svg>,

  Shield: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z" />
      <path d="M9 12l2 2 4-4" />
    </svg>,

  Truck: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M1 5h13v11H1zM14 8h4l3 3v5h-7z" />
      <circle cx="5.5" cy="18" r="1.8" /><circle cx="17.5" cy="18" r="1.8" />
    </svg>,

  Tag: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12V3h9l9 9-9 9z" /><circle cx="7.5" cy="7.5" r="1.4" />
    </svg>,

  Cog: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3" />
      <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" />
    </svg>,

  Mail: ({ s = 20 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" />
    </svg>,

  Pin: ({ s = 20 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s-7-7-7-13a7 7 0 1 1 14 0c0 6-7 13-7 13z" /><circle cx="12" cy="9" r="2.5" />
    </svg>,

  Check: ({ s = 18 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12l5 5L20 7" />
    </svg>,

  X: ({ s = 18 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 6l12 12M6 18L18 6" />
    </svg>,

  Bolt: ({ s = 22 }) =>
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M13 2L3 14h7l-1 8 11-12h-7z" />
    </svg>

};

/* ---------- Logo ---------- */
function Logo({ height = 38 }) {
  return (
    <img src="assets/logo.webp" alt="Computer For You — Distribuidora"
         style={{ height, width: "auto", display: "block" }} />
  );
}

/* ---------- Header ---------- */
function Header({ active, onNav }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 24);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const items = [
  { k: "inicio", l: "Início" },
  { k: "catalogo", l: "Catálogo", external: CATALOG_URL },
  { k: "sobre", l: "Sobre" },
  { k: "diferenciais", l: "Diferenciais" },
  { k: "contato", l: "Contato" }];


  return (
    <header className={`site-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="container header-inner">
        <a href="#inicio" onClick={(e) => {e.preventDefault();onNav("inicio");}}>
          <Logo />
        </a>
        <nav className="nav">
          {items.map((it) => it.external ?
          <a key={it.k} href={it.external} target="_blank" rel="noreferrer">{it.l}</a> :

          <a key={it.k} href={`#${it.k}`} className={active === it.k ? "active" : ""}
          onClick={(e) => {e.preventDefault();onNav(it.k);}}>{it.l}</a>
          )}
        </nav>
        <div className="header-actions">
          <a className="icon-btn" href="https://wa.me/5541995205000" target="_blank" rel="noreferrer" aria-label="WhatsApp">
            <I.Whatsapp />
          </a>
        </div>
      </div>
    </header>);

}

/* ---------- Hero ---------- */
function Hero({ onNav }) {
  return (
    <section className="hero" id="inicio">
      <div className="hero-bgimg" aria-hidden="true">
        <img src="assets/hero.png" alt="" loading="eager" />
        <div className="hero-bgimg-fade" />
      </div>
      <div className="hero-diagonal">
        <div className="shard a" />
        <div className="shard b" />
        <div className="shard c" />
        <div className="stripes" />
      </div>
      <div className="hero-dots tl" />

      <div className="container hero-inner hero-inner-single">
        <div>
          <span className="hero-eyebrow">
            <span className="dot" />
            <span style={{ fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-dim)" }}>
              Distribuidora B2B · CNPJ verificado
            </span>
          </span>
          <h1>
            Soluções em<br />Tecnologia <span className="accent">Corporativa</span><br />para Empresas
          </h1>
          <p className="hero-sub">
            Equipamentos corporativos, lotes de informática e soluções em TI para empresas que precisam de
            performance, confiança e agilidade.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onNav("contato")}>
              Fale Conosco <I.Arrow />
            </button>
            <a className="btn btn-ghost btn-lg" href={CATALOG_URL} target="_blank" rel="noreferrer">
              Ver Catálogo
            </a>
          </div>
          <div className="hero-stats">
            <div className="stat"><strong>+5.000</strong><span>Empresas atendidas</span></div>
            <div className="stat"><strong>+15</strong><span>Anos no mercado</span></div>
            <div className="stat"><strong>100%</strong><span>Confiabilidade</span></div>
          </div>
        </div>
      </div>

      <button className="hero-scroll" aria-label="Rolar" onClick={() => onNav("servicos")}>
        <I.ArrowDown />
      </button>
    </section>);

}

/* ---------- Services ---------- */
function Services() {
  const items = [
  { icon: <I.Building s={22} />, title: "Venda Corporativa", body: "Aquisição direta para empresas com valores abaixo do mercado, nota fiscal e garantia" },
  { icon: <I.Boxes s={22} />, title: "Venda em Lotes", body: "Renovação de parque tecnológico em volume, com logística e preço dedicados." },
  { icon: <I.Catalog s={22} />, title: "Catálogo Comercial", body: "Diversos equipamentos entre notebooks, desktops, servidores, redes e periféricos." },
  { icon: <I.Headset s={22} />, title: "Atendimento B2B", body: "Time consultivo, cotações  e pós-venda dedicado durante todo o ciclo." }];

  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-head">
          <div className="title-block">
            <span className="eyebrow">// O que oferecemos</span>
            <h2>Quatro frentes para abastecer<br />a TI da sua empresa</h2>
          </div>
          <p style={{ color: "var(--text-dim)", maxWidth: 380, marginBottom: 6 }}>
            Da unidade ao lote, da consultoria à entrega — somos a ponte direta entre os principais
            fabricantes e o seu departamento de TI.
          </p>
        </div>
        <ul className="services-grid" role="list">
          {items.map((s, i) =>
          <li className="service-card" key={i}>
              <div>
                <div className="icon" aria-hidden="true">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <span className="arrow" aria-hidden="true">Saiba mais <I.Arrow s={14} /></span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

/* ---------- Stats ---------- */
function StatsStrip() {
  return (
    <section className="stats-strip">
      <div className="container">
        <div className="stats-strip-inner">
          {[
          ["+5.000", "Empresas atendidas"],
          ["+2.000", "SKUs em catálogo"],
          ["+20", "Marcas parceiras"],
          ["98%", "Satisfação no pós-venda", true]].
          map(([n, l, hl], i) =>
          <div className="stat-cell" key={i}>
              <div className="num">{hl ? <span className="pct">{n}</span> : n}</div>
              <span className="lbl">{l}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Catalog ---------- */
const PRODUCTS = [
{ id: "p1", cat: "Notebooks", brand: "Marca A", name: "Notebook Corporativo 14\" Intel i5 16GB / 512GB SSD", specs: "Garantia 12m · NFe", price: 3890, icon: <I.Laptop s={48} />, tag: "Lote 10+" },
{ id: "p2", cat: "Notebooks", brand: "Marca B", name: "Ultrabook 13\" Intel i7 16GB / 1TB SSD", specs: "Touch · Tela OLED", price: 6790, icon: <I.Laptop s={48} />, tag: "Top" },
{ id: "p3", cat: "Monitores", brand: "Marca C", name: "Monitor 24\" Full HD IPS · HDMI/DP", specs: "Suporte VESA", price: 890, icon: <I.Monitor s={48} />, tag: "Estoque" },
{ id: "p4", cat: "Monitores", brand: "Marca D", name: "Monitor Curvo 27\" QHD 165Hz", specs: "Para gestão/dev", price: 1990, icon: <I.Monitor s={48} />, tag: "Novo" },
{ id: "p5", cat: "Desktops", brand: "Marca A", name: "Desktop Mini i5 8GB / 256GB SSD", specs: "Compacto · DDR4", price: 2790, icon: <I.Server s={48} />, tag: "Lote 20+" },
{ id: "p6", cat: "Servidores", brand: "Marca E", name: "Servidor Rack 1U Xeon · 32GB ECC", specs: "Hot-swap · Dual PSU", price: 18900, icon: <I.Server s={48} />, tag: "Sob consulta" },
{ id: "p7", cat: "Redes", brand: "Marca F", name: "Switch Gerenciável 24 portas Gigabit", specs: "PoE+ · L2/L3 leve", price: 1450, icon: <I.Network s={48} />, tag: "Estoque" },
{ id: "p8", cat: "Periféricos", brand: "Marca G", name: "Kit Teclado + Mouse Wireless USB-C", specs: "Plug & play · Bateria 12m", price: 189, icon: <I.Mouse s={48} />, tag: "Lote 50+" }];

const CATS = ["Todos", "Notebooks", "Desktops", "Monitores", "Servidores", "Redes", "Periféricos"];

function Catalog({ onAdd, cart }) {
  const [tab, setTab] = React.useState("Todos");
  const list = tab === "Todos" ? PRODUCTS : PRODUCTS.filter((p) => p.cat === tab);
  return (
    <section className="section" id="catalogo">
      <div className="container">
        <div className="section-head">
          <div className="title-block">
            <span className="eyebrow">// Catálogo</span>
            <h2>Produtos prontos para<br />sua próxima requisição</h2>
          </div>
          <p>
            Estoque local, faturamento como pessoa jurídica e condições especiais para volumes. Os preços
            abaixo são referenciais — peça sua proposta personalizada.
          </p>
        </div>

        <div className="cat-tabs">
          {CATS.map((c) =>
          <button key={c} className={`cat-tab ${tab === c ? "active" : ""}`} onClick={() => setTab(c)}>{c}</button>
          )}
        </div>

        <div className="cat-grid">
          {list.map((p) => {
            const added = cart.find((c) => c.id === p.id);
            return (
              <div className="product-card" key={p.id}>
                <div className="ph">
                  <div className="tag">{p.tag}</div>
                  <div className="glyph">{p.icon}</div>
                </div>
                <div className="body">
                  <span className="brand">{p.brand} · {p.cat}</span>
                  <div className="name">{p.name}</div>
                  <div className="specs">{p.specs}</div>
                  <div className="foot">
                    <div className="price">
                      <small>a partir de</small>
                      R$ {p.price.toLocaleString("pt-BR")}
                    </div>
                    <button className={`add ${added ? "added" : ""}`} onClick={() => onAdd(p)}>
                      {added ? <><I.Check s={14} /> Adicionado</> : <><I.Cart s={14} /> Cotar</>}
                    </button>
                  </div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ---------- O Que Fazemos (about) ---------- */
function WhatWeDo() {
  const points = [
    { i: <I.Building s={18} />, t: "Venda corporativa direta", d: "Atendimento PJ com nota fiscal e gestor dedicado." },
    { i: <I.Boxes s={18} />, t: "Lotes de informática", d: "Renovação de parque tecnológico em volume." },
    { i: <I.Truck s={18} />, t: "Logística nacional", d: "Entrega para todo o Brasil." },
    { i: <I.Headset s={18} />, t: "Pós-venda B2B", d: "Suporte humano durante todo o ciclo." },
  ];
  return (
    <section className="section" id="sobre">
      <div className="container">
        <div className="wwd-grid">
          <div className="wwd-media">
            <img src="assets/o-que-fazemos.png" alt="Atendimento personalizado na loja Computer For You — consultora apresentando notebook corporativo ao cliente" loading="lazy" />
            <div className="wwd-media-frame" />
          </div>
          <div className="wwd-content">
            <span className="eyebrow">// O que fazemos</span>
            <h2>Distribuímos tecnologia<br />para empresas que <span style={{ color: "var(--accent)" }}>não podem parar</span></h2>
            <p className="wwd-lead">
              Há vários anos, somos a ponte direta entre os principais fabricantes de TI e os
              departamentos de compras corporativos. Trabalhamos com volume, prazo apertado e garantia
              de fábrica — do primeiro contato à entrega na sua porta.
            </p>
            <ul className="wwd-points">
              {points.map((p, i) => (
                <li key={i}>
                  <span className="wwd-icon">{p.i}</span>
                  <div>
                    <strong>{p.t}</strong>
                    <span>{p.d}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Video Banner ---------- */
function VideoBanner() {
  const ref = React.useRef(null);
  const [playing, setPlaying] = React.useState(true);
  const [muted, setMuted] = React.useState(true);
  const toggle = () => {
    const v = ref.current;
    if (!v) return;
    if (v.paused) { v.play(); setPlaying(true); }
    else { v.pause(); setPlaying(false); }
  };
  const toggleMute = () => {
    const v = ref.current;
    if (!v) return;
    v.muted = !v.muted;
    setMuted(v.muted);
  };
  return (
    <section className="video-banner" aria-label="Vídeo institucional">
      <video
        ref={ref}
        src="assets/trade.mp4"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
      />
      <div className="video-banner-overlay" />
      <div className="container video-banner-inner">
        <div>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,0.9)" }}>// Computer For You em movimento</span>
          <h2 className="video-banner-title">
            Tecnologia que sua empresa<br />pode confiar — todos os dias
          </h2>
          <p>Bastidores do nosso atendimento, logística e equipe comercial dedicada.</p>
        </div>
        <div className="video-controls">
          <button className="video-ctl" onClick={toggle} aria-label={playing ? "Pausar" : "Reproduzir"}>
            {playing ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M7 5v14l12-7z"/></svg>
            )}
          </button>
          <button className="video-ctl" onClick={toggleMute} aria-label={muted ? "Ativar som" : "Silenciar"}>
            {muted ? (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4zM23 9l-6 6M17 9l6 6"/></svg>
            ) : (
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 5L6 9H2v6h4l5 4zM15.5 8.5a5 5 0 0 1 0 7M19 5a9 9 0 0 1 0 14"/></svg>
            )}
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Brands ---------- */
function Brands() {
  const brands = [
  { name: "Dell", src: "https://logospng.org/download/dell/logo-dell-512.png" },
  { name: "HP", src: "https://logospng.org/download/hp/logo-hp-512.png" },
  { name: "Lenovo", src: "https://logospng.org/download/lenovo/logo-lenovo-vermelha-512.png" },
  { name: "Samsung", src: "https://logospng.org/download/samsung/logo-samsung-512.png" },
  { name: "LG", src: "https://logospng.org/download/lg-lifes-good/logo-lg-lifes-good-512.png" },
  { name: "Logitech", src: "https://logospng.org/download/logitech/logitech-512.png" }];

  return (
    <section className="section brands-section" id="marcas">
      <div className="container">
        <div className="brands-head">
          <div>
            <span className="eyebrow">// Marcas parceiras</span>
            <h2 style={{ marginTop: 12 }}>Algumas marcas que trabalhamos</h2>
          </div>
          <p style={{ color: "var(--text-dim)", maxWidth: 380, fontSize: 14 }}>Distribuímos equipamentos das maiores fabricantes de TI do mundo — sempre com nota fiscal e garantia.

          </p>
        </div>
        <div className="brands-grid">
          {brands.map((b) =>
          <a key={b.name} href="https://logospng.org" target="_blank" rel="noreferrer" className="brand-tile" aria-label={b.name}>
              <img src={b.src} alt={`Logo ${b.name} — marca parceira Computer For You`} loading="lazy" />
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Why us ---------- */
function WhyUs() {
  const rows = [
  { icon: <I.Shield />, t: "Garantia & NFe", d: "Todo equipamento sai com garantia e nota fiscal" },
  { icon: <I.Truck />, t: "Logística nacional", d: "Entrega para todo o Brasil" },
  { icon: <I.Tag />, t: "Preço de distribuidor", d: "Preço abaixo do mercado e desconto para compras em quantidade" },
  { icon: <I.Cog />, t: "Atendimento personalizado", d: "Nossa equipe é especializada em atendimento B2B" }];

  return (
    <section className="section" id="diferenciais">
      <div className="container">
        <div className="section-head">
          <div className="title-block">
            <span className="eyebrow">// Diferenciais</span>
            <h2>Por que empresas escolhem<br />a Computer For You</h2>
          </div>
        </div>
        <div className="why-grid">
          <ul className="why-list" role="list">
            {rows.map((r, i) =>
            <li className="why-row" key={i}>
                <div className="icon" aria-hidden="true">{r.icon}</div>
                <div>
                  <h3>{r.t}</h3>
                  <p>{r.d}</p>
                </div>
              </li>
            )}
          </ul>
          <div className="why-visual">
            <span className="corner-mark tl">// CFY · DISTRIBUIDORA</span>
            <span className="corner-mark br">EST. 2023</span>
            <div className="center">
              <div className="big">+3<span style={{ color: "var(--accent)", WebkitTextFillColor: "var(--accent)" }}></span></div>
              <div className="lbl">Anos abastecendo TI corporativa no Brasil</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Process ---------- */
function Process() {
  const steps = [
  { n: "01", t: "Você nos chama", d: "Pelo WhatsApp, e-mail ou formulário. Sem cadastro complicado." },
  { n: "02", t: "Proposta em 24h", d: "Cotação personalizada com  prazo e condições discriminados." },
  { n: "03", t: "Fechamento", d: "Pagamento facilitado (PIX, Cartão, Dinheiro)." },
  { n: "04", t: "Entrega", d: "Nossa equipe sempre ofertará a melhor opção logística." }];

  return (
    <section className="section" id="processo" style={{ paddingBlock: 0 }}>
      <div className="container" style={{ padding: 0, maxWidth: "var(--max)" }}>
        <div style={{ padding: "var(--pad-x)", paddingTop: 0, paddingBottom: 40 }}>
          <span className="eyebrow">// Como funciona</span>
          <h2 style={{ fontSize: "clamp(28px, 3.4vw, 40px)", marginTop: 12 }}>Da cotação à entrega, em 4 passos</h2>
        </div>
        <ol className="process" role="list">
          {steps.map((s) =>
          <li className="proc-step" key={s.n}>
              <span className="num" aria-label={`Passo ${s.n}`}>PASSO {s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* ---------- Testimonials ---------- */
function Testimonials() {
  const t = [
  { q: "Renovamos 180 estações em duas semanas. A logística e a documentação fiscal foram impecáveis.", n: "Marina Lopes", r: "Head de TI · Varejo", i: "ML" },
  { q: "Atendimento direto, sem call center. Cotação detalhada em poucas horas — passamos a comprar tudo com eles.", n: "Rafael Andrade", r: "Diretor de Operações · Logística", i: "RA" },
  { q: "Conseguiram um lote de notebooks específicos com prazo apertado. Fizeram acontecer.", n: "Camila Tavares", r: "Compras · Indústria", i: "CT" }];

  return (
    <section className="section" id="depoimentos" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="section-head">
          <div className="title-block">
            <span className="eyebrow">// Depoimentos</span>
            <h2>Quem compra, volta a comprar</h2>
          </div>
        </div>
        <ul className="testi-grid" role="list">
          {t.map((x, i) =>
          <li key={i}>
            <article className="testi-card">
              <div className="stars" aria-label="Avaliação 5 de 5 estrelas">★★★★★</div>
              <blockquote className="quote">“{x.q}”</blockquote>
              <footer className="who">
                <div className="avatar" aria-hidden="true">{x.i}</div>
                <div>
                  <cite className="name">{x.n}</cite>
                  <div className="role">{x.r}</div>
                </div>
              </footer>
            </article>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

/* ---------- Contact ---------- */
function Contact() {
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const [errMsg, setErrMsg] = React.useState("");
  const [form, setForm] = React.useState({ nome: "", email: "", empresa: "", fone: "", msg: "", interesse: "Venda Corporativa" });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrMsg("");

    const payload = {
      access_key: WEB3FORMS_ACCESS_KEY,
      subject: `[computer4u.com.br] Contato — ${form.interesse}`,
      from_name: form.nome || "Contato site",
      // Campos do formulário (Web3Forms entrega todos no e-mail)
      Nome: form.nome,
      Empresa: form.empresa,
      Email: form.email,
      Telefone: form.fone,
      Interesse: form.interesse,
      Mensagem: form.msg,
      // Anti-spam honeypot
      botcheck: "",
    };

    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success) {
        // Monta a mensagem do WhatsApp com todos os dados preenchidos
        const linhas = [
          `Olá! Sou ${form.nome}${form.empresa ? ` da ${form.empresa}` : ""}.`,
          ``,
          `Tenho interesse em: *${form.interesse}*`,
          ``,
          `Contato:`,
          `📧 ${form.email}`,
        ];
        if (form.fone) linhas.push(`📞 ${form.fone}`);
        if (form.msg) {
          linhas.push(``, `Mensagem:`, form.msg);
        }
        linhas.push(``, `_Enviado pelo site computer4u.com.br_`);
        const waMsg = encodeURIComponent(linhas.join("\n"));
        const waUrl = `https://wa.me/${WHATSAPP_NUMBER}?text=${waMsg}`;
        // Abre o WhatsApp em nova aba (cliente toca "Enviar" para confirmar)
        window.open(waUrl, "_blank", "noopener,noreferrer");

        setStatus("success");
        setForm({ nome: "", email: "", empresa: "", fone: "", msg: "", interesse: "Venda Corporativa" });
        setTimeout(() => setStatus("idle"), 8000);
      } else {
        setStatus("error");
        setErrMsg(data.message || "Falha ao enviar. Tente novamente ou nos chame no WhatsApp.");
      }
    } catch (err) {
      setStatus("error");
      setErrMsg("Sem conexão. Verifique sua internet ou nos chame no WhatsApp.");
    }
  };

  return (
    <section className="section" id="contato">
      <div className="container">
        <div className="contact-card">
          <div className="contact-left">
            <div>
              <span className="eyebrow" style={{ color: "rgba(255,255,255,0.85)" }}>// Vamos conversar</span>
              <h2 style={{ marginTop: 14 }}>Transforme sua tecnologia com a Computer For You</h2>
              <p>Conte sobre o seu projeto. Em até 24h úteis um especialista B2B retorna com a proposta certa.</p>
            </div>
            <div className="channels">
              <div className="contact-channel">
                <div className="icon"><I.Whatsapp s={18} /></div>
                <div>
                  <div className="label">WhatsApp comercial</div>
                  <div className="value">(41) 99520-5000</div>
                </div>
              </div>
              <div className="contact-channel">
                <div className="icon"><I.Mail s={18} /></div>
                <div>
                  <div className="label">E-mail</div>
                  <div className="value">contato@computerforyou.com.br</div>
                </div>
              </div>
              <div className="contact-channel">
                <div className="icon"><I.Pin s={18} /></div>
                <div>
                  <div className="label">Endereço</div>
                  <div className="value">Av. Carlos Eduardo Nichele, 782 - Fazenda Rio Grande - PR</div>
                </div>
              </div>
            </div>
          </div>
          <form className="contact-right" onSubmit={submit}>
            {status === "success" && (
              <div className="form-success">
                <I.Check /> Mensagem enviada! Abrimos o WhatsApp para você finalizar a conversa — toque em <strong>Enviar</strong>.
              </div>
            )}
            {status === "error" && (
              <div className="form-error">
                <I.X /> {errMsg}
              </div>
            )}
            {/* Honeypot anti-spam — invisível para humanos */}
            <input type="checkbox" name="botcheck" tabIndex="-1"
                   style={{ position: "absolute", left: "-9999px", opacity: 0 }} aria-hidden="true" />
            <div className="row-2">
              <div className="field">
                <label>Nome</label>
                <input value={form.nome} onChange={upd("nome")} required placeholder="Seu nome completo" />
              </div>
              <div className="field">
                <label>Empresa</label>
                <input value={form.empresa} onChange={upd("empresa")} placeholder="Razão social" />
              </div>
            </div>
            <div className="row-2">
              <div className="field">
                <label>E-mail</label>
                <input type="email" value={form.email} onChange={upd("email")} required placeholder="voce@empresa.com.br" />
              </div>
              <div className="field">
                <label>Telefone</label>
                <input value={form.fone} onChange={upd("fone")} placeholder="(00) 0 0000-0000" />
              </div>
            </div>
            <div className="field">
              <label>Interesse</label>
              <select value={form.interesse} onChange={upd("interesse")}>
                <option>Venda Corporativa</option>
                <option>Venda em Lotes</option>
                <option>Cotação de Catálogo</option>
                <option>Atendimento B2B</option>
                <option>Outros</option>
              </select>
            </div>
            <div className="field">
              <label>Mensagem</label>
              <textarea value={form.msg} onChange={upd("msg")} placeholder="Conte o que você precisa, quantidades, prazo..." />
            </div>
            <button type="submit" className="btn btn-primary" style={{ alignSelf: "start" }}
                    disabled={status === "sending"}>
              {status === "sending" ? <>Enviando…</> : <>Enviar mensagem <I.Arrow /></>}
            </button>
          </form>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer({ onNav }) {
  return (
    <footer className="site-footer" id="rodape">
      <div className="container">
        <div className="footer-grid">
          <div>
            <Logo />
            <p>Distribuidora B2B de equipamentos de TI e informática. Vendas corporativas, lotes e
            atendimento dedicado para empresas em todo o Brasil desde 2010.</p>
            <div className="socials">
              <a href="https://www.instagram.com/_computer4u?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="1" fill="currentColor" /></svg></a>
              <a href="https://www.linkedin.com/company/computer-4-you/" aria-label="LinkedIn"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8h4V24h-4V8zm7.5 0h3.8v2.2h.1c.5-1 1.8-2.2 3.8-2.2 4 0 4.8 2.6 4.8 6V24h-4v-7.2c0-1.7 0-4-2.4-4-2.5 0-2.8 1.9-2.8 3.9V24h-4V8z" /></svg></a>
              <a href="https://wa.link/8r4cz8" aria-label="WhatsApp"><I.Whatsapp s={18} /></a>
            </div>
          </div>
          <div>
            <h2 className="footer-h">Empresa</h2>
            <ul>
              <li><a href="#sobre">Sobre nós</a></li>
              <li><a href="#diferenciais">Diferenciais</a></li>
              <li><a href="#depoimentos">Cases</a></li>
              <li><a href="https://www.linkedin.com/company/computer-4-you/">Trabalhe conosco</a></li>
            </ul>
          </div>
          <div>
            <h2 className="footer-h">Soluções</h2>
            <ul>
              <li><a href={CATALOG_URL} target="_blank" rel="noreferrer">Catálogo</a></li>
              <li><a href="https://wa.link/8r4cz8">Venda corporativa</a></li>
              <li><a href="https://wa.link/8r4cz8">Venda em lotes</a></li>
              <li><a href="https://wa.link/8r4cz8">Renovação de parque</a></li>
            </ul>
          </div>
          <div>
            <h2 className="footer-h">Contato</h2>
            <address className="footer-address">
              <ul>
                <li><a href="https://wa.me/5541995205000" target="_blank" rel="noreferrer">(41) 9 9520-5000</a></li>
                <li><a href="mailto:contato@computerforyou.com.br">contato@computerforyou.com.br</a></li>
                <li>Av. Carlos Eduardo Nichele, 782<br />Fazenda Rio Grande / PR</li>
              </ul>
            </address>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="legal">© 2023—2026 Computer For You Distribuidora · CNPJ 52.127.749/0001-06</div>
          <div style={{ display: "flex", gap: 18 }}>
            <a href="#">Política de privacidade</a>
            <a href="#">Termos</a>
            <a href="#">LGPD</a>
          </div>
        </div>
      </div>
    </footer>);

}

/* ---------- Cart Drawer ---------- */
function CartDrawer({ open, onClose, cart, setQty, remove }) {
  const total = cart.reduce((a, c) => a + c.price * c.qty, 0);
  return (
    <React.Fragment>
      <div className={`drawer-bg ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <h3>Lista de cotação</h3>
          <button className="icon-btn" onClick={onClose} style={{ color: "var(--text-dim)" }}><I.X /></button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ?
          <div className="drawer-empty">
              <I.Cart s={36} />
              <p style={{ marginTop: 12 }}>Sua lista está vazia.<br />Adicione itens no catálogo para solicitar cotação.</p>
            </div> :
          cart.map((c) =>
          <div className="cart-row" key={c.id}>
              <div className="ph">{c.icon}</div>
              <div>
                <div className="n">{c.name}</div>
                <div className="m">{c.brand} · {c.cat}</div>
                <div className="qty">
                  <button onClick={() => setQty(c.id, c.qty - 1)}>−</button>
                  <span>{c.qty}</span>
                  <button onClick={() => setQty(c.id, c.qty + 1)}>+</button>
                  <button onClick={() => remove(c.id)} style={{ marginLeft: 8, color: "var(--text-mute)" }}><I.X s={14} /></button>
                </div>
              </div>
              <div className="p">R$ {(c.price * c.qty).toLocaleString("pt-BR")}</div>
            </div>
          )}
        </div>
        {cart.length > 0 &&
        <div className="drawer-foot">
            <div className="drawer-total">
              <span className="lbl">Subtotal estimado</span>
              <span className="val">R$ {total.toLocaleString("pt-BR")}</span>
            </div>
            <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Solicitar cotação <I.Arrow />
            </button>
            <p style={{ color: "var(--text-mute)", fontSize: 12, marginTop: 12, textAlign: "center" }}>
              Cotação personalizada com impostos e condições em até 24h úteis.
            </p>
          </div>
        }
      </aside>
    </React.Fragment>);

}

Object.assign(window, {
  I, Logo, Header, Hero, Services, StatsStrip, WhatWeDo, VideoBanner, Brands,
  WhyUs, Process, Testimonials, Contact, Footer, CartDrawer
});