// Partnership section

const PARTNERS = [
  {
    name: "IFV",
    long: "Institut Français de la Vigne et du Vin",
    role: "Lead Applicant",
    country: "FR",
    body: "France's national R&D institute for wine and vine, governed by professionals across the French wine industry. 19 research centers across major wine regions.",
  },
  {
    name: "AG-IRRIG",
    long: "Ag-Irrig SAS",
    role: "Partner",
    country: "FR",
    body: "Specialist in irrigation engineering and design for permanent crops, based in Aubussargues, southern France.",
  },
  {
    name: "ICV / LABFERRER",
    long: "Centro de Asesoría Dr. Ferrer",
    role: "Partner",
    country: "ES",
    body: "Catalonia-based SME distributing technical equipment and sensor networks for irrigation and soil management since 1999.",
  },
  {
    name: "FORMA FARM",
    long: "Forma Farm S.r.l.",
    role: "Partner",
    country: "IT",
    body: "Milan-based e-learning specialist, founders of the Forma LMS open-source platform with 18 years of digital training expertise.",
  },
];

function Partners() {
  return (
    <section id="partnership" style={{ background: "#fff" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80, alignItems: "end", marginBottom: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Partnership</div>
            <h2 style={{
              fontSize: "clamp(44px, 5vw, 76px)",
              textTransform: "uppercase",
              fontFamily: '"Archivo Black", sans-serif',
            }}>
              Four partners.<br/>
              Three countries.<br/>
              <span style={{ color: "var(--blue)" }}>One mission.</span>
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--muted)", maxWidth: 480 }}>
            VINIRRIG brings together research, irrigation engineering, sensor
            technology and digital training — a complementary consortium
            covering the full chain from the vine to the screen.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {PARTNERS.map((p, i) => (
            <div key={p.name} style={{
              padding: 36,
              borderRadius: 22,
              background: i === 0 ? "var(--navy)" : "var(--cream)",
              color: i === 0 ? "#fff" : "var(--navy)",
              display: "grid",
              gridTemplateColumns: "120px 1fr",
              gap: 24,
              alignItems: "start",
              transition: "transform .3s ease",
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-4px)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "none"}
            >
              {/* badge */}
              <div style={{
                aspectRatio: "1/1",
                borderRadius: 16,
                background: i === 0 ? "rgba(255,255,255,0.06)" : "#fff",
                border: i === 0 ? "1px solid rgba(255,255,255,0.15)" : "1px solid var(--line)",
                display: "grid", placeItems: "center",
                position: "relative",
              }}>
                <div className="wide" style={{
                  fontFamily: '"Archivo Black", sans-serif',
                  fontSize: 22,
                  color: i === 0 ? "#fff" : "var(--navy)",
                  textAlign: "center",
                  letterSpacing: ".02em",
                  lineHeight: 1,
                  padding: "0 8px",
                }}>{p.name}</div>
                <div style={{
                  position: "absolute", top: 10, right: 10,
                  fontSize: 10,
                  letterSpacing: ".15em",
                  fontWeight: 700,
                  padding: "3px 7px",
                  borderRadius: 6,
                  background: i === 0 ? "var(--blue)" : "var(--navy)",
                  color: "#fff",
                }}>{p.country}</div>
              </div>

              <div>
                <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: i === 0 ? "var(--blue)" : "var(--pink)", fontWeight: 700, marginBottom: 8 }}>{p.role}</div>
                <h3 style={{
                  color: i === 0 ? "#fff" : "var(--navy)",
                  fontSize: 22,
                  marginBottom: 12,
                  fontFamily: '"Archivo Black", sans-serif',
                  textTransform: "uppercase",
                  letterSpacing: ".01em",
                }}>{p.long}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: i === 0 ? "rgba(255,255,255,0.75)" : "var(--muted)" }}>{p.body}</p>
              </div>
            </div>
          ))}
        </div>

        {/* EU funding band */}
        <div style={{
          marginTop: 64,
          padding: "32px 40px",
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: 18,
          display: "flex",
          alignItems: "center",
          gap: 28,
          flexWrap: "wrap",
        }}>
          <EUFlag />
          <div style={{ flex: 1, minWidth: 280 }}>
            <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--blue-deep)", fontWeight: 700, marginBottom: 4 }}>Co-funded by the European Union</div>
            <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>
              Project N° 2022-1-FR01-KA220-VET-000087901 · Erasmus+ Programme · KA220-VET — Cooperation partnerships in vocational education and training.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Partners = Partners;