/* Mobile: August Camp page */

const CAMP_DAY = [
  { 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 CAMP_KIND_COLOR = {
  warm:     "#f2c94c",
  court:    "var(--c-red)",
  athletic: "#3c6997",
  edu:      "#5b8a72",
  rest:     "rgba(255,255,255,0.4)",
};

const CAMP_PERKS = [
  ["Player package",    "Branded jersey, training kit, gear bag."],
  ["Daily media",       "Daily socials. Weekly photo drops."],
  ["Media Day",         "Pro-style headshots, action footage, 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."],
];

function CampPage({ onGo }) {
  return (
    <main className="page">
      {/* Hero */}
      <section style={{ padding: "10px var(--gutter) 22px" }}>
        <span className="eyebrow">August Pre-Season Camp · 2026</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 52, lineHeight: 0.94 }}>
          The first cohort of <span style={{ color: "var(--c-red)" }}>London LOGIC.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          Monday through Friday, August 3 – 21. Three weeks of structured development — ~20 program hours/week.
        </p>
      </section>

      {/* Camp imagery — first cohort in action */}
      <section style={{ padding: "0 var(--gutter) 24px", display: "flex", flexDirection: "column", gap: 10 }}>
        <div className="photo" style={{ aspectRatio: "5 / 4", borderRadius: 16 }}>
          <img src="../assets/camp-coach-teaching.jpeg"
            alt="A LOGIC coach breaking down footwork with a young athlete on the court"
            style={{ objectPosition: "center 30%" }}/>
          <span className="mono" style={{
            position: "absolute", left: 12, bottom: 10, color: "#fff", fontSize: 10,
            letterSpacing: "0.1em", textShadow: "0 1px 8px rgba(0,0,0,0.6)"
          }}>Coaching, one-on-one</span>
        </div>
        <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 16 }}>
          <img src="../assets/camp-passing-drill.jpeg"
            alt="Athletes running a passing and reaction drill under the hoop at camp"
            style={{ objectPosition: "center 35%" }}/>
          <span className="mono" style={{
            position: "absolute", left: 12, bottom: 10, color: "#fff", fontSize: 10,
            letterSpacing: "0.1em", textShadow: "0 1px 8px rgba(0,0,0,0.6)"
          }}>Live reps · summer session</span>
        </div>
      </section>

      {/* Camp dates strip */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card card-red" style={{ padding: "22px 22px" }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.9)" }}>Camp window</span>
          <div className="display" style={{ marginTop: 10, fontSize: 56, lineHeight: 0.9, color: "#fff" }}>
            Aug 3 – 21<br/>2026
          </div>
          <div className="mono" style={{ marginTop: 12, color: "rgba(255,255,255,0.85)" }}>
            3 weeks · Mon – Fri · ~20 program hrs/wk
          </div>
        </div>
      </section>

      {/* Daily schedule */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">A day at LOGIC</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          Example Schedule.
        </h2>
        <div className="mono" style={{ color: "var(--c-ink-dim)", marginBottom: 14 }}>
          ~20 program hours/week · adapted by division
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          {CAMP_DAY.map((b, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "10px 1fr",
              gap: 14, padding: "14px 16px",
              alignItems: "center",
              borderBottom: i < CAMP_DAY.length - 1 ? "1px solid var(--c-line)" : "none",
            }}>
              <div style={{
                width: 10, height: 10, borderRadius: 3,
                background: CAMP_KIND_COLOR[b.kind],
              }}/>
              <div style={{ minWidth: 0 }}>
                <div className="mono" style={{ color: "var(--c-ink-dim)", fontSize: 9.5 }}>{b.time}</div>
                <div style={{ marginTop: 4, color: "#fff", fontSize: 14.5, fontWeight: 600, lineHeight: 1.25 }}>
                  {b.label}
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* legend */}
        <div style={{
          marginTop: 10, display: "flex", flexWrap: "wrap", gap: 10,
          padding: "0 2px",
        }}>
          {[
            ["court",    "Court"],
            ["athletic", "Athletic"],
            ["edu",      "Education"],
            ["warm",     "Warm-up"],
            ["rest",     "Rest"],
          ].map(([k, l]) => (
            <div key={k} style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{
                width: 8, height: 8, borderRadius: 2,
                background: CAMP_KIND_COLOR[k], display: "inline-block",
              }}/>
              <span className="mono" style={{ color: "var(--c-ink-dim)", fontSize: 9.5 }}>{l}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Pricing */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">Inaugural launch pricing</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          Pricing by <span style={{ color: "var(--c-red)" }}>division.</span>
        </h2>
        <p style={{ margin: "8px 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.5 }}>
          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.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {[
            { 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) => (
            <div key={t.name} className="card card-ink" style={{
              padding: "18px 18px", position: "relative", overflow: "hidden",
            }}>
              {/* Division header */}
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
                <span style={{ width: 6, height: 26, borderRadius: 2, background: t.color }}/>
                <div className="display" style={{ fontSize: 22, lineHeight: 1, color: "#fff" }}>
                  {t.name} LOGIC
                </div>
              </div>

              {/* 3-up week prices */}
              <div style={{
                display: "grid", gridTemplateColumns: "1fr 1fr 1.15fr", gap: 8,
              }}>
                <div style={{
                  padding: "12px 10px", borderRadius: 8,
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid rgba(255,255,255,0.08)",
                }}>
                  <div className="mono" style={{ color: "rgba(255,255,255,0.55)", fontSize: 9.5 }}>1 wk</div>
                  <div className="display" style={{ marginTop: 6, fontSize: 18, lineHeight: 1, color: "rgba(255,255,255,0.82)" }}>{t.p1}</div>
                </div>
                <div style={{
                  padding: "12px 10px", borderRadius: 8,
                  background: "rgba(255,255,255,0.04)",
                  border: "1px solid rgba(255,255,255,0.08)",
                }}>
                  <div className="mono" style={{ color: "rgba(255,255,255,0.55)", fontSize: 9.5 }}>2 wks</div>
                  <div className="display" style={{ marginTop: 6, fontSize: 18, lineHeight: 1, color: "rgba(255,255,255,0.82)" }}>{t.p2}</div>
                </div>
                <div style={{
                  padding: "12px 10px", borderRadius: 8,
                  background: "var(--c-red)",
                  border: "1px solid var(--c-red)",
                  position: "relative",
                }}>
                  <div className="mono" style={{ color: "rgba(255,255,255,0.95)", fontSize: 9.5 }}>
                    3 wks · Best Value
                  </div>
                  <div className="display" style={{ marginTop: 6, fontSize: 22, lineHeight: 1, color: "#fff" }}>{t.p3}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* What's included */}
        <div className="card card-ink" style={{ padding: "20px 20px", marginTop: 10 }}>
          <span className="eyebrow">What every tier includes</span>
          <ul style={{
            listStyle: "none", padding: 0, margin: "12px 0 0",
            display: "grid", gridTemplateColumns: "1fr", gap: 8,
          }}>
            {[
              "Choose 1, 2, or 3 weeks",
              "Up to 60 hours of programming",
              "Player merch package",
              "Daily media · weekly photo drops",
              "Education + film sessions",
              "Aug 22 Community Game (Elite)",
            ].map(f => (
              <li key={f} style={{
                display: "flex", gap: 10, fontSize: 13.5, color: "#fff", lineHeight: 1.4,
              }}>
                <span style={{ color: "var(--c-red)", fontWeight: 700 }}>✓</span>{f}
              </li>
            ))}
          </ul>
        </div>

        {/* Primary CTA */}
        <button
          className="btn tappable"
          style={{ marginTop: 12, width: "100%" }}
          onClick={() => onGo("register")}
        >
          Choose your weeks →
        </button>

        {/* Brief Sponsor-a-Week mention */}
        <div className="card" style={{ padding: "18px 18px", marginTop: 10 }}>
          <span className="mono" style={{ color: "var(--c-red)" }}>Registered for multiple weeks?</span>
          <p style={{ margin: "8px 0 12px", color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.55 }}>
            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.
          </p>
          <a
            href="#scholarship"
            className="tappable"
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "10px 16px", borderRadius: 999,
              background: "transparent", color: "#fff",
              border: "1px solid var(--c-line)",
              fontFamily: "var(--font-mono)", fontSize: 11,
              letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600,
              textDecoration: "none",
            }}
          >
            Sponsor-a-Week →
          </a>
        </div>

        {/* Why per-tier */}
        <div className="card" style={{ padding: "20px 20px", marginTop: 10 }}>
          <span className="eyebrow">Why per-division pricing?</span>
          <p style={{ marginTop: 10, color: "#fff", fontSize: 14, lineHeight: 1.55 }}>
            Older divisions get more advanced programming — film, tactics, athletic prep, and showcase
            exposure. Tiers reflect the depth of coaching at each level.
          </p>
        </div>
      </section>

      {/* Athlete experience */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">The athlete experience</span>
        <h2 className="display" style={{ margin: "8px 0 14px", fontSize: 28, lineHeight: 1.05 }}>
          A premium <span style={{ color: "var(--c-red)" }}>academy-style</span> camp.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
          {CAMP_PERKS.map(([t, b]) => (
            <div key={t} className="card" style={{ padding: 16 }}>
              <div className="display" style={{ fontSize: 16.5, color: "#fff", lineHeight: 1.1 }}>{t}</div>
              <p style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 12.5, lineHeight: 1.45 }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Closing weekend — Elite Community Game */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">Closing weekend</span>
        <h2 className="display" style={{ margin: "8px 0 14px", fontSize: 28, lineHeight: 1.05 }}>
          The <span style={{ color: "var(--c-red)" }}>Elite Community Game.</span>
        </h2>
        <p style={{ margin: "0 0 14px", color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>
          Saturday, August 22 — London's top high-school talent meets the LOGIC Elite cohort. A homecoming for our players, sponsors, and city.
        </p>

        <div className="card card-ink" style={{ padding: "24px 22px" }}>
          <div className="mono" style={{ color: "var(--c-red)" }}>Saturday · Aug 22 · 2026</div>
          <div className="display" style={{ marginTop: 10, fontSize: 44, lineHeight: 0.9, color: "var(--c-red)" }}>
            London + LOGIC.
          </div>
          <div style={{
            marginTop: 22, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12,
          }}>
            {[["Doors", "5:00 PM"], ["Tip-off", "6:30 PM"], ["Venue", "TBA"]].map(([k, v]) => (
              <div key={k}>
                <div className="mono" style={{ color: "rgba(255,255,255,0.6)", fontSize: 9.5 }}>{k}</div>
                <div className="display" style={{ marginTop: 4, fontSize: 18, color: "#fff" }}>{v}</div>
              </div>
            ))}
          </div>

          <ul style={{
            listStyle: "none", padding: 0, margin: "20px 0 0",
            display: "flex", flexDirection: "column", gap: 8,
            borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 16,
          }}>
            {[
              "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: 13.5, color: "#fff", lineHeight: 1.45,
              }}>
                <span style={{ color: "var(--c-red)" }}>✦</span>{x}
              </li>
            ))}
          </ul>
        </div>

        <p style={{ margin: "12px 0 0", color: "var(--c-ink-soft)", fontSize: 13, lineHeight: 1.5 }}>
          Included for every Elite registrant. Open to the city — bring family, bring friends, bring the noise.
        </p>
      </section>

      {/* CTA */}
      <section style={{ padding: "10px var(--gutter) 12px", display: "flex", flexDirection: "column", gap: 10 }}>
        <button className="btn tappable" onClick={() => onGo("divisions")}>
          See the divisions →
        </button>
        <button className="btn btn-ghost tappable" onClick={() => onGo("faq")}>
          Read the FAQ
        </button>
      </section>
    </main>
  );
}

Object.assign(window, { CampPage });