// Ikigai — Shop, enrollment, contact

function SectionShop() {
  const products = [
    { name: "Karategi Tradicional", price: "R$ 480", line: "Algodão 100% · 12oz", img: null, accent: "#fbfbfd" },
    { name: "Obi (Faixa)", price: "A partir de R$ 95", line: "Em todas as cores oficiais", img: null, accent: "#1d1d1f" },
    { name: "Protetor Bucal", price: "R$ 65", line: "Modelagem por aquecimento", img: null, accent: "#e8f4ff" },
    { name: "Makiwara Portátil", price: "R$ 320", line: "Para treino em casa", img: null, accent: "#f5d949" },
  ];
  return (
    <section id="loja" className="k-section">
      <div className="k-container-wide" style={{ maxWidth: 1200 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 60 }}>
          <div>
            <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Loja</p></Reveal>
            <Reveal delay={100}>
              <h2 className="k-h2">Equipamentos do Ikigai.</h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="k-lead" style={{ maxWidth: 480, marginTop: 14 }}>
                Tudo o que você precisa para começar — selecionado pelos nossos instrutores.
              </p>
            </Reveal>
          </div>
          <Reveal delay={300}><a href="#" className="k-link">Ver catálogo completo</a></Reveal>
        </div>

        <div className="k-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {products.map((p, i) => (
            <Reveal key={p.name} delay={i * 80}>
              <a href="#" style={{ display: "block" }}>
                <div style={{
                  background: p.accent, borderRadius: 22,
                  aspectRatio: "1/1", marginBottom: 16,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  position: "relative", overflow: "hidden",
                  border: p.accent === "#fbfbfd" ? "1px solid var(--k-line)" : "none",
                }}>
                  {/* product placeholder shape */}
                  {i === 0 && <div style={{ width: "60%", height: "70%", background: "#fff", borderRadius: 6, boxShadow: "0 20px 40px -10px rgba(0,0,0,0.15)", border: "1px solid var(--k-line)" }} />}
                  {i === 1 && <div style={{ width: "85%", height: 24, background: "#0a0a0a", borderRadius: 12, position: "relative" }}>
                    <div style={{ position: "absolute", inset: "6px 0", borderTop: "1px solid #fff", borderBottom: "1px solid #fff", opacity: 0.85 }} />
                  </div>}
                  {i === 2 && <div style={{ width: 100, height: 60, background: "#fff", borderRadius: 30, border: "1px solid var(--k-line)" }} />}
                  {i === 3 && <div style={{ width: 30, height: "70%", background: "#5a3a22", borderRadius: 4 }} />}
                </div>
                <p style={{ fontSize: 17, fontWeight: 600, color: "var(--k-ink)", marginBottom: 4, letterSpacing: -0.01 }}>{p.name}</p>
                <p className="k-caption" style={{ marginBottom: 6 }}>{p.line}</p>
                <p style={{ fontSize: 15, fontWeight: 500, color: "var(--k-ink-2)" }}>{p.price}</p>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Enrollment — interactive trial-class booking
// ─────────────────────────────────────────────────────────────────
function SectionEnroll() {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({ name: "", age: "adultos", date: "", phone: "" });

  const ages = ["infantil", "juvenil", "adultos", "sênior"];
  const ageLabels = { infantil: "4–9 anos", juvenil: "10–15 anos", adultos: "16–55 anos", sênior: "55+" };
  const dates = ["Sáb, 02 Mai · 09:00", "Ter, 05 Mai · 19:00", "Qui, 07 Mai · 19:00"];

  const next = () => setStep(s => Math.min(s + 1, 3));
  const back = () => setStep(s => Math.max(s - 1, 1));

  return (
    <section id="matricula" className="k-section k-section-dark" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="k-container" style={{ maxWidth: 720 }}>
        <Reveal>
          <p className="k-eyebrow" style={{ color: "#86868b", marginBottom: 14, fontSize: 14, textTransform: "uppercase", letterSpacing: 0.06 }}>
            Aula experimental
          </p>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="k-h2" style={{ color: "#fff", marginBottom: 18 }}>
            Sua primeira aula é por nossa conta.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="k-lead" style={{ color: "#a1a1a6", marginBottom: 50 }}>
            Sem compromisso. Sem mensalidade adiantada. Apenas venha treinar.
          </p>
        </Reveal>

        {/* Stepper */}
        <Reveal delay={300}>
          <div style={{
            background: "#1d1d1f", borderRadius: 22, padding: 36,
            border: "1px solid rgba(255,255,255,0.08)",
          }}>
            <div style={{ display: "flex", gap: 6, marginBottom: 32 }}>
              {[1, 2, 3].map(n => (
                <div key={n} style={{
                  flex: 1, height: 3, borderRadius: 2,
                  background: step >= n ? "#0071e3" : "rgba(255,255,255,0.12)",
                  transition: "background 0.3s var(--k-ease)",
                }} />
              ))}
            </div>

            <p style={{ fontSize: 12, letterSpacing: 0.06, textTransform: "uppercase", color: "#86868b", marginBottom: 12, fontWeight: 500 }}>
              Passo {step} de 3
            </p>

            {step === 1 && (
              <div>
                <h3 style={{ fontSize: 28, fontWeight: 600, color: "#fff", marginBottom: 24, letterSpacing: -0.01 }}>Para qual faixa etária?</h3>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
                  {ages.map(a => (
                    <button key={a} onClick={() => setData(d => ({ ...d, age: a }))} style={{
                      padding: "20px 18px", borderRadius: 12,
                      background: data.age === a ? "#fff" : "rgba(255,255,255,0.05)",
                      color: data.age === a ? "#000" : "#fff",
                      textAlign: "left", border: "1px solid " + (data.age === a ? "#fff" : "rgba(255,255,255,0.1)"),
                      transition: "all 0.2s var(--k-ease)",
                    }}>
                      <p style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.01, textTransform: "capitalize", marginBottom: 4 }}>{a}</p>
                      <p style={{ fontSize: 13, opacity: 0.7 }}>{ageLabels[a]}</p>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {step === 2 && (
              <div>
                <h3 style={{ fontSize: 28, fontWeight: 600, color: "#fff", marginBottom: 24, letterSpacing: -0.01 }}>Quando você pode vir?</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {dates.map(d => (
                    <button key={d} onClick={() => setData(x => ({ ...x, date: d }))} style={{
                      padding: "18px 22px", borderRadius: 12,
                      background: data.date === d ? "#fff" : "rgba(255,255,255,0.05)",
                      color: data.date === d ? "#000" : "#fff",
                      textAlign: "left", border: "1px solid " + (data.date === d ? "#fff" : "rgba(255,255,255,0.1)"),
                      fontSize: 17, fontWeight: 500, letterSpacing: -0.01,
                    }}>{d}</button>
                  ))}
                </div>
              </div>
            )}

            {step === 3 && (
              <div>
                <h3 style={{ fontSize: 28, fontWeight: 600, color: "#fff", marginBottom: 24, letterSpacing: -0.01 }}>Seus dados</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                  <input value={data.name} onChange={(e) => setData(d => ({ ...d, name: e.target.value }))} placeholder="Nome completo" style={{
                    background: "rgba(255,255,255,0.05)", color: "#fff", padding: "18px 22px",
                    borderRadius: 12, border: "1px solid rgba(255,255,255,0.1)", fontSize: 17,
                    fontFamily: "inherit", outline: "none",
                  }} />
                  <input value={data.phone} onChange={(e) => setData(d => ({ ...d, phone: e.target.value }))} placeholder="WhatsApp" style={{
                    background: "rgba(255,255,255,0.05)", color: "#fff", padding: "18px 22px",
                    borderRadius: 12, border: "1px solid rgba(255,255,255,0.1)", fontSize: 17,
                    fontFamily: "inherit", outline: "none",
                  }} />
                  <div style={{
                    marginTop: 10, padding: 18, borderRadius: 12,
                    background: "rgba(0,113,227,0.1)", border: "1px solid rgba(0,113,227,0.3)",
                  }}>
                    <p style={{ fontSize: 13, color: "#86868b", marginBottom: 4, letterSpacing: 0.04, textTransform: "uppercase", fontWeight: 500 }}>Resumo</p>
                    <p style={{ fontSize: 15, color: "#fff", lineHeight: 1.5 }}>
                      Turma <strong style={{ color: "#fff" }}>{data.age}</strong> · Karatê Shotokan<br/>
                      {data.date || "—"}
                    </p>
                  </div>
                </div>
              </div>
            )}

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 32 }}>
              <button onClick={back} disabled={step === 1} style={{
                padding: "12px 22px", borderRadius: 980, fontSize: 17,
                background: "transparent", color: step === 1 ? "#48484a" : "#fff",
                border: "1px solid rgba(255,255,255,0.15)",
                cursor: step === 1 ? "default" : "pointer",
              }}>Voltar</button>
              {step < 3 ? (
                <button onClick={next} className="k-btn k-btn-primary">Continuar</button>
              ) : (
                <button onClick={() => alert("Reservada! Você receberá uma confirmação em até 1h.")} className="k-btn k-btn-primary">
                  Confirmar reserva
                </button>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Contact / Location
// ─────────────────────────────────────────────────────────────────
function SectionContact() {
  return (
    <section id="contato" className="k-section" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="k-container">
        <div className="k-grid" style={{ gridTemplateColumns: "1fr 1fr", gap: 60 }}>
          <div>
            <Reveal><p className="k-eyebrow muted" style={{ marginBottom: 10 }}>Visite o dojo</p></Reveal>
            <Reveal delay={100}>
              <h2 className="k-h2" style={{ marginBottom: 28, maxWidth: 480 }}>
                Nilópolis,<br/>em frente à praça.
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <div style={{ display: "flex", flexDirection: "column", gap: 18, marginTop: 32 }}>
                {[
                  { label: "Endereço", value: "Estr. Mirandela, 1222 sb\nNilópolis · RJ · 26520-090\nEm frente à Praça Rondon Gonçalves" },
                  { label: "WhatsApp", value: "(21) 99608-7003" },
                  { label: "E-mail", value: "dojo@ikigai.com.br" },
                  { label: "Horário das aulas", value: "Seg / Qua / Sex\nManhã 09:00–10:00 · Noite 18:00–20:00" },
                  { label: "Aula experimental", value: "Venha fazer sua aula experimental — basta aparecer." },
                ].map(c => (
                  <div key={c.label} style={{ borderTop: "1px solid var(--k-line)", paddingTop: 14 }}>
                    <p style={{ fontSize: 12, letterSpacing: 0.05, textTransform: "uppercase", color: "var(--k-ink-3)", marginBottom: 6, fontWeight: 500 }}>{c.label}</p>
                    <p style={{ fontSize: 17, color: "var(--k-ink)", whiteSpace: "pre-line", letterSpacing: -0.01 }}>{c.value}</p>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
          <Reveal delay={300}>
            <div style={{
              background: "#1d1d1f", borderRadius: 22, aspectRatio: "1/1.05",
              position: "relative", overflow: "hidden",
            }}>
              {/* Stylized map */}
              <svg viewBox="0 0 400 420" style={{ width: "100%", height: "100%", display: "block" }}>
                <rect width="400" height="420" fill="#1d1d1f"/>
                {/* streets */}
                <g stroke="#2d2d2f" strokeWidth="1">
                  {[60, 130, 200, 270, 340].map(y => <line key={y} x1="0" y1={y} x2="400" y2={y}/>)}
                  {[80, 160, 240, 320].map(x => <line key={x} x1={x} y1="0" x2={x} y2="420"/>)}
                </g>
                <g stroke="#48484a" strokeWidth="2">
                  <line x1="0" y1="220" x2="400" y2="220"/>
                  <line x1="180" y1="0" x2="180" y2="420"/>
                </g>
                {/* highlight */}
                <circle cx="200" cy="220" r="48" fill="rgba(0,113,227,0.18)"/>
                <circle cx="200" cy="220" r="10" fill="#0071e3"/>
                <circle cx="200" cy="220" r="10" fill="#0071e3" opacity="0.4">
                  <animate attributeName="r" from="10" to="48" dur="2s" repeatCount="indefinite"/>
                  <animate attributeName="opacity" from="0.4" to="0" dur="2s" repeatCount="indefinite"/>
                </circle>
                <text x="220" y="215" fill="#fff" fontSize="13" fontFamily="-apple-system, sans-serif" fontWeight="600">Dojô Ikigai · Mestre Robson</text>
                <text x="220" y="232" fill="#86868b" fontSize="11" fontFamily="-apple-system, sans-serif">Estr. Mirandela, 1222sb · 26520-090</text>
              </svg>
              <div style={{ position: "absolute", left: 24, bottom: 24, right: 24, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div>
                  <p style={{ fontSize: 12, letterSpacing: 0.05, textTransform: "uppercase", color: "#86868b", marginBottom: 4, fontWeight: 500 }}>Em frente à</p>
                  <p style={{ fontSize: 17, color: "#fff", fontWeight: 600, letterSpacing: -0.01 }}>Praça Rondon Gonçalves</p>
                </div>
                <a href="https://maps.google.com/?q=Estr.+Mirandela+1222sb,+Nilópolis,+RJ,+26520-090" target="_blank" rel="noreferrer" className="k-btn k-btn-light" style={{ fontSize: 14, padding: "10px 18px" }}>Abrir no mapa</a>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionShop, SectionEnroll, SectionContact });