// Why VINIRRIG section — benefits / climate

function Why() {
  const items = [
    {
      icon: (<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M12 3c0 0-7 8-7 13a7 7 0 0014 0c0-5-7-13-7-13z"/></svg>),
      kpi: "−40%",
      title: "Reduce water use",
      body: "Drip and sensor-driven irrigation cuts vineyard water use by up to 40% versus surface methods.",
    },
    {
      icon: (<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2 2M17.1 17.1l2 2M4.9 19.1l2-2M17.1 6.9l2-2"/></svg>),
      kpi: "+3°C",
      title: "Adapt to climate change",
      body: "Mediterranean wine regions are warming. Irrigation is no longer optional — it's a survival tool.",
    },
    {
      icon: (<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6"/></svg>),
      kpi: "EU",
      title: "Cross-border knowledge",
      body: "Best practices from Spain's experience, with field validation in France and Italy. Open knowledge for all.",
    },
    {
      icon: (<svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M4 18l5-5 4 4 7-7M14 10h6v6"/></svg>),
      kpi: "ROI",
      title: "Better quality, lower cost",
      body: "Smart irrigation improves grape quality and yields, while reducing operating costs and water bills.",
    },
  ];

  return (
    <section id="why" style={{ background: "var(--paper)" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start", marginBottom: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Why it matters</div>
            <h2 style={{
              fontSize: "clamp(44px, 5vw, 76px)",
              textTransform: "uppercase",
              fontFamily: '"Archivo Black", sans-serif',
            }}>
              Why you<br/>
              need <span style={{ color: "var(--pink)" }}>VINIRRIG.</span>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--muted)", maxWidth: 520, paddingTop: 40 }}>
            Today's irrigation is not what it used to be. In the next ten
            years, <strong style={{ color: "var(--navy)" }}>climate change, water scarcity and rising costs</strong> will
            redefine winegrowing. We give you the knowledge to face them —
            for free, in your language.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: 32,
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 20,
              transition: "all .35s ease",
              position: "relative",
              overflow: "hidden",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.borderColor = "var(--blue)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.borderColor = "var(--line)"; }}
            >
              <div style={{ color: "var(--blue)", marginBottom: 24 }}>{it.icon}</div>
              <div className="wide" style={{
                fontFamily: '"Archivo Black", sans-serif',
                fontSize: 44,
                color: "var(--navy)",
                lineHeight: 1,
                marginBottom: 16,
                letterSpacing: "-0.01em",
              }}>{it.kpi}</div>
              <h3 style={{ fontSize: 17, marginBottom: 10, textTransform: "uppercase", letterSpacing: ".01em" }}>{it.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--muted)" }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Why = Why;