/* Divisions — interactive selector */

const DIV_FULL = [
  {
    id: "rookie", name: "Rookie", grades: "~Grade 1 – 3", color: "#f0a04b", roman: "I",
    tagline: "Confidence first. Coordination, comfort, and a love for the game.",
    feel: "Camp-style energy. Lower nets, smaller balls, big smiles.",
    focus: [
      "Introduction to basketball fundamentals",
      "Coordination and physical literacy",
      "Ball familiarity and control",
      "Listening, teamwork, following instructions",
      "Confidence through repetition and play",
    ],
    capacity: 24, mix: "12 boys · 12 girls",
  },
  {
    id: "foundation", name: "Foundation", grades: "~Grade 4 – 6", color: "#5b8a72", roman: "II",
    tagline: "Structured fundamentals in a still-fun environment.",
    feel: "Camp meets training. Routines, expectations, skill progressions.",
    focus: [
      "Fundamental skill development",
      "Movement mechanics and body control",
      "Spacing and intro team concepts",
      "Applying coaching feedback",
      "Communication and enjoyment of the game",
    ],
    capacity: 24, mix: "12 boys · 12 girls",
  },
  {
    id: "development", name: "Development", grades: "~Grade 7 – 8", color: "#3c6997", roman: "III",
    tagline: "The bridge between learning and competing.",
    feel: "Higher structure, intensity, accountability. Game-based learning.",
    focus: [
      "Skill refinement and game application",
      "Decision-making and basketball IQ",
      "Spacing and team understanding",
      "Competitive gameplay and situational drills",
      "Accountability, confidence, performance habits",
    ],
    capacity: 24, mix: "12 boys · 12 girls",
  },
  {
    id: "performance", name: "Performance", grades: "~Grade 9 – 10", color: "#7a3b86", roman: "IV",
    tagline: "Train to compete. Compete to lead.",
    feel: "Serious training environment. Pace, physicality, decision-making.",
    focus: [
      "Advanced skill execution and live application",
      "Tactical awareness and basketball IQ",
      "Film analysis and performance reflection",
      "Strength and movement efficiency",
      "Leadership, communication, competitive confidence",
    ],
    capacity: 24, mix: "12 boys · 12 girls",
  },
  {
    id: "elite", name: "Elite", grades: "High School Varsity", color: "#c41e2a", roman: "V",
    tagline: "Senior athletes. Showcase-ready.",
    feel: "Highest intensity. Includes the Community Game on Aug 22.",
    focus: [
      "High-intensity training and competitive gameplay",
      "Advanced skill refinement and execution",
      "Tactical awareness and decision-making",
      "Physical preparation and performance habits",
      "Showcase preparation and competitive exposure",
    ],
    capacity: 24, mix: "12 boys · 12 girls",
  },
];

function DivisionsPage() {
  const [active, setActive] = React.useState("development");
  const D = DIV_FULL.find(d => d.id === active);

  return (
    <React.Fragment>
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <SectionHead
          eyebrow="The pathway"
          title={<span>Five divisions.<br/><span style={{ color: "var(--c-red)" }}>One arc.</span></span>}
          kicker="Click any division to explore its focus, feel, and capacity."
        />

        {/* Tab strip */}
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${DIV_FULL.length}, 1fr)`,
          gap: 8,
          marginBottom: 32,
        }} className="div-tabs">
          {DIV_FULL.map(d => {
            const on = d.id === active;
            return (
              <button key={d.id} onClick={() => setActive(d.id)} style={{
                background: on ? d.color : "var(--c-paper)",
                color: on ? "#fff" : "var(--c-ink)",
                border: `1.5px solid ${on ? d.color : "var(--c-line)"}`,
                borderRadius: "var(--radius-card)",
                padding: "18px 16px",
                textAlign: "left",
                transition: "all 200ms ease",
                cursor: "pointer",
              }}>
                <div className="mono" style={{ opacity: 0.85, fontSize: 11 }}>{d.roman} · {d.grades}</div>
                <div className="display" style={{
                  fontSize: 24, lineHeight: 1, marginTop: 8,
                  color: on ? "#fff" : "var(--c-ink)",
                }}>{d.name}</div>
              </button>
            );
          })}
        </div>

        {/* Active division panel */}
        <div key={active} className="reveal" style={{
          display: "grid",
          gridTemplateColumns: "1.05fr 0.95fr",
          gap: 28,
          alignItems: "stretch",
        }}>
          {/* Left — copy */}
          <div style={{
            background: "var(--c-paper)",
            border: `1px solid var(--c-line)`,
            borderTop: `6px solid ${D.color}`,
            borderRadius: "var(--radius-card)",
            padding: "32px 36px",
          }}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "flex-start",
              gap: 24, marginBottom: 24,
            }}>
              <div>
                <span className="mono" style={{ color: D.color }}>Division {D.roman}</span>
                <h3 className="display" style={{
                  margin: "10px 0 0", fontSize: "clamp(36px, 5vw, 64px)",
                  lineHeight: 0.95, color: "var(--c-ink)",
                }}>{D.name} <span style={{ color: D.color }}>LOGIC</span></h3>
                <p style={{ marginTop: 14, fontSize: 18, color: "var(--c-ink)", maxWidth: "44ch", fontWeight: 500 }}>
                  {D.tagline}
                </p>
              </div>
              <div style={{
                width: 64, height: 64, borderRadius: 999,
                background: D.color, color: "#fff",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-display)", fontSize: 28,
                flexShrink: 0,
              }}>{D.roman}</div>
            </div>

            <div style={{
              padding: "16px 20px", marginBottom: 22,
              background: "var(--c-warm)", borderRadius: 10,
              fontStyle: "italic", color: "var(--c-ink)",
              fontSize: 15,
            }}>"{D.feel}"</div>

            <div className="mono" style={{ color: "var(--c-ink-soft)", marginBottom: 12 }}>Development focus</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {D.focus.map((f, i) => (
                <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15.5, lineHeight: 1.45 }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6, background: D.color, color: "#fff",
                    display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: 11,
                    flexShrink: 0, marginTop: 2,
                  }}>{i + 1}</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right — capacity + photo */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
            <div style={{
              background: D.color, color: "#fff",
              borderRadius: "var(--radius-card)",
              padding: "32px 36px",
            }}>
              <div className="mono" style={{ opacity: 0.85 }}>Cohort size</div>
              <div className="display" style={{ fontSize: 96, lineHeight: 0.9, marginTop: 6 }}>
                <Counter to={D.capacity}/>
              </div>
              <div style={{ marginTop: 8, fontSize: 16, opacity: 0.95 }}>{D.mix}</div>
              <div style={{
                marginTop: 24, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,0.25)",
                display: "flex", flexDirection: "column", gap: 10,
              }}>
                <Row k="Grades" v={D.grades}/>
                <Row k="Programming" v="~20 hrs / week"/>
                <Row k="Camp duration" v="3 full weeks"/>
                <Row k="Coach ratio" v="~1 : 8"/>
              </div>
            </div>

            <PhotoSlot label="Division action shot · drop image"
              ratio="5 / 4" style={{ borderTop: `4px solid ${D.color}`, borderRadius: "var(--radius-card)" }}/>

            <a href="#register" style={{
              padding: "18px 24px",
              background: "var(--c-ink)", color: "var(--c-paper)",
              borderRadius: "var(--radius-card)",
              fontFamily: "var(--font-display)", letterSpacing: "0.06em",
              textTransform: "uppercase", fontSize: 18,
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              Reserve a {D.name} spot <Arrow size={16}/>
            </a>
          </div>
        </div>

        {/* Pathway timeline */}
        <div style={{ marginTop: 80 }}>
          <SectionHead eyebrow="A 12-year pathway" title="From Rookie to Elite." />
          <div style={{
            position: "relative",
            display: "grid",
            gridTemplateColumns: `repeat(${DIV_FULL.length}, 1fr)`,
            gap: 18, marginTop: 8,
          }} className="path-grid">
            <div style={{
              position: "absolute", left: 24, right: 24, top: 22, height: 2,
              background: "var(--c-line)", zIndex: 0,
            }}/>
            {DIV_FULL.map((d, i) => (
              <div key={d.id} style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 999, background: d.color, color: "#fff",
                  display: "grid", placeItems: "center", margin: "0 auto",
                  fontFamily: "var(--font-display)", fontSize: 18,
                }}>{d.roman}</div>
                <div className="display" style={{ marginTop: 14, fontSize: 18 }}>{d.name}</div>
                <div className="mono" style={{ marginTop: 4, color: "var(--c-ink-soft)", fontSize: 10 }}>{d.grades}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .div-tabs { grid-template-columns: repeat(2, 1fr) !important; }
          .reveal[style*="grid-template-columns: 1.05fr"] { grid-template-columns: 1fr !important; }
          .path-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>

    {/* Contact Coach AD — match the founder page */}
    {typeof window.ContactCTA !== "undefined" && (
      <window.ContactCTA
        eyebrow="Questions about a division?"
        title={<span>Contact <span style={{ color: "var(--c-red)" }}>Coach AD.</span></span>}
      />
    )}
    </React.Fragment>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14 }}>
      <span style={{ opacity: 0.8 }}>{k}</span>
      <span style={{ fontWeight: 600 }}>{v}</span>
    </div>
  );
}

window.DivisionsPage = DivisionsPage;