// app.jsx — Nacional landing page + product pages, com roteamento por hash

const { useState, useEffect, useMemo, useRef } = React;
const { CATEGORIES, PRODUCTS } = window.NACIONAL_DATA;

const WHATSAPP_NUMBER = "5563991258684"; // (63) 99125-8684
const WHATSAPP_DISPLAY = "(63) 99125-8684";
const ADDRESS = "TO-080, 9238 — Luzimangues, Porto Nacional — TO, 77500-000";
const HOURS = [
["Segunda à Sábado", "08h00 — 18h30"],
["Domingo", "08h00 — 12h00"]];

const EMAIL = "contato@nacional.com.br";
const PHONE_DISPLAY = "(00) 0000-0000";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#1B8B3A",
  "accentColor": "#FFD500",
  "heroVariant": "split",
  "showInfoStrip": true,
  "showCategories": true
} /*EDITMODE-END*/;

// ─── Hash routing ──────────────────────────────────────
function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || "#/");
  useEffect(() => {
    const onChange = () => {
      setHash(window.location.hash || "#/");
      window.scrollTo(0, 0);
    };
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return hash;
}
const goto = (h) => {window.location.hash = h;};

// ─── WhatsApp Modal ────────────────────────────────────
function WhatsAppModal({ open, onClose, product }) {
  if (!open) return null;
  const msg = product ?
  `Olá! Tenho interesse no produto: ${product.name} — R$ ${product.price.toFixed(2).replace(".", ",")}. Pode me dar mais informações?` :
  "Olá! Vim pelo site e gostaria de mais informações.";
  const link = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(msg)}`;

  useEffect(() => {
    const onKey = (e) => {if (e.key === "Escape") onClose();};
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
        <button className="btn btn-ghost close-x" onClick={onClose} aria-label="Fechar" style={{ padding: "6px", borderRadius: 8 }}>
          <Icon name="x" size={18} />
        </button>
        <div className="wa-circle">
          <Icon name="whatsapp" size={36} />
        </div>
        <h3>Compre pelo WhatsApp</h3>
        <p>Para finalizar a compra, fale com nossa equipe diretamente. Atendimento rápido e personalizado.</p>

        {product &&
        <div className="product-mini">
            <div className="thumb-mini" />
            <div>
              <b>{product.name}</b>
              <span>R$ {product.price.toFixed(2).replace(".", ",")}</span>
            </div>
          </div>
        }

        <div className="actions">
          <a className="btn btn-wa" href={link} target="_blank" rel="noopener">
            <Icon name="whatsapp" size={18} />
            Abrir conversa no WhatsApp
          </a>
          <button className="btn btn-ghost" onClick={onClose}>Continuar navegando</button>
        </div>

        <p style={{ marginTop: 18, fontSize: 12.5, color: "var(--muted)" }}>
          Atendimento {WHATSAPP_DISPLAY}
        </p>
      </div>
    </div>);

}

// ─── Header ────────────────────────────────────────────
function Header({ onWhatsApp }) {
  return (
    <header className="site-header">
      <div className="container inner">
        <div className="brand-mini" onClick={() => goto("#/")}>
          <img className="logo-img" src="assets/logo.png" alt="Nacional — Materiais para Construção, Papelaria e Utilidades do Lar" />
        </div>
        <nav className="nav">
          <a href="#/">Início</a>
          <a href="#/#sobre">Sobre</a>
          <a href="#/produtos">Produtos</a>
          <a href="#/#localizacao">Localização</a>
          <a href="#/#contato">Contato</a>
        </nav>
        <button className="header-cta" onClick={onWhatsApp}>
          <Icon name="whatsapp" size={16} />
          Fale conosco
        </button>
      </div>
    </header>);

}

// ─── Hero ──────────────────────────────────────────────
const STORE_PHOTOS = [
  "assets/store/01.jpg", "assets/store/05.jpg", "assets/store/06.jpg",
  "assets/store/07.jpg", "assets/store/02.jpg", "assets/store/03.jpg",
  "assets/store/08.jpg", "assets/store/04.jpg",
];

function ProdImg({ product }) {
  const photo = product.photos && product.photos[0];
  if (photo) {
    return <img className="prod-photo" src={photo} alt={product.name} loading="lazy" />;
  }
  return <div className="placeholder"><span>{product.img}</span></div>;
}

function MarqueeCol({ photos, dir, dur }) {
  const list = [...photos, ...photos];
  return (
    <div className={`marquee-col ${dir}`} style={{ "--dur": dur }}>
      <div className="marquee-track">
        {list.map((src, i) => (
          <div className="ph" key={i}>
            <img src={src} alt="" loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero({ onWhatsApp }) {
  return (
    <section className="hero">
      <div className="container grid">
        <div>
          <span className="eyebrow"><span className="dot" /> Sua loja completa em um só lugar</span>
          <h1>Tudo para sua<br /><em>obra, escola</em> e <em>casa</em>.</h1>
          <p className="lead">
            Materiais para construção, papelaria e utilidades do lar reunidos em um só lugar — com atendimento próximo, preço justo e entrega rápida na sua região.
          </p>
          <div className="actions">
            <button className="btn btn-wa" onClick={onWhatsApp}>
              <Icon name="whatsapp" size={18} />
              Falar no WhatsApp
            </button>
            <a className="btn btn-secondary" href="#/produtos">
              Ver produtos
              <Icon name="arrow-right" size={16} />
            </a>
          </div>
          <div className="meta-row">
            <div className="item"><span>Aberta hoje</span><strong>07h30 — 18h30</strong></div>
            <div className="item"><span>Atendimento</span><strong>{WHATSAPP_DISPLAY}</strong></div>
            <div className="item"><span>Entrega</span><strong>Toda a região</strong></div>
          </div>
        </div>
        <div className="hero-card">
          <div className="hero-marquee">
            <MarqueeCol photos={[STORE_PHOTOS[0], STORE_PHOTOS[3], STORE_PHOTOS[6]]} dir="up" dur="30s" />
            <MarqueeCol photos={[STORE_PHOTOS[1], STORE_PHOTOS[4], STORE_PHOTOS[7]]} dir="down" dur="38s" />
            <MarqueeCol photos={[STORE_PHOTOS[2], STORE_PHOTOS[5], STORE_PHOTOS[0]]} dir="up" dur="44s" />
          </div>
          <div className="float-tag tl">
            <div className="ico"><Icon name="store" size={16} /></div>
            <div>
              <b style={{ display: "block", fontSize: 13 }}>Loja física</b>
              <span style={{ fontSize: 12, color: "var(--muted)" }}>Atendimento personalizado</span>
            </div>
          </div>
          <div className="float-tag br">
            <div className="ico"><Icon name="truck" size={16} /></div>
            <div>
              <b style={{ display: "block", fontSize: 13 }}>Entrega rápida</b>
              <span style={{ fontSize: 12, color: "var(--muted)" }}>Na sua obra ou casa</span>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── About ─────────────────────────────────────────────
function About() {
  return (
    <section className="about" id="sobre">
      <div className="container grid">
        <div className="copy">
          <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--green)" }}>Sobre a Nacional</span>
          <h2 style={{ marginTop: 12 }}>Tradição de bairro, variedade de uma grande loja.</h2>
          <p>
            A Nacional nasceu para ser a loja onde o vizinho encontra tudo que precisa — do saco de cimento ao caderno do filho, da furadeira à panela nova da cozinha. Trabalhamos com marcas de confiança, preços que cabem no orçamento e o atendimento de quem conhece o cliente pelo nome.
          </p>
          <p>
            Mais que vender produtos, a gente ajuda você a tirar o projeto do papel. Seja uma reforma, o material da escola ou um presente para casa, conte com a Nacional para indicar, separar e entregar.
          </p>
          <div className="stats">
            <div className="stat"><strong>+15</strong><span>anos de mercado</span></div>
            <div className="stat"><strong>+900</strong><span>itens em estoque</span></div>
            <div className="stat"><strong>4.9★</strong><span>nota dos clientes</span></div>
          </div>
        </div>
        <div className="about-visual">
          <div className="tile span2"><img src="assets/store/04.jpg" alt="Fachada da loja Nacional" /><span className="cap">Nossa fachada</span></div>
          <div className="tile"><img src="assets/store/01.jpg" alt="Atendimento na loja" /><span className="cap">Atendimento</span></div>
          <div className="tile"><img src="assets/store/05.jpg" alt="Corredor de produtos" /><span className="cap">Papelaria</span></div>
        </div>
      </div>
    </section>);

}

// ─── Categories ────────────────────────────────────────
function Categories({ onPick }) {
  return (
    <section className="categories container" id="categorias" style={{ height: "450px" }}>
      <div className="section-head">
        <span className="eyebrow" style={{ opacity: "2", borderStyle: "none", borderWidth: "1.6001px" }}>Categorias</span>
        <h2>Quatro mundos, uma só loja.</h2>
        <p>Encontre rápido o que precisa. Cada categoria reúne marcas de confiança e os itens que mais saem na nossa região.</p>
      </div>
      <div className="row">
        {CATEGORIES.map((c) =>
        <div className="cat-card" key={c.id} onClick={() => onPick(c.id)}>
            <div className="ico"><Icon name={c.icon} size={24} /></div>
            <div>
              <h3>{c.name}</h3>
              <p>{c.desc}</p>
            </div>
            <div className="count">{c.count} →</div>
          </div>
        )}
      </div>
    </section>);

}

// ─── Products ──────────────────────────────────────────
function Products({ initialFilter }) {
  const [filter, setFilter] = useState(initialFilter || "todos");
  useEffect(() => {if (initialFilter) setFilter(initialFilter);}, [initialFilter]);

  const filtered = useMemo(
    () => (filter === "todos" ? PRODUCTS : PRODUCTS.filter((p) => p.cat === filter)).slice(0, 8),
    [filter]
  );

  return (
    <section id="produtos" style={{ background: "#fff", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="products-head">
          <div>
            <span style={{ fontSize: 12.5, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--green)" }}>Produtos</span>
            <h2 style={{ fontSize: "clamp(28px, 3.2vw, 40px)", fontWeight: 700, marginTop: 10, letterSpacing: "-0.025em" }}>
              Em destaque na loja
            </h2>
          </div>
          <div className="filters">
            <button className={`filter ${filter === "todos" ? "active" : ""}`} onClick={() => setFilter("todos")}>Todos</button>
            {CATEGORIES.map((c) =>
            <button key={c.id} className={`filter ${filter === c.id ? "active" : ""}`} onClick={() => setFilter(c.id)}>{c.name}</button>
            )}
          </div>
        </div>
        <div className="products-grid">
          {filtered.map((p) =>
          <div className="prod-card fade-in" key={p.id} onClick={() => goto(`#/produto/${p.id}`)}>
              <div className="img"><ProdImg product={p} /></div>
              <div className="body">
                <span className="cat">{p.catName}</span>
                <h4>{p.name}</h4>
                <div className="price">
                  R$ {p.price.toFixed(2).replace(".", ",")}
                  <small style={{ display: "block", marginTop: 2 }}>{p.pix} no Pix</small>
                </div>
              </div>
            </div>
          )}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 40 }}>
          <a className="btn btn-primary" href="#/produtos">
            Ver catálogo completo
            <Icon name="arrow-right" size={16} />
          </a>
        </div>
      </div>
    </section>);

}

// ─── Info Strip ────────────────────────────────────────
function InfoStrip() {
  return (
    <section className="info-strip" id="contato">
      <div className="container grid">
        <div className="item">
          <h3>Endereço</h3>
          <h4>Loja física</h4>
          <p>{ADDRESS}</p>
        </div>
        <div className="item">
          <h3>Horário de funcionamento</h3>
          <ul>
            {HOURS.map(([d, h]) =>
            <li key={d}><b>{d}</b><span>{h}</span></li>
            )}
          </ul>
        </div>
        <div className="item">
          <h3>Contato direto</h3>
          <h4 style={{ fontSize: 18 }}>WhatsApp {WHATSAPP_DISPLAY}</h4>
          <p>WhatsApp {WHATSAPP_DISPLAY}<br />{EMAIL}</p>
        </div>
      </div>
    </section>);

}

// ─── Location ──────────────────────────────────────────
function Location() {
  const mapsQuery = encodeURIComponent(ADDRESS);
  return (
    <section className="location" id="localizacao">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Localização</span>
          <h2>Venha nos visitar.</h2>
          <p>Estamos esperando por você na loja física. Estacionamento fácil e equipe pronta para te atender.</p>
        </div>
        <div className="grid">
          <div className="copy">
            <h3>Loja Nacional</h3>
            <div className="row-info">
              <div className="ico"><Icon name="pin" size={18} /></div>
              <div><b>Endereço</b><span>{ADDRESS}</span></div>
            </div>
            <div className="row-info">
              <div className="ico"><Icon name="clock" size={18} /></div>
              <div>
                <b>Horários</b>
                {HOURS.map(([d, h]) =>
                <span key={d} style={{ display: "block" }}>{d}: {h}</span>
                )}
              </div>
            </div>
            <div className="row-info">
              <div className="ico"><Icon name="phone" size={18} /></div>
              <div><b>WhatsApp</b><span>{WHATSAPP_DISPLAY}</span></div>
            </div>
            <a
              className="btn btn-secondary"
              style={{ marginTop: 24 }}
              href={`https://www.google.com/maps/search/?api=1&query=${mapsQuery}`}
              target="_blank"
              rel="noopener">
              
              Abrir no Google Maps
              <Icon name="arrow-right" size={16} />
            </a>
          </div>
          <div className="map">
            <iframe
              title="Mapa Nacional"
              src={`https://www.google.com/maps?q=${mapsQuery}&output=embed`}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade" />
            
          </div>
        </div>
      </div>
    </section>);

}

// ─── CTA Banner ────────────────────────────────────────
function CtaBanner({ onWhatsApp }) {
  return (
    <section style={{ padding: "56px 0" }}>
      <div className="container">
        <div className="cta-banner">
          <div>
            <h3>Não achou o que procurava?<br />Fale com a gente — temos muito mais.</h3>
            <p>Nossa loja física tem milhares de itens que ainda não estão online. Mande mensagem que respondemos rapidinho.</p>
          </div>
          <button className="btn btn-wa" onClick={onWhatsApp} style={{ padding: "16px 28px", fontSize: 16 }}>
            <Icon name="whatsapp" size={20} />
            Conversar agora
          </button>
        </div>
      </div>
    </section>);

}

// ─── Footer ────────────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="top">
          <div>
            <img src="assets/logo.png" alt="Nacional" style={{ maxWidth: 260, borderRadius: 6, boxShadow: "0 2px 10px rgba(0,0,0,0.08)" }} />
            <p style={{ marginTop: 18, fontSize: 14, color: "var(--muted)", maxWidth: 340 }}>
              Materiais para construção, papelaria e utilidades do lar. Atendimento de bairro, variedade de loja grande.
            </p>
          </div>
          <div>
            <h5>Loja</h5>
            <ul>
              <li><a href="#/#sobre">Sobre nós</a></li>
              <li><a href="#/produtos">Produtos</a></li>
              <li><a href="#/#localizacao">Localização</a></li>
              <li><a href="#/#contato">Contato</a></li>
            </ul>
          </div>
          <div>
            <h5>Categorias</h5>
            <ul>
              {CATEGORIES.map((c) =>
              <li key={c.id}><a href={`#/categoria/${c.id}`}>{c.name}</a></li>
              )}
            </ul>
          </div>
          <div>
            <h5>Atendimento</h5>
            <ul>
              <li><a>WhatsApp {WHATSAPP_DISPLAY}</a></li>
              <li><a>Tel. {PHONE_DISPLAY}</a></li>
              <li><a>{EMAIL}</a></li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <span>© 2026 Nacional — Materiais para Construção, Papelaria e Utilidades do Lar.</span>
          <span>Feito com cuidado para nossos clientes.</span>
        </div>
      </div>
    </footer>);

}

// ─── Product Page ──────────────────────────────────────
function ProductPage({ id, onBuy }) {
  const product = PRODUCTS.find((p) => p.id === id);
  const [tab, setTab] = useState("desc");
  const [activeThumb, setActiveThumb] = useState(0);

  if (!product) {
    return (
      <div className="container" style={{ padding: "96px 0", textAlign: "center" }}>
        <h2>Produto não encontrado</h2>
        <p style={{ marginTop: 12, color: "var(--muted)" }}>O produto que você procura pode ter saído de linha.</p>
        <a href="#/produtos" className="btn btn-primary" style={{ marginTop: 24 }}>Ver todos os produtos</a>
      </div>);

  }

  const related = PRODUCTS.filter((p) => p.cat === product.cat && p.id !== product.id).slice(0, 4);

  return (
    <div className="product-page container">
      <div className="crumb">
        <a href="#/">Início</a>
        <span className="sep">/</span>
        <a href={`#/categoria/${product.cat}`}>{product.catName}</a>
        <span className="sep">/</span>
        <span style={{ color: "var(--ink-2)" }}>{product.name}</span>
      </div>

      <div className="product-grid">
        <div className="product-gallery">
          <div className="product-main-img">
            {product.photos && product.photos.length
              ? <img className="prod-photo" src={product.photos[Math.min(activeThumb, product.photos.length - 1)]} alt={product.name} />
              : <div className="placeholder"><span>{product.img}</span></div>}
          </div>
          <div className="thumb-row">
            {(product.photos && product.photos.length ? product.photos : [0, 1, 2, 3]).map((src, i) =>
            <div key={i} className={`thumb ${i === activeThumb ? "active" : ""}`} onClick={() => setActiveThumb(i)}>
                {product.photos && product.photos.length
                  ? <img className="prod-photo" src={src} alt="" />
                  : <div className="placeholder" />}
              </div>
            )}
          </div>
        </div>

        <div className="product-info">
          <span className="cat">{product.catName}</span>
          <h1>{product.name}</h1>
          <div className="rating">
            <span className="stars">★★★★★</span>
            <span>{product.rating} · {product.reviews} avaliações</span>
          </div>

          <div className="price-row">
            <div className="price">R$ {product.price.toFixed(2).replace(".", ",")}</div>
            <span className="pix">{product.pix} no Pix · economize {(product.price - parseFloat(product.pix.replace("Pix R$ ", "").replace(",", "."))).toFixed(2).replace(".", ",")}</span>
            <div style={{ marginTop: 10, fontSize: 13, color: "var(--muted)" }}>ou em até 6× sem juros no cartão</div>
          </div>

          <ul className="bullets">
            {product.bullets.map((b, i) => <li key={i}>{b}</li>)}
          </ul>

          <div className="actions">
            <button className="btn btn-primary" onClick={() => onBuy(product)}>
              Comprar agora
              <Icon name="arrow-right" size={16} />
            </button>
            <button className="btn btn-secondary" onClick={() => onBuy(product)}>
              <Icon name="whatsapp" size={16} />
              Tirar dúvidas
            </button>
          </div>

          <div className="trust">
            <div className="item">
              <div className="ico"><Icon name="truck" size={18} /></div>
              <b>Entrega rápida</b>
              <span>Toda a região</span>
            </div>
            <div className="item">
              <div className="ico"><Icon name="shield" size={18} /></div>
              <b>Compra segura</b>
              <span>Loja física</span>
            </div>
            <div className="item">
              <div className="ico"><Icon name="card" size={18} /></div>
              <b>Pix &amp; cartão</b>
              <span>Várias formas</span>
            </div>
          </div>
        </div>
      </div>

      <div className="product-tabs">
        <nav>
          <button className={tab === "desc" ? "active" : ""} onClick={() => setTab("desc")}>Descrição</button>
          <button className={tab === "specs" ? "active" : ""} onClick={() => setTab("specs")}>Especificações</button>
          <button className={tab === "entrega" ? "active" : ""} onClick={() => setTab("entrega")}>Entrega &amp; pagamento</button>
        </nav>
        {tab === "desc" &&
        <div className="panel"><p>{product.description}</p></div>
        }
        {tab === "specs" &&
        <div className="panel">
            <table>
              <tbody>
                {product.specs.map(([k, v], i) => <tr key={i}><td>{k}</td><td>{v}</td></tr>)}
              </tbody>
            </table>
          </div>
        }
        {tab === "entrega" &&
        <div className="panel">
            <p>Entregamos em toda a região com nossa equipe própria. Para outras localidades, consulte pelo WhatsApp. Aceitamos Pix (com desconto), cartão de crédito em até 6× sem juros, dinheiro e boleto na loja física.</p>
          </div>
        }
      </div>

      {related.length > 0 &&
      <div style={{ marginTop: 64 }}>
          <h3 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Você também pode gostar</h3>
          <div className="products-grid">
            {related.map((p) =>
          <div className="prod-card" key={p.id} onClick={() => goto(`#/produto/${p.id}`)}>
                <div className="img"><ProdImg product={p} /></div>
                <div className="body">
                  <span className="cat">{p.catName}</span>
                  <h4>{p.name}</h4>
                  <div className="price">R$ {p.price.toFixed(2).replace(".", ",")}</div>
                </div>
              </div>
          )}
          </div>
        </div>
      }
    </div>);

}

// ─── Catalog Page ──────────────────────────────────────
function ProductsCatalog({ category, onBuy }) {
  const [sort, setSort] = useState("destaque");
  const cat = CATEGORIES.find((c) => c.id === category);

  let list = category ? PRODUCTS.filter((p) => p.cat === category) : PRODUCTS.slice();
  if (sort === "menor") list = [...list].sort((a, b) => a.price - b.price);
  else if (sort === "maior") list = [...list].sort((a, b) => b.price - a.price);
  else if (sort === "avaliacao") list = [...list].sort((a, b) => b.rating - a.rating);

  const counts = CATEGORIES.reduce((acc, c) => {
    acc[c.id] = PRODUCTS.filter((p) => p.cat === c.id).length;
    return acc;
  }, {});

  return (
    <>
      <section className="catalog-hero">
        <div className="container">
          <div className="crumb">
            <a href="#/">Início</a>
            <span className="sep">/</span>
            <a href="#/produtos">Produtos</a>
            {cat && <><span className="sep">/</span><span style={{ color: "#fff" }}>{cat.name}</span></>}
          </div>
          <h1>{cat ? cat.name : "Nossos produtos"}</h1>
          <p>{cat ? cat.desc + " Confira os itens disponíveis e fale com a gente pelo WhatsApp." : "Material de construção, ferramentas, papelaria e utilidades do lar — tudo em um só lugar. Navegue pelas categorias."}</p>
        </div>
      </section>

      <section className="catalog-body">
        <div className="container catalog-layout">
          <aside className="cat-sidebar">
            <div className="label">Categorias</div>
            <a className={!category ? "active" : ""} onClick={() => goto("#/produtos")}>
              <span className="ico-row"><Icon name="store" size={18} /> Todos os produtos</span>
              <span className="tag">{PRODUCTS.length}</span>
            </a>
            {CATEGORIES.map((c) => (
              <a key={c.id} className={category === c.id ? "active" : ""} onClick={() => goto(`#/categoria/${c.id}`)}>
                <span className="ico-row"><Icon name={c.icon} size={18} /> {c.name}</span>
                <span className="tag">{counts[c.id]}</span>
              </a>
            ))}
          </aside>

          <div>
            <div className="cat-chips">
              <button className={`filter ${!category ? "active" : ""}`} onClick={() => goto("#/produtos")}>Todos</button>
              {CATEGORIES.map((c) => (
                <button key={c.id} className={`filter ${category === c.id ? "active" : ""}`} onClick={() => goto(`#/categoria/${c.id}`)}>{c.name}</button>
              ))}
            </div>

            <div className="catalog-toolbar">
              <div className="count"><b>{list.length}</b> {list.length === 1 ? "produto" : "produtos"}{cat ? ` em ${cat.name}` : ""}</div>
              <select value={sort} onChange={(e) => setSort(e.target.value)}>
                <option value="destaque">Ordenar: Destaque</option>
                <option value="menor">Menor preço</option>
                <option value="maior">Maior preço</option>
                <option value="avaliacao">Melhor avaliação</option>
              </select>
            </div>

            <div className="products-grid">
              {list.map((p) => (
                <div className="prod-card fade-in" key={p.id} onClick={() => goto(`#/produto/${p.id}`)}>
                  <div className="img"><ProdImg product={p} /></div>
                  <div className="body">
                    <span className="cat">{p.catName}</span>
                    <h4>{p.name}</h4>
                    <div className="price">
                      R$ {p.price.toFixed(2).replace(".", ",")}
                      <small style={{ display: "block", marginTop: 2 }}>{p.pix} no Pix</small>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

// ─── Landing ───────────────────────────────────────────
function Landing({ initialCategory, onWhatsApp }) {
  return (
    <>
      <Hero onWhatsApp={onWhatsApp} />
      <div className="divider-thin" />
      <About />
      <Categories onPick={(id) => goto(`#/categoria/${id}`)} />
      <Products initialFilter={initialCategory} />
      <Location />
      <CtaBanner onWhatsApp={onWhatsApp} />
      <InfoStrip />
    </>);

}

// ─── Tweaks ────────────────────────────────────────────
function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Cores" />
      <TweakColor label="Cor primária" value={tweaks.primaryColor} onChange={(v) => setTweak("primaryColor", v)} />
      <TweakColor label="Cor de acento" value={tweaks.accentColor} onChange={(v) => setTweak("accentColor", v)} />
      <TweakSection label="Seções" />
      <TweakToggle label="Mostrar barra de info" value={tweaks.showInfoStrip} onChange={(v) => setTweak("showInfoStrip", v)} />
      <TweakToggle label="Mostrar categorias" value={tweaks.showCategories} onChange={(v) => setTweak("showCategories", v)} />
    </TweaksPanel>);

}

// ─── App ───────────────────────────────────────────────
function App() {
  const hash = useHashRoute();
  const [modal, setModal] = useState({ open: false, product: null });
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks to CSS variables
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--green", tweaks.primaryColor);
    root.style.setProperty("--yellow", tweaks.accentColor);
  }, [tweaks.primaryColor, tweaks.accentColor]);

  // route parsing
  let route = { kind: "home" };
  if (hash.startsWith("#/produto/")) route = { kind: "product", id: hash.replace("#/produto/", "") };else
  if (hash.startsWith("#/categoria/")) route = { kind: "category", id: hash.replace("#/categoria/", "") };else
  if (hash.startsWith("#/produtos")) route = { kind: "catalog" };

  const openWhatsApp = (product = null) => setModal({ open: true, product });
  const closeModal = () => setModal({ open: false, product: null });

  return (
    <>
      <Header onWhatsApp={() => openWhatsApp()} />
      {route.kind === "home" && <Landing onWhatsApp={() => openWhatsApp()} />}
      {route.kind === "catalog" && <ProductsCatalog onBuy={(p) => openWhatsApp(p)} />}
      {route.kind === "category" && <ProductsCatalog category={route.id} onBuy={(p) => openWhatsApp(p)} />}
      {route.kind === "product" && <ProductPage id={route.id} onBuy={(p) => openWhatsApp(p)} />}
      <Footer />
      <WhatsAppModal open={modal.open} product={modal.product} onClose={closeModal} />
      <TweaksUI tweaks={tweaks} setTweak={setTweak} />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);