/* LOGIC Community Partners — partnership / sponsorship page.
   Structure:
     1. Hero — "LOGIC Community Partners"
     2. "Who are LOGIC Partners?" — scholarship statement + CTA to #scholarship
        + continuation copy on expanding impact
     3. "The London LOGIC Partnership Opportunities" — 4 tiers, $500 -> $5,000 ladder
     4. "Other Ways to Partner with London LOGIC" — flexible / in-kind / event
     5. Closing partner CTA
*/

const PARTNER_EMAIL = "info@londonlogicbasketball.com";

/* Tiers ordered as an ascending ladder ($500 -> $5,000). Each tier inherits the
   one below it ("Everything in X, plus:"), so reading upward the value grows. */
const PARTNER_TIERS = [
  {
    key: "free-throw",
    name: "Free Throw",
    role: "Local Supporter",
    price: "$500",
    distance: "From the line",
    color: "#5b8a72",
    inherits: null,
    benefits: [
      "Logo on website sponsor wall",
      "One story post per week on social media thanking all sponsors, including sponsor logos",
      "Mention at the Community Showcase Game during a sponsor thank-you speech, where all sponsors are named in sequence",
    ],
  },
  {
    key: "three-point",
    name: "Three-Point",
    role: "Supporting Partner",
    price: "$1,000",
    distance: "From beyond the arc",
    color: "#3c6997",
    inherits: "Free Throw",
    benefits: [
      "Logo on marketing materials, including camp / community event programs",
      "Five main feed social media posts per week on Instagram / Facebook",
      "Player and Coach of the Day sponsored banner / dedicated image in carousel",
    ],
  },
  {
    key: "half-court",
    name: "Half-Court",
    role: "Premier Partner",
    price: "$2,500",
    distance: "From the logo",
    color: "#7a3b86",
    inherits: "Three-Point",
    benefits: [
      "Logo on large banners at daily camp and the Community Showcase Game",
      "Logo / signage captured in the background of candid camp photos",
      "On-site activation at launch day and the Community Showcase Game",
      "Two dedicated main feed social media posts per week on Instagram / Facebook",
      "Thank-you post to our major community partners",
      "Branded item in all player packages",
    ],
  },
  {
    key: "court",
    name: "Court Sponsor",
    role: "Exclusive Title Partner",
    price: "$5,000",
    distance: "The whole floor",
    color: "var(--c-red)",
    inherits: "Half-Court",
    flagship: true,
    benefits: [
      "Community Showcase Game named after sponsor — e.g. \u201c[Brand] Community Showcase Game\u201d",
      "Camp weeks named after sponsor — e.g. \u201c[Brand] Week of the London LOGIC Summer Camp\u201d",
      "Special feature / mention at the Community Showcase Game",
      "Logo featured in every main feed social media post for the camp",
      "Daily mention at camp during our morning meeting with all campers and coaches",
    ],
  },
];

function PartnerTierCard({ tier }) {
  const dark = !!tier.flagship;
  const bg = dark ? "#15110d" : "var(--c-paper)";
  const ink = dark ? "#ffffff" : "var(--c-ink)";
  const soft = dark ? "rgba(255,255,255,0.72)" : "var(--c-ink-soft)";
  const line = dark ? "rgba(255,255,255,0.12)" : "var(--c-line)";
  const bullet = dark ? "var(--c-red)" : tier.color;

  return (
    <article style={{
      position: "relative",
      background: bg, color: ink,
      border: `1px solid ${dark ? "transparent" : "var(--c-line)"}`,
      borderTop: `5px solid ${tier.color}`,
      borderRadius: "var(--radius-card)",
      padding: "30px 28px 32px",
      display: "flex", flexDirection: "column", gap: 18,
      overflow: "hidden",
    }}>
      {dark && (
        <div style={{ position: "absolute", top: -36, right: -54, opacity: 0.16, pointerEvents: "none" }}>
          <HalfCourt width={300} color="#fff" opacity={1} />
        </div>
      )}

      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 4 }}>
        <span className="mono" style={{ color: dark ? "var(--c-red)" : tier.color, fontSize: 11 }}>
          {tier.distance}
        </span>
        <h3 className="display" style={{ margin: "8px 0 0", fontSize: "clamp(30px, 3vw, 40px)", lineHeight: 0.96, color: ink }}>
          {tier.name}
        </h3>
        <span style={{ fontSize: 14, fontWeight: 700, color: soft, marginTop: 2 }}>{tier.role}</span>
      </div>

      <div style={{
        position: "relative",
        display: "flex", alignItems: "baseline", gap: 10,
        paddingBottom: 18, borderBottom: `1px solid ${line}`,
      }}>
        <span className="display" style={{ fontSize: "clamp(40px, 4.6vw, 56px)", lineHeight: 1, color: dark ? "var(--c-red)" : ink }}>
          {tier.price}
        </span>
        {tier.flagship && (
          <span style={{
            background: "var(--c-red)", color: "#fff",
            padding: "4px 9px", borderRadius: 4,
            fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.12em", textTransform: "uppercase",
          }}>Title Partner</span>
        )}
      </div>

      <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 12 }}>
        {tier.inherits && (
          <div className="mono" style={{
            color: dark ? "#fff" : "var(--c-ink)", fontSize: 11.5,
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ color: "var(--c-red)" }}>+</span>
            Everything in {tier.inherits}, plus:
          </div>
        )}
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
          {tier.benefits.map((b) => (
            <li key={b} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 14, lineHeight: 1.5, color: dark ? "rgba(255,255,255,0.86)" : "var(--c-ink)" }}>
              <span style={{ flex: "0 0 auto", marginTop: 7, width: 7, height: 7, borderRadius: 2, background: bullet }} />
              <span>{b}</span>
            </li>
          ))}
        </ul>
      </div>

      <div style={{ position: "relative", marginTop: "auto", paddingTop: 8 }}>
        <a href={`mailto:${PARTNER_EMAIL}?subject=${encodeURIComponent(tier.name + " partnership — London LOGIC")}`}
          style={{
            display: "inline-flex", alignItems: "center", gap: 9,
            padding: "12px 18px", borderRadius: 999,
            background: dark ? "var(--c-red)" : "transparent",
            border: dark ? "2px solid var(--c-red)" : "2px solid var(--c-ink)",
            color: dark ? "#fff" : "var(--c-ink)",
            fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 14,
          }}>
          Choose {tier.name} <Arrow size={13} />
        </a>
      </div>
    </article>
  );
}

function SponsorsPage() {
  return (
    <React.Fragment>
      {/* ============ Hero ============ */}
      <section data-screen-label="Community Partners" style={{ padding: "60px 0 36px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Community Partnerships"
            title={<span>LOGIC Community <span style={{ color: "var(--c-red)" }}>Partners.</span></span>}
            kicker="Local businesses and community members who stand behind London's young athletes. Every partnership goes further than a logo — it removes financial barriers and helps build a program where kids can learn, compete, and grow."
          />
        </div>
      </section>

      {/* ============ Who are LOGIC Partners? ============ */}
      <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", top: -30, right: -50, opacity: 0.12, pointerEvents: "none" }}>
              <HalfCourt width={440} color="#fff" opacity={1} />
            </div>

            <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 48, alignItems: "center" }} className="who-grid">
              <div>
                <Eyebrow color="var(--c-red)">Who are LOGIC Partners?</Eyebrow>
                <p style={{ margin: "20px 0 0", fontSize: "clamp(20px, 2.1vw, 26px)", lineHeight: 1.4, color: "#fff", maxWidth: "30ch" }}>
                  Becoming a LOGIC Partner means investing directly into the growth of young athletes and the future of youth basketball in London.
                </p>
              </div>

              <div>
                <div className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>This summer</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginTop: 8 }}>
                  <span className="display" style={{ fontSize: "clamp(96px, 12vw, 150px)", lineHeight: 0.8, color: "var(--c-red)", marginLeft: "-0.04em" }}>10</span>
                  <span className="display" style={{ fontSize: "clamp(22px, 2.4vw, 32px)", color: "#fff", lineHeight: 1.04 }}>
                    athletes,<br/>camp fully<br/>covered.
                  </span>
                </div>
                <p style={{ marginTop: 18, fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,0.78)", maxWidth: "44ch" }}>
                  London LOGIC Basketball will be covering the full registration cost for 10 athletes through our scholarship program, allowing those athletes to attend camp at no cost to their families.
                </p>
                <div style={{ marginTop: 24 }}>
                  <a href="#scholarship" style={{
                    display: "inline-flex", alignItems: "center", gap: 11,
                    padding: "16px 24px", borderRadius: 999,
                    background: "var(--c-red)", color: "#fff",
                    fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 16,
                    boxShadow: "0 8px 28px rgba(196,30,42,0.35)",
                  }}>
                    Learn About Our Scholarship Program <Arrow />
                  </a>
                </div>
              </div>
            </div>
          </div>

          {/* Continuation copy + emotional portrait */}
          <div style={{
            margin: "34px 0 0",
            display: "grid", gridTemplateColumns: "0.82fr 1fr", gap: 40,
            alignItems: "center",
          }} className="impact-grid">
            <figure style={{
              margin: 0, position: "relative", overflow: "hidden",
              borderRadius: "var(--radius-card)", background: "#0a0a0a",
              aspectRatio: "4 / 5",
            }}>
              <img src="assets/community-young-athlete.jpeg"
                alt="A young London LOGIC athlete dribbling at camp, focused and determined"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 28%", display: "block" }} />
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 42%)",
                pointerEvents: "none",
              }} />
              <figcaption style={{
                position: "absolute", left: 22, right: 22, bottom: 20, color: "#fff",
              }}>
                <div className="mono" style={{ color: "var(--c-red)", fontSize: 11, letterSpacing: "0.12em" }}>
                  This is who it's for
                </div>
                <div className="display" style={{ marginTop: 6, fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.05 }}>
                  One summer can<br/>Change a kids' life.
                </div>
              </figcaption>
            </figure>

            <p style={{
              margin: 0, maxWidth: "52ch",
              fontSize: "clamp(17px, 1.6vw, 20px)", lineHeight: 1.62, color: "var(--c-ink)",
            }}>
              Through community partnerships, we are hoping to expand that impact even further by helping send more athletes to camp through additional scholarships and subsidized registration opportunities. Every partnership contributes to more than a logo placement — it helps <strong>remove financial barriers</strong>, support athlete development, and build a program where young people can learn, compete, grow, and feel connected to something bigger than basketball.
            </p>
          </div>
        </div>
      </section>

      {/* ============ Thank you to confirmed partners ============ */}
      <section style={{ padding: "8px 0 64px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Confirmed Partners"
            title={<span>Thank You to Our <span style={{ color: "var(--c-red)" }}>Community Partners.</span></span>}
            kicker="London LOGIC Basketball is proud to recognize the local businesses and community supporters who are helping us create more opportunities for young athletes this summer."
          />
          <p style={{
            margin: "-8px 0 36px", maxWidth: "60ch",
            fontSize: "clamp(16px, 1.5vw, 19px)", lineHeight: 1.62, color: "var(--c-ink-soft)",
          }}>
            We are incredibly grateful for the businesses that believe in our mission and are choosing to invest in the next generation of athletes, leaders, and community members.
          </p>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: 20,
          }} className="partner-logo-grid">
            {[
              { src: "assets/partner-mill-pond-painters.png", name: "Mill Pond Painters" },
              { src: "assets/partner-dls-electric.jpg", name: "DLS Electric (London) Inc." },
            ].map((p) => (
              <figure key={p.name} style={{
                margin: 0,
                background: "#fff",
                border: "1px solid var(--c-line)",
                borderRadius: "var(--radius-card)",
                padding: "36px 40px 26px",
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                minHeight: 200,
              }}>
                <img src={p.src} alt={p.name + " logo"} style={{
                  maxWidth: "100%", maxHeight: 104, width: "auto", height: "auto",
                  objectFit: "contain", display: "block",
                }} />
                <figcaption className="mono" style={{
                  marginTop: 22, color: "var(--c-ink-dim)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
                }}>
                  {p.name}
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* ============ Partnership tiers ============ */}
      <section style={{ padding: "20px 0 60px", background: "var(--c-warm)", borderTop: "1px solid var(--c-line)", borderBottom: "1px solid var(--c-line)" }}>
        <div className="container" style={{ paddingTop: 56, paddingBottom: 16 }}>
          <SectionHead
            eyebrow="Choose your level"
            title={<span>The London LOGIC <span style={{ color: "var(--c-red)" }}>Partnership Opportunities.</span></span>}
            kicker="Four levels of support, named for where you shoot from on the floor. The further out you back us, the deeper the partnership — and every tier feeds the same goal: more London kids at camp."
          />

          {/* Ladder strip */}
          <div style={{ display: "flex", alignItems: "center", gap: 0, margin: "4px 0 28px", flexWrap: "wrap" }}>
            {PARTNER_TIERS.map((t, i) => (
              <React.Fragment key={t.key}>
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <span style={{ width: 12, height: 12, borderRadius: 3, background: t.color }} />
                  <span className="display" style={{ fontSize: 18, lineHeight: 1 }}>{t.price}</span>
                </div>
                {i < PARTNER_TIERS.length - 1 && (
                  <span style={{ flex: "1 1 24px", minWidth: 24, height: 2, margin: "0 14px", background: "linear-gradient(90deg, var(--c-line), var(--c-line))" }} />
                )}
              </React.Fragment>
            ))}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, alignItems: "stretch" }} className="tier-grid">
            {PARTNER_TIERS.map((t) => <PartnerTierCard key={t.key} tier={t} />)}
          </div>

          <p className="mono" style={{ marginTop: 18, color: "var(--c-ink-soft)", fontSize: 12, lineHeight: 1.6 }}>
            <span style={{ color: "var(--c-red)" }}>★</span> Each tier includes everything in the level below it. Partnership funds directly support scholarships, access, and youth development.
          </p>
        </div>
      </section>

      {/* ============ Other ways to partner ============ */}
      <section style={{ padding: "60px 0 40px" }}>
        <div className="container">
          <SectionHead
            eyebrow="Flexible support"
            title={<span>Other Ways to Partner with <span style={{ color: "var(--c-red)" }}>London LOGIC.</span></span>}
            kicker="Not every partnership fits a tier. We welcome flexible support from businesses and community members who want to contribute in other ways."
          />

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="flex-grid">
            <div style={{
              background: "var(--c-paper)", border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)", padding: "30px 32px",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <Eyebrow>Product / In-Kind Partner</Eyebrow>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55, color: "var(--c-ink)" }}>
                Provide food, drinks, merchandise, or branded items for athletes and families.
              </p>
            </div>

            <div style={{
              background: "var(--c-paper)", border: "1px solid var(--c-line)",
              borderRadius: "var(--radius-card)", padding: "30px 32px",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <Eyebrow>Event Partner</Eyebrow>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {[
                  "Sponsor a specific camp week — e.g. Week #1 Naming Rights",
                  "On-site activation and branded presence — e.g. a table / booth at the Community Showcase Game",
                  "Dedicated social media feature for the sponsored event",
                  "Recap video inclusion",
                ].map((x) => (
                  <li key={x} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.5, color: "var(--c-ink)" }}>
                    <span style={{ flex: "0 0 auto", marginTop: 7, width: 7, height: 7, borderRadius: 2, background: "var(--c-red)" }} />
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Inquiry strip with visible email */}
          <a href={`mailto:${PARTNER_EMAIL}?subject=${encodeURIComponent("Flexible partnership — London LOGIC")}`} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap",
            marginTop: 14, padding: "24px 32px",
            background: "var(--c-warm)", border: "1px solid var(--c-line)",
            borderRadius: "var(--radius-card)", color: "var(--c-ink)", textDecoration: "none",
          }}>
            <div style={{ maxWidth: "62ch" }}>
              <span className="mono" style={{ color: "var(--c-red)" }}>Aligned with the tiered benefits above</span>
              <p style={{ margin: "8px 0 0", fontSize: 15.5, lineHeight: 1.55, color: "var(--c-ink)" }}>
                Partner benefits reflect the value of the contribution and will be aligned with the tiered benefits above. Please inquire for details at{" "}
                <span style={{ color: "var(--c-red)", fontWeight: 700 }}>{PARTNER_EMAIL}</span>.
              </p>
            </div>
            <span className="display" style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              padding: "13px 20px", borderRadius: 999,
              background: "var(--c-ink)", color: "var(--c-paper)",
              letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 14, whiteSpace: "nowrap",
            }}>
              Inquire <Arrow />
            </span>
          </a>
        </div>
      </section>

      {/* ============ Closing CTA ============ */}
      <section style={{ padding: "20px 0 40px" }}>
        <div className="container">
          <div style={{
            background: "#0a0a0a", color: "#fff",
            borderRadius: "var(--radius-card)",
            padding: "48px 48px",
            position: "relative", overflow: "hidden",
            display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "center",
          }} className="close-grid">
            <div style={{ position: "absolute", bottom: -60, left: -50, opacity: 0.1, pointerEvents: "none" }}>
              <HalfCourt width={420} color="#fff" opacity={1} />
            </div>
            <div style={{ position: "relative" }}>
              <Eyebrow color="var(--c-red)">Stand with London's athletes</Eyebrow>
              <h2 className="display" style={{ margin: "14px 0 0", fontSize: "clamp(36px, 4.6vw, 64px)", lineHeight: 0.96, color: "#fff" }}>
                Become a LOGIC <span style={{ color: "var(--c-red)" }}>Community Partner.</span>
              </h2>
              <p style={{ margin: "16px 0 0", maxWidth: "46ch", fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.74)" }}>
                Back the program at any level and help send more London kids to camp. We'll match your business to the partnership that fits.
              </p>
            </div>
            <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 12 }}>
              <a href={`mailto:${PARTNER_EMAIL}?subject=${encodeURIComponent("Become a LOGIC Community Partner")}`} style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                padding: "16px 24px", borderRadius: 999,
                background: "var(--c-red)", color: "#fff",
                fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 16,
              }}>
                Become a LOGIC Community Partner <Arrow />
              </a>
              <a href={`mailto:${PARTNER_EMAIL}?subject=${encodeURIComponent("Partnership opportunities — London LOGIC")}`} style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                padding: "16px 24px", borderRadius: 999,
                background: "transparent", border: "2px solid rgba(255,255,255,0.4)", color: "#fff",
                fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 16,
              }}>
                Contact Us About Partnership Opportunities <Arrow />
              </a>
              <a href="#scholarship" style={{
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                padding: "16px 24px", borderRadius: 999,
                background: "transparent", border: "2px solid rgba(255,255,255,0.4)", color: "#fff",
                fontFamily: "var(--font-display)", letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 16,
              }}>
                Learn About Our Scholarship Program <Arrow />
              </a>
              <span className="mono" style={{ marginTop: 6, color: "rgba(255,255,255,0.55)", textAlign: "center", fontSize: 11.5 }}>
                {PARTNER_EMAIL}
              </span>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 1100px) {
          .tier-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 1000px) {
          .who-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
          .impact-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
          .close-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
        @media (max-width: 760px) {
          .tier-grid { grid-template-columns: 1fr !important; }
          .flex-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </React.Fragment>
  );
}

window.SponsorsPage = SponsorsPage;