/* August Camp page */

const DAY_BLOCKS = [
{ time: "8:00 – 8:30", label: "Drop-off & check-in", kind: "rest" },
{ time: "8:30 – 9:00", label: "Opening camp meeting", kind: "edu" },
{ time: "9:00 – 10:00", label: "Mobility & activation", kind: "athletic" },
{ time: "10:00 – 10:30", label: "Break & snack", kind: "rest" },
{ time: "10:30 – 11:30", label: "On-court skill development", kind: "court" },
{ time: "11:30 – 12:30", label: "Lunch", kind: "rest" },
{ time: "12:30 – 1:15", label: "Education / workshop", kind: "edu" },
{ time: "1:15 – 2:15", label: "Athletic fluency & conditioning", kind: "athletic" },
{ time: "2:15 – 3:00", label: "On-court skill development", kind: "court" },
{ time: "3:00 – 3:30", label: "Camp meeting & dismissal", kind: "rest" }];


const KIND_COLOR = {
  warm: "var(--c-warm)",
  court: "var(--c-red)",
  athletic: "#3c6997",
  edu: "#5b8a72",
  rest: "var(--c-ink-soft)"
};

function CampPage() {
  return (
    <section style={{ padding: "60px 0 100px" }}>
      <div className="container">
        <SectionHead
          eyebrow="August Pre-Season Camp · 2026"
          title={<span>The first cohort of <span style={{ color: "var(--c-red)" }}>London LOGIC.</span></span>}
          kicker="Monday through Friday, August 3 – 21. Three weeks of structured development — ~20 program hours/week." />
        

        {/* Camp imagery — first cohort in action */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.35fr 1fr",
          gap: 14,
          marginBottom: 56
        }} className="camp-photo-band">
          <figure style={{
            margin: 0, position: "relative", overflow: "hidden",
            borderRadius: "var(--radius-card)", background: "#0a0a0a",
            aspectRatio: "16 / 11"
          }}>
            <img src="assets/camp-coach-teaching.jpeg"
              alt="A LOGIC coach breaking down footwork with a young athlete on the court"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }} />
            <figcaption className="mono" style={{
              position: "absolute", left: 14, bottom: 12,
              color: "#fff", fontSize: 11, letterSpacing: "0.1em",
              textShadow: "0 1px 8px rgba(0,0,0,0.6)"
            }}>Coaching, one-on-one</figcaption>
          </figure>
          <figure style={{
            margin: 0, position: "relative", overflow: "hidden",
            borderRadius: "var(--radius-card)", background: "#0a0a0a",
            aspectRatio: "16 / 11"
          }}>
            <img src="assets/camp-passing-drill.jpeg"
              alt="Athletes running a passing and reaction drill under the hoop at camp"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%", display: "block" }} />
            <figcaption className="mono" style={{
              position: "absolute", left: 14, bottom: 12,
              color: "#fff", fontSize: 11, letterSpacing: "0.1em",
              textShadow: "0 1px 8px rgba(0,0,0,0.6)"
            }}>Live reps · summer session</figcaption>
          </figure>
        </div>

        {/* Camp window — single statement */}
        <div style={{
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
          padding: "32px 36px",
          marginBottom: 56,
          display: "grid",
          gridTemplateColumns: "auto 1fr auto",
          gap: 36,
          alignItems: "center"
        }} className="window-row">
          <div>
            <div className="mono" style={{ color: "var(--c-red)" }}>Camp window</div>
            <div className="display" style={{ fontSize: "clamp(48px, 6vw, 84px)", lineHeight: 0.95, marginTop: 8 }}>
              Aug 3 – 21
            </div>
            <div className="mono" style={{ color: "var(--c-ink-soft)", marginTop: 8 }}>2026 · three weeks</div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {["Mon", "Tue", "Wed", "Thu", "Fri"].map((d) =>
            <span key={d} className="mono" style={{
              padding: "10px 16px", border: "1px solid var(--c-line)", borderRadius: 999,
              fontSize: 12
            }}>{d}</span>
            )}
          </div>
          <div className="mono" style={{ color: "var(--c-ink-soft)", textAlign: "right", maxWidth: 220 }}>
            Monday through Friday<br />~20 program hours/week
          </div>
        </div>

        {/* Daily structure */}
        <div style={{
          background: "var(--c-paper)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-card)",
          overflow: "hidden"
        }}>
          <div style={{
            padding: "28px 36px",
            borderBottom: "1px solid var(--c-line)",
            display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16
          }}>
            <div>
              <div className="mono" style={{ color: "var(--c-red)" }}>A day at LOGIC</div>
              <h3 className="display" style={{ margin: "8px 0 0", fontSize: "clamp(28px, 4vw, 44px)" }}>
                Example Schedule
              </h3>
            </div>
            <div className="mono" style={{ color: "var(--c-ink-soft)" }}>
              ~20 program hours/week · adapted by division
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column" }}>
            {DAY_BLOCKS.map((b, i) =>
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "200px 14px 1fr auto",
              gap: 18, padding: "18px 36px",
              alignItems: "center",
              borderBottom: i < DAY_BLOCKS.length - 1 ? "1px solid var(--c-line)" : "none"
            }}>
                <div className="mono" style={{ color: "var(--c-ink-soft)" }}>{b.time}</div>
                <div style={{
                width: 12, height: 12, borderRadius: 4, background: KIND_COLOR[b.kind]
              }} />
                <div style={{ fontSize: 17, fontWeight: 600 }}>{b.label}</div>
                <div className="mono" style={{ color: "var(--c-ink-soft)", fontSize: 11 }}>{b.kind.toUpperCase()}</div>
              </div>
            )}
          </div>
        </div>

        {/* Pricing */}
        <div style={{ marginTop: 80 }}>
          <SectionHead
            eyebrow="Inaugural launch pricing · 2026"
            title={<span>Pricing by <span style={{ color: "var(--c-red)" }}>division.</span></span>}
            kicker="Families may register for 1, 2, or 3 weeks. The full 3-week experience is recommended for the complete LOGIC development pathway and best weekly value. 24 athletes per division (12 boys, 12 girls)." />
          

          <div style={{
            background: "var(--c-ink)",
            color: "var(--c-paper)",
            borderRadius: "var(--radius-card)",
            padding: "28px 0 0",
            position: "relative"
          }}>
            <span style={{
              position: "absolute", top: -10, left: 24,
              background: "var(--c-red)", color: "#fff",
              padding: "5px 10px", borderRadius: 999,
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase"
            }}>2026 Inaugural cohort</span>

            {/* table header */}
            <div className="price-row price-row-head" style={{
              display: "grid",
              gridTemplateColumns: "1.5fr 1fr 1fr 1.25fr",
              padding: "10px 36px 14px",
              fontFamily: "var(--font-mono)",
              fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",

              borderBottom: "1px solid rgba(255,255,255,0.12)",
              alignItems: "end", color: "color-mix(in oklab, var(--c-paper) 55%, transparent)"
            }}>
              <span>Division</span>
              <span style={{ textAlign: "right" }}>1 Week</span>
              <span style={{ textAlign: "right" }}>2 Weeks</span>
              <span style={{ textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 }}>
                <span style={{
                  background: "var(--c-red)", color: "#fff",
                  padding: "3px 8px", borderRadius: 4,
                  fontSize: 9, letterSpacing: "0.12em"
                }}>Best Value</span>
                <span>3 Weeks · Full LOGIC</span>
              </span>
            </div>

            {[
            { name: "Rookie", color: "#f0a04b", p1: "$425", p2: "$750", p3: "$995" },
            { name: "Foundation", color: "#5b8a72", p1: "$495", p2: "$875", p3: "$1,175" },
            { name: "Development", color: "#3c6997", p1: "$535", p2: "$950", p3: "$1,275" },
            { name: "Performance", color: "#7a3b86", p1: "$565", p2: "$995", p3: "$1,345" },
            { name: "Elite", color: "#c41e2a", p1: "$585", p2: "$1,035", p3: "$1,395" }].
            map((t, i, a) =>
            <div key={t.name} className="price-row" style={{
              display: "grid",
              gridTemplateColumns: "1.5fr 1fr 1fr 1.25fr",
              alignItems: "center",
              padding: "18px 36px",
              borderBottom: i < a.length - 1 ? "1px solid rgba(255,255,255,0.08)" : "none"
            }}>
                <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                  <span style={{ width: 10, height: 28, borderRadius: 2, background: t.color, flexShrink: 0 }} />
                  <span className="display" style={{ fontSize: 28, lineHeight: 1 }}>{t.name} LOGIC</span>
                </div>
                <div className="display price-cell" style={{ fontSize: 24, lineHeight: 1, textAlign: "right", color: "color-mix(in oklab, var(--c-paper) 60%, transparent)" }}>
                  <span className="price-cell-label mono" style={{ display: "none" }}>1 wk</span>{t.p1}
                </div>
                <div className="display price-cell" style={{ fontSize: 24, lineHeight: 1, textAlign: "right", color: "color-mix(in oklab, var(--c-paper) 60%, transparent)" }}>
                  <span className="price-cell-label mono" style={{ display: "none" }}>2 wks</span>{t.p2}
                </div>
                <div className="price-cell price-cell-hero" style={{
                textAlign: "right",
                background: "rgba(209,26,42,0.10)",
                borderLeft: "2px solid var(--c-red)",
                margin: "-18px -36px -18px 24px",
                color: "rgb(233, 26, 46)", padding: "18px 36px 18px 22px"
              }}>
                  <div className="display" style={{ fontSize: 34, lineHeight: 1, color: "var(--c-red)" }}>
                    <span className="price-cell-label mono" style={{ display: "none" }}>3 wks</span>{t.p3}
                  </div>
                </div>
              </div>
            )}

            <div style={{
              padding: "20px 36px",
              borderTop: "1px solid rgba(255,255,255,0.12)",
              background: "rgba(255,255,255,0.03)",
              borderBottomLeftRadius: "var(--radius-card)",
              borderBottomRightRadius: "var(--radius-card)",
              display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12
            }}>
              <span className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>
                Mon – Fri · Aug 3 – 21 · ~20 program hrs/week
              </span>
              <span className="mono" style={{ color: "#fff" }}>
                <span style={{ color: "var(--c-red)" }}>★</span> Choose the week or weeks that work best for your athlete
              </span>
            </div>
          </div>

          {/* What's included + spots */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.4fr 1fr",
            gap: 14,
            marginTop: 14
          }} className="price-grid">
            <div style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "28px 32px"
            }}>
              <Eyebrow>What every tier includes</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                {[
                "Choose 1, 2, or 3 weeks",
                "Up to 60 hours of programming",
                "Player merch package",
                "Daily media coverage",
                "Weekly photo drops",
                "Education + film sessions",
                "Coach ratios ~1 : 8",
                "Aug 22 Community Game (Elite)"].
                map((f) =>
                <li key={f} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--c-ink)" }}>
                    <span style={{ color: "var(--c-red)" }}>✓</span>{f}
                  </li>
                )}
              </ul>
              <div style={{ marginTop: 22 }}>
                <Btn to="register" kind="primary">Choose your weeks</Btn>
              </div>
            </div>

            <div style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: "28px 28px",
              display: "flex", flexDirection: "column", gap: 18
            }}>
              <div>
                <Eyebrow>Why per-division pricing?</Eyebrow>
                <p style={{ marginTop: 12, fontSize: 14.5, lineHeight: 1.55, color: "var(--c-ink)" }}>
                  Older divisions get more advanced programming — film, tactics, athletic prep, and showcase
                  exposure. Tiers reflect the depth of coaching at each level.
                </p>
              </div>
              <div style={{
                marginTop: "auto", padding: 16, borderRadius: 10,
                background: "var(--c-warm)", border: "1px solid var(--c-line)"
              }}>
                <div className="mono" style={{ color: "var(--c-red)" }}>Spots · 2026 cohort</div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1, marginTop: 6 }}>
                  <Counter to={120} /> total
                </div>
                <div className="mono" style={{ marginTop: 6, opacity: 0.7 }}>24 per division</div>
              </div>
            </div>
          </div>

          {/* Brief Sponsor-a-Week mention */}
          <div style={{
            marginTop: 14, padding: "18px 24px",
            background: "var(--c-paper)",
            border: "1px solid var(--c-line)",
            borderRadius: "var(--radius-card)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 18, flexWrap: "wrap"
          }}>
            <div style={{ flex: "1 1 320px", minWidth: 0 }}>
              <span className="mono" style={{ color: "var(--c-red)" }}>Registered for multiple weeks?</span>
              <div style={{ marginTop: 6, fontSize: 15, lineHeight: 1.5, color: "var(--c-ink)" }}>
                If your athlete genuinely can't attend one of their registered weeks, you can donate
                it to a family in need instead of taking a refund — the spot funds another athlete.
              </div>
            </div>
            <a href="#scholarship" style={{
              flex: "0 0 auto",
              padding: "12px 18px",
              background: "var(--c-ink)", color: "var(--c-paper)",
              borderRadius: 999,
              fontFamily: "var(--font-display)", letterSpacing: "0.06em",
              textTransform: "uppercase", fontSize: 13,
              display: "inline-flex", alignItems: "center", gap: 8,
              textDecoration: "none"
            }}>Sponsor-a-Week <Arrow size={12} /></a>
          </div>
        </div>

        {/* Athlete experience perks */}
        <div style={{ marginTop: 80 }}>
          <SectionHead
            eyebrow="The athlete experience"
            title="A premium academy-style camp." />
          
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14
          }} className="perks-grid">
            {[
            ["Player package", "Branded merch, jersey, training gear."],
            ["Daily media", "Daily socials. Weekly photo drops."],
            ["Media Day", "Pro-style headshots, action footage, and family portraits."],
            ["Showcase exposure", "Elite athletes featured Aug 22."],
            ["Coach ratios", "Low-capacity model. ~1 : 8."],
            ["Educator-led", "Learning goals + success criteria."],
            ["12-year pathway", "Return year after year."]].
            map(([t, b]) =>
            <div key={t} style={{
              background: "var(--c-paper)",
              border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)",
              padding: 22
            }}>
                <div className="display" style={{ fontSize: 22, lineHeight: 1.05 }}>{t}</div>
                <div style={{ marginTop: 10, fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.5 }}>{b}</div>
              </div>
            )}
          </div>
        </div>
        {/* Closing weekend — Elite Community Game */}
        <div style={{ marginTop: 80 }}>
          <SectionHead
            eyebrow="Closing weekend"
            title={<span>The <span style={{ color: "var(--c-red)" }}>Elite Community Game.</span></span>}
            kicker="Saturday, August 22 — London's top high-school talent meets the LOGIC Elite cohort. A homecoming for our players, sponsors, and city." />
          

          <div style={{
            display: "grid",
            gridTemplateColumns: "1.15fr 1fr",
            gap: 28, alignItems: "stretch"
          }} className="community-grid">
            <div style={{
              position: "relative", overflow: "hidden",
              borderRadius: "var(--radius-card)",
              background: "var(--c-ink)", color: "#fff",
              padding: "40px 44px", minHeight: 420,
              display: "flex", flexDirection: "column", justifyContent: "space-between"
            }}>
              <div style={{ position: "absolute", top: -40, right: -60, opacity: 0.18 }}>
                <HalfCourt width={420} color="#fff" opacity={1} />
              </div>
              <div style={{ position: "relative" }}>
                <div className="mono" style={{ color: "var(--c-red)" }}>Saturday · Aug 22 · 2026</div>
                <h3 className="display" style={{
                  margin: "16px 0 0", fontSize: "clamp(48px, 7vw, 96px)", color: "var(--c-red)", lineHeight: 0.92
                }}>
                  London + LOGIC.
                </h3>
              </div>
              <div style={{
                position: "relative", display: "grid",
                gridTemplateColumns: "repeat(3, 1fr)", gap: 18, marginTop: 32
              }}>
                {[["Doors", "5:00 PM"], ["Tip-off", "6:30 PM"], ["Venue", "TBA"]].map(([k, v]) =>
                <div key={k}>
                    <div className="mono" style={{ color: "var(--c-red)", opacity: 0.85 }}>{k}</div>
                    <div className="display" style={{ fontSize: 24, marginTop: 6, color: "var(--c-red)" }}>{v}</div>
                  </div>
                )}
              </div>
            </div>

            <div style={{
              background: "var(--c-paper)", border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)", padding: 28,
              display: "flex", flexDirection: "column", gap: 14
            }}>
              <Eyebrow>What to expect</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                "Live broadcast & courtside photo team",
                "Pre-game intros, anthem, and player package reveal",
                "Halftime: Foundation & Rookie skills exhibition",
                "Sponsor-of-the-night recognition",
                "Post-game family meet & greet"].
                map((x) =>
                <li key={x} style={{ display: "flex", gap: 10, fontSize: 15, color: "var(--c-ink)", lineHeight: 1.5 }}>
                    <span style={{ color: "var(--c-red)" }}>✦</span>{x}
                  </li>
                )}
              </ul>
              <div style={{
                marginTop: "auto", padding: "14px 16px", borderRadius: 10,
                background: "var(--c-warm)", border: "1px solid var(--c-line)",
                fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.5
              }}>
                Included for every Elite registrant. Open to the city — bring family, bring friends, bring the noise.
              </div>
            </div>
          </div>
        </div>

      </div>
      <style>{`
        @media (max-width: 1000px) {
          .window-row { grid-template-columns: 1fr !important; gap: 18px !important; }
          .window-row > div:last-child { text-align: left !important; }
          .camp-photo-band { grid-template-columns: 1fr !important; }
          .price-grid { grid-template-columns: 1fr !important; }
          .perks-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .community-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 760px) {
          .price-row-head { display: none !important; }
          .price-row {
            grid-template-columns: 1fr 1fr !important;
            row-gap: 8px !important;
            padding: 18px 22px !important;
          }
          .price-row > :nth-child(1) { grid-column: 1 / -1 !important; }
          .price-cell { text-align: left !important; display: flex !important; align-items: baseline !important; justify-content: space-between !important; }
          .price-cell-label { display: inline !important; color: rgba(255,255,255,0.5) !important; font-size: 10px !important; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 10px; }
          .price-cell-hero {
            margin: 0 !important;
            padding: 10px 14px !important;
            border-radius: 8px;
          }
        }
      `}</style>
    </section>);

}

window.CampPage = CampPage;