// Ikigai — Belt grading, gallery, events, news

function SectionBelts() {
  const belts = [
    { name: "Branca", jp: "白帯", color: "#fafafa", ink: "var(--k-ink)", border: true, kyu: "10º Kyu", note: "Início" },
    { name: "Amarela", jp: "黄帯", color: "#f5d949", ink: "var(--k-ink)", kyu: "8º Kyu", note: "" },
    { name: "Laranja", jp: "橙帯", color: "#e87d2e", ink: "#fff", kyu: "7º Kyu", note: "" },
    { name: "Verde", jp: "緑帯", color: "#2e8b57", ink: "#fff", kyu: "6º Kyu", note: "" },
    { name: "Azul", jp: "青帯", color: "#1e4e8c", ink: "#fff", kyu: "5º Kyu", note: "" },
    { name: "Roxa", jp: "紫帯", color: "#5a3d8a", ink: "#fff", kyu: "4º Kyu", note: "" },
    { name: "Marrom", jp: "茶帯", color: "#5a3a22", ink: "#fff", kyu: "3º–1º Kyu", note: "" },
    { name: "Preta", jp: "黒帯", color: "#0a0a0a", ink: "#fff", kyu: "1º–10º Dan", note: "Shodan e além" },
  ];
  return (
    <section id="faixas" className="k-section" style={{ background: "var(--k-bg)" }}>
      <div className="k-container">
        <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Graduação</p></Reveal>
        <Reveal delay={100}>
          <h2 className="k-h2" style={{ marginBottom: 18, maxWidth: 720 }}>
            Cada faixa marca um momento.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="k-lead" style={{ maxWidth: 560, marginBottom: 60 }}>
            O sistema kyu/dan do Dojo Ikigai.
          </p>
        </Reveal>

        <Reveal delay={300}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: 6, alignItems: "stretch" }}>
            {belts.map((b) => (
              <div key={b.name} style={{
                background: b.color, color: b.ink,
                borderRadius: 10, padding: "18px 12px",
                border: b.border ? "1px solid var(--k-line)" : "none",
                minHeight: 200, display: "flex", flexDirection: "column", justifyContent: "space-between",
              }}>
                <div style={{ fontFamily: "var(--k-font-jp)", fontSize: 28, lineHeight: 1, opacity: 0.85, fontWeight: 400 }}>{b.jp}</div>
                <div>
                  <p style={{ fontSize: 12, opacity: 0.7, marginBottom: 2, fontWeight: 500 }}>{b.kyu}</p>
                  <p style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.01 }}>{b.name}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Gallery — Apple grid with feature tile
// ─────────────────────────────────────────────────────────────────
function SectionGallery() {
  return (
    <section id="galeria" className="k-section" style={{ background: "var(--k-bg-soft)", paddingTop: 120, paddingBottom: 120 }}>
      <div className="k-container-wide" style={{ maxWidth: 1200 }}>
        <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Galeria</p></Reveal>
        <Reveal delay={100}>
          <h2 className="k-h2" style={{ marginBottom: 60, maxWidth: 720 }}>
            Do tatame para você.
          </h2>
        </Reveal>

        {/* Foto principal — turma completa */}
        <div className="k-grid" style={{ gridTemplateColumns: "2fr 1fr", gap: 18, marginBottom: 18 }}>
          <Reveal>
            <div style={{ background: "#000", borderRadius: 22, overflow: "hidden", aspectRatio: "16/9", position: "relative" }}>
              <img src="assets/galeria-01.jpg" alt="Turma do Dojô Ikigai reunida no tatame" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55))" }} />
              <div style={{ position: "absolute", left: 28, bottom: 24, color: "#fff" }}>
                <p style={{ fontSize: 12, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.85, marginBottom: 4, fontWeight: 500 }}>A família Ikigai</p>
                <p style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.01 }}>Faixas brancas, marrons e pretas — um só dojô.</p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ background: "linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%)", color: "#fff", borderRadius: 22, aspectRatio: "8/9", position: "relative", overflow: "hidden" }}>
              <img src="assets/sensei-robson.png?v=2" alt="Mestre Inst. Robson" style={{ position: "absolute", left: "50%", bottom: 0, transform: "translateX(-50%)", height: "82%", width: "auto", objectFit: "contain", filter: "drop-shadow(0 16px 30px rgba(0,0,0,0.5))" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(29,29,31,0.6) 0%, transparent 35%, transparent 60%, rgba(0,0,0,0.7) 100%)" }} />
              <div style={{ position: "absolute", left: 28, top: 24, right: 28 }}>
                <p style={{ fontSize: 12, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.7, fontWeight: 500 }}>Sob comando do</p>
              </div>
              <div style={{ position: "absolute", left: 28, bottom: 22, right: 28 }}>
                <p style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.01, marginBottom: 6 }}>Mestre Inst. Robson</p>
                <p style={{ color: "#d2d2d7", fontSize: 13.5, lineHeight: 1.45 }}>Décadas dedicadas ao Karatê Shotokan, formando gerações em Nilópolis.</p>
              </div>
            </div>
          </Reveal>
        </div>

        {/* Grid 3 colunas — 2 fotos reais + card de horários */}
        <div className="k-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          <Reveal>
            <div style={{ background: "#000", borderRadius: 22, overflow: "hidden", aspectRatio: "1/1", position: "relative" }}>
              <img src="assets/galeria-02.jpg" alt="Turma jovem com instrutores" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55))" }} />
              <div style={{ position: "absolute", left: 24, bottom: 20, color: "#fff" }}>
                <p style={{ fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.85, marginBottom: 4, fontWeight: 500 }}>Turma jovem</p>
                <p style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.01 }}>De faixa branca à preta</p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={100}>
            <div style={{ background: "#000", borderRadius: 22, overflow: "hidden", aspectRatio: "1/1", position: "relative" }}>
              <img src="assets/galeria-03.jpg" alt="Turma da noite no encerramento da aula" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55))" }} />
              <div style={{ position: "absolute", left: 24, bottom: 20, color: "#fff" }}>
                <p style={{ fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.85, marginBottom: 4, fontWeight: 500 }}>Treino noturno</p>
                <p style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.01 }}>O encerramento de mais uma aula</p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <a href="#horários" style={{
              background: "#f0ebff", borderRadius: 22, overflow: "hidden", aspectRatio: "1/1", position: "relative",
              display: "block", textDecoration: "none", color: "var(--k-ink)",
            }}>
              <img src="assets/horarios-quadro.jpg" alt="Quadro de horários do dojô" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.65))" }} />
              <div style={{ position: "absolute", left: 24, bottom: 20, right: 24, color: "#fff" }}>
                <p style={{ fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.85, marginBottom: 4, fontWeight: 500 }}>Quadro</p>
                <p style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.01 }}>Horários · Seg, Qua, Sex</p>
              </div>
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Events — list + featured upcoming
// ─────────────────────────────────────────────────────────────────
function SectionEvents() {
  const events = [
    { date: "A combinar", title: "Exame de Graduação — Semestre 1", venue: "Dojo principal", tag: "Exame" },
    { date: "11 Jul", title: "Campeonato Brasileiro de Karatê SKIBRASIL 2026", venue: "Brasília – DF · Seletiva para o Mundial da Turquia", tag: "Competição" },
    { date: "30 Ago", title: "Seminário Internacional SKIF — Shuseki Shihan Manabu Murakami", venue: "Rio de Janeiro · O Dojo Ikigai estará presente — Sensei Robson Araújo como Árbitro · Aberto a todos os filiados SKIB", tag: "Seminário" },
  ];
  return (
    <section id="eventos" className="k-section" style={{ paddingTop: 120, paddingBottom: 60 }}>
      <div className="k-container">
        <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Eventos</p></Reveal>
        <Reveal delay={100}>
          <h2 className="k-h2" style={{ marginBottom: 60, maxWidth: 720 }}>
            O calendário de 2026.
          </h2>
        </Reveal>

        <div style={{ display: "flex", flexDirection: "column" }}>
          {events.map((e, i) => (
            <Reveal key={i} delay={i * 80}>
              <a href="#" style={{
                display: "grid",
                gridTemplateColumns: "120px 1fr 200px 24px",
                alignItems: "center", gap: 24,
                padding: "28px 4px",
                borderTop: i === 0 ? "1px solid var(--k-line)" : "none",
                borderBottom: "1px solid var(--k-line)",
                transition: "padding 0.3s var(--k-ease)",
              }} onMouseEnter={(ev) => ev.currentTarget.style.paddingLeft = "16px"}
                 onMouseLeave={(ev) => ev.currentTarget.style.paddingLeft = "4px"}>
                <p style={{ fontFamily: "var(--k-font-display)", fontSize: 28, fontWeight: 600, letterSpacing: -0.02, color: "var(--k-ink)" }}>{e.date}</p>
                <div>
                  <p style={{ fontSize: 12, letterSpacing: 0.05, textTransform: "uppercase", color: "var(--k-ink-3)", marginBottom: 6, fontWeight: 500 }}>{e.tag}</p>
                  <p style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.01, color: "var(--k-ink)" }}>{e.title}</p>
                </div>
                <p className="k-body" style={{ fontSize: 15, color: "var(--k-ink-3)" }}>{e.venue}</p>
                <span style={{ color: "var(--k-blue)", fontSize: 22 }}>›</span>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// News
// ─────────────────────────────────────────────────────────────────
function SectionNews() {
  const items = [
    { tag: "Diário", title: "A precisão começa nos pés.", excerpt: "Sensei Tanaka explica por que kihon é o trabalho de uma vida — e não um ritual de iniciação.", date: "12 Abr 2026", read: "5 min" },
    { tag: "Entrevista", title: "Naoko, faixa preta aos 62.", excerpt: "Começou aos 54. Hoje ensina a turma sênior. Uma conversa sobre paciência.", date: "28 Mar 2026", read: "8 min" },
    { tag: "Tradição", title: "Por que ainda fazemos rei?", excerpt: "A reverência abre e fecha cada aula desde 1987. Não é decoração — é estrutura.", date: "10 Mar 2026", read: "4 min" },
  ];
  return (
    <section id="notícias" className="k-section" style={{ background: "var(--k-bg)", paddingTop: 60, paddingBottom: 120 }}>
      <div className="k-container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 60 }}>
          <div>
            <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Notícias</p></Reveal>
            <Reveal delay={100}>
              <h2 className="k-h2">Diário do Dojo.</h2>
            </Reveal>
          </div>
          <Reveal delay={200}><a href="#" className="k-link">Todos os textos</a></Reveal>
        </div>

        <div className="k-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {items.map((n, i) => (
            <Reveal key={n.title} delay={i * 100}>
              <a href="#" style={{ display: "block" }}>
                <div style={{ background: "var(--k-bg-soft)", borderRadius: 18, aspectRatio: "4/3", marginBottom: 18, position: "relative", overflow: "hidden" }}>
                  <div style={{ position: "absolute", inset: 0, background: i === 0 ? "linear-gradient(135deg, #1d1d1f, #424245)" : i === 1 ? "linear-gradient(135deg, #f5d949, #e87d2e)" : "linear-gradient(135deg, #fbfbfd, #d2d2d7)" }} />
                  <div style={{
                    position: "absolute", right: 18, bottom: 18,
                    fontFamily: "var(--k-font-jp)", fontSize: 90,
                    color: "#fff", opacity: 0.18, lineHeight: 1, fontWeight: 400,
                  }}>{["技", "道", "礼"][i]}</div>
                </div>
                <p style={{ fontSize: 12, letterSpacing: 0.05, textTransform: "uppercase", color: "var(--k-ink-3)", marginBottom: 8, fontWeight: 500 }}>{n.tag} · {n.read}</p>
                <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.01, color: "var(--k-ink)", marginBottom: 8, lineHeight: 1.2 }}>{n.title}</h3>
                <p className="k-body" style={{ fontSize: 15 }}>{n.excerpt}</p>
                <p className="k-caption" style={{ marginTop: 10 }}>{n.date}</p>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionBelts, SectionGallery, SectionEvents, SectionNews });