/* ============================================================
   Bootcamp ESUP — Seções principais
   ============================================================ */

function Hero({ onApply }) {
  return (
    <header className="hero" id="topo" data-screen-label="Hero">
      <div className="hero__bg" aria-hidden="true">
        <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0 }}>
          <defs>
            <radialGradient id="hg1" cx="80%" cy="12%" r="55%">
              <stop offset="0%" stopColor="rgba(22,169,201,.13)" />
              <stop offset="100%" stopColor="rgba(22,169,201,0)" />
            </radialGradient>
            <radialGradient id="hg2" cx="8%" cy="90%" r="50%">
              <stop offset="0%" stopColor="rgba(242,183,5,.14)" />
              <stop offset="100%" stopColor="rgba(242,183,5,0)" />
            </radialGradient>
          </defs>
          <rect width="100%" height="100%" fill="url(#hg1)" />
          <rect width="100%" height="100%" fill="url(#hg2)" />
        </svg>
      </div>

      <div className="wrap hero__grid">
        <div className="hero__copy">
          <div className="hero__kicker">
            <span className="tag">Escola de Negócios ESUP</span>
            <span className="sep">•</span>
            <span><Icon name="calendar" size={16} /> {BOOTCAMP.dates}</span>
          </div>
          <h1>Da <span className="hl">ideia ao pitch</span><br />em 24 horas.</h1>
          <p className="hero__sub">
            Um bootcamp de empreendedorismo para quem está começando a faculdade.
            Quanto antes você entra em ação, mais perto chega de entender qual caminho quer seguir.
          </p>
          <div className="hero__actions">
            <button className="btn btn--primary btn--lg" onClick={onApply}>
              Quero me candidatar <Icon name="arrow" size={20} className="arw" />
            </button>
            <a className="btn btn--ghost btn--lg" href="#metodo">Como funciona</a>
          </div>
          <div className="hero__meta">
            <div className="m"><b>24h</b><span>de imersão prática</span></div>
            <div className="m"><b>6</b><span>módulos ágeis</span></div>
            <div className="m"><b>20</b><span>vagas subsidiadas</span></div>
          </div>
        </div>

        <div className="hero__panel reveal">
          <div className="hero__seats">
            <b>{BOOTCAMP.seatsLeft}</b>
            <span>vagas restantes</span>
          </div>
          <JourneyCard />
        </div>
      </div>
    </header>
  );
}

function JourneyCard() {
  return (
    <div className="card" style={{ padding: "26px 26px 22px", borderRadius: "var(--radius-l)", boxShadow: "var(--shadow)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18 }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, color: "var(--navy)" }}>A jornada em 24h</div>
        <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--orange)", display: "flex", alignItems: "center", gap: 6 }}>
          <Icon name="pin" size={15} /> {BOOTCAMP.place}
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
        {MODULES.map((m, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 13 }}>
            <span style={{ flex: "none", width: 30, height: 30, borderRadius: 9, display: "grid", placeItems: "center", background: "color-mix(in srgb, " + m.c + " 14%, #fff)", color: m.c, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13 }}>{m.no}</span>
            <span style={{ fontWeight: 600, fontSize: 15, color: "var(--navy)", whiteSpace: "nowrap" }}>{m.t}</span>
            <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--faint)", whiteSpace: "nowrap" }}>{m.f.split(" + ")[0]}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px dashed var(--line-2)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 13, color: "var(--muted)", fontWeight: 600, whiteSpace: "nowrap" }}>Da ideia</span>
        <span style={{ flex: 1, height: 2, margin: "0 12px", background: "linear-gradient(90deg,var(--teal),var(--gold),var(--orange))", borderRadius: 2 }}></span>
        <span style={{ fontSize: 13, color: "var(--orange)", fontWeight: 800, fontFamily: "var(--font-display)", whiteSpace: "nowrap" }}>ao Pitch!</span>
      </div>
    </div>
  );
}

function Problem() {
  return (
    <section className="section section--paper2" id="problema" data-screen-label="Problema">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">Por que tanta ideia morre no papel?</span>
          <h2>O mundo mudou. O jeito de criar também.</h2>
          <p className="lede">A maioria das ideias trava no mesmo lugar: planejamento infinito e medo de errar. O bootcamp inverte essa lógica.</p>
        </div>
        <div className="problem__grid">
          <div className="compare compare--old reveal">
            <span className="compare__tag">O caminho tradicional</span>
            <h3>Planejar para prever</h3>
            <ul>
              {PROBLEM_OLD.map((x, i) => (
                <li key={i}><span className="ic"><Icon name={x.ic} size={16} /></span><span><b>{x.t}:</b> {x.d}</span></li>
              ))}
            </ul>
          </div>
          <div className="compare compare--new reveal">
            <span className="compare__tag">O caminho bootcamp — ágil</span>
            <h3>Agir para descobrir</h3>
            <ul>
              {PROBLEM_NEW.map((x, i) => (
                <li key={i}><span className="ic"><Icon name={x.ic} size={16} /></span><span><b>{x.t}:</b> {x.d}</span></li>
              ))}
            </ul>
          </div>
        </div>
        <p className="problem__punch reveal">Você não descobre seu caminho pensando. <span className="y">Descobre fazendo.</span></p>
      </div>
    </section>
  );
}

function WhyEarly() {
  return (
    <section className="section" id="agir" data-screen-label="Por que agir cedo">
      <div className="wrap why">
        <div className="why__copy reveal">
          <span className="eyebrow">Por que agir cedo</span>
          <h2 style={{ fontSize: "clamp(28px,4vw,42px)", marginTop: 14 }}>Entrar em ação é o atalho para se descobrir.</h2>
          <p className="lede" style={{ marginBottom: 34 }}>
            Você não precisa ter tudo decidido. Precisa começar. E é começando cedo que a faculdade — e a vida — fazem mais sentido.
          </p>
          <div className="why__steps">
            {WHY_STEPS.map((s, i) => (
              <div className="why__step" key={i}>
                <div className="why__rail">
                  <div className="why__num">{i + 1}</div>
                  <div className="why__line"></div>
                </div>
                <div className="why__body">
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="why__visual reveal">
          <BullseyeCard />
        </div>
      </div>
    </section>
  );
}

function BullseyeCard() {
  const rings = [
    { c: "var(--teal)",   label: "Cognitiva",   d: "Conhecer as etapas de criar e validar uma ideia." },
    { c: "var(--cyan)",   label: "Atitudinal",  d: "Empatia, colaboração e atitude empreendedora." },
    { c: "var(--gold-2)", label: "Operacional", d: "Aplicar ferramentas reais aos seus próprios projetos." },
  ];
  return (
    <div className="card" style={{ borderRadius: "var(--radius-l)", padding: 30, boxShadow: "var(--shadow)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
        <span style={{ width: 46, height: 46, borderRadius: 12, display: "grid", placeItems: "center", background: "var(--accent-soft)", color: "var(--accent-deep)" }}><Icon name="target" size={24} /></span>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--navy)" }}>O que você desenvolve</div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        {rings.map((r, i) => (
          <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
            <span style={{ flex: "none", marginTop: 3, width: 14, height: 14, borderRadius: "50%", background: r.c, boxShadow: "0 0 0 4px color-mix(in srgb," + r.c + " 18%, transparent)" }}></span>
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--navy)" }}>{r.label}</div>
              <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.45 }}>{r.d}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Method() {
  return (
    <section className="section section--paper2" id="metodo" data-screen-label="Metodologia">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">A regra de ouro: 60 / 25 / 15</span>
          <h2>Aprender fazendo, não assistindo.</h2>
          <p className="lede">Nada de aula expositiva. O tempo é desenhado para você colocar a mão na massa o tempo todo.</p>
        </div>
        <div className="method">
          <div className="mcard mcard--60 reveal">
            <div><div className="pct">60%</div><h4>Mão na massa</h4></div>
            <p>Atividades práticas aplicadas direto no seu projeto. O facilitador orienta — você executa.</p>
            <span className="mcard__watermark">60</span>
          </div>
          <div className="mcard mcard--25 reveal">
            <div><div className="pct">25%</div><h4>Feedback entre pares</h4></div>
            <p>Troca estruturada de feedback com a turma e mentores para refinar suas ideias.</p>
            <span className="mcard__watermark">25</span>
          </div>
          <div className="mcard mcard--15 reveal">
            <div><div className="pct">15%</div><h4>Conceito</h4></div>
            <p>Exposições curtas (máx. 15 min) só para destravar a próxima ação. Direto ao ponto.</p>
            <span className="mcard__watermark">15</span>
          </div>
        </div>
        <p className="method__note reveal">Alta intensidade • <b>24 horas</b> de imersão • 6 módulos ágeis de 4 horas cada</p>
      </div>
    </section>
  );
}

function Modules() {
  return (
    <section className="section" id="modulos" data-screen-label="Módulos">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">A jornada empreendedora</span>
          <h2>6 módulos. Da ideia à execução.</h2>
          <p className="lede">Cada módulo entrega uma ferramenta prática e um passo concreto rumo ao seu pitch final.</p>
        </div>
        <div className="journey">
          {MODULES.map((m, i) => (
            <div className="modcard reveal" key={i} style={{ "--mc": m.c }}>
              <div className="modcard__top">
                <span className="modcard__no">MÓDULO {m.no}</span>
                <span className="modcard__ic"><Icon name={m.ic} size={24} /></span>
              </div>
              <h4>{m.t}</h4>
              <div className="frame">{m.f}</div>
              <p>{m.d}</p>
            </div>
          ))}
        </div>
        <div className="journey__cap reveal">
          <span>Módulo 1</span><span className="arw">→</span><span>Módulo 6</span><span className="arw">→</span><b>Ação!</b>
        </div>
      </div>
    </section>
  );
}

function Gets() {
  return (
    <section className="section section--paper2" id="resultado" data-screen-label="O que você leva">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">O que você leva desta jornada</span>
          <h2>Sai com mais do que um certificado.</h2>
        </div>
        <div className="gets">
          {GETS.map((g, i) => (
            <div className="getcard reveal" key={i}>
              <div className="getcard__ic" style={{ background: g.bg }}><Icon name={g.ic} size={28} /></div>
              <h4>{g.t}</h4>
              <p>{g.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Audience() {
  return (
    <section className="section" id="paraquem" data-screen-label="Para quem é">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">Para quem é</span>
          <h2>Feito para quem quer começar cedo.</h2>
          <p className="lede">Não importa o ponto de partida — importa a vontade de transformar ideia em ação.</p>
        </div>
        <div className="aud">
          {AUDIENCE.map((a, i) => (
            <div className="audcard reveal" key={i}>
              <div className="audcard__ic"><Icon name={a.ic} size={26} /></div>
              <h4>{a.t}</h4>
              <p>{a.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Problem, WhyEarly, Method, Modules, Gets, Audience });