/* global React, ReactDOM */
/* eslint-disable */

const { useState, useEffect, useMemo, useRef, useCallback } = React;
const { MODALITIES, COACHES, UNIFORMS, EQUIPMENT, EVENTS, PLANS, SERVICES, ARENA } = window.TFS_DATA;

const WHATSAPP_NUMBER = "5511994946298";
const SCHEDULE_URL = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent("Olá, Team Fighter Silva! 🥊\n\nQuero agendar uma *aula experimental*.\n\nQuais horários e modalidades estão disponíveis?")}`;
function priceBR(v) {
  return typeof v === "number" ? `R$ ${v.toFixed(2).replace(".", ",")}` : v;
}
function whatsAppOrderURL(product, size) {
  const lines = [
    "Olá, Team Fighter Silva! 🥊",
    "",
    "Tenho interesse em encomendar este produto:",
    "",
    `🛍️ *${product.name}*`,
  ];
  if (product.meta) lines.push(`📋 ${product.meta}`);
  if (size) lines.push(`📏 Tamanho: ${size}`);
  if (product.price != null) lines.push(`💰 ${priceBR(product.price)}`);
  lines.push("", "Pode me passar mais informações sobre disponibilidade e pagamento?");
  return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(lines.join("\n"))}`;
}
function whatsAppInquiryURL(subject) {
  const text = `Olá, Team Fighter Silva! 🥊\n\nTenho interesse em saber mais sobre: *${subject}*.\n\nPode me passar mais informações?`;
  return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(text)}`;
}
function whatsAppClassURL(modality) {
  const lines = [
    "Olá, Team Fighter Silva! 🥊",
    "",
    `Quero agendar uma *aula experimental* de *${modality.name}*.`,
  ];
  if (modality.coach) lines.push(`👤 Professor: ${modality.coach}`);
  lines.push("", "Quais horários estão disponíveis para eu experimentar?");
  return `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(lines.join("\n"))}`;
}

// ============================================================
// NAV
// ============================================================
const NAV_LINKS = [
  { id: "home", label: "Home" },
  { id: "modalidades", label: "Modalidades" },
  { id: "planos", label: "Planos" },
  { id: "servicos", label: "Serviços" },
  { id: "time", label: "Time" },
  { id: "loja", label: "Loja" },
  { id: "eventos", label: "Eventos" },
  { id: "local", label: "Local" },
];

function Nav({ activeSection, onNavClick }) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const handleClick = (id) => {
    setMobileOpen(false);
    onNavClick(id);
  };
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="container nav-inner">
          <a href="#home" className="nav-brand" onClick={(e) => { e.preventDefault(); handleClick("home"); }}>
            <img src="assets/logo.png" alt="TFS" />
            <div className="nav-brand-text">
              <div className="l1">TEAM FIGHTER SILVA</div>
              <div className="l2">Artes Marciais · Poá</div>
            </div>
          </a>
          <div className="nav-links">
            {NAV_LINKS.map((l) => (
              <button
                key={l.id}
                className={`nav-link ${activeSection === l.id ? "active" : ""}`}
                onClick={() => handleClick(l.id)}
              >
                {l.label}
              </button>
            ))}
          </div>
          <div className="nav-actions">
            <a
              className="btn btn-primary btn-sm agendar"
              href={SCHEDULE_URL}
              target="_blank"
              rel="noreferrer"
            >
              Aula experimental
            </a>
            <button
              className="nav-mobile-toggle"
              onClick={() => setMobileOpen((v) => !v)}
              aria-label="Menu"
            >
              {mobileOpen ? "✕" : "☰"}
            </button>
          </div>
        </div>
      </nav>
      {mobileOpen && (
        <div className="nav-mobile-panel">
          {NAV_LINKS.map((l) => (
            <button
              key={l.id}
              className={`nav-link ${activeSection === l.id ? "active" : ""}`}
              onClick={() => handleClick(l.id)}
            >
              {l.label}
            </button>
          ))}
          <a
            className="btn btn-primary"
            href={SCHEDULE_URL}
            target="_blank"
            rel="noreferrer"
          >
            Aula experimental
          </a>
        </div>
      )}
    </React.Fragment>
  );
}

// ============================================================
// HERO
// ============================================================
function Hero({ onCTA }) {
  const GYM_PHOTOS = [
    "assets/gym-1.png",
    "assets/gym-2.png",
    "assets/gym-3.png",
    "assets/gym-4.png",
  ];
  const [slide, setSlide] = useState(0);
  useEffect(() => {
    const t = setInterval(() => {
      setSlide((s) => (s + 1) % GYM_PHOTOS.length);
    }, 5500);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="hero" id="home" data-screen-label="01 Hero">
      <div className="hero-bg" aria-hidden="true">
        {GYM_PHOTOS.map((src, i) => (
          <div
            key={src}
            className={`hero-bg-slide ${i === slide ? "is-active" : ""}`}
            style={{ backgroundImage: `url("${src}")` }}
          />
        ))}
      </div>
      <div className="container hero-inner">
        <div>
          <div className="hero-tag">Since 2019 · Av. Antônio Massa, 455 — Poá</div>
          <h1 className="hero-title">
            DO BOXE<br />AO MMA.
            <span className="l-graffiti">Sua arte marcial é aqui.</span>
          </h1>
          <p className="hero-sub">
            Referência em artes marciais no Alto Tietê. Mais de 8 modalidades, estrutura de alto nível, equipe competitiva ativa e turmas para todas as idades e níveis, com mais de 400 alunos treinando diariamente.
          </p>
          <div className="hero-ctas">
            <a
              className="btn btn-primary"
              href={SCHEDULE_URL}
              target="_blank"
              rel="noreferrer"
            >
              Agende sua aula experimental
            </a>
            <button className="btn btn-ghost" onClick={() => onCTA("modalidades")}>
              Ver modalidades →
            </button>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="n">9</div><div className="l">Modalidades</div></div>
            <div className="hero-stat"><div className="n">+400</div><div className="l">Alunos</div></div>
            <div className="hero-stat"><div className="n">6</div><div className="l">Anos de história</div></div>
            <div className="hero-stat"><div className="n">+30</div><div className="l">Atletas competidores</div></div>
          </div>
          <div className="hero-extra">
            <div className="hero-extra-item">
              <span className="he-ico">■</span>
              <div>
                <div className="he-title">Aulas de segunda a sábado</div>
                <div className="he-sub">Turmas manhã, tarde e noite</div>
              </div>
            </div>
          </div>
        </div>
        <div className="hero-badge">
          <img src="assets/logo-3d.png" alt="Team Fighter Silva" />
        </div>
      </div>
    </section>
  );
}

// ============================================================
// MARQUEE
// ============================================================
function Marquee() {
  const items = ["BOXE", "MMA", "MUAY THAI", "JIU-JITSU", "JUDÔ", "TAEKWONDO", "KICKBOXING", "KUNG FU", "KIDS"];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {[...items, ...items].map((it, i) => (
          <span key={i}>{it}<span className="dot" /></span>
        ))}
      </div>
    </div>
  );
}

// ============================================================
// MODALIDADES
// ============================================================
function Modalities() {
  const [activeId, setActiveId] = useState("boxe");
  const active = MODALITIES.find((m) => m.id === activeId);
  return (
    <section className="section modalities" id="modalidades" data-screen-label="02 Modalidades">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">02 / Modalidades</div>
            <h2 className="section-title">9 ARTES.<br /><em>UMA EQUIPE.</em></h2>
            <p className="section-sub">
              Programa completo do striking ao grappling. Clique numa modalidade para ver horários, professor responsável e detalhes.
            </p>
          </div>
        </div>
        <div className="modality-grid">
          {MODALITIES.map((m) => (
            <button
              key={m.id}
              className={`mod-card ${activeId === m.id ? "is-active" : ""}`}
              style={{ "--mod-color": m.color }}
              onClick={() => setActiveId(m.id)}
            >
              <div className="photo">
                {m.img ? (
                  <img src={m.img} alt={m.name} />
                ) : (
                  <div className="photo-fallback" aria-hidden="true">
                    <img src="assets/logo.png" alt="" className="pf-logo" />
                    <span className="pf-label">{m.name}</span>
                  </div>
                )}
              </div>
              <div className="top-row">
                <div className="mod-badge">{m.short}</div>
                <div className="mod-meta-pill">{m.duration}</div>
              </div>
              <div className="body">
                <h3 className="mod-name">{m.name}</h3>
                <p className="mod-tagline">{m.tagline}</p>
                <div className="row">
                  <div className="mod-meta">VER DETALHES</div>
                  <div className="mod-arrow">→</div>
                </div>
              </div>
            </button>
          ))}
        </div>

        {active && (
          <div className="mod-detail" style={{ "--mod-color": active.color }}>
            <div className="mod-detail-photo">
              {active.img ? (
                <img src={active.img} alt={active.name} />
              ) : (
                <div className="photo-fallback" aria-hidden="true">
                  <img src="assets/logo.png" alt="" className="pf-logo pf-logo-lg" />
                  <span className="pf-label pf-label-lg">{active.name}</span>
                </div>
              )}
              <div className="mod-detail-photo-tag">{active.name.toUpperCase()}</div>
            </div>
            <div>
              <div className="label">Sobre · {active.name}</div>
              <h3>{active.name}</h3>
              <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 15 }}>
                {active.description}
              </p>
              <div className="prof-mini" style={{ marginTop: 20 }}>
                <div className="avatar">{active.coach.split(" ").map(w => w[0]).slice(0, 2).join("")}</div>
                <div>
                  <div className="pn">{active.coach}</div>
                  <div className="pr">{active.coachRole}</div>
                </div>
              </div>
              <a
                className="btn btn-primary btn-block"
                href={whatsAppClassURL(active)}
                target="_blank"
                rel="noreferrer"
                style={{ marginTop: 18 }}
              >
                Agendar aula de {active.name} no WhatsApp
              </a>
            </div>
            <div>
              <div className="label">Horários</div>
              <ul className="schedule-list">
                {active.schedule.map((s, i) => (
                  <li key={i}>
                    <span className="day">{s.day}</span>
                    <span className="t">{s.t}</span>
                  </li>
                ))}
              </ul>
              <div className="label" style={{ marginTop: 22 }}>Para Você</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <SpecRow k="DURAÇÃO" v={active.duration} />
                <SpecRow k="NÍVEL" v="Todos os níveis" />
                <SpecRow k="UNIFORME" v={active.uniform || "Bermuda + camiseta ou regata"} />
                {active.uniformExtra && (
                  <div className="uniform-warning">
                    <span className="uw-ico">!</span>
                    <span>{active.uniformExtra}</span>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function SpecRow({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", paddingBottom: 8, borderBottom: "1px solid var(--line)", fontFamily: "var(--font-mono)", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.06em" }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span style={{ color: "var(--text)" }}>{v}</span>
    </div>
  );
}

// ============================================================
// TEAM
// ============================================================
function Team() {
  return (
    <section className="section team" id="time" data-screen-label="05 Time">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">05 / Conheça nosso time</div>
            <h2 className="section-title">Os <em>professores</em></h2>
            <p className="section-sub">
              Faixa-pretas, ex-atletas e especialistas. Cada modalidade é conduzida por um profissional dedicado àquela arte.
            </p>
          </div>
        </div>
        <div className="team-grid">
          {COACHES.map((c) => (
            <article key={c.id} className="coach-card">
              <div className="coach-photo">
                {c.photo ? (
                  <img src={c.photo} alt={c.name} className="coach-photo-img" />
                ) : (
                  <React.Fragment>
                    <div className="stripe" />
                    <span className="initials">{c.initials}</span>
                    <span className="label">[ foto · {c.name} ]</span>
                  </React.Fragment>
                )}
                <span className="coach-tag">{c.tag}</span>
              </div>
              <div className="coach-body">
                <div className="coach-role">{c.role}</div>
                <h3 className="coach-name">{c.name}</h3>
                <p className="coach-bio">{c.bio}</p>
                <div className="coach-mods">
                  {c.mods.map((m) => <span key={m} className="chip">{m}</span>)}
                </div>
                {c.video && (
                  <button
                    type="button"
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      const win = window.open(c.video, "_blank", "noopener,noreferrer");
                      if (!win) {
                        window.top.location.href = c.video;
                      }
                    }}
                    className="btn btn-ghost btn-sm coach-cta"
                  >
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style={{ marginRight: 6 }}>
                      <path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zM12 4c-3.2 0-3.5 0-4.7.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.2.8-.4.3-.6.7-.8 1.2-.2.4-.3 1-.4 2.1C2.8 9.6 2.8 9.9 2.8 12s0 2.4.1 3.5c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.2.3.4.7.6 1.2.8.4.2 1 .3 2.1.4 1.2.1 1.5.1 3.6.1s2.4 0 3.5-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.2-.8.4-.3.6-.7.8-1.2.2-.4.3-1 .4-2.1.1-1.1.1-1.5.1-3.6s0-2.4-.1-3.5c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.2-.3-.4-.7-.6-1.2-.8-.4-.2-1-.3-2.1-.4C15.5 4 15.2 4 12 4zM12 6.9c2.8 0 5.1 2.3 5.1 5.1S14.8 17.1 12 17.1 6.9 14.8 6.9 12 9.2 6.9 12 6.9zM12 15.3c1.8 0 3.3-1.5 3.3-3.3S13.8 8.7 12 8.7 8.7 10.2 8.7 12s1.5 3.3 3.3 3.3zM18.5 6.7c0 .7-.5 1.2-1.2 1.2s-1.2-.5-1.2-1.2.5-1.2 1.2-1.2 1.2.5 1.2 1.2z"/>
                    </svg>
                    Conheça mais o trabalho
                  </button>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA STRIP
// ============================================================
function CTAStrip({ onClick }) {
  return (
    <section className="cta-strip">
      <div className="container cta-inner">
        <h2>VEM TREINAR.<br /><span className="text-orange">PRIMEIRA AULA POR NOSSA CONTA.</span></h2>
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          <a
            className="btn btn-primary"
            href={SCHEDULE_URL}
            target="_blank"
            rel="noreferrer"
          >
            Agendar aula experimental
          </a>
          <a className="btn btn-ghost" href="tel:+5511994946298">
            (11) 99494-6298
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PRODUCT CARD (shop)
// ============================================================
function ProductCard({ p, onOpen }) {
  return (
    <div className="product" onClick={() => onOpen(p)} role="button" tabIndex={0}
         onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") onOpen(p); }}>
      <div className="product-img">
        <div className="ph" />
        {p.img && <img src={p.img} alt={p.name} />}
        {p.tag && <span className={`product-tag ${p.tag === "BEST" ? "hot" : ""}`}>{p.tag}</span>}
        <div className="product-overlay">
          <span className="product-overlay-cta">Ver detalhes →</span>
        </div>
      </div>
      <div className="product-body">
        <div className="product-meta">{p.meta}</div>
        <h3 className="product-name">{p.name}</h3>
        <div className="product-foot">
          <div className="product-price">
            R${p.price.toFixed(2).replace(".", ",")}
            <small>ou em até 3x sem juros</small>
          </div>
          <span className="order-pill">ENCOMENDAR →</span>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SHOP — UNIFORMES
// ============================================================
function ShopUniforms({ onOpen }) {
  const [filter, setFilter] = useState("all");
  const list = UNIFORMS;
  return (
    <section className="section" id="loja" data-screen-label="06 Uniformes">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">06 / Uniformes</div>
            <h2 className="section-title">VISTA <em>O TIME.</em></h2>
            <p className="section-sub">
              Linha oficial Team Fighter Silva. Camisetas, regatas, bermudas e a coleção competidor. Clique na peça para encomendar pelo WhatsApp.
            </p>
          </div>
        </div>
        <div className="product-grid">
          {list.map((p) => <ProductCard key={p.id} p={p} onOpen={onOpen} />)}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SHOP — EQUIPAMENTOS
// ============================================================
function ShopEquip({ onOpen }) {
  const [cat, setCat] = useState("luvas");
  const [brand, setBrand] = useState("all");

  // Categorize products by name
  const categorize = (p) => {
    const n = p.name.toLowerCase();
    if (n.includes("bandagem")) return "bandagens";
    if (n.includes("caneleira")) return "caneleiras";
    if (n.includes("bucal") || n.includes("protetor")) return "bucais";
    if (n.includes("luva")) return "luvas";
    return "outros";
  };
  const brandOf = (p) => {
    const n = p.name.toLowerCase();
    if (n.includes("maximum")) return "maximum";
    if (n.includes("naja") || n.includes("viper")) return "naja";
    if (n.includes("pretorian") || n.includes("elite") || n.includes("impact") || n.includes("fx-") || n.includes("b16")) return "pretorian";
    return "outros";
  };

  const CATS = [
    { id: "luvas", label: "Luvas", ico: "🥊" },
    { id: "caneleiras", label: "Caneleiras", ico: "🦵" },
    { id: "bandagens", label: "Bandagens", ico: "🩹" },
    { id: "bucais", label: "Protetor Bucal", ico: "🛡" },
  ];
  const BRANDS = [
    { id: "all", label: "Todas as marcas" },
    { id: "pretorian", label: "Pretorian" },
    { id: "naja", label: "Naja" },
    { id: "maximum", label: "Maximum" },
  ];

  const filtered = EQUIPMENT.filter((p) => {
    if (categorize(p) !== cat) return false;
    if (cat === "luvas" && brand !== "all" && brandOf(p) !== brand) return false;
    return true;
  });

  // Counts per category
  const counts = {};
  for (const c of CATS) counts[c.id] = EQUIPMENT.filter((p) => categorize(p) === c.id).length;

  return (
    <section className="section" id="equip" data-screen-label="07 Equipamentos" style={{ background: "#0e0e0e" }}>
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">07 / Equipamentos</div>
            <h2 className="section-title">EQUIPE <em>O FIGHTER.</em></h2>
            <p className="section-sub">
              Luvas, caneleiras, bandagens e proteções. Escolha a categoria e encomende direto pelo WhatsApp.
            </p>
          </div>
        </div>

        <div className="cat-tabs">
          {CATS.map((c) => (
            <button
              key={c.id}
              className={`cat-tab ${cat === c.id ? "is-active" : ""}`}
              onClick={() => { setCat(c.id); setBrand("all"); }}
            >
              <span className="cat-ico" aria-hidden="true">{c.ico}</span>
              <span className="cat-label">{c.label}</span>
              <span className="cat-count">{counts[c.id]}</span>
            </button>
          ))}
        </div>

        {cat === "luvas" && (
          <div className="brand-tabs">
            {BRANDS.map((b) => (
              <button
                key={b.id}
                className={`brand-tab ${brand === b.id ? "is-active" : ""}`}
                onClick={() => setBrand(b.id)}
              >
                {b.label}
              </button>
            ))}
          </div>
        )}

        {filtered.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state-big">∅</div>
            <div>Nenhum produto nesta categoria ainda.</div>
            <div style={{ color: "var(--muted)", fontSize: 13, marginTop: 6 }}>Em breve novidades.</div>
          </div>
        ) : (
          <div className="product-grid">
            {filtered.map((p) => <ProductCard key={p.id} p={p} onOpen={onOpen} />)}
          </div>
        )}
      </div>
    </section>
  );
}

// ============================================================
// PLANOS E VALORES
// ============================================================
function Plans() {
  return (
    <section className="section plans" id="planos" data-screen-label="03 Planos">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">03 / Planos e Valores</div>
            <h2 className="section-title">ESCOLHA <em>SEU PLANO.</em></h2>
            <p className="section-sub">
              Mensalidades acessíveis para você treinar do jeito que precisa. Brinde de boas-vindas na adesão.
            </p>
          </div>
        </div>
        <div className="plans-grid">
          {PLANS.map((p) => (
            <article key={p.id} className={`plan-card ${p.featured ? "is-featured" : ""}`}>
              {p.badge && <span className="plan-badge">{p.badge}</span>}
              <div className="plan-name">{p.name}</div>
              <div className="plan-tagline">{p.tagline}</div>
              <div className="plan-sub">{p.sub}</div>
              <div className="plan-price">
                <span className="cur">R$</span>
                <span className="val">{p.price}</span>
                <span className="per">/ mês</span>
              </div>
              <ul className="plan-perks">
                {p.perks.map((perk) => (
                  <li key={perk}><span className="check">✓</span>{perk}</li>
                ))}
              </ul>
              <a
                href={whatsAppInquiryURL(`o plano ${p.name}`)}
                target="_blank"
                rel="noreferrer"
                className={`btn ${p.featured ? "btn-primary" : "btn-ghost"} btn-block`}
              >
                Quero esse plano
              </a>
            </article>
          ))}
        </div>
        <div className="adesao-strip">
          <div>
            <div className="adesao-label">Taxa de adesão</div>
            <div className="adesao-val">R$ 80,00 <span className="adesao-extra">· Brinde de boas-vindas incluso</span></div>
          </div>
          <a
            href={whatsAppInquiryURL("matrícula e taxa de adesão")}
            target="_blank"
            rel="noreferrer"
            className="btn btn-primary"
          >
            Quero me matricular
          </a>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SERVIÇOS — Massoterapia + Nutrição
// ============================================================
function Services() {
  return (
    <section className="section services" id="servicos" data-screen-label="04 Serviços">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">04 / Serviços</div>
            <h2 className="section-title">ALÉM DO <em>TREINO.</em></h2>
            <p className="section-sub">
              Serviços que complementam o treino e aceleram seus resultados — recuperação, performance e bem-estar.
            </p>
          </div>
        </div>
        <div className="services-grid">
          {SERVICES.map((s) => (
            <article key={s.id} className="service-card">
              <div className="service-media" data-service={s.id}>
                {s.img ? (
                  <img src={s.img} alt={s.name} className="service-media-img" />
                ) : (
                  <React.Fragment>
                    <div className="service-media-bg" />
                    <div className="service-media-icon">
                      {s.id === "massoterapia" ? (
                        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M8 44h48" />
                          <path d="M14 44v-6c0-3 2-5 5-5h26c3 0 5 2 5 5v6" />
                          <circle cx="20" cy="22" r="6" />
                          <path d="M26 26c4 0 14 2 18 7" />
                          <path d="M50 22c3 0 6 2 6 6" />
                        </svg>
                      ) : (
                        <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M22 16c0-4 4-8 10-8s10 4 10 8" />
                          <path d="M16 28c0-6 6-12 16-12s16 6 16 12c0 4-1 8-3 14s-5 10-13 10-11-4-13-10-3-10-3-14z" />
                          <path d="M28 14l4-6" />
                          <path d="M36 14l-2-4" />
                        </svg>
                      )}
                    </div>
                    <div className="service-media-tag">[ foto · {s.name} ]</div>
                  </React.Fragment>
                )}
                <span className="service-media-label">{s.name.toUpperCase()}</span>
              </div>
              <div className="service-body">
                <h3 className="service-name">{s.name}</h3>
                <p className="service-tagline">{s.tagline}</p>
                <p className="service-desc">{s.description}</p>
                <ul className="service-list">
                  {s.items.map((it) => (
                    <li key={it}><span className="dot" />{it}</li>
                  ))}
                </ul>
                <a
                  href={whatsAppInquiryURL(s.name)}
                  target="_blank"
                  rel="noreferrer"
                  className="btn btn-primary btn-block"
                >
                  {s.cta}
                </a>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// NA ARENA — Atletas em combate
// ============================================================
function Arena() {
  const [open, setOpen] = useState(null);
  useEffect(() => {
    if (open === null) return;
    const onKey = (e) => {
      if (e.key === "Escape") setOpen(null);
      if (e.key === "ArrowLeft") setOpen((i) => (i - 1 + ARENA.length) % ARENA.length);
      if (e.key === "ArrowRight") setOpen((i) => (i + 1) % ARENA.length);
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [open]);
  const current = open !== null ? ARENA[open] : null;

  return (
    <section className="section arena" id="arena" data-screen-label="06 Na Arena">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">06 / Na Arena</div>
            <h2 className="section-title">NOSSOS ATLETAS <em>NO COMBATE.</em></h2>
            <p className="section-sub">
              Cartel da equipe — competições, lutas e conquistas dentro do ringue e do octógono. Onde o treino vira história.
            </p>
          </div>
          <div className="arena-stats">
            <div className="arena-stat">
              <div className="n">+30</div>
              <div className="l">Atletas competidores</div>
            </div>
            <div className="arena-stat">
              <div className="n">+50</div>
              <div className="l">Medalhas conquistadas</div>
            </div>
          </div>
        </div>

        <div className="arena-grid">
          {ARENA.map((a, i) => (
            <button
              key={a.id}
              className={`arena-cell arena-cell-${i % 5}`}
              onClick={() => setOpen(i)}
              aria-label={a.caption}
            >
              <img src={a.img} alt={a.caption} loading="lazy" />
              <div className="arena-overlay">
                <span className="arena-overlay-cta">Ampliar</span>
              </div>
            </button>
          ))}
        </div>
      </div>

      {current && (
        <React.Fragment>
          <div className="lightbox-backdrop" onClick={() => setOpen(null)} />
          <div className="lightbox" role="dialog" aria-modal="true">
            <button className="lightbox-close" onClick={() => setOpen(null)} aria-label="Fechar">✕</button>
            <button
              className="lightbox-nav lightbox-prev"
              onClick={() => setOpen((i) => (i - 1 + ARENA.length) % ARENA.length)}
              aria-label="Anterior"
            >‹</button>
            <button
              className="lightbox-nav lightbox-next"
              onClick={() => setOpen((i) => (i + 1) % ARENA.length)}
              aria-label="Próxima"
            >›</button>
            <div className="lightbox-stage">
              <img src={current.img} alt={current.caption} />
            </div>
            <div className="lightbox-caption">
              <span className="lightbox-count">{open + 1} / {ARENA.length}</span>
              <span>{current.caption}</span>
            </div>
          </div>
        </React.Fragment>
      )}
    </section>
  );
}

// ============================================================
// EVENTS — Galeria de eventos da academia
// ============================================================
function Events() {
  return (
    <section className="section events" id="eventos" data-screen-label="08 Eventos">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">08 / Eventos da Academia</div>
            <h2 className="section-title">A NOSSA <em>HISTÓRIA.</em></h2>
            <p className="section-sub">
              Aulões, exames de graduação, seminários e momentos especiais que marcaram a Team Fighter Silva.
            </p>
          </div>
        </div>
        <div className="events-gallery">
          {EVENTS.filter((e) => !e.hidden).map((e) => (
            <article key={e.id} className="event-block">
              <header className="event-block-head">
                <div>
                  <span className={`event-tag ${e.tag.toLowerCase()}`}>{e.tag}</span>
                  <h3 className="event-block-title">{e.title}</h3>
                  <p className="event-block-sub">{e.sub}</p>
                </div>
              </header>
              <div className="event-block-grid">
                {(e.images && e.images.length > 0 ? e.images : Array.from({ length: e.placeholderCount || 3 })).map((src, i) => (
                  <div key={i} className="event-thumb">
                    {src ? (
                      <img src={src} alt={`${e.title} ${i + 1}`} />
                    ) : (
                      <div className="event-thumb-empty">
                        <svg viewBox="0 0 32 32" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.5">
                          <rect x="4" y="6" width="24" height="20" rx="2" />
                          <circle cx="11" cy="13" r="2" />
                          <path d="M4 22l7-7 7 7 4-4 6 6" />
                        </svg>
                        <span>foto em breve</span>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// LOCATION
// ============================================================
function Location() {
  return (
    <section className="section location" id="local" data-screen-label="09 Localização">
      <div className="container">
        <div className="heading-row">
          <div>
            <div className="section-eyebrow">09 / Localização</div>
            <h2 className="section-title">VENHA <em>NOS VISITAR.</em></h2>
            <p className="section-sub">
              Estamos no centro de Poá, fácil acesso pela estação de trem. Estacionamento próximo.
            </p>
          </div>
        </div>
        <div className="location-grid">
          <div className="map-card">
            <FakeMap />
            <div className="map-pin">
              <div className="ring"><img src="assets/logo.png" alt="" /></div>
              <div className="tag">TEAM FIGHTER SILVA</div>
            </div>
          </div>
          <div className="info-stack">
            <div className="info-card">
              <div className="ico">📍</div>
              <div>
                <div className="label">Endereço</div>
                <div className="val">Av. Antônio Massa, 455</div>
                <div className="sub">Poá — SP · CEP 08550-000 · próximo à estação Poá</div>
              </div>
            </div>
            <div className="info-card">
              <div className="ico">📞</div>
              <div>
                <div className="label">Contato</div>
                <div className="val">(11) 99494-6298</div>
                <div className="sub">WhatsApp · Atendimento das 06h às 22h</div>
              </div>
            </div>
            <div className="info-card">
              <div className="ico">⏱</div>
              <div style={{ flex: 1 }}>
                <div className="label">Horário de funcionamento</div>
                <div className="hours-grid">
                  <div className="row"><span className="d">Seg–Sex</span><span>06h — 22h</span></div>
                  <div className="row"><span className="d">Sábado</span><span>08h — 14h</span></div>
                  <div className="row"><span className="d">Domingo</span><span>Fechado</span></div>
                  <div className="row"><span className="d">Feriado</span><span>Consultar</span></div>
                </div>
              </div>
            </div>
            <div className="info-card" style={{ background: "linear-gradient(135deg, rgba(255,107,26,0.15), rgba(255,107,26,0.04))", borderColor: "rgba(255,107,26,0.3)" }}>
              <div className="ico" style={{ background: "var(--orange)", color: "#0a0a0a" }}>★</div>
              <div style={{ flex: 1 }}>
                <div className="label">Aula experimental gratuita</div>
                <div className="sub" style={{ marginTop: 6, marginBottom: 14 }}>
                  Conheça a estrutura, faça uma aula numa modalidade à sua escolha e converse com nossa equipe.
                </div>
                <a
                  className="btn btn-primary btn-block"
                  href={SCHEDULE_URL}
                  target="_blank"
                  rel="noreferrer"
                >
                  Agendar online
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FakeMap() {
  // schematic abstract map background
  return (
    <svg className="map-svg" viewBox="0 0 800 460" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
        </pattern>
        <radialGradient id="glow" cx="52%" cy="50%" r="40%">
          <stop offset="0%" stopColor="rgba(255,107,26,0.25)"/>
          <stop offset="100%" stopColor="rgba(255,107,26,0)"/>
        </radialGradient>
      </defs>
      <rect width="800" height="460" fill="#141414"/>
      <rect width="800" height="460" fill="url(#grid)"/>
      <rect width="800" height="460" fill="url(#glow)"/>
      {/* fake streets */}
      <path d="M0 240 L800 200" stroke="rgba(255,255,255,0.12)" strokeWidth="6"/>
      <path d="M0 220 L800 180" stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
      <path d="M400 0 L420 460" stroke="rgba(255,255,255,0.1)" strokeWidth="4"/>
      <path d="M180 0 L200 460" stroke="rgba(255,255,255,0.07)" strokeWidth="3"/>
      <path d="M600 0 L620 460" stroke="rgba(255,255,255,0.07)" strokeWidth="3"/>
      <path d="M0 90 L800 70" stroke="rgba(255,255,255,0.05)" strokeWidth="2"/>
      <path d="M0 370 L800 340" stroke="rgba(255,255,255,0.05)" strokeWidth="2"/>
      {/* labels */}
      <text x="40" y="34" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.4)" letterSpacing="2">AV. ANTÔNIO MASSA</text>
      <text x="40" y="50" fontFamily="JetBrains Mono, monospace" fontSize="10" fill="rgba(255,255,255,0.25)" letterSpacing="2">POÁ — SP</text>
      <text x="40" y="440" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.3)" letterSpacing="2">↑ ESTAÇÃO POÁ · 600M</text>
      <text x="700" y="440" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="rgba(255,255,255,0.3)" letterSpacing="2" textAnchor="end">CENTRO →</text>
    </svg>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo.png" alt="TFS" />
            <p>O maior centro de artes marciais da região. Do Boxe ao MMA — sua arte marcial é aqui.</p>
            <p style={{ marginTop: 12, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-dim)", letterSpacing: "0.06em" }}>
              CNPJ 00.000.000/0001-00<br />
              SINCE 2019
            </p>
          </div>
          <div className="footer-col">
            <h5>Modalidades</h5>
            <ul>
              {MODALITIES.slice(0, 6).map((m) => (
                <li key={m.id}><a href="#modalidades">{m.name}</a></li>
              ))}
            </ul>
          </div>
          <div className="footer-col">
            <h5>Academia</h5>
            <ul>
              <li><a href="#time">Nosso Time</a></li>
              <li><a href="#eventos">Eventos</a></li>
              <li><a href="#loja">Uniformes</a></li>
              <li><a href="#equip">Equipamentos</a></li>
              <li><a href="#local">Localização</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Contato</h5>
            <ul>
              <li><a href="tel:+5511994946298">(11) 99494-6298</a></li>
              <li><a href="https://instagram.com/teamfightersilva" target="_blank" rel="noreferrer">@teamfightersilva</a></li>
              <li><a href="#">Av. Antônio Massa, 455</a></li>
              <li><a href="#">Poá — SP</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Team Fighter Silva. Todos os direitos reservados.</div>
          <div>Honra · Disciplina · Resultado</div>
        </div>
      </div>
    </footer>
  );
}

// ============================================================
// CART DRAWER
// ============================================================
function CartDrawer({ open, items, onClose, onInc, onDec, onRemove }) {
  const total = items.reduce((s, it) => s + it.price * it.qty, 0);
  return (
    <React.Fragment>
      <div className={`drawer-backdrop ${open ? "open" : ""}`} onClick={onClose} />
      <aside className={`drawer ${open ? "open" : ""}`} aria-hidden={!open}>
        <div className="drawer-head">
          <h3>Carrinho</h3>
          <button className="drawer-close" onClick={onClose} aria-label="Fechar">✕</button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="cart-empty">
              <div className="big">∅</div>
              <div style={{ fontFamily: "var(--font-head)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-dim)" }}>
                Carrinho vazio
              </div>
              <div>Adicione uniformes ou equipamentos para começar.</div>
            </div>
          ) : (
            items.map((it) => (
              <div key={it.key} className="cart-item">
                <div className="thumb">
                  {it.img ? <img src={it.img} alt="" /> : <div style={{ width: "100%", height: "100%", background: "repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 8px, transparent 8px 16px)" }} />}
                </div>
                <div>
                  <div className="n">{it.name}</div>
                  <div className="m">Tamanho: {it.size}</div>
                  <div className="qty">
                    <button onClick={() => onDec(it.key)}>−</button>
                    <span className="v">{it.qty}</span>
                    <button onClick={() => onInc(it.key)}>+</button>
                  </div>
                </div>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                  <div className="price">R${(it.price * it.qty).toFixed(2).replace(".", ",")}</div>
                  <button className="add-btn" style={{ padding: "4px 8px", fontSize: 10 }} onClick={() => onRemove(it.key)}>Remover</button>
                </div>
              </div>
            ))
          )}
        </div>
        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="cart-total">
              <div>Total</div>
              <div className="v">R${total.toFixed(2).replace(".", ",")}</div>
            </div>
            <button className="btn btn-primary btn-block">Finalizar pedido</button>
            <div style={{ textAlign: "center", marginTop: 10, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.06em" }}>
              Pagamento e retirada na academia
            </div>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

// ============================================================
// TWEAKS PANEL
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff6b1a",
  "grit": 0.5,
  "displayFont": "Bebas Neue",
  "spinLogo": true
}/*EDITMODE-END*/;

function Tweaks() {
  const { TweaksPanel, useTweaks, TweakSection, TweakColor, TweakSlider, TweakSelect, TweakToggle } = window;
  if (!TweaksPanel) return null;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.documentElement.style.setProperty("--orange", t.accent);
    document.documentElement.style.setProperty("--orange-deep", t.accent);
    document.documentElement.style.setProperty("--orange-glow", t.accent + "59");
    document.documentElement.style.setProperty("--grit-opacity", t.grit);
    document.documentElement.style.setProperty("--font-display", `"${t.displayFont}", "Bebas Neue", sans-serif`);
    document.querySelectorAll(".hero-badge img").forEach((el) => {
      el.style.animation = t.spinLogo
        ? "badgeFloat 7s ease-in-out infinite, badgeWobble 12s ease-in-out infinite"
        : "none";
    });
  }, [t]);
  return (
    <TweaksPanel title="TFS Tweaks">
      <TweakSection title="Marca">
        <TweakColor
          label="Cor de destaque"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={["#ff6b1a", "#e74c3c", "#1f9d55", "#3aa7ff", "#f1c40f"]}
        />
      </TweakSection>
      <TweakSection title="Tipografia">
        <TweakSelect
          label="Fonte display"
          value={t.displayFont}
          onChange={(v) => setTweak("displayFont", v)}
          options={[
            { value: "Bebas Neue", label: "Bebas Neue (default)" },
            { value: "Anton", label: "Anton (mais grossa)" },
            { value: "Oswald", label: "Oswald (clean)" },
            { value: "Bowlby One", label: "Bowlby (cartoon bold)" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Atmosfera">
        <TweakSlider
          label="Intensidade do grit"
          value={t.grit}
          min={0}
          max={1}
          step={0.05}
          onChange={(v) => setTweak("grit", v)}
        />
        <TweakToggle
          label="Logo animado no hero"
          value={t.spinLogo}
          onChange={(v) => setTweak("spinLogo", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ============================================================
// PRODUCT MODAL — "ENCOMENDE JÁ" via WhatsApp
// ============================================================
function ProductModal({ product, onClose }) {
  const [size, setSize] = useState(null);

  useEffect(() => {
    if (product) {
      setSize(product.sizes[1] || product.sizes[0]);
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => { document.body.style.overflow = ""; };
  }, [product]);

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

  if (!product) return null;
  const orderURL = whatsAppOrderURL(product, size);
  return (
    <React.Fragment>
      <div className="modal-backdrop open" onClick={onClose} />
      <div className="product-modal open" role="dialog" aria-modal="true">
        <button className="modal-close" onClick={onClose} aria-label="Fechar">✕</button>
        <div className="modal-img">
          <div className="ph" />
          {product.img && <img src={product.img} alt={product.name} />}
          {product.tag && <span className={`product-tag ${product.tag === "BEST" ? "hot" : ""}`}>{product.tag}</span>}
        </div>
        <div className="modal-body">
          <div className="modal-meta">{product.meta}</div>
          <h3 className="modal-name">{product.name}</h3>
          <div className="modal-price">
            R${product.price.toFixed(2).replace(".", ",")}
            <small>ou em até 3x sem juros</small>
          </div>

          <div className="modal-section">
            <div className="modal-label">Escolha o tamanho</div>
            <div className="size-row">
              {product.sizes.map((s) => (
                <button
                  key={s}
                  className={`size-chip ${size === s ? "is-active" : ""}`}
                  onClick={() => setSize(s)}
                >
                  {s}
                </button>
              ))}
            </div>
          </div>

          <div className="modal-info">
            <div className="modal-info-row">
              <span className="ico">↻</span>
              <span>Produção sob encomenda · 7 a 10 dias úteis</span>
            </div>
            <div className="modal-info-row">
              <span className="ico">★</span>
              <span>Retirada na academia · Av. Antônio Massa, 455 — Poá</span>
            </div>
          </div>

          <a
            href={orderURL}
            target="_blank"
            rel="noreferrer"
            className="btn btn-primary btn-block btn-order"
          >
            <span className="wa-ico" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.1.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.4-.8-2-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1.1 2.7.1.2 1.9 2.9 4.6 4.1.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.6-.6 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.2-.3-.2-.6-.3z M20.5 3.5C18.2 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7 1 3.8 1.5 5.8 1.5 6.6 0 12-5.4 12-12 0-3.2-1.2-6.2-3.5-8.4zM12 21.8c-1.8 0-3.6-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.5-3.4-1.5-5.3 0-5.5 4.5-9.9 9.9-9.9 2.7 0 5.1 1 7 2.9 1.9 1.9 2.9 4.4 2.9 7 0 5.6-4.4 10-9.9 9.9z"/>
              </svg>
            </span>
            ENCOMENDE JÁ NO WHATSAPP
          </a>
          <div className="modal-helper">Você será direcionado ao WhatsApp da academia</div>
        </div>
      </div>
    </React.Fragment>
  );
}
function App() {
  const [active, setActive] = useState("home");
  const [selected, setSelected] = useState(null);

  const handleNav = (id) => {
    const target = id === "home" ? "home" : id;
    const el = document.getElementById(target);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  // scroll spy
  useEffect(() => {
    const ids = NAV_LINKS.map((l) => l.id);
    const onScroll = () => {
      const offset = 200;
      let current = "home";
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const rect = el.getBoundingClientRect();
        if (rect.top - offset <= 0) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <Nav activeSection={active} onNavClick={handleNav} />
      <Hero onCTA={handleNav} />
      <Marquee />
      <Modalities />
      <Plans />
      <Services />
      <Team />
      <CTAStrip onClick={() => handleNav("local")} />
      <ShopUniforms onOpen={setSelected} />
      <ShopEquip onOpen={setSelected} />
      <Events />
      <Location />
      <Footer />
      <ProductModal product={selected} onClose={() => setSelected(null)} />
      <Tweaks />
      <div className="grit-overlay" />
    </React.Fragment>
  );
}

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