/* Mobile: LOGIC Community Partners page */

const PARTNER_EMAIL = "info@londonlogicbasketball.com";

/* Ascending ladder $500 -> $5,000. Each tier inherits the one below it. */
const PARTNER_TIERS = [
  {
    name: "Free Throw",
    role: "Local Supporter",
    price: "$500",
    color: "#5b8a72",
    inheritsFrom: null,
    perks: [
      "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",
    ],
  },
  {
    name: "Three-Point",
    role: "Supporting Partner",
    price: "$1,000",
    color: "#3c6997",
    inheritsFrom: "Free Throw",
    perks: [
      "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",
    ],
  },
  {
    name: "Half-Court",
    role: "Premier Partner",
    price: "$2,500",
    color: "#7a3b86",
    inheritsFrom: "Three-Point",
    perks: [
      "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",
    ],
  },
  {
    name: "Court Sponsor",
    role: "Exclusive Title Partner",
    price: "$5,000",
    color: "var(--c-red)",
    inheritsFrom: "Half-Court",
    emphasis: true,
    perks: [
      "Community Showcase Game named after sponsor \u2014 e.g. \u201c[Brand] Community Showcase Game\u201d",
      "Camp weeks named after sponsor \u2014 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 mailTo(subject) {
  return `mailto:${PARTNER_EMAIL}?subject=${encodeURIComponent(subject)}`;
}

function SponsorsPage({ onGo }) {
  return (
    <main className="page">
      {/* Hero */}
      <section style={{ padding: "10px var(--gutter) 20px" }}>
        <span className="eyebrow">Community Partnerships</span>
        <h1 className="display" style={{ margin: "10px 0 0", fontSize: 48, lineHeight: 0.96 }}>
          LOGIC Community <span style={{ color: "var(--c-red)" }}>Partners.</span>
        </h1>
        <p style={{ marginTop: 14, color: "var(--c-ink-soft)", fontSize: 15.5, lineHeight: 1.55 }}>
          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.
        </p>
      </section>

      {/* Who are LOGIC Partners? */}
      <section style={{ padding: "0 var(--gutter) 22px" }}>
        <span className="eyebrow">Who are LOGIC Partners?</span>
        <p style={{ margin: "12px 0 0", fontSize: 19, lineHeight: 1.4, color: "var(--c-ink)" }}>
          Becoming a LOGIC Partner means investing directly into the growth of young athletes and the future of youth basketball in London.
        </p>

        <div className="card card-ink" style={{ padding: "22px 22px", marginTop: 16 }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>This summer</span>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 8 }}>
            <span className="display" style={{ fontSize: 96, lineHeight: 0.8, color: "var(--c-red)", marginLeft: "-0.04em" }}>10</span>
            <span className="display" style={{ fontSize: 24, color: "#fff", lineHeight: 1.04 }}>
              athletes,<br/>camp fully<br/>covered.
            </span>
          </div>
          <p style={{ marginTop: 16, color: "rgba(255,255,255,0.78)", fontSize: 14, lineHeight: 1.6 }}>
            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>
          <a
            href="#scholarship"
            onClick={() => onGo("scholarship")}
            className="tappable"
            style={{
              marginTop: 18, width: "100%", height: 52, borderRadius: 999,
              background: "var(--c-red)", color: "#fff",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
              fontFamily: "var(--font-display)", fontSize: 15.5,
              letterSpacing: "0.05em", textTransform: "uppercase",
              boxShadow: "0 10px 28px rgba(230,24,44,0.4)",
            }}
          >
            Learn About Our Scholarship Program
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>

        <p style={{ marginTop: 16, color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.6 }}>
          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 style={{ color: "var(--c-ink)" }}>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>

        {/* Emotional portrait — who it's for */}
        <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 16, marginTop: 16 }}>
          <img src="../assets/community-young-athlete.jpeg"
            alt="A young London LOGIC athlete dribbling at camp, focused and determined"
            style={{ objectPosition: "center 28%" }}/>
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(to top, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0) 44%)",
          }}/>
          <div style={{ position: "absolute", left: 18, right: 18, bottom: 16, color: "#fff" }}>
            <div className="mono" style={{ color: "var(--c-red)", fontSize: 10.5, letterSpacing: "0.12em" }}>
              This is who it's for
            </div>
            <div className="display" style={{ marginTop: 6, fontSize: 22, lineHeight: 1.05 }}>
              One summer can change a kids' life.
            </div>
          </div>
        </div>
      </section>

      {/* Thank you to confirmed partners */}
      <section style={{ padding: "4px var(--gutter) 22px" }}>
        <span className="eyebrow">Confirmed Partners</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          Thank You to Our <span style={{ color: "var(--c-red)" }}>Community Partners.</span>
        </h2>
        <p style={{ margin: "8px 0 12px", color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>
          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>
        <p style={{ margin: "0 0 18px", color: "var(--c-ink-soft)", fontSize: 14.5, lineHeight: 1.55 }}>
          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: "flex", flexDirection: "column", gap: 12 }}>
          {[
            { 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: 16,
              padding: "28px 24px 20px",
              display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
            }}>
              <img src={p.src} alt={p.name + " logo"} style={{
                maxWidth: "100%", maxHeight: 96, width: "auto", height: "auto",
                objectFit: "contain", display: "block",
              }}/>
              <figcaption className="mono" style={{
                marginTop: 16, color: "var(--c-ink-dim)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase",
              }}>
                {p.name}
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* Tiers */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">Choose your level</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          The London LOGIC <span style={{ color: "var(--c-red)" }}>Partnership Opportunities.</span>
        </h2>
        <p style={{ margin: "8px 0 14px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.5 }}>
          Four levels, named for where you shoot from on the floor — $500 to $5,000. The further out you back us, the deeper the partnership.
        </p>

        {/* Price ladder strip */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 4, marginBottom: 16,
        }}>
          {PARTNER_TIERS.map((t, i) => (
            <React.Fragment key={t.name}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <span style={{ width: 11, height: 11, borderRadius: 3, background: t.color }} />
                <span className="display" style={{ fontSize: 15, lineHeight: 1 }}>{t.price}</span>
              </div>
              {i < PARTNER_TIERS.length - 1 && (
                <span style={{ flex: 1, height: 2, background: "var(--c-line)" }} />
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {PARTNER_TIERS.map((t) => {
            const featured = t.emphasis;
            return (
              <div key={t.name} style={{
                background: featured ? "#15110d" : "var(--c-paper)",
                color: featured ? "#fff" : "var(--c-ink)",
                border: featured ? "none" : "1px solid var(--c-line)",
                borderTop: `5px solid ${t.color}`,
                borderRadius: "var(--radius-card)",
                padding: "22px 20px 20px",
                position: "relative",
              }}>
                {featured && (
                  <span style={{
                    position: "absolute", top: -10, right: 16,
                    background: "var(--c-red)", color: "#fff",
                    padding: "5px 10px", borderRadius: 999,
                    fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.12em",
                    textTransform: "uppercase", fontWeight: 600,
                  }}>
                    Title Partner
                  </span>
                )}

                <span className="mono" style={{
                  color: featured ? "var(--c-red)" : t.color, fontSize: 10.5,
                }}>{t.role}</span>
                <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 10, marginTop: 8 }}>
                  <div className="display" style={{ fontSize: 30, lineHeight: 1, color: "inherit" }}>{t.name}</div>
                  <div className="display" style={{ fontSize: 34, lineHeight: 1, color: featured ? "var(--c-red)" : "var(--c-ink)" }}>{t.price}</div>
                </div>

                <ul style={{
                  listStyle: "none", padding: 0, margin: "16px 0 0",
                  display: "flex", flexDirection: "column", gap: 9,
                  borderTop: featured ? "1px solid rgba(255,255,255,0.18)" : "1px solid var(--c-line)",
                  paddingTop: 14,
                }}>
                  {t.inheritsFrom && (
                    <li className="mono" style={{
                      color: featured ? "#fff" : "var(--c-ink)",
                      fontSize: 10.5, letterSpacing: "0.08em", marginBottom: 2,
                    }}>
                      + Everything in {t.inheritsFrom}, plus:
                    </li>
                  )}
                  {t.perks.map((p) => (
                    <li key={p} style={{
                      display: "flex", gap: 10, fontSize: 13.5, lineHeight: 1.45,
                      color: featured ? "rgba(255,255,255,0.9)" : "var(--c-ink)",
                    }}>
                      <span style={{ flex: "0 0 auto", marginTop: 6, width: 6, height: 6, borderRadius: 2, background: featured ? "var(--c-red)" : t.color }} />
                      <span>{p}</span>
                    </li>
                  ))}
                </ul>

                <a
                  href={mailTo(t.name + " partnership — London LOGIC")}
                  className={"btn tappable" + (featured ? " btn-inverse" : "")}
                  style={{ marginTop: 18, textDecoration: "none" }}
                >
                  Choose {t.name}
                </a>
              </div>
            );
          })}
        </div>

        <p className="mono" style={{ marginTop: 14, color: "var(--c-ink-dim)", fontSize: 10.5, 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>
      </section>

      {/* Other ways to partner */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <span className="eyebrow">Flexible support</span>
        <h2 className="display" style={{ margin: "8px 0 4px", fontSize: 28, lineHeight: 1.05 }}>
          Other Ways to Partner with <span style={{ color: "var(--c-red)" }}>London LOGIC.</span>
        </h2>
        <p style={{ margin: "8px 0 16px", color: "var(--c-ink-soft)", fontSize: 14, lineHeight: 1.5 }}>
          Not every partnership fits a tier. We welcome flexible support from businesses and community members who want to contribute in other ways.
        </p>

        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div className="card" style={{ padding: 20 }}>
            <span className="eyebrow">Product / In-Kind Partner</span>
            <p style={{ marginTop: 12, color: "var(--c-ink)", fontSize: 14.5, lineHeight: 1.5 }}>
              Provide food, drinks, merchandise, or branded items for athletes and families.
            </p>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <span className="eyebrow">Event Partner</span>
            <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 9 }}>
              {[
                "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: 10, fontSize: 13.5, lineHeight: 1.45, color: "var(--c-ink)" }}>
                  <span style={{ flex: "0 0 auto", marginTop: 6, width: 6, height: 6, borderRadius: 2, background: "var(--c-red)" }} />
                  <span>{x}</span>
                </li>
              ))}
            </ul>
          </div>

          <a href={mailTo("Flexible partnership — London LOGIC")} className="card tappable" style={{ padding: 20, display: "block", textDecoration: "none" }}>
            <span className="mono" style={{ color: "var(--c-red)" }}>Aligned with the tiered benefits above</span>
            <p style={{ marginTop: 10, color: "var(--c-ink)", fontSize: 14, lineHeight: 1.55 }}>
              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>
          </a>
        </div>
      </section>

      {/* Closing CTA */}
      <section style={{ padding: "4px var(--gutter) 24px" }}>
        <div className="card card-red" style={{ padding: "24px 22px" }}>
          <span className="mono" style={{ color: "rgba(255,255,255,0.9)" }}>Stand with London's athletes</span>
          <div className="display" style={{ marginTop: 10, fontSize: 32, lineHeight: 0.98, color: "#fff" }}>
            Become a LOGIC<br/>Community Partner.
          </div>
          <p style={{ marginTop: 12, color: "rgba(255,255,255,0.88)", fontSize: 13.5, lineHeight: 1.5 }}>
            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 style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 18 }}>
            <a
              href={mailTo("Become a LOGIC Community Partner")}
              className="tappable"
              style={{
                width: "100%", minHeight: 52, padding: "8px 16px", borderRadius: 999,
                background: "#fff", color: "#15110d",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 8, textAlign: "center",
                fontFamily: "var(--font-display)", fontSize: 15,
                letterSpacing: "0.05em", textTransform: "uppercase", lineHeight: 1.1,
              }}
            >
              Become a LOGIC Community Partner
            </a>
            <a
              href={mailTo("Partnership opportunities — London LOGIC")}
              className="tappable"
              style={{
                width: "100%", minHeight: 52, padding: "8px 16px", borderRadius: 999,
                background: "transparent", color: "#fff",
                border: "2px solid rgba(255,255,255,0.85)",
                display: "flex", alignItems: "center", justifyContent: "center", gap: 8, textAlign: "center",
                fontFamily: "var(--font-display)", fontSize: 15,
                letterSpacing: "0.05em", textTransform: "uppercase", lineHeight: 1.1,
              }}
            >
              Contact Us About Partnership Opportunities
            </a>
          </div>
          <div className="mono" style={{ marginTop: 14, color: "rgba(255,255,255,0.9)", fontSize: 11, textAlign: "center" }}>
            {PARTNER_EMAIL}
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { SponsorsPage });