// Lidera Agro — Participantes · sections B
const { useState: useStateB } = React;

// ─── Programação ─────────────────────────────────────────────────
function ProgramaP() {
  const kindLabel = {
    talk: 'Painel',
    break: 'Intervalo',
    opening: 'Abertura',
    dynamic: 'Dinâmica',
    panel: 'Encerramento',
    closing: 'Encerramento'
  };
  return (
    <section id="programa" className="sec bg-cream" data-screen-label="06 Programação">
      <div style={{ maxWidth: 1300, margin: '0 auto', width: '100%' }}>
        <span className="eyebrow">Como será o dia</span>
        <h2 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(40px, 6vw, 80px)', color: 'var(--green-dark)', maxWidth: '22ch', lineHeight: 1.05 }}>
          Programação completa.<br />
          <span style={{ fontSize: '.6em', opacity: .7 }}>30/07 · quinta-feira</span>
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, opacity: .8, maxWidth: '58ch' }}>
          Conteúdo estratégico das 8h às 18h, com intervalos pensados
          para troca real entre participantes.
        </p>

        <div className="agenda">
          {AGENDA.map((it, i) =>
          <div key={i} className={`agenda-row kind-${it.kind}`}>
              <div className="ag-time">{it.time}</div>
              <div className="ag-marker">
                <div className="ag-dot"></div>
                {i < AGENDA.length - 1 && <div className="ag-line"></div>}
              </div>
              <div className="ag-content">
                <div className="ag-kind">{kindLabel[it.kind] || '·'}</div>
                <div className="ag-title">{it.title}</div>
                {it.speaker && <div className="ag-speaker">com {it.speaker}</div>}
                {it.desc && <div className="ag-desc">{it.desc}</div>}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─── É para mim? (audience checklist) ────────────────────────────
function ParaMimP() {
  return (
    <section id="paramim" className="sec bg-gradient kv-stripes" data-screen-label="07 É para mim">
      <div className="kv-lines"></div>
      <div style={{ maxWidth: 1300, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
        <span className="eyebrow">É para mim?</span>
        <h2 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(40px, 6vw, 80px)', color: 'var(--green-dark)', maxWidth: '22ch', lineHeight: 1.05 }}>
          O Lidera Agro<br />
          é para você?
        </h2>
        <p style={{ marginTop: 24, fontSize: 18, opacity: .8, maxWidth: '60ch' }}>
          O setor não espera. Se você se reconhece em qualquer um destes perfis,
          a resposta é <strong>sim</strong>.
        </p>

        <div className="checklist">
          {AUDIENCIA.map((it, i) =>
          <div className="check-row" key={i}>
              <div className="check-icon">
                <svg viewBox="0 0 24 24" width="20" height="20">
                  <path d="M4 12 L10 18 L20 6" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div>
                <div className="check-title">{it.t}</div>
                <div className="check-desc">{it.d}</div>
              </div>
            </div>
          )}
        </div>

        <div className="commitment">
          <div className="commitment-mark">★</div>
          <div>
            <div className="commitment-k">Nosso compromisso</div>
            <div className="commitment-v">
              Entregar conhecimento de alto nível, com linguagem clara e aplicação imediata.
              O novo agro chegou — e você é o protagonista dessa evolução.
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Ingressos ───────────────────────────────────────────────────
function IngressosSection({ stateOverride = 'auto' }) {
  const status = getLoteStatus(stateOverride);
  const liveStatus = { lote1: status.lote1, lote2: status.lote2 };

  const tierLabel = (id, s) => {
    if (s === 'open') return `${id === 'lote1' ? 'LOTE 1' : 'LOTE 2'} · ABERTO`;
    if (s === 'upcoming') return `${id === 'lote1' ? 'LOTE 1' : 'LOTE 2'} · NÃO INICIADO`;
    if (s === 'closed') return `${id === 'lote1' ? 'LOTE 1' : 'LOTE 2'} · ENCERRADO`;
    return '';
  };

  const ctaLabel = (id, s) => {
    if (s === 'open') return `Comprar ${id === 'lote1' ? 'Lote 1' : 'Lote 2'} →`;
    if (s === 'upcoming' && id === 'lote2') return 'Disponível após esgotar o Lote 1';
    if (s === 'closed') return 'Lote encerrado';
    return '';
  };

  const allClosed = liveStatus.lote1 === 'closed' && liveStatus.lote2 === 'closed';

  return (
    <section id="ingressos" className="sec bg-cream" data-screen-label="08 Ingressos">
      <div className="cotas-intro" style={{ position: 'relative', zIndex: 2 }}>
        <span className="eyebrow">Garanta sua vaga</span>
        <h2 style={{ marginTop: 16 }}>
          {allClosed ? <>Inscrições<br />encerradas.</> :
          liveStatus.lote2 === 'open' ?
          <>Lote 1 esgotado.<br />Lote 2 aberto.</> :
          <>Vagas limitadas.<br />Lote 1 aberto.</>
          }
        </h2>
        <p>
          {allClosed ?
          'As inscrições para o Lidera Agro 2026 foram encerradas. Cadastre-se para ser avisado da próxima edição.' :
          'Quanto antes você garante seu lugar, melhor o preço. Vagas limitadas para preservar a qualidade do networking — uma vez esgotado o Lote 1, o Lote 2 é liberado automaticamente.'}
        </p>
      </div>

      <div className="ingressos-grid" style={{ position: 'relative', zIndex: 2 }}>
        {INGRESSOS.map((c) => {
          const s = liveStatus[c.id];
          const klass = s === 'open' ? 'open' : s === 'closed' ? 'closed' : 'upcoming';
          return (
            <div className={`ingresso ${klass}`} key={c.id}>
              {s === 'open' && c.ribbon && <div className="ribbon">{c.ribbon}</div>}
              {s === 'closed' && <div className="ribbon ribbon-closed">Encerrado</div>}
              <div className="tier">
                <span className={`status-dot ${s}`}></span>
                {tierLabel(c.id, s)}
              </div>
              <div className="name">{c.name}</div>

              <div className="price-wrap">
                <div className="price">{c.price}</div>
                {c.priceTax && <div className="price-tax">{c.priceTax}</div>}
                <div className="installment">{c.installment}</div>
              </div>

              <div className="deadline">{c.deadline}</div>

              <ul className="benefits">
                {c.benefits.map((b, i) =>
                <li key={i} className={b.exclusive ? 'exclusive' : ''}>{b.text}</li>
                )}
              </ul>

              {s === 'open' ?
              <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="ingresso-cta">
                  {ctaLabel(c.id, s)}
                </a> :

              <div className={`ingresso-cta disabled ${s === 'closed' ? 'closed' : ''}`}>
                  {ctaLabel(c.id, s)}
                </div>
              }
            </div>);

        })}
      </div>

      <p style={{ marginTop: 40, fontSize: 13, opacity: .55, fontStyle: 'italic', textAlign: 'center', maxWidth: 800, marginLeft: 'auto', marginRight: 'auto' }}>
        * Pagamento via cartão de crédito (em até 12x), Pix ou boleto. Ingressos nominais.
        Política de cancelamento conforme Art. 49 do CDC — reembolso integral em até 7 dias da compra.
      </p>
    </section>);

}

// ─── FAQ ─────────────────────────────────────────────────────────
function FaqP() {
  const [open, setOpen] = useStateB(0);
  return (
    <section id="faq" className="sec bg-gradient kv-stripes" data-screen-label="09 FAQ">
      <div className="kv-lines"></div>
      <div className="faq-wrap" style={{ position: 'relative', zIndex: 2 }}>
        <span className="eyebrow">Dúvidas frequentes</span>
        <h2 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(40px, 6vw, 72px)', color: 'var(--green-dark)', maxWidth: '22ch', lineHeight: 1.05 }}>
          As perguntas que<br />
          todo mundo faz.
        </h2>

        <div className="faq-list">
          {FAQ.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className="faq-toggle">{isOpen ? '−' : '+'}</span>
                </button>
                {isOpen && <div className="faq-a">{it.a}</div>}
              </div>);

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

}

// ─── CTA final ───────────────────────────────────────────────────
function CTAFinalP({ stateOverride = 'auto' }) {
  const status = getLoteStatus(stateOverride);
  const activeId = status.lote1 === 'open' ? 'lote1' : status.lote2 === 'open' ? 'lote2' : null;
  const active = activeId ? INGRESSOS.find((i) => i.id === activeId) : null;
  return (
    <section id="contato" className="sec bg-gradient kv-stripes" data-screen-label="10 CTA final">
      <div className="kv-lines"></div>
      <div className="cta" style={{ position: 'relative', zIndex: 2 }}>
        <span className="eyebrow">Última chamada</span>
        <h2 style={{ marginTop: 24 }}>
          O novo agro <em>já começou</em>.<br />
          E você?
        </h2>
        <p>
          {active ?
          `Vagas limitadas para garantir a qualidade do networking. Garanta seu lugar agora — antes de o ${activeId === 'lote1' ? 'Lote 1' : 'Lote 2'} esgotar.` :
          'As inscrições da 1ª edição foram encerradas. Cadastre seu e-mail abaixo para ser o primeiro a saber da próxima edição.'}
        </p>
        <div className="cta-buttons">
          {active ?
          <a href={SYMPLA_URL} target="_blank" rel="noopener noreferrer" className="btn">Garantir minha vaga — {active.price} →</a> :

          <a href="#contato" className="btn">Quero ser avisado da próxima edição →</a>
          }
          <a href="#programa" className="btn ghost">Ver programação</a>
        </div>

        <div className="contact-grid">
          <div className="contact">
            <div className="k">Dúvidas</div>
            <div className="v"><a href="mailto:fd@lideralab.com.br" style={{ color: 'inherit', textDecoration: 'none' }}>fd@lideralab.com.br</a></div>
            <div className="sub">Resposta em até 24h</div>
          </div>
          <div className="contact">
            <div className="k">WhatsApp</div>
            <div className="v">(35) 9 9989-4844</div>
            <div className="sub">Atendimento direto · seg–sex</div>
          </div>
          <div className="contact">
            <div className="k">Data do evento</div>
            <div className="v">30 de julho · 2026</div>
            <div className="sub">Varginha · MG · 8h às 18h</div>
          </div>
        </div>
      </div>
    </section>);

}

// ─── Footer ──────────────────────────────────────────────────────
function FooterP() {
  return (
    <footer className="foot">
      <div className="foot-row">
        <div className="brands" style={{ color: '#fff' }}>
          <span className="lockup">
            <img src="assets/logo-terras-gerais-full.png" alt="Terras Gerais Educação" className="invert" style={{ height: 48, width: 'auto' }} />
          </span>
          <span style={{ color: '#fff', opacity: .5, fontSize: 20 }}>+</span>
          <span className="lockup">
            <img src="assets/logo-lidera-hub.png" alt="Lidera Hub" className="invert" style={{ height: 36, width: 'auto' }} />
          </span>
        </div>
        <div style={{ color: '#fff', opacity: .65, textAlign: 'right' }}>
          <div>Realização · Lidera Agro · 30 de julho 2026 · Varginha — MG</div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  ProgramaP, ParaMimP, IngressosSection, FaqP, CTAFinalP, FooterP
});