/* global React, NAV_LINKS, MARQUEE_ITEMS, FEATURES, NUMBERS, MEMBERS, BIBLIOTECA, NEWS,
   PacodeLogo, BalloonSvg, GridPattern, ConfettiTiles, Eyebrow,
   SectionHeader, PlaceholderMedia */

/* ============================================================
   pacode — sections
   ============================================================ */

function TopBar({ onToggleLang, lang }) {
  return (
    <header className="pc-topbar" data-screen-label="topbar">
      <div className="pc-topbar__brand">
        <PacodeLogo height={46} />
        <div className="pc-topbar__brand-mark">
          <b>pacode</b>
          <span>UFPB · Centro de Informática</span>
        </div>
      </div>
      <div className="pc-topbar__right">
        <button className="pc-lang" onClick={onToggleLang}>{lang === "pt" ? "PT-BR" : "EN"}</button>
      </div>
    </header>);

}

function SubNav() {
  return (
    <nav className="pc-subnav" aria-label="Seções do site">
      {NAV_LINKS.map((l) =>
      <a key={l.id} href={`#${l.id}`}>{l.label}</a>
      )}
      <a href="#contato" className="is-cta">
        Participar
        <span className="pc-cta-icon" aria-hidden="true">↗</span>
      </a>
    </nav>);

}

function Marquee() {
  const items = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS];
  return (
    <div className="pc-marquee" aria-hidden="true">
      <div className="pc-marquee__track">
        {items.map((t, i) => <span key={i}>{t}</span>)}
      </div>
    </div>);

}

function Hero() {
  return (
    <section className="pc-hero" data-screen-label="01 hero">
      <div className="pc-hero__left">
        <div>
          <p className="pc-hero__eyebrow"></p>
          <h1 className="pc-hero__title">
            comunidade<br />
            de programação<br />
            <em>competitiva</em><br />
            da UFPB
          </h1>
        </div>
        <dl className="pc-hero__meta">
          <div>
            <dt>Sede</dt>
            <dd>CI · João Pessoa, PB</dd>
          </div>
          <div>
            <dt>AULAS</dt>
            <dd>Sextas, 08h</dd>
          </div>
          <div>
            <dt></dt>
            <dd></dd>
          </div>
        </dl>
      </div>
      <div className="pc-hero__right">
        <div className="pc-hero__logos">
          <img className="pc-hero__logo pc-hero__logo--pacode" src="assets/pacode-logo.png" alt="pacode" />
          <img className="pc-hero__logo pc-hero__logo--ufpb" src="assets/ufpb-logo.png" alt="Universidade Federal da Paraíba" />
        </div>
      </div>
    </section>);

}

function Sobre() {
  return (
    <section className="pc-section" id="sobre" data-screen-label="02 sobre">
      <SectionHeader
        eyebrow="Sobre o pacode"
        title="Aulas, competições e a tradição da UFPB."
        lead="O pacode é a comunidade de programação competitiva do Centro de Informática da Universidade Federal da Paraíba. Nosso obejtivo é preparar alunos para se destacarem nas principais competições de programação do Brasil e do mundo."
        tag="História" />
      
      <div className="pc-grid-4">
        {FEATURES.map((f, i) =>
        <article className="pc-card pc-reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
            <PlaceholderMedia label={`imagem · ${f.tag.toLowerCase()}`} src={f.image} alt={f.imageAlt} />
            <span style={{ fontFamily: "var(--pc-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--pc-blue)" }}>○ {f.tag}</span>
            <h3>{f.title}</h3>
            <p>{f.body}</p>
          </article>
        )}
      </div>
    </section>);

}

function MaratonaPacode() {
  return (
    <section className="pc-section pc-section--soft" id="maratona" data-screen-label="03 maratona-pacode">
      <SectionHeader
        eyebrow="Maratona Pacode"
        title="Os números da nossa competição interna."
        tag="Estatísticas" />

      <div className="pc-numbers pc-reveal">
        <div className="pc-numbers__cell is-photo has-image">
          <img src="assets/competicoes/mp1/campeao.png" alt="Time campeão da primeira Maratona Pacode" className="pc-numbers__photo" />
        </div>
        <div className="pc-numbers__cell">
          <span className="pc-numbers__label">{NUMBERS[0].label}</span>
          <div>
            <div className="pc-numbers__value">{NUMBERS[0].value}</div>
            <div className="pc-numbers__hint">{NUMBERS[0].hint}</div>
          </div>
        </div>
        <div className="pc-numbers__cell is-photo has-image">
          <img src="assets/competicoes/mp4/campeao.png" alt="Time campeão da quarta Maratona Pacode" className="pc-numbers__photo" />
        </div>
        <div className="pc-numbers__cell">
          <span className="pc-numbers__label">{NUMBERS[1].label}</span>
          <div>
            <div className="pc-numbers__value">{NUMBERS[1].value}</div>
            <div className="pc-numbers__hint">{NUMBERS[1].hint}</div>
          </div>
        </div>
        <div className="pc-numbers__cell">
          <span className="pc-numbers__label">{NUMBERS[2].label}</span>
          <div>
            <div className="pc-numbers__value">{NUMBERS[2].value}</div>
            <div className="pc-numbers__hint">{NUMBERS[2].hint}</div>
          </div>
        </div>
        <div className="pc-numbers__cell is-photo has-image">
          <img src="assets/competicoes/mp5/campeao.png" alt="Time campeão da quinta Maratona Pacode" className="pc-numbers__photo" />
        </div>
        <div className="pc-numbers__cell">
          <span className="pc-numbers__label">{NUMBERS[3].label}</span>
          <div>
            <div className="pc-numbers__value">{NUMBERS[3].value}</div>
            <div className="pc-numbers__hint">{NUMBERS[3].hint}</div>
          </div>
        </div>
        <div className="pc-numbers__cell is-photo">
          <span className="placeholder-label">foto · equipes finalistas</span>
        </div>
      </div>
    </section>);

}

function Conquistas() {
  const items = [
  { year: "2025", title: "Medalha de bronze", sub: "Olimpíada Brasileira de Informática 2025", color: "#E8B739", image: "assets/competicoes/obi2025/medalha.png", imageAlt: "Medalha de bronze da OBI 2025" },
  { year: "2025", title: "+70 Medalhas", sub: "Olimpíada Paraibana de Informática", color: "#1E40AF", image: "assets/competicoes/opi2025/time.png", imageAlt: "Medalha de prata da OPI 2025" },
  { year: "2024", title: "5 Classificações", sub: "Final Maratona SBC", color: "#E63946", image: "assets/competicoes/sbc2015/final-time.webp", imageAlt: "Time na final da Maratona SBC 2015" },
  { year: "2024", title: "Medalha de bronze", sub: "Maratona Feminina de Programanção 2024", color: "#1E40AF", image: "assets/competicoes/mfp2024/bronze-larissa.png", imageAlt: "Larissa -Medalha de bronze da Maratona Feminina 2024" },];

  return (
    <section className="pc-section" id="conquistas" data-screen-label="04 conquistas">
      <SectionHeader
        eyebrow="Conquistas"
        title="Resultados em competições nacionais e regionais."
        lead="Um recorte dos principais marcos do pacode nos últimos anos. Lista completa em construção."
        tag="Premiações" />
      
      <div className="pc-grid-4">
        {items.map((it, i) =>
        <article className="pc-card pc-reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
            <div className={`pc-card__media${it.image ? " has-image" : ""}`} style={{
            background: it.image ? undefined : `linear-gradient(180deg, ${it.color}26, ${it.color}10)`,
            borderColor: it.color
          }}>
              {it.image ? <img src={it.image} alt={it.imageAlt || ""} className="pc-card__media-img" /> : null}
              <span className="placeholder-label" style={{ color: it.color, fontWeight: 600 }}>○ {it.year}</span>
            </div>
            <span style={{ fontFamily: "var(--pc-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: it.color }}>{it.sub}</span>
            <h3>{it.title}</h3>
          </article>
        )}
      </div>
    </section>);

}

function Membros() {
  const colors = ["#E63946", "#E8B739", "#1E40AF", "#0B0F1A"];
  return (
    <section className="pc-section pc-section--soft" id="membros" data-screen-label="05 membros">
      <SectionHeader
        eyebrow="Equipe atual"
        title="Conheça os membros do pacode."
        // lead="Times Alpha, Beta e Gamma, mais coaches e organização. Em breve substituiremos os placeholders por fotos e bios reais."
        tag="42 membros" />
      
      <div className="pc-grid-4">
        {MEMBERS.map((m, i) => {
          const accent = colors[i % colors.length];
          return (
            <article className="pc-member pc-reveal" key={i} style={{ transitionDelay: `${i % 4 * 80}ms` }}>
              <div className={`pc-member__avatar${m.image ? " has-image" : ""}`} style={{
                background: m.image ? undefined : `radial-gradient(circle at 50% 35%, ${accent}33, ${accent}10 65%, ${accent}05)`
              }}>
                {m.image ? (
                  <img src={m.image} alt={m.imageAlt || m.name} className="pc-member__photo" />
                ) : (
                  <span className="initial">{m.name.split(" ")[0][0]}</span>
                )}
                {m.tag ? <span className="tag" style={{ borderColor: accent, color: accent }}>○ {m.tag}</span> : null}
              </div>
              <div className="pc-member__body">
                <h3 className="pc-member__name">{m.name}</h3>
                <p className="pc-member__role">{m.role}</p>
                <div className="pc-member__meta">
                  <span><b>•</b> {m.year}</span>
                </div>
              </div>
            </article>);

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

}

/* Hall da Fama — reservado para uso futuro. Não apagar.
function HallFama() {
  return (
    <section className="pc-section" id="hall" data-screen-label="06 hall">
      <SectionHeader
        eyebrow="Hall da fama"
        title="Ex-membros que escreveram a história do pacode."
        lead="Capitães, coaches e fundadores que passaram pelo grupo e seguem carreira na academia, na indústria e na pesquisa."
        tag="Egressos" />

      <div className="pc-hof pc-reveal">
        <div className="pc-hof__row is-head">
          <div>Ano de saída</div>
          <div>Nome</div>
          <div>Função no pacode</div>
          <div>Hoje</div>
          <div>Destaque</div>
          <div></div>
        </div>
        {HALL.map((h, i) =>
        <div className="pc-hof__row" key={i}>
            <div className="pc-hof__year">{h.year}</div>
            <div className="pc-hof__name">{h.name}</div>
            <div className="pc-hof__role">{h.role}</div>
            <div className="pc-hof__where">{h.where}</div>
            <div className="pc-hof__highlight">{h.highlight}</div>
            <a href="#" className="pc-hof__cta" aria-label="Ver perfil">↗</a>
          </div>
        )}
      </div>
    </section>);

}
*/

function Biblioteca() {
  return (
    <section className="pc-section" id="biblioteca" data-screen-label="06 biblioteca">
      <SectionHeader
        eyebrow="Biblioteca"
        title="Algoritmos e estruturas mantidos pela comunidade."
        lead="Implementações revisadas pelo grupo, prontas para uso em contests. Hospedadas no GitHub e atualizadas com frequência."
        tag="Code-Library" />

      <div className="pc-hof pc-reveal">
        <div className="pc-hof__row is-head">
          <div>Data</div>
          <div>Algoritmo</div>
          <div>Categoria</div>
          <div>Autor</div>
          <div>Descrição</div>
          <div></div>
        </div>
        {BIBLIOTECA.map((b, i) =>
        <div className="pc-hof__row" key={i}>
            <div className="pc-hof__year">{b.date}</div>
            <div className="pc-hof__name">{b.name}</div>
            <div className="pc-hof__role">{b.category}</div>
            <div className="pc-hof__where">{b.author}</div>
            <div className="pc-hof__highlight">{b.description}</div>
            <a href={b.url} target="_blank" rel="noopener noreferrer" className="pc-hof__cta" aria-label="Ver commit no GitHub">↗</a>
          </div>
        )}
      </div>
    </section>);

}

function Noticias() {
  return (
    <section className="pc-section pc-section--soft" id="noticias" data-screen-label="07 noticias">
      <SectionHeader
        eyebrow="Notícias"
        title="O que está acontecendo no pacode agora."
        tag="Blog" />
      
      <div className="pc-news pc-reveal">
        {NEWS.map((n, i) =>
        <article className={`pc-news__item ${n.feature ? "is-feature" : ""}`} key={i}>
            <div className={`pc-news__media${n.image ? " has-image" : ""}`}>
              {n.image ? <img src={n.image} alt={n.imageAlt || ""} className="pc-news__media-img" /> : null}
              <span className="placeholder-label">imagem · {n.cat.toLowerCase()}</span>
            </div>
            <div className="pc-news__meta">
              <span className="pc-news__cat">○ {n.cat}</span>
              <span>{n.date}</span>
            </div>
            <h3 className="pc-news__title">{n.title}</h3>
            <p className="pc-news__excerpt">{n.excerpt}</p>
          </article>
        )}
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="pc-footer" id="contato" data-screen-label="08 contato">
      <h2 className="pc-footer__big">
        pacode <em>·</em><br />
        ufpb · ci
      </h2>
      <div className="pc-footer__grid">
        <div className="pc-footer__col">
          <h4>Endereço</h4>
          <p>Centro de Informática · UFPB</p>
          <p>Rua dos Escoteiros, Mangabeira</p>
          <p>João Pessoa, PB · 58055-000</p>
        </div>
        <div className="pc-footer__col">
          <h4>Contato</h4>
          <a href="#">pacodeufpb@gmail.com</a>
          <a href="https://www.instagram.com/pacodeufpb/">@pacodeufpb</a>
        </div>
        <div className="pc-footer__col">
          <h4>Links úteis</h4>
          <a href="https://github.com/GabrielCFormiga/Code-Library">Biblioteca de algoritmos</a>
          <a href="https://www.ci.ufpb.br/">Centro de Informática</a>
          {/* <a href="https://maratona.sbc.org.br/">Maratona SBC</a> */}
          {/* <a href="#">ICPC Global</a> */}
        </div>
        <div className="pc-footer__col">
          <h4>Participar</h4>
          <a href="https://agreeable-sugar-a49.notion.site">Trilha de aprendizado</a>
          {/* <a href="#">Materiais públicos</a> */}
          {/* <a href="#">Processo seletivo</a> */}
          {/* <a href="#">Calendário de treinos</a> */}
        </div>
      </div>
      <div className="pc-footer__base">
        <span>© 2026 PACODE · TODOS OS DIREITOS RESERVADOS</span>
        <div className="pc-footer__social">
          <a href="https://www.instagram.com/pacodeufpb/" aria-label="Instagram">IG</a>
          <a href="https://github.com/PacodeUFPB" aria-label="GitHub">GH</a>
          <a href="https://discord.gg/WHCUnBJA" aria-label="Discord">DC</a>
          <a href="https://www.youtube.com/@PACODEUFPB" aria-label="YouTube">YT</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  TopBar, SubNav, Marquee, Hero, Sobre, MaratonaPacode, Conquistas, Membros, /* HallFama, */ Biblioteca, Noticias, Footer
});