/* MIL GRAU RP — Pages */

const { useState: uS, useEffect: uE, useMemo: uM } = React;

// ===== HOME =====
function HomePage({ onNav, onAdd, products }) {
  const featured = [
    products.find(p => p.id === 'caixa-de-som'),
    products.find(p => p.id === 'cartao-100k'),
    products.find(p => p.id === 'sistema-tvs'),
    products.find(p => p.id === 'sistema-armas'),
    products.find(p => p.id === 'passe-premium'),
  ].filter(Boolean);

  const trustItems = [
    { icon: 'bolt', ttl: 'Entrega rápida', sub: 'Ativação no jogo' },
    { icon: 'crown', ttl: 'Benefícios exclusivos', sub: 'Apenas na loja oficial' },
    { icon: 'shield', ttl: 'Compra segura', sub: 'Pagamento protegido' },
    { icon: 'pix', ttl: 'Parcele fácil', sub: 'Em até 3x sem juros' },
  ];

  const testimonials = [
    { name: 'Maria Silva', when: 'Comprou há 3 dias', stars: 5,
      txt: 'Não esperava uma entrega tão rápida. Comprei o cartão e em 3 minutos já estava ativo. Valeu muito a pena!' },
    { name: 'Roberto L.', when: 'Comprou há 5 dias', stars: 5,
      txt: 'Atendimento top! Tirei todas minhas dúvidas antes de comprar e o suporte foi muito atencioso. Com certeza recomendo!' },
    { name: 'Carlos M.', when: 'Player desde 2022', stars: 5,
      txt: 'Estou na MIL GRAU há 3 temporadas. Sempre que compro algo, cai instantâneo. Nunca tive problema. É outro nível de organização.' },
  ];

  const timeline = [
    { yr: '2021', ttl: 'FUNDAÇÃO', body: 'Nascimento da MIL GRAU RP. Primeira temporada e o início de uma nova proposta para o RP brasileiro.' },
    { yr: '2022', ttl: 'CONSOLIDAÇÃO NACIONAL', body: 'Reconhecimento como o maior servidor com temática brasileira no FiveM.' },
    { yr: '2023', ttl: 'EXPANSÃO ESTRATÉGICA', body: 'Parcerias com empresas reais, eventos crossover e crescimento explosivo da comunidade.' },
    { yr: '2024', ttl: 'RECONHECIMENTO INTERNACIONAL', body: 'MIL GRAU RP vira pauta na imprensa, com cobertura de ONGs e Women in Tech.' },
    { yr: '2025', ttl: 'RECORDE HISTÓRICO', body: 'Pico de jogadores simultâneos: marca histórica de +895 jogadores online ao mesmo tempo.' },
    { yr: '2026', ttl: 'TEMPORADA 5 ANOS', body: 'Legado impossível de copiar. Temporada comemorativa que celebra estrutura, consistência e comunidade.' },
  ];

  return (
    <div className="page">
      <div className="container">
        {/* Hero — banner cinematic 21:9, pronto pra imagem AI */}
        <div className="hero hero-banner">
          <div className="hero-banner-inner">
          <div className="hero-banner-placeholder">
              <div className="hbp-grid"/>
              <div className="hbp-scan"/>
              <div className="hbp-content">
                <div className="hbp-logo">
                  <span className="hbp-mil">MIL</span>
                  <span className="hbp-grau">GRAU</span>
                  <span className="hbp-rp">RP</span>
                </div>
                <div className="hbp-tag">EST. 2020 · TEMPORADA 6</div>
              </div>
              <div className="hbp-corner hbp-tl"/>
              <div className="hbp-corner hbp-tr"/>
              <div className="hbp-corner hbp-bl"/>
              <div className="hbp-corner hbp-br"/>
            </div>
          </div>
        </div>

        {/* Trust strip */}
        <div className="trust-strip">
          {trustItems.map((t, i) => (
            <div key={i} className="trust-strip-item">
              <div className="trust-icon"><Icon name={t.icon} size={20}/></div>
              <div>
                <div className="ttl">{t.ttl}</div>
                <div className="sub">{t.sub}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Produtos selecionados */}
        <div className="section bc-section">
          <h2 className="bc-title">PRODUTOS SELECIONADOS PARA VOCÊ</h2>
          <div className="featured-grid">
            {featured.map((p, i) => (
              <FeaturedCard key={p.id} p={p} idx={i}
                onClick={() => onNav('product-' + p.id)}
                onAdd={onAdd}/>
            ))}
          </div>
        </div>

        {/* FAQ */}
        <FaqSection/>

        {/* Formas de Pagamento — clean horizontal strip */}
        <div className="section pay-clean-section">
          <div className="pay-clean">
            <div className="pay-clean-head">
              <div className="pay-clean-eyebrow">
                <Icon name="shield" size={12}/>
                <span>CHECKOUT 100% SEGURO</span>
              </div>
              <h2 className="pay-clean-title">Pague do seu jeito</h2>
              <p className="pay-clean-sub">Aprovação instantânea, liberação automática.</p>
            </div>
            <div className="pay-clean-rail">
              <div className="pay-clean-brand pay-clean-pix">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor"><path d="M9.954 2.382a3 3 0 0 1 4.092 0l7.572 7.572a3 3 0 0 1 0 4.092l-7.572 7.572a3 3 0 0 1-4.092 0L2.382 14.046a3 3 0 0 1 0-4.092zM12 4.586L4.586 12 12 19.414 19.414 12z"/></svg>
                <span>Pix</span>
              </div>
              <div className="pay-clean-sep"/>
              <div className="pay-clean-brand pay-clean-paypal">
                <span className="pcb-pay">Pay</span><span className="pcb-pal">Pal</span>
              </div>
              <div className="pay-clean-sep"/>
              <div className="pay-clean-brand pay-clean-card">VISA</div>
              <div className="pay-clean-brand pay-clean-card pay-clean-mc">
                <span className="pcm-c1"/><span className="pcm-c2"/>
              </div>
              <div className="pay-clean-brand pay-clean-card pay-clean-amex">AMEX</div>
              <div className="pay-clean-brand pay-clean-card pay-clean-elo">elo</div>
              <div className="pay-clean-brand pay-clean-card pay-clean-hiper">Hiper</div>
            </div>
            <div className="pay-clean-foot">
              <span><Icon name="shield" size={12}/> SSL Criptografado</span>
              <span className="pay-clean-dot">·</span>
              <span><Icon name="bolt" size={12}/> Liberação automática</span>
              <span className="pay-clean-dot">·</span>
              <span><Icon name="check" size={12}/> Estorno garantido</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ===== FAQ SECTION =====
function FaqSection() {
  const [open, setOpen] = useState(0);
  const faqs = [
    {
      icon: '❓',
      q: 'Os Planos VIPs são permanentes?',
      a: 'Todos os VIPs têm validade de 30 dias, exceto os planos VIP PERMANENTE, VIP MILGRAU, MILGRAU SUPER e MILGRAU ULTIMATE, que são permanentes. ♾️'
    },
    {
      icon: '🚗',
      q: 'Os carros são permanentes?',
      a: 'Nos VIPs temporários, metade dos carros têm validade de 30 dias, e a outra metade permanece por 60 dias. Nos VIPs permanentes, os carros ficam para sempre. 🚗🚁'
    },
    {
      icon: '🛡️',
      q: 'Os VIPs permanecem após o WIPE?',
      a: 'Sim, mas apenas os VIPs permanentes citados anteriormente: VIP PERMANENTE, VIP MILGRAU, MILGRAU SUPER e MILGRAU ULTIMATE. ✅'
    },
    {
      icon: '📈',
      q: 'Como funcionam os upgrades?',
      a: 'Se você já possui um VIP no nosso servidor e quer melhorar ele, você consegue desde que o seu VIP ainda esteja no prazo de validade. Você irá pagar somente a diferença do valor entre eles, mas receberá também somente a diferença. Caso tenha alguma dúvida sobre isso, abra um ticket 🎫 que iremos tirar suas dúvidas sobre o processo.'
    },
    {
      icon: '⚠️',
      q: 'O que acontece com meu VIP mensal em caso de WIPE?',
      a: 'Caso seu VIP seja mensal e ocorra um WIPE, você receberá o VIP novamente, desde que ainda esteja no prazo de validade. ✅'
    },
    {
      icon: '🚫',
      q: 'E se eu já estava banido antes do WIPE?',
      a: 'Se der o WIPE e o jogador já estava banido antes, ele só poderá ativar os planos VIP PERMANENTE, VIP MILGRAU, MILGRAU SUPER ou MILGRAU ULTIMATE após pagar o unban. ♾️🚫'
    },
  ];
  return (
    <div className="section bc-section faq-section">
      <div style={{textAlign:'center', marginBottom:'40px'}}>
        <div className="timeline-tag">PERGUNTAS FREQUENTES</div>
        <h2 className="bc-title-big" style={{marginTop:'12px'}}>Tirando suas <span style={{color:'var(--primary)'}}>dúvidas</span></h2>
        <p className="bc-sub">As perguntas mais comuns sobre VIPs, upgrades e o servidor.</p>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span className="faq-icon">{f.icon}</span>
              <span className="faq-question">{f.q}</span>
              <span className="faq-chev"><Icon name="chevron" size={16} style={{transform: open === i ? 'rotate(-90deg)' : 'rotate(90deg)', transition:'transform 200ms'}}/></span>
            </button>
            <div className="faq-a-wrap">
              <div className="faq-a">{f.a}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Featured card (BC-style, image-first 512x512)
function FeaturedCard({ p, idx, onClick, onAdd }) {
  const fmt = window.MGRP_DATA.fmtBRL;
  return (
    <div className="featured-card" onClick={onClick} style={{animationDelay:(idx*80)+'ms'}}>
      <div className="fc-image" style={{
        background: `radial-gradient(ellipse at 50% 30%, ${p.color}cc 0%, #0a0a0a 70%, #050505 100%)`,
        '--p-accent': p.accent
      }}>
        <div className="fc-image-grid"/>
        <div className="fc-image-glow"/>
        <div className="fc-image-icon" style={{color: p.accent}}>
          <Icon name={p.icon} size={120}/>
        </div>
        {p.discount ? <span className="fc-badge fc-badge-discount">-{p.discount}%</span> : null}
        {p.bestseller ? <span className="fc-badge fc-badge-best">MAIS VENDIDO</span> : null}
        {p.popular && !p.bestseller && !p.discount ? <span className="fc-badge fc-badge-pop">POPULAR</span> : null}
      </div>
      <div className="fc-info">
        <div className="fc-pname">{p.name}</div>
        <div className="fc-price-row">
          {p.oldPrice ? <span className="price-old">{fmt(p.oldPrice)}</span> : null}
          {p.discount ? <span className="fc-pct">-{p.discount}% OFF</span> : null}
        </div>
        <div className="fc-price-line">
          <div className="fc-price">{fmt(p.price)}</div>
          <span className="fc-pix-chip"><Icon name="pix" size={12}/></span>
        </div>
        <div className="fc-pix-line">À vista no Pix</div>
        <div className="fc-pay-strip" title="Formas de pagamento">
          <span className="fc-pay-chip pay-pix"><Icon name="pix" size={11}/> Pix</span>
          <span className="fc-pay-chip pay-card">Crédito</span>
          <span className="fc-pay-chip pay-debit">Débito</span>
        </div>
        <button className="btn btn-primary btn-block" onClick={e => { e.stopPropagation(); onClick(); }}>
          <Icon name="bolt" size={14}/> Comprar agora
        </button>
      </div>
    </div>
  );
}

// Cinematic car/neon SVG for hero
function CarSVG() {
  return (
    <svg viewBox="0 0 600 360" style={{width:'100%', height:'100%', display:'block'}} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="bodyG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#1a1d2e"/><stop offset="0.5" stopColor="#2c3145"/><stop offset="1" stopColor="#0a0c14"/>
        </linearGradient>
        <linearGradient id="winG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="#0a0a0a"/><stop offset="1" stopColor="#1f2937"/>
        </linearGradient>
        <radialGradient id="floorG"><stop offset="0" stopColor="#E63946" stopOpacity="0.6"/><stop offset="1" stopColor="#E63946" stopOpacity="0"/></radialGradient>
      </defs>
      {/* neon strips */}
      <line x1="0" y1="100" x2="600" y2="80" stroke="#E63946" strokeWidth="2" opacity="0.7"/>
      <line x1="0" y1="140" x2="600" y2="120" stroke="#FF1F1F" strokeWidth="3" opacity="0.5"/>
      <line x1="0" y1="180" x2="600" y2="170" stroke="#E63946" strokeWidth="1.5" opacity="0.4"/>
      <line x1="0" y1="60" x2="600" y2="50" stroke="#FF3D4D" strokeWidth="1" opacity="0.5"/>
      {/* floor glow */}
      <ellipse cx="300" cy="300" rx="280" ry="30" fill="url(#floorG)"/>
      {/* car shadow */}
      <ellipse cx="300" cy="285" rx="200" ry="14" fill="#000" opacity="0.7"/>
      {/* car body */}
      <path d="M 100 270 Q 130 230 180 220 L 230 200 Q 280 180 340 180 Q 410 180 460 210 L 490 230 Q 510 240 510 260 L 510 280 Q 510 290 500 290 L 110 290 Q 100 290 100 280 Z" fill="url(#bodyG)" stroke="#000" strokeWidth="1"/>
      {/* roof */}
      <path d="M 200 220 Q 230 200 260 195 L 380 195 Q 420 200 440 220 L 430 230 Q 410 215 380 210 L 260 210 Q 230 215 215 230 Z" fill="url(#winG)"/>
      {/* windows */}
      <path d="M 215 230 Q 240 215 270 213 L 370 213 Q 400 215 425 230 L 420 235 L 220 235 Z" fill="#3a4256" opacity="0.6"/>
      {/* wheels */}
      <circle cx="170" cy="285" r="28" fill="#0a0a0a" stroke="#1a1a1a" strokeWidth="2"/>
      <circle cx="170" cy="285" r="14" fill="#2a2a2a"/>
      <circle cx="170" cy="285" r="6" fill="#444"/>
      <circle cx="430" cy="285" r="28" fill="#0a0a0a" stroke="#1a1a1a" strokeWidth="2"/>
      <circle cx="430" cy="285" r="14" fill="#2a2a2a"/>
      <circle cx="430" cy="285" r="6" fill="#444"/>
      {/* headlights */}
      <ellipse cx="490" cy="245" rx="10" ry="5" fill="#fff" opacity="0.9"/>
      <ellipse cx="490" cy="245" rx="20" ry="8" fill="#fff" opacity="0.2"/>
      {/* highlight on body */}
      <path d="M 130 250 Q 250 240 380 245 Q 450 250 490 260" stroke="#fff" strokeWidth="0.5" opacity="0.3" fill="none"/>
    </svg>
  );
}

// ===== CATEGORY (BC-STYLE) =====
function CategoryPage({ slug, onNav, onAdd, products }) {
  const cat = window.MGRP_DATA.CATEGORIES.find(c => c.slug === slug);
  let list = products.filter(p => p.catSlug === slug);
  if (slug === 'lancamentos') list = products;
  if (slug === 'promocoes') list = products.filter(p => p.discount || p.popular);

  return (
    <div className="page cat-page-bc">
      <div className="cat-bc-bg"/>
      <div className="container" style={{position:'relative', zIndex: 1}}>
        <div className="cat-bc-header">
          <button className="cat-bc-back" onClick={() => onNav('home')} title="Voltar">
            <Icon name="chevron" size={20} style={{transform:'rotate(180deg)'}}/>
          </button>
          <h1 className="cat-bc-title">{cat?.label || 'Categoria'}</h1>
        </div>
        {list.length === 0 ? (
          <div style={{textAlign:'center', padding:'80px 20px', color:'var(--text-muted)'}}>
            <Icon name="box" size={48}/>
            <h3 style={{margin:'16px 0 8px', color:'var(--text)'}}>Nenhum produto nesta categoria ainda</h3>
            <p>Volte em breve, novidades estão a caminho.</p>
          </div>
        ) : (
          <div className="featured-grid cat-bc-grid">
            {list.map((p, i) => (
              <FeaturedCard key={p.id} p={p} idx={i}
                onClick={() => onNav('product-' + p.id)}
                onAdd={onAdd}/>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ===== SEARCH RESULTS =====
function SearchPage({ query, onNav, onAdd, products }) {
  const q = (query || '').toLowerCase().trim();
  const list = q
    ? products.filter(p =>
        p.name.toLowerCase().includes(q) ||
        (p.subtitle || '').toLowerCase().includes(q) ||
        (p.catSlug || '').toLowerCase().includes(q)
      )
    : [];

  return (
    <div className="page cat-page-bc">
      <div className="cat-bc-bg"/>
      <div className="container" style={{position:'relative', zIndex: 1}}>
        <div className="cat-bc-header">
          <button className="cat-bc-back" onClick={() => onNav('home')} title="Voltar">
            <Icon name="chevron" size={20} style={{transform:'rotate(180deg)'}}/>
          </button>
          <h1 className="cat-bc-title">
            {q ? <>Resultados para <span style={{color:'var(--primary)'}}>"{query}"</span></> : 'Busca'}
          </h1>
        </div>
        {!q ? (
          <div style={{textAlign:'center', padding:'80px 20px', color:'var(--text-muted)'}}>
            <Icon name="search" size={48}/>
            <h3 style={{margin:'16px 0 8px', color:'var(--text)'}}>Digite algo para começar</h3>
            <p>Procure por VIP, mansão, dinheiro, carros, motos…</p>
          </div>
        ) : list.length === 0 ? (
          <div style={{textAlign:'center', padding:'80px 20px', color:'var(--text-muted)'}}>
            <Icon name="box" size={48}/>
            <h3 style={{margin:'16px 0 8px', color:'var(--text)'}}>Nenhum produto encontrado</h3>
            <p>Tente outra palavra ou navegue pelas categorias.</p>
          </div>
        ) : (
          <>
            <div style={{margin:'0 0 16px', color:'var(--text-muted)', fontSize:13}}>
              {list.length} {list.length === 1 ? 'resultado' : 'resultados'}
            </div>
            <div className="featured-grid cat-bc-grid">
              {list.map((p, i) => (
                <FeaturedCard key={p.id} p={p} idx={i}
                  onClick={() => onNav('product-' + p.id)}
                  onAdd={onAdd}/>
              ))}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ===== TERMS & CONDITIONS =====
function TermsPage({ onNav }) {
  const sections = window.MGRP_DATA.TERMS;
  return (
    <div className="page terms-page">
      <div className="terms-bg"/>
      <div className="container" style={{position:'relative', zIndex:1}}>
        <div className="terms-head">
          <div className="terms-eyebrow">MIL GRAU ROLEPLAY</div>
          <h1>Termos e Condições</h1>
        </div>
        <div className="terms-body">
          <p className="terms-intro">
            <b>Termos e Condições de Compra</b><br/><br/>
            Bem-vindo à plataforma MIL GRAU Roleplay. Ao realizar qualquer compra em nossa loja virtual, o Usuário declara ser maior de idade (ou estar devidamente representado/assistido por seu responsável legal) e ter plena capacidade para os atos civis. Além disso, <b>ao efetuar uma compra o Usuário concorda integralmente com estes Termos e com todas as políticas aqui mencionadas.</b> Caso não concorde com alguma condição, o Usuário não deverá finalizar a compra.
          </p>
          <p className="terms-intro">
            Recomendamos a leitura atenta deste documento e a certeza de haver compreendido todos os pontos antes de prosseguir. Estes Termos constituem um acordo legal entre o Usuário e a MIL GRAU Roleplay, e regem a compra de benefícios virtuais oferecidos em nosso servidor. A seguir, apresentamos as condições de uso e compra:
          </p>
          {sections.map((sec, i) => (
            <div key={i} className="terms-section">
              <h2>{sec.title}</h2>
              {sec.items.map((it, j) => (
                <p key={j} dangerouslySetInnerHTML={{__html: it}}/>
              ))}
            </div>
          ))}
          <p className="terms-foot">
            Ao prosseguir com qualquer compra em nossa loja, o Usuário declara que leu, entendeu e concordou integralmente com todos os termos e condições acima descritos. Em caso de dúvidas, estamos à disposição nos canais de suporte para esclarecimentos. A utilização contínua da plataforma e de seus serviços representa a aceitação tácita destes Termos de Compra e de eventuais atualizações. Agradecemos por apoiar o servidor MIL GRAU Roleplay e desejamos a você um ótimo jogo!
          </p>
        </div>
      </div>
    </div>
  );
}

// ===== PRODUCT DETAIL =====
function ProductPage({ id, onNav, onAdd, onBuyNow, products }) {
  const p = products.find(x => x.id === id);
  if (!p) return <div className="page"><div className="container" style={{padding:'80px 0'}}>Produto não encontrado.</div></div>;
  const related = products.filter(x => x.catSlug === p.catSlug && x.id !== p.id).slice(0, 4);

  return (
    <div className="page">
      <div className="container">
        <div className="breadcrumb">
          <a onClick={() => onNav('home')}>Início</a>
          <span className="sep">/</span>
          <a onClick={() => onNav('category-' + p.catSlug)}>{p.cat}</a>
          <span className="sep">/</span>
          <span className="current">{p.name}</span>
        </div>
        <div className="product-layout">
          <div>
            <div className="product-gallery">
              <ProductThumb p={p} big/>
              {p.discount && <div className="product-badges" style={{top:20, left:20}}>
                <span className="product-badge badge-discount">-{p.discount}% OFF</span>
              </div>}
              {p.bestseller && <div className="bestseller">MAIS VENDIDO</div>}
            </div>
            <div className="product-gallery-thumbs">
              {((p.images && p.images.length) ? p.images : [null]).map((_, i) => (
                <div key={i} className={`gallery-thumb ${i === 0 ? 'active' : ''}`} style={{color: p.accent}}>
                  <Icon name={p.icon} size={28}/>
                </div>
              ))}
            </div>
          </div>
          <div className="product-detail">
            <div className="product-cat">{p.cat}</div>
            <h1>{p.name}</h1>
            <div className="product-meta-row">
              <span className="meta-pill stock">● {p.stock} em estoque</span>
              {p.discount && <span className="meta-pill discount">{p.discount}% OFF</span>}
              {p.bestseller && <span className="meta-pill" style={{background:'rgba(212,175,55,0.15)', color:'var(--gold)', border:'1px solid rgba(212,175,55,0.3)'}}>MAIS VENDIDO</span>}
              {p.popular && !p.bestseller && <span className="meta-pill" style={{background:'rgba(230,57,70,0.12)', color:'var(--primary)', border:'1px solid rgba(230,57,70,0.3)'}}>POPULAR</span>}
            </div>
            <div className="price-big">
              {p.oldPrice && <span className="price-old">De {window.MGRP_DATA.fmtBRL(p.oldPrice)}</span>}
              <span className="price-now">{window.MGRP_DATA.fmtBRL(p.price)}</span>
              <span className="price-pix"><Icon name="pix" size={14}/> <b>À vista no Pix</b> · Aprovação imediata</span>
            </div>
            <div className="trust-grid">
              <div className="trust-card">
                <Icon name="bolt" size={20}/>
                <div className="ttl">Entrega imediata</div>
                <div className="sub">Liberado na hora após confirmação</div>
              </div>
              <div className="trust-card">
                <Icon name="shield" size={20}/>
                <div className="ttl">Segurança total</div>
                <div className="sub">Pagamento criptografado SSL</div>
              </div>
              <div className="trust-card">
                <Icon name="headset" size={20}/>
                <div className="ttl">Suporte 24/7</div>
                <div className="sub">Time pronto para te ajudar</div>
              </div>
            </div>
            <div className="product-actions-big">
              <button className="btn btn-primary btn-lg" style={{flex:1}} onClick={() => onBuyNow(p)}>
                <Icon name="bolt" size={16}/> Comprar agora
              </button>
              <button className="btn btn-outline btn-lg" style={{flex:1}} onClick={() => onAdd(p)}>
                <Icon name="cart" size={16}/> Adicionar ao carrinho
              </button>
            </div>
          </div>
        </div>
        <div className="product-desc">
          <h3>📦 Descrição do produto</h3>
          <p>{p.desc}</p>
          <p style={{color:'var(--text)'}}><b>O que está incluso:</b></p>
          <ul>
            {p.features.map((f, i) => <li key={i}>{f}</li>)}
          </ul>
          <p style={{marginTop:'16px'}}>⚡ <b style={{color:'var(--text)'}}>Entrega imediata:</b> assim que o pagamento for confirmado, o item será liberado automaticamente na sua conta da cidade. Não esqueça de informar seu ID corretamente no checkout.</p>
          <p>🛡️ <b style={{color:'var(--text)'}}>Garantia:</b> em caso de qualquer problema, nossa equipe de suporte está disponível 24/7 no Discord oficial.</p>
        </div>
        {related.length > 0 && (
          <div className="section">
            <div className="section-head">
              <div>
                <div className="label">VOCÊ TAMBÉM PODE GOSTAR</div>
                <h2>Produtos relacionados</h2>
              </div>
            </div>
            <div className="product-grid">
              {related.map((rp, i) => (
                <ProductCard key={rp.id} p={rp} idx={i}
                  onClick={() => onNav('product-' + rp.id)}
                  onAdd={onAdd}/>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.HomePage = HomePage;
window.CategoryPage = CategoryPage;
window.SearchPage = SearchPage;
window.ProductPage = ProductPage;
window.TermsPage = TermsPage;