// Burger Summit 2026 — FAQ + Patrocinadores + Faça parte
const { useState: useStateF } = React;

function Faq() {
  const items = [
    ['O que é o Burger Summit 2026?', 'É o maior movimento de hamburgueiros do Brasil — dois dias de imersão com os gigantes do setor, feira de negócios e networking. Vai muito além da chapa: trabalha mentalidade, gestão, marca e crescimento real do seu negócio.'],
    ['Para quem é o evento?', 'Para donos e gestores de hamburguerias, chefs, fornecedores e quem quer empreender no segmento. Se você vive da brasa, seu lugar é aqui.'],
    ['Vou aprender técnicas de preparo no evento?', 'Tem conteúdo prático, mas o foco do Summit é o negócio por trás do balcão: gestão, marca, vendas, operação e visão de futuro — o que faz a sua hamburgueria escalar.'],
    ['Quando e onde acontece?', '17 e 18 de agosto de 2026, das 07h às 20h, no Centro de Convenções de Pernambuco, em Recife/PE.'],
    ['Os ingressos são limitados?', 'Sim. As vagas são limitadas por lote e os valores sobem a cada lote. Quanto antes você garantir, melhor o preço e a sua posição na Arena.'],
    ['Quais tipos de ingresso estão disponíveis?', 'Pista (inteira), VIP (com kit exclusivo da Nação) e Camarote Premium. Também temos condições especiais para grupos a partir de 3 ingressos.'],
    ['O que está incluso no ingresso VIP?', 'Entrada preferencial, espaço VIP com assentos privilegiados, acesso ao networking dos gigantes e o Kit VIP exclusivo: pulseira, boné, camiseta, ecobag, caderneta, caneta e stickers da Nação.'],
    ['É só conteúdo ou também tem networking?', 'Os dois. Boa parte do valor do Summit está nas conexões: você vai trocar com os maiores nomes e com centenas de outros donos de hamburgueria do país inteiro.'],
    ['Posso parcelar?', 'Sim, em até 12x no cartão. Consulte as condições de cada lote no momento da compra.'],
  ];
  const [open, setOpen] = useStateF(0);
  return (
    <section className="sec surface-black" id="faq">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow">Sua dúvida pode estar aqui</span>
            <h2 className="sec-title" style={{color:'#fff'}}>Perguntas <span className="accent">frequentes</span></h2>
          </div>
        </div>
        <div className="faq-list">
          {items.map(([q, a], i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={()=>setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="ix">+</span>
              </button>
              <div className="faq-a" style={{maxHeight: open === i ? '360px' : '0'}}>
                <div className="faq-a-in">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Sponsors({ onBuy }) {
  const logos = [
    { nm: 'Quarteiro', src: 'uploads/quarteiro-logo.png' },
    { nm: 'Quantum', src: 'uploads/quatum-logo.png' },
    { nm: 'FarmFrites', src: 'uploads/farmfrites-logo.png' },
  ];

  // Detecta se é mobile para aplicar o flex-direction correto via inline style
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;

  return (
    <section className="sec surface-hot dot" id="patrocinadores">
      <div className="wrap">
        <div className="sec-head" style={{alignItems:'flex-start'}}>
          <div>
            <span className="eyebrow" style={{color:'#fff'}}>Já confiam na Nação</span>
            <h2 className="sec-title" style={{color:'#fff'}}>Nossos <span className="accent-gold">patrocinadores</span></h2>
          </div>
          <p className="sec-sub" style={{color:'#fff'}}>As maiores marcas do setor apoiam o Burger Summit 2026. Sua marca também pode entrar em campo.</p>
        </div>
        
        {/* Adicionado o style dinâmico aqui para empilhar no mobile */}
        <div 
          className="spon-grid" 
          style={isMobile ? { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' } : {}}
        >
          {logos.map((l) => (
            <div className="spon" key={l.nm}>
              <img src={l.src} alt={l.nm} style={{maxWidth:'100%',maxHeight:'120px',width:'auto',height:'auto',objectFit:'contain'}} />
            </div>
          ))}
        </div>
        
        <div className="faca">
          <div className="faca-txt">
            <p style={{color:'#fff',opacity:.95,marginBottom:'10px'}}>O maior estádio do hambúrguer do Brasil espera por você.</p>
            <span className="big">Faça parte!</span>
          </div>
          <a className="bs-btn bs-btn-dark bs-btn-lg" onClick={onBuy}>Garantir meu ingresso</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Faq, Sponsors });