// Ikigai — Marketing sections
// Sobre / Filosofia, Sensei, Estilos, Horários (apple-pure)

function SectionAbout() {
  return (
    <section id="sobre" className="k-section" style={{ paddingTop: 140, paddingBottom: 140, position: "relative" }}>
      {/* Subtle vertical kanji on the right */}
      <div style={{ position: "absolute", right: -60, top: 80, pointerEvents: "none" }} aria-hidden>
        <div style={{
          fontFamily: "var(--k-font-jp)",
          fontSize: 380, lineHeight: 0.9, color: "var(--k-ink)",
          opacity: 0.035, writingMode: "vertical-rl", textOrientation: "upright",
        }}>道</div>
      </div>

      <div className="k-container" style={{ position: "relative", zIndex: 2 }}>
        <Reveal>
          <p className="k-eyebrow muted" style={{ marginBottom: 10 }}>O dojo</p>
        </Reveal>
        <Reveal delay={120}>
          <h2 className="k-h2" style={{ maxWidth: 720, marginBottom: 22 }}>
            Um lugar para começar.<br/>E para nunca terminar.
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="k-lead" style={{ maxWidth: 640 }}>
            O Ikigai é um dojo de tradição filiado à SKIBRASIL — Shotokan Karate-Do International.
            Sob a direção do Mestre Inst. Robson, ensinamos karatê como técnica, prática diária
            e filosofia de vida — o caminho que se percorre do primeiro kihon até o último suspiro.
          </p>
        </Reveal>

        {/* Three pillars */}
        <div className="k-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)", gap: 28, marginTop: 80 }}>
          {[
            { kanji: "礼", label: "Rei", title: "Respeito",
              text: "Toda aula começa e termina com uma reverência. Ao tatame, ao mestre, ao colega, a si mesmo." },
            { kanji: "技", label: "Waza", title: "Técnica",
              text: "Kihon, kata e kumite. Repetição cuidadosa até que o corpo conheça o caminho antes da mente." },
            { kanji: "道", label: "Dō", title: "Caminho",
              text: "O karatê não termina em uma faixa. É uma prática contínua que molda quem o pratica por décadas." },
          ].map((p, i) => (
            <Reveal key={p.label} delay={i * 120}>
              <div style={{ borderTop: "1px solid var(--k-line)", paddingTop: 22 }}>
                <div style={{ fontFamily: "var(--k-font-jp)", fontSize: 64, lineHeight: 1, color: "var(--k-ink)", marginBottom: 16, fontWeight: 400 }}>
                  {p.kanji}
                </div>
                <p className="k-meta" style={{ marginBottom: 6, fontSize: 13, letterSpacing: 0.04, textTransform: "uppercase", color: "var(--k-ink-3)" }}>{p.label}</p>
                <h3 className="k-h3" style={{ marginBottom: 10 }}>{p.title}</h3>
                <p className="k-body">{p.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Sensei — full-bleed dark section, portrait + quote
// ─────────────────────────────────────────────────────────────────
function SectionSensei() {
  return (
    <section id="sensei" className="k-section k-section-dark" style={{ padding: 0, overflow: "hidden" }}>
      <div className="k-grid" style={{ gridTemplateColumns: "1fr 1fr", minHeight: "85vh" }}>
        {/* Portrait side */}
        <div style={{ background: "linear-gradient(135deg, #0a0a0a 0%, #1d1d1f 100%)", position: "relative", overflow: "hidden", display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
          <img src="assets/sensei-robson.png?v=2" alt="Mestre Inst. Robson" style={{ width: "auto", height: "92%", maxWidth: "100%", objectFit: "contain", display: "block", filter: "drop-shadow(0 20px 40px rgba(0,0,0,0.4))" }} />
          {/* SKIB logo top-right */}
          <img src="assets/skib.png" alt="SKIBRASIL" style={{ position: "absolute", top: 32, right: 32, width: 120, height: "auto", opacity: 0.95 }}/>
          {/* Vertical kanji caption */}
          <div style={{
            position: "absolute", bottom: 32, left: 32,
            fontFamily: "var(--k-font-jp)", fontSize: 46, color: "#fff",
            opacity: 0.7, writingMode: "vertical-rl", textOrientation: "upright",
            lineHeight: 1.1,
          }} aria-hidden>師範</div>
        </div>
        {/* Text side */}
        <div style={{ padding: "120px 80px", display: "flex", flexDirection: "column", justifyContent: "center", maxWidth: 720 }}>
          <Reveal>
            <p className="k-eyebrow muted" style={{ color: "#86868b", marginBottom: 14, fontSize: 14, textTransform: "uppercase", letterSpacing: 0.06 }}>
              Mestre fundador
            </p>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="k-h2" style={{ color: "#fff", marginBottom: 18, fontSize: "clamp(36px, 4vw, 56px)" }}>
              Mestre Inst. Robson
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p className="k-lead" style={{ color: "#a1a1a6", marginBottom: 28, maxWidth: 480 }}>
              Faixa preta, instrutor titulado pela SKIBRASIL — Shotokan Karate-Do International.
              Décadas dedicadas ao ensino do karatê tradicional.
            </p>
          </Reveal>
          <Reveal delay={300}>
            <blockquote style={{
              fontFamily: "var(--k-font-display)",
              fontSize: 28, lineHeight: 1.2, fontWeight: 400,
              color: "#f5f5f7", letterSpacing: -0.01,
              maxWidth: 480,
              borderLeft: "2px solid #fff", paddingLeft: 22,
              margin: "0 0 32px",
            }}>
              "Karatê ni sente nashi.<br/>
              <span style={{ color: "#86868b", fontSize: 18 }}>No karatê, não há primeiro ataque."</span>
            </blockquote>
          </Reveal>
          <Reveal delay={400}>
            <a href="#instrutores" className="k-link" style={{ color: "#2997ff" }}>
              Conhecer todos os instrutores
            </a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Estilos — three style cards (Apple feature grid)
// ─────────────────────────────────────────────────────────────────
function SectionStyles() {
  const pilares = [
    { titulo: "Kihon", desc: "O fundamento. Posições, golpes e bloqueios repetidos até virarem instinto." },
    { titulo: "Kata", desc: "As formas tradicionais. Heian, Tekki, Bassai — a memória viva do estilo." },
    { titulo: "Kumite", desc: "O combate controlado. Distância, tempo e leitura do oponente." },
  ];
  return (
    <section id="estilos" className="k-section" style={{ background: "var(--k-bg-soft)", paddingTop: 120, paddingBottom: 120 }}>
      <div className="k-container">
        <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Nosso estilo</p></Reveal>
        <Reveal delay={120}>
          <h2 className="k-h2" style={{ marginBottom: 18, maxWidth: 760 }}>Shotokan, na linha tradicional.</h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="k-lead" style={{ maxWidth: 640, marginBottom: 60 }}>
            No Dojô Ikigai praticamos exclusivamente o <strong>Karatê Shotokan</strong> — a escola mais difundida do mundo, marcada por posições profundas, técnicas lineares e ênfase em kata. Treino fiel à tradição da SKIBRASIL.
          </p>
        </Reveal>

        <div className="k-grid" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 24, alignItems: "stretch" }}>
          <Reveal>
            <div style={{ background: "#1d1d1f", color: "#fff", borderRadius: 22, padding: "48px 40px", minHeight: 420, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", overflow: "hidden" }}>
              <div>
                <p style={{ fontSize: 12, letterSpacing: 0.06, textTransform: "uppercase", color: "#86868b", marginBottom: 14, fontWeight: 500 }}>松濤館 · Shotokan</p>
                <h3 style={{ fontSize: 36, fontWeight: 600, letterSpacing: -0.02, marginBottom: 14, lineHeight: 1.1 }}>"Casa da pinha que balança ao vento."</h3>
                <p style={{ color: "#a1a1a6", fontSize: 16, maxWidth: 460 }}>
                  Fundado por Gichin Funakoshi em 1939, o Shotokan é hoje praticado em mais de 190 países. Traz o karatê para a era moderna sem abrir mão da raiz de Okinawa.
                </p>
              </div>
              <div style={{ fontFamily: "var(--k-font-jp)", fontSize: 160, color: "#fff", opacity: 0.08, lineHeight: 1, position: "absolute", right: 24, bottom: -20 }} aria-hidden>松濤館</div>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14, height: "100%" }}>
              {pilares.map((p) => (
                <div key={p.titulo} style={{ background: "#fff", border: "1px solid var(--k-line)", borderRadius: 18, padding: "24px 26px", flex: 1 }}>
                  <h4 style={{ fontSize: 20, fontWeight: 600, letterSpacing: -0.01, marginBottom: 6 }}>{p.titulo}</h4>
                  <p className="k-body" style={{ fontSize: 14.5 }}>{p.desc}</p>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Schedule
// ─────────────────────────────────────────────────────────────────
function SectionSchedule() {
  const days = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];
  // Horários reais do Dojô Ikigai — Seg / Qua / Sex
  const turmas = [
    { hora: "09:00 — 10:00", periodo: "Manhã", publico: "Infantil e adulto", cor: "#e8f4ff", ink: "var(--k-ink)" },
    { hora: "18:00 — 19:00", periodo: "Noite", publico: "Infantil e adulto", cor: "#fff4e0", ink: "var(--k-ink)" },
    { hora: "19:00 — 20:00", periodo: "Noite", publico: "Adultos", cor: "#1d1d1f", ink: "#fff" },
  ];
  const dias = ["Segunda", "Quarta", "Sexta"];
  return (
    <section id="horários" className="k-section">
      <div className="k-container">
        <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Horários</p></Reveal>
        <Reveal delay={120}>
          <h2 className="k-h2" style={{ marginBottom: 18 }}>
            Encontre seu horário.
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="k-lead" style={{ maxWidth: 560, marginBottom: 50 }}>
            Aulas <strong>segunda, quarta e sexta</strong> — uma turma de manhã e duas à noite. Crianças a partir de 14 anos podem treinar com a turma adulta.
          </p>
        </Reveal>

        <Reveal delay={320}>
          <div className="k-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18, marginBottom: 28 }}>
            {turmas.map((t, i) => (
              <div key={i} style={{
                background: t.cor, color: t.ink,
                borderRadius: 22, padding: "32px 28px",
                border: t.cor === "#1d1d1f" ? "none" : "1px solid var(--k-line)",
                display: "flex", flexDirection: "column", gap: 10,
                minHeight: 220,
              }}>
                <p style={{ fontSize: 11, letterSpacing: 0.06, textTransform: "uppercase", opacity: 0.65, fontWeight: 600 }}>{t.periodo}</p>
                <p style={{ fontFamily: "var(--k-font-display)", fontSize: 30, fontWeight: 600, letterSpacing: -0.02, lineHeight: 1.1 }}>{t.hora}</p>
                <p style={{ fontSize: 15, opacity: 0.85, marginTop: "auto" }}>{t.publico}</p>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {dias.map((d) => (
                    <span key={d} style={{
                      fontSize: 11, padding: "4px 10px", borderRadius: 999,
                      background: t.cor === "#1d1d1f" ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.06)",
                      color: t.ink, letterSpacing: 0.02,
                    }}>{d}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={480}>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 14,
          }} className="k-schedule-foot">
            <div style={{ borderTop: "1px solid var(--k-line)", paddingTop: 18 }}>
              <p className="k-eyebrow muted" style={{ marginBottom: 6 }}>Idade mínima</p>
              <p style={{ fontSize: 16, color: "var(--k-ink)" }}>Crianças podem treinar a partir de <strong>14 anos</strong>, junto com a turma adulta.</p>
            </div>
            <div style={{ borderTop: "1px solid var(--k-line)", paddingTop: 18 }}>
              <p className="k-eyebrow muted" style={{ marginBottom: 6 }}>Onde treinamos</p>
              <p style={{ fontSize: 16, color: "var(--k-ink)" }}>Av. Mirandela 1222sb · Nilópolis · em frente à Praça Rondon Gonçalves.</p>
            </div>
          </div>
          <p className="k-caption" style={{ marginTop: 22 }}>
            Venha fazer sua aula experimental — basta aparecer no horário.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SectionAbout, SectionSensei, SectionStyles, SectionSchedule });