/* Collaboration.jsx — Partner organizations + email-JJ CTA. */

const PARTNERS = [
  { name: "Yes And Camp",                 logo: "/img/partners/yesand.webp",       url: "https://www.yesandcamp.org",
    blurb: "Improv-based youth camps and workshops that build confidence on stage and off." },
  { name: "Beyond The Bars",              logo: "/img/partners/beyondbars.png",    url: "https://beyondthebarsmusic.org",
    blurb: "Music education for young people in Philadelphia neighborhoods most affected by violence." },
  { name: "Arden Theatre Company",        logo: "/img/partners/arden.png",         url: "https://ardentheatre.org",
    blurb: "Old City theatre with a deep youth ensemble program and teaching-artist residencies." },
  { name: "ComedySportz Philadelphia",    logo: "/img/partners/comedysportz.png",  url: "https://www.comedysportzphilly.com",
    blurb: "Long-running improv troupe and theatre school running youth & teen leagues." },
  { name: "BalletX",                      logo: "/img/partners/balletx.png",       url: "https://www.balletx.org",
    blurb: "Philadelphia's premier contemporary ballet, with community classes and youth outreach." },
  { name: "Philadelphia Fire Department", logo: "/img/partners/phila-fire.png",    url: "https://www.phila.gov/departments/philadelphia-fire-department/",
    blurb: "Fire-and-life-safety community programming and public-event support." },
  { name: "Magic by Ed",                  logo: "/img/partners/magicbyed.png",     url: "https://www.magicbyed.net",
    blurb: "Philadelphia magician running interactive performances and workshops for kids and family audiences." },
  { name: "Foodbeatz",                    logo: "/img/partners/foodbeatz.png",     url: "https://www.foodbeatz.org",
    blurb: "Music-and-food cultural programming bringing live performance to Philly community events." },
  { name: "New Groove Music Studio",      logo: "/img/partners/new-groove.png",    url: "https://newgroovemusicstudio.com",
    blurb: "Philadelphia music lesson studio offering one-on-one instruction across instruments and voice." },
];

function CollaborationPage() {
  return (
    <div>
      {/* Hero */}
      <section style={{ background: "var(--c-cream)", borderBottom: "2px solid var(--c-ink)" }}>
        <div className="container" style={{ padding: "80px 0 56px" }}>
          <div className="eyebrow">Collaboration</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 8.4vw, 124px)", margin: "12px 0 24px", lineHeight: 0.95 }}>
            We build with<br /><span style={{ fontStyle: "italic", color: "var(--c-primary)" }}>great partners.</span>
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--c-ink)", maxWidth: 720 }}>
            PPR's Performing Arts Office partners with arts organizations,
            schools, and city departments to bring more programs to more kids
            in more neighborhoods. The groups below are some of the partners
            currently working with us.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--c-ink-soft)", maxWidth: 660, marginTop: 14 }}>
            If your organization wants to collaborate &mdash; co-host a camp,
            run a workshop series, or sponsor a citywide showcase &mdash; we'd
            love to hear from you.
          </p>
          <div style={{ marginTop: 28 }}>
            <a
              href="mailto:Joseph.J.Pospiech@phila.gov?subject=Collaboration%20with%20PPR%20Performing%20Arts"
              className="btn"
            >
              Email J.J. to collaborate &rarr;
            </a>
          </div>
        </div>
      </section>

      {/* Partner grid */}
      <section className="section">
        <div className="container">
          <div className="eyebrow">Current partners</div>
          <h2 className="display" style={{ fontSize: "clamp(34px, 4.5vw, 56px)", marginTop: 12, lineHeight: 1, marginBottom: 32 }}>
            Organizations we&rsquo;re working with.
          </h2>
          <div className="collab-grid">
            {/* CR #259: render alphabetically by name so adding partners to the
                PARTNERS array later doesn't require manual sorting. */}
            {[...PARTNERS].sort((a, b) => a.name.localeCompare(b.name)).map(p => <PartnerCard key={p.name} partner={p} />)}
          </div>
        </div>
        <style>{`
          .collab-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
          }
          @media (max-width: 980px) { .collab-grid { grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 640px) { .collab-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Closing CTA */}
      <section className="section-tight" style={{ background: "var(--c-ink)", color: "var(--c-cream)" }}>
        <div className="container">
          <div className="card" style={{
            background: "var(--c-accent)",
            color: "var(--c-ink)",
            padding: 32,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            gap: 20,
            flexWrap: "wrap",
          }}>
            <div>
              <div className="eyebrow">Want to partner with us?</div>
              <div className="display" style={{ fontSize: 36, marginTop: 6, lineHeight: 1 }}>
                Pitch us a collaboration.
              </div>
              <p style={{ fontSize: 14.5, color: "var(--c-ink)", marginTop: 8, maxWidth: 540 }}>
                Drop J.J. a note with the gist of what you&rsquo;re imagining
                &mdash; programs, workshops, residencies, sponsorships,
                whatever fits. We&rsquo;ll reply with next steps.
              </p>
            </div>
            <a href="mailto:Joseph.J.Pospiech@phila.gov?subject=Collaboration%20with%20PPR%20Performing%20Arts" className="btn">
              Email J.J. &rarr;
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

function PartnerCard({ partner }) {
  return (
    <a
      href={partner.url}
      target="_blank"
      rel="noopener"
      className="card"
      style={{
        padding: 24,
        background: "var(--c-paper)",
        border: "2px solid var(--c-ink)",
        borderRadius: 18,
        boxShadow: "var(--shadow-lift)",
        textDecoration: "none",
        color: "var(--c-ink)",
        display: "flex",
        flexDirection: "column",
        gap: 14,
        transition: "transform 150ms ease, box-shadow 150ms ease",
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translate(-3px, -3px)"; e.currentTarget.style.boxShadow = "8px 8px 0 var(--c-ink)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "var(--shadow-lift)"; }}
    >
      <div style={{
        width: "100%", aspectRatio: "16/9",
        display: "flex", alignItems: "center", justifyContent: "center",
        overflow: "hidden",
        padding: 4,
      }}>
        <img
          src={partner.logo}
          alt={`${partner.name} logo`}
          loading="lazy"
          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}
        />
      </div>
      <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>{partner.name}</div>
      <p style={{ fontSize: 14, color: "var(--c-ink-soft)", lineHeight: 1.5, margin: 0 }}>{partner.blurb}</p>
      <div style={{
        fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.12em",
        textTransform: "uppercase", color: "var(--c-primary-deep)",
        marginTop: "auto",
      }}>
        Visit site &rarr;
      </div>
    </a>
  );
}

Object.assign(window, { CollaborationPage, PartnerCard });