// Lidera Agro — Participantes · sections A
const { useEffect, useRef, useState } = React;

// ─── Floating leaves with parallax ───────────────────────────────
function LeavesP({ scrollY }) {
  const leaves = [
    { top: '8%', left: '4%', size: 90, rot: -20, speed: 0.12 },
    { top: '14%', right: '6%', size: 70, rot: 30, speed: 0.18 },
    { top: '36%', left: '8%', size: 60, rot: 10, speed: 0.08 },
    { top: '62%', right: '4%', size: 100, rot: -10, speed: 0.22 },
    { top: '88%', left: '12%', size: 80, rot: 25, speed: 0.14 },
  ];
  return (
    <>
      {leaves.map((l, i) => (
        <div
          key={i}
          className="leaf"
          style={{
            top: l.top, left: l.left, right: l.right,
            transform: `translateY(${-scrollY * l.speed}px) rotate(${l.rot}deg)`,
          }}
        >
          <LEAF_SVG_P size={l.size} rotate={0} />
        </div>
      ))}
    </>
  );
}

// ─── TopBar ──────────────────────────────────────────────────────
function TopBarP({ scrolled }) {
  return (
    <div className={`top-bar ${scrolled ? 'scrolled' : ''}`}>
      <div className="brand">
        <div className="brand-logo" role="img" aria-label="Lidera Agro"></div>
      </div>
      <div className="right">
        <a href="#evento">Evento</a>
        <a href="#mentores">Mentores</a>
        <a href="#programa">Programação</a>
        <a href="#ingressos">Ingressos</a>
        <a href="#ingressos" className="btn" style={{ padding: '8px 16px', fontSize: 13 }}>Garantir minha vaga →</a>
      </div>
    </div>
  );
}

// ─── Progress rail ───────────────────────────────────────────────
function ProgressRailP({ activeSection, sections }) {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <div className="progress-rail">
      {sections.map((s) => (
        <button
          key={s.id}
          className={`dot ${activeSection === s.id ? 'active' : ''}`}
          onClick={() => scrollTo(s.id)}
          title={s.label}
        >
          <span className="label">{s.label}</span>
        </button>
      ))}
    </div>
  );
}

// ─── Countdown ───────────────────────────────────────────────────
function Countdown() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, EVENT_DATE.getTime() - now.getTime());
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
  const mins = Math.floor((diff / (1000 * 60)) % 60);
  const secs = Math.floor((diff / 1000) % 60);
  const pad = (n) => String(n).padStart(2, '0');
  return (
    <div className="countdown">
      <div className="cd-block">
        <div className="cd-v">{days}</div>
        <div className="cd-l">dias</div>
      </div>
      <div className="cd-sep">:</div>
      <div className="cd-block">
        <div className="cd-v">{pad(hours)}</div>
        <div className="cd-l">horas</div>
      </div>
      <div className="cd-sep">:</div>
      <div className="cd-block">
        <div className="cd-v">{pad(mins)}</div>
        <div className="cd-l">min</div>
      </div>
      <div className="cd-sep">:</div>
      <div className="cd-block">
        <div className="cd-v">{pad(secs)}</div>
        <div className="cd-l">seg</div>
      </div>
    </div>
  );
}

// ─── Hero ────────────────────────────────────────────────────────
function HeroP({ heroVariant }) {
  return (
    <section id="hero" className="sec bg-gradient kv-stripes" data-screen-label="01 Hero">
      <div className="kv-lines"></div>

      <div className="hero-grid" style={{ position: 'relative', zIndex: 2 }}>
        <div>
          <span className="eyebrow reveal in">Inscrições abertas · 1ª edição · 30 de julho 2026</span>
          <h1 className="hero-title h-display reveal in d-1" style={{ marginTop: 20 }}>
            O novo<br />agro chegou
          </h1>
          <p className="hero-sub reveal in d-2">
            Inteligência artificial,<br />vendas e valor para<br />o cliente.
          </p>

          <div className="hero-meta reveal in d-3">
            <div>
              <div className="k">Data</div>
              <div className="v">30 de Julho</div>
            </div>
            <div>
              <div className="k">Local</div>
              <div className="v">Varginha · MG</div>
            </div>
            <div>
              <div className="k">Duração</div>
              <div className="v">1 dia · 8h–18h</div>
            </div>
          </div>

          <div className="hero-cta-row reveal in d-3">
            <a href="#ingressos" className="btn">Garantir minha vaga →</a>
            <a href="#programa" className="btn ghost">Ver programação</a>
          </div>

          <div className="reveal in d-3" style={{ marginTop: 36 }}>
            <div className="cd-label">Faltam para o evento</div>
            <Countdown />
          </div>
        </div>

        {heroVariant !== 'minimal' && (
          <div className="mosaic reveal in d-2">
            <MosaicP variant={heroVariant} />
          </div>
        )}
      </div>

      <div className="scroll-cue">
        <span>Role para começar</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

function MosaicP({ variant }) {
  const tiles = [
    {
      top: '0%', left: '12%', width: '52%', height: '40%',
      img: 'assets/hero-1.png',
      alt: 'Produtor com tablet',
    },
    {
      top: '32%', left: '0%', width: '60%', height: '36%',
      img: 'assets/hero-2.png',
      alt: 'Aperto de mãos no campo',
    },
    {
      top: '62%', left: '24%', width: '60%', height: '36%',
      img: 'assets/hero-3.png',
      alt: 'Terra e tecnologia',
    },
  ];
  return (
    <>
      {tiles.map((t, i) => (
        <div
          key={i}
          className="tile"
          style={{
            top: t.top, left: t.left, width: t.width, height: t.height,
            clipPath: i === 0
              ? 'polygon(20% 0, 100% 8%, 92% 100%, 0 88%)'
              : i === 1
              ? 'polygon(0 12%, 88% 0, 100% 92%, 12% 100%)'
              : 'polygon(8% 0, 100% 16%, 92% 100%, 0 80%)',
          }}
        >
          <img src={t.img} alt={t.alt} />
        </div>
      ))}
      <div style={{ position: 'absolute', top: '10%', right: '-8%' }}>
        <LEAF_SVG_P size={120} rotate={20} />
      </div>
      <div style={{ position: 'absolute', bottom: '-6%', left: '-4%' }}>
        <LEAF_SVG_P size={90} rotate={-25} />
      </div>
    </>
  );
}

// ─── Manifesto ───────────────────────────────────────────────────
function ManifestoP() {
  return (
    <section id="manifesto" className="sec bg-cream" data-screen-label="02 Manifesto">
      <div className="manifesto">
        <span className="eyebrow">O contexto</span>
        <h2 style={{ marginTop: 16 }}>
          O agronegócio não está<br />
          apenas mudando. Ele <em>já mudou</em>.
        </h2>
        <p>
          A liderança no campo agora exige uma nova caixa de ferramentas: IA, visão estratégica
          de mercado e foco total na experiência do produtor. No dia 30 de julho, a Cidade
          Universitária recebe a primeira edição do <strong>Lidera Agro</strong> — um dia inteiro
          de imersão para conectar você ao que há de mais avançado no agronegócio brasileiro.
        </p>
        <div className="stats">
          <div className="stat">
            <div className="v">4</div>
            <div className="l">mentores referência nacional do agro</div>
          </div>
          <div className="stat">
            <div className="v">10h</div>
            <div className="l">de imersão presencial, das 8h às 18h</div>
          </div>
          <div className="stat">
            <div className="v">1ª</div>
            <div className="l">edição em Varginha · vagas limitadas</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Evento ──────────────────────────────────────────────────────
function EventoP() {
  return (
    <section id="evento" className="sec bg-gradient kv-stripes" data-screen-label="03 Evento">
      <div className="kv-lines"></div>
      <div className="event-section" style={{ position: 'relative', zIndex: 2 }}>
        <div className="event-side">
          <span className="eyebrow">Quando · Onde</span>
          <h3 style={{ marginTop: 16 }}>
            Um dia inteiro de imersão.<br />Conteúdo, conexão e ação.
          </h3>
          <p>
            Conteúdo estratégico em 4 painéis, intervalos curados para networking com
            líderes da região, realizado pelo Lidera Hub em parceria com a Terras Gerais
            Educação.
          </p>
          <div className="badges">
            <span className="badge">Auditório premium</span>
            <span className="badge">Welcome coffee</span>
            <span className="badge">Almoço incluso</span>
            <span className="badge">Coffee break</span>
            <span className="badge">Certificado</span>
          </div>
        </div>

        <div className="event-card">
          <div className="date">
            30
            <small>de Julho · 2026 · quinta-feira</small>
          </div>
          <div className="meta">
            <div className="meta-row">
              <div className="k">Horário</div>
              <div className="v">A partir das 8h · até 18h</div>
            </div>
            <div className="meta-row">
              <div className="k">Local</div>
              <div className="v">Cidade Universitária — Grupo Unis</div>
            </div>
            <div className="meta-row">
              <div className="k">Cidade</div>
              <div className="v">Varginha · Minas Gerais</div>
            </div>
            <div className="meta-row">
              <div className="k">Realização</div>
              <div className="v">Lidera Hub + Terras Gerais Educação</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Por que participar (5 razões) ───────────────────────────────
function PorQueP() {
  return (
    <section id="porque" className="sec bg-cream" data-screen-label="04 Por que participar">
      <div style={{ maxWidth: 1500, margin: '0 auto', width: '100%' }}>
        <span className="eyebrow">Por que estar lá</span>
        <h2 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(40px, 6vw, 80px)', color: 'var(--green-dark)', maxWidth: '22ch', lineHeight: 1.05 }}>
          5 motivos para você<br />
          não ficar de fora.
        </h2>
        <p style={{ marginTop: 24, fontSize: 18, opacity: .8, maxWidth: '60ch' }}>
          Se você quer estar entre o 1% que domina as novas tecnologias e estratégias
          do mercado, a resposta é simples.
        </p>
        <div className="razoes-grid">
          {RAZOES.map((it, i) => (
            <div className="why-cell" key={i}>
              <div>
                <div className="why-num">{it.n}</div>
                <div className="why-h">{it.h}</div>
              </div>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Mentores (palestrantes) ─────────────────────────────────────
function MentoresP() {
  return (
    <section id="mentores" className="sec bg-gradient kv-stripes" data-screen-label="05 Mentores">
      <div className="kv-lines"></div>
      <div style={{ maxWidth: 1500, margin: '0 auto', width: '100%', position: 'relative', zIndex: 2 }}>
        <span className="eyebrow">Quem fala no palco</span>
        <h2 className="h-display" style={{ marginTop: 16, fontSize: 'clamp(40px, 6vw, 80px)', color: 'var(--green-dark)', maxWidth: '22ch', lineHeight: 1.05 }}>
          Conheça seus mentores<br />
          no Lidera Agro.
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, opacity: .8, maxWidth: '60ch' }}>
          Para liderar essa jornada, selecionamos quatro das maiores referências do mercado.
        </p>
        <div className="speakers-row">
          {SPEAKERS_P.map((s, i) => (
            <div className="speaker" key={i}>
              <div className="portrait">
                <img src={s.img} alt={s.name} />
              </div>
              <h4>{s.name}</h4>
              <div className="role">{s.role}</div>
              <div className="topic">{s.topic}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  LeavesP, TopBarP, ProgressRailP, HeroP, ManifestoP, EventoP, PorQueP, MentoresP, Countdown,
});