// Numbers / project credibility band

function Numbers() {
  const stats = [
    { k: "20", u: "h", l: "of e-learning" },
    { k: "6", u: "", l: "thematic chapters" },
    { k: "4", u: "", l: "languages: EN · FR · IT · ES" },
    { k: "4", u: "", l: "European partners" },
    { k: "3", u: "", l: "Mediterranean countries" },
    { k: "100%", u: "", l: "free & open access" },
  ];
  return (
    <section id="numbers" style={{
      padding: "120px 0",
      background: "var(--pink)",
      color: "#fff",
      overflow: "hidden",
      position: "relative",
    }}>
      {/* image side */}
      <div style={{
        position: "absolute",
        right: 0, top: 0, bottom: 0,
        width: "40%",
        backgroundImage: "url(assets/vigna6.webp)",
        backgroundSize: "cover",
        backgroundPosition: "center",
        clipPath: "polygon(15% 0, 100% 0, 100% 100%, 0% 100%)",
      }} />
      <div style={{
        position: "absolute", right: 0, top: 0, bottom: 0, width: "40%",
        background: "linear-gradient(90deg, rgba(84,23,62,0.4) 0%, rgba(84,23,62,0.15) 60%, rgba(84,23,62,0) 100%)",
        clipPath: "polygon(15% 0, 100% 0, 100% 100%, 0% 100%)",
      }} />

      <div className="container-wide" style={{ position: "relative" }}>
        <div style={{ maxWidth: "60%" }}>
          <div className="eyebrow on-dark" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 24 }}>Our project in numbers</div>
          <h2 style={{
            color: "#fff",
            fontSize: "clamp(40px, 4.6vw, 68px)",
            textTransform: "uppercase",
            fontFamily: '"Archivo Black", sans-serif',
            marginBottom: 64,
          }}>
            A European<br/>
            consortium for<br/>
            sustainable vines.
          </h2>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 32,
            borderTop: "1px solid rgba(255,255,255,0.2)",
          }}>
            {stats.map((s, i) => (
              <div key={i} style={{
                padding: "32px 0",
                borderBottom: i < stats.length - 3 ? "1px solid rgba(255,255,255,0.2)" : "none",
              }}>
                <div className="wide" style={{
                  fontFamily: '"Archivo Black", sans-serif',
                  fontSize: 72,
                  lineHeight: 1,
                  color: "#fff",
                  letterSpacing: "-0.02em",
                  display: "flex", alignItems: "baseline", gap: 4,
                }}>
                  {s.k}
                  {s.u && <span style={{ fontSize: 30, color: "rgba(255,255,255,0.7)" }}>{s.u}</span>}
                </div>
                <div style={{ fontSize: 13, marginTop: 12, color: "rgba(255,255,255,0.8)", letterSpacing: ".06em", textTransform: "uppercase" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Numbers = Numbers;