/* Merch / Shop page — London LOGIC gear.
   Products: reversible pinnie, logo tee, performance long sleeve, insulated water bottle.
   Store launches alongside the inaugural 2026 camp — cards drive "reserve / notify" by email. */

const MERCH_EMAIL = "info@londonlogicbasketball.com";

const SALE_RATE = 0.10;
const money = (n) => "$" + (Number.isInteger(n) ? n : n.toFixed(2));
const salePrice = (n) => money(+(n * (1 - SALE_RATE)).toFixed(2));

const MERCH_PRODUCTS = [
{
  key: "pinnie",
  category: "On-court",
  name: "Reversible Pinnie",
  desc: "Black to white in one flip. Breathable and built for live reps.",
  price: 60,
  tag: "Practice",
  colors: ["#0a0a0a", "#f4f1ea"]
},
{
  key: "tee",
  category: "Everyday",
  name: "Logo Tee",
  desc: "Quality cotton tee with the LOGIC logo centred on the chest. The one you'll live in — on the court and off it.",
  price: 40,
  tag: "Cotton",
  colors: ["#0a0a0a", "#f4f1ea", "var(--c-red)"]
},
{
  key: "longsleeve",
  category: "Layer up",
  name: "Performance Long Sleeve",
  desc: "Moisture-wicking long sleeve shirt. Built for warmups, cold gyms, and everyday training. Finished with a centered LOGIC logo on the chest.",
  price: 50,
  tag: "Dri-fit",
  colors: ["#0a0a0a", "var(--c-red)"]
},
{
  key: "shorts",
  category: "On-court",
  name: "Training Shorts",
  desc: "Lightweight training shorts with a secure, stay-put fit and a zip pocket. Built to move — finished with a printed LOGIC mark.",
  price: 40,
  tag: "Training",
  colors: ["#0a0a0a", "var(--c-red)"]
},
{
  key: "bottle",
  category: "Hydrate",
  name: "Sport Water Bottle",
  desc: "32oz plastic sport squeeze bottle. Built for quick hydration. Finished with a vinyl LOGIC logo sticker on the bottle.",
  price: 25,
  tag: "32 oz",
  colors: ["#0a0a0a", "var(--c-red)"]
}];


function ColorDots({ colors }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
      {colors.map((c, i) =>
      <span key={i} style={{
        width: 16, height: 16, borderRadius: 999, background: c,
        border: "1px solid color-mix(in oklab, var(--c-ink) 22%, transparent)",
        boxShadow: "inset 0 0 0 2px var(--c-paper)"
      }} />
      )}
    </div>);

}

function MerchCard({ p }) {
  return (
    <article style={{
      background: "var(--c-paper)",
      border: "1px solid var(--c-line)",
      borderRadius: "var(--radius-card)",
      overflow: "hidden",
      display: "flex", flexDirection: "column"
    }}>
      <div style={{ position: "relative" }}>
        <PhotoSlot ratio="1 / 1" label={`${p.name} · product shot`} style={{ borderRadius: 0 }} />
        <span className="mono" style={{
          position: "absolute", top: 14, left: 14,
          background: "var(--c-ink)", color: "var(--c-paper)",
          padding: "5px 10px", borderRadius: 999, fontSize: 10, letterSpacing: "0.12em"
        }}>{p.tag}</span>
        <span className="mono" style={{
          position: "absolute", top: 14, right: 14,
          background: "var(--c-red)", color: "#fff",
          padding: "5px 10px", borderRadius: 999, fontSize: 10, letterSpacing: "0.12em"
        }}>Launch −10%</span>
      </div>
      <div style={{ padding: "22px 22px 24px", display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
        <div className="mono" style={{ color: "var(--c-red)", fontSize: 11 }}>{p.category}</div>
        <h3 className="display" style={{ margin: 0, fontSize: 30, lineHeight: 1, color: "var(--c-ink)" }}>{p.name}</h3>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--c-ink-soft)" }}>{p.desc}</p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 4 }}>
          <ColorDots colors={p.colors} />
          <span className="mono" style={{ color: "var(--c-ink-soft)", fontSize: 11 }}>Colourways</span>
        </div>
        <div style={{
          marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--c-line)",
          display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 12
        }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
            <span className="mono" style={{ fontSize: 12, lineHeight: 1, color: "var(--c-ink-soft)", textDecoration: "line-through" }}>{money(p.price)}</span>
            <span className="display" style={{ fontSize: 34, lineHeight: 1, color: "var(--c-red)" }}>{salePrice(p.price)}</span>
          </div>
          <a href={`mailto:${MERCH_EMAIL}?subject=${encodeURIComponent("Reserve — " + p.name + " (London LOGIC)")}`}
          style={{
            display: "inline-flex", alignItems: "center", gap: 9,
            padding: "11px 18px", borderRadius: 999,
            background: "transparent", border: "2px solid var(--c-ink)", color: "var(--c-ink)",
            fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 13
          }}>
            Reserve <Arrow size={12} />
          </a>
        </div>
      </div>
    </article>);

}

function MerchPage() {
  return (
    <React.Fragment>
      {/* Hero */}
      <section data-screen-label="Merch" style={{ padding: "60px 0 28px" }}>
        <div className="container">
          <SectionHead
            eyebrow="The Locker · Official Gear"
            title={<span>Wear the <span style={{ color: "var(--c-red)" }}>LOGIC.</span></span>}
            kicker="Our first collection drops with the inaugural 2026 camp — on the court, in the stands, and around the city. Black-and-red, built to last, made for London." />
          
        </div>
      </section>

      {/* Launch status strip */}
      <section style={{ padding: "0 0 40px" }}>
        <div className="container">
          <div style={{
            background: "#15110d", color: "#fff",
            borderRadius: "var(--radius-card)",
            padding: "22px 28px", position: "relative", overflow: "hidden",
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap"
          }}>
            <div style={{ position: "absolute", top: -40, right: -40, opacity: 0.12, pointerEvents: "none" }}>
              <HalfCourt width={300} color="#fff" opacity={1} />
            </div>
            <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ width: 9, height: 9, borderRadius: 999, background: "var(--c-red)", flex: "0 0 auto" }} />
              <span className="mono" style={{ color: "rgba(255,255,255,0.92)", fontSize: 12.5 }}>
                Launch Sale · 10% off every piece · all profits fund camp scholarships
              </span>
            </div>
            <a href={`mailto:${MERCH_EMAIL}?subject=${encodeURIComponent("Notify me — London LOGIC merch")}`}
            className="mono" style={{
              position: "relative",
              display: "inline-flex", alignItems: "center", gap: 9,
              padding: "11px 18px", borderRadius: 999,
              background: "var(--c-red)", color: "#fff", fontSize: 12, letterSpacing: "0.1em"
            }}>
              Notify me <Arrow size={12} />
            </a>
          </div>
        </div>
      </section>

      {/* Product grid */}
      <section style={{ padding: "0 0 60px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }} className="merch-grid">
            {MERCH_PRODUCTS.map((p) => <MerchCard key={p.key} p={p} />)}
          </div>
          <p className="mono" style={{ marginTop: 18, color: "var(--c-ink-soft)", fontSize: 12, lineHeight: 1.6 }}>
            <span style={{ color: "var(--c-red)" }}>★</span> Launch sale — 10% off every piece, sizes YS–2XL. Final colourways confirmed at launch.
          </p>
        </div>
      </section>

      {/* Why it matters — scholarship mission */}
      <section style={{ padding: "0 0 56px" }}>
        <div className="container">
          <div style={{
            background: "#15110d", color: "#fff",
            borderRadius: "var(--radius-card)",
            padding: "44px 48px", position: "relative", overflow: "hidden"
          }}>
            <div style={{ position: "absolute", bottom: -60, right: -50, opacity: 0.1, pointerEvents: "none" }}>
              <HalfCourt width={360} color="#fff" opacity={1} />
            </div>
            <div style={{ position: "relative", maxWidth: "64ch" }}>
              <Eyebrow color="var(--c-red)">Launch Sale · Why it matters</Eyebrow>
              <p style={{ margin: "18px 0 0", fontSize: "clamp(18px, 1.9vw, 23px)", lineHeight: 1.55, color: "rgba(255,255,255,0.92)" }}>
                <strong style={{ color: "#fff", fontFamily: "var(--font-display)", letterSpacing: "0.02em" }}>Launch Sale:</strong> All profits from LOGIC merch will go directly toward providing additional summer scholarship opportunities for athletes to attend camp for free. At LOGIC, we are already committed to covering the first <strong style={{ color: "#fff" }}>10 scholarship athletes</strong> this summer, and every merch purchase helps us create even more opportunities for kids in our community.
              </p>
              <div style={{ marginTop: 28 }}>
                <Btn to="scholarship" kind="primary">Learn More</Btn>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Player package tie-in */}
      <section style={{ padding: "0 0 40px" }}>
        <div className="container">
          <div style={{
            background: "var(--c-warm)", border: "1px solid var(--c-line)",
            borderRadius: "var(--radius-card)", padding: "40px 44px",
            display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 36, alignItems: "center"
          }} className="merch-kit-grid">
            <div>
              <Eyebrow color="var(--c-red)">Already registered?</Eyebrow>
              <h2 className="display" style={{ margin: "14px 0 0", fontSize: "clamp(30px, 3.6vw, 52px)", lineHeight: 0.98, color: "var(--c-ink)" }}>
                Every camper gets a <span style={{ color: "var(--c-red)" }}>merch package.</span>
              </h2>
              <p style={{ margin: "14px 0 0", maxWidth: "48ch", fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)" }}>A branded pinnie, training kit and water bottle are included with every camp registration. The pieces here are the extras — for family, friends, superfans, and community supporters.


              </p>
              <div style={{ marginTop: 24, display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Btn to="camp" kind="inverse">See what's included</Btn>
                <Btn to="register" kind="ghost">Register</Btn>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              {[
              ["Pinnie", "Camp-issue"],
              ["Training kit", "Shorts + tee"],
              ["Water bottle", "Branded"],
              ["Performance long-sleeve", "Exclusive to elite LOGIC"]].
              map(([k, v]) =>
              <div key={k} style={{
                background: "var(--c-paper)", border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)", padding: "20px 20px"
              }}>
                  <div className="display" style={{ fontSize: 22, lineHeight: 1.05, color: "var(--c-ink)" }}>{k}</div>
                  <div className="mono" style={{ marginTop: 6, color: "var(--c-ink-soft)", fontSize: 11 }}>{v}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 1500px) {
          .merch-grid { grid-template-columns: repeat(4, 1fr) !important; }
        }
        @media (max-width: 1200px) {
          .merch-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 1000px) {
          .merch-kit-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
        }
        @media (max-width: 900px) {
          .merch-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 560px) {
          .merch-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </React.Fragment>);

}

window.MerchPage = MerchPage;