/* Mobile: Merch / Shop page — London LOGIC gear.
   Products: reversible pinnie, logo tee, performance long sleeve, insulated water bottle. */

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_ITEMS = [
  { 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 merchMail(subject) {
  return `mailto:${MERCH_EMAIL}?subject=${encodeURIComponent(subject)}`;
}

function MerchDots({ colors }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
      {colors.map((c, i) => (
        <span key={i} style={{
          width: 13, height: 13, borderRadius: 999, background: c,
          border: "1px solid rgba(255,255,255,0.25)",
        }} />
      ))}
    </div>
  );
}

function MerchPage({ onGo }) {
  return (
    <main className="page">
      {/* Hero */}
      <section style={{ padding: "10px var(--gutter) 18px" }}>
        <span className="eyebrow">The Locker · Official Gear</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 48, lineHeight: 0.96 }}>
          Wear the <span style={{ color: "var(--c-red)" }}>LOGIC.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          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.
        </p>
      </section>

      {/* Launch status */}
      <section style={{ padding: "0 var(--gutter) 20px" }}>
        <div className="card card-ink" style={{ padding: "18px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--c-red)", flex: "0 0 auto" }} />
            <span className="mono" style={{ color: "rgba(255,255,255,0.9)", fontSize: 11, lineHeight: 1.4 }}>
              Launch Sale · 10% off every piece · all profits fund camp scholarships
            </span>
          </div>
          <a href={merchMail("Notify me — London LOGIC merch")} className="btn tappable" style={{ marginTop: 16, textDecoration: "none" }}>
            Notify me →
          </a>
        </div>
      </section>

      {/* Product grid */}
      <section style={{ padding: "0 var(--gutter) 20px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {MERCH_ITEMS.map((p) => (
            <a key={p.key} href={merchMail("Reserve — " + p.name + " (London LOGIC)")}
              className="card tappable"
              style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column", textDecoration: "none" }}>
              <div className="photo" style={{ aspectRatio: "1 / 1", borderRadius: 0, position: "relative", display: "grid", placeItems: "center" }}>
                <span className="mono" style={{ color: "var(--c-ink-dim)", fontSize: 9.5, textAlign: "center", padding: "0 10px" }}>
                  Product shot
                </span>
                <span className="mono" style={{
                  position: "absolute", top: 10, left: 10,
                  background: "#fff", color: "#15110d",
                  padding: "4px 8px", borderRadius: 999, fontSize: 8.5, letterSpacing: "0.1em",
                }}>{p.tag}</span>
                <span className="mono" style={{
                  position: "absolute", top: 10, right: 10,
                  background: "var(--c-red)", color: "#fff",
                  padding: "4px 8px", borderRadius: 999, fontSize: 8.5, letterSpacing: "0.1em",
                }}>−10%</span>
              </div>
              <div style={{ padding: "14px 14px 16px", display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                <div className="mono" style={{ color: "var(--c-red)", fontSize: 9.5 }}>{p.category}</div>
                <div className="display" style={{ fontSize: 18, lineHeight: 1.02, color: "#fff" }}>{p.name}</div>
                <div style={{ marginTop: "auto", display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 8, paddingTop: 6 }}>
                  <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    <span className="mono" style={{ fontSize: 10, lineHeight: 1, color: "var(--c-ink-dim)", textDecoration: "line-through" }}>{money(p.price)}</span>
                    <span className="display" style={{ fontSize: 24, lineHeight: 1, color: "var(--c-red)" }}>{salePrice(p.price)}</span>
                  </div>
                  <MerchDots colors={p.colors} />
                </div>
                <div className="mono" style={{ color: "var(--c-red)", fontSize: 9.5, marginTop: 2 }}>Reserve →</div>
              </div>
            </a>
          ))}
        </div>
        <p className="mono" style={{ marginTop: 12, color: "var(--c-ink-dim)", fontSize: 10, 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>
      </section>

      {/* Why it matters — scholarship mission */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card card-ink" style={{ padding: "22px 20px" }}>
          <span className="eyebrow">Launch Sale · Why it matters</span>
          <p style={{ marginTop: 14, color: "rgba(255,255,255,0.9)", fontSize: 14, lineHeight: 1.6 }}>
            <strong style={{ color: "#fff", fontFamily: "var(--font-display)" }}>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>
          <button className="btn tappable" style={{ marginTop: 16 }} onClick={() => onGo("scholarship")}>
            Learn More →
          </button>
        </div>
      </section>

      {/* Player package tie-in */}
      <section style={{ padding: "0 var(--gutter) 24px" }}>
        <div className="card" style={{ padding: "22px 20px" }}>
          <span className="eyebrow">Already registered?</span>
          <div className="display" style={{ marginTop: 12, fontSize: 26, lineHeight: 1.02, color: "#fff" }}>
            Every camper gets a <span style={{ color: "var(--c-red)" }}>merch package.</span>
          </div>
          <p style={{ marginTop: 10, color: "var(--c-ink-soft)", fontSize: 13.5, lineHeight: 1.55 }}>
            A branded pinnie, training kit and water bottle are included with every camp registration. The pieces above are
            the extras — for family, friends, and superfans who want to rep the program too.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 16 }}>
            {[["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-2)", border: "1px solid var(--c-line)", borderRadius: 10, padding: "14px 14px" }}>
                <div className="display" style={{ fontSize: 16, lineHeight: 1.05, color: "#fff" }}>{k}</div>
                <div className="mono" style={{ marginTop: 5, color: "var(--c-ink-dim)", fontSize: 9 }}>{v}</div>
              </div>
            ))}
          </div>
          <button className="btn tappable" style={{ marginTop: 16 }} onClick={() => onGo("camp")}>
            See what's included →
          </button>
          <button className="btn btn-ghost tappable" style={{ marginTop: 8 }} onClick={() => onGo("register")}>
            Register
          </button>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { MerchPage });