// The Project section

function Project() {
  return (
    <section id="project" style={{ background: "var(--paper)" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <div className="eyebrow" style={{ marginBottom: 24 }}>The project</div>
            <h2 style={{
              fontSize: "clamp(44px, 5vw, 76px)",
              textTransform: "uppercase",
              fontFamily: '"Archivo Black", sans-serif',
            }}>
              The keys to<br/>more sustainable<br/>
              <span style={{ color: "var(--blue)" }}>water management.</span>
            </h2>
          </div>

          <div>
            <p style={{ fontSize: 22, lineHeight: 1.5, color: "var(--navy)", fontWeight: 500, fontFamily: '"Tomorrow", sans-serif', maxWidth: 680 }}>
              More and more vineyards in Europe are using — and will need —
              irrigation in the coming decades. Yet practical training rarely
              addresses the real questions winegrowers face on the ground:
              <em style={{ color: "var(--pink)", fontStyle: "normal" }}>&nbsp;how much, how, and when.</em>
            </p>

            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 28,
              marginTop: 56,
            }}>
              <div style={{
                gridColumn: "1 / -1",
                padding: 28,
                background: "var(--cream)",
                borderRadius: 18,
                border: "1px solid var(--line)",
              }}>
                <p style={{ fontSize: 15, color: "var(--muted)", marginBottom: 10, letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>
                  Context
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--navy)" }}>
                  In southern Europe, drought, heatwaves and restricted water
                  availability are now frequent. Some regions have decades of
                  experience optimizing irrigation; others are installing
                  systems for the first time. VINIRRIG bridges these two
                  worlds — combining expert know-how with practical training
                  adapted to climate change.
                </p>
              </div>

              <Pillar
                num="01"
                title="A 20h e-learning course"
                body="Six thematic chapters in EN, FR, IT and ES — calculating water needs, sizing systems, equipment, fertigation and more."
              />
              <Pillar
                num="02"
                title="A network of pilot farms"
                body="Best Irrigation Practice Vineyards across France, Italy and Spain host field training, demonstrations and regional workshops."
              />
            </div>

            {/* image grid */}
            <div style={{
              display: "grid",
              gridTemplateColumns: "2fr 1fr",
              gridTemplateRows: "200px 200px",
              gap: 16,
              marginTop: 56,
            }}>
              <Img src="assets/vigna2.webp" rowSpan={2} />
              <Img src="assets/vigna4.webp" />
              <Img src="assets/vigna7.webp" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pillar({ num, title, body }) {
  return (
    <div style={{
      padding: 28,
      borderRadius: 18,
      background: "#fff",
      border: "1px solid var(--line)",
      transition: "transform .3s ease, box-shadow .3s ease",
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 24px 50px -30px rgba(15,34,67,.3)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{
        fontFamily: '"Archivo Black", sans-serif',
        color: "var(--blue)",
        fontSize: 14,
        letterSpacing: "0.1em",
        marginBottom: 14,
      }}>{num}</div>
      <h3 style={{ fontSize: 22, marginBottom: 10, fontFamily: '"Archivo Black", sans-serif', textTransform: "uppercase", letterSpacing: "0.01em" }}>{title}</h3>
      <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--muted)" }}>{body}</p>
    </div>
  );
}

function Img({ src, rowSpan }) {
  return (
    <div style={{
      gridRow: rowSpan ? `span ${rowSpan}` : "auto",
      backgroundImage: `url(${src})`,
      backgroundSize: "cover",
      backgroundPosition: "center",
      borderRadius: 16,
      minHeight: 200,
    }} />
  );
}

window.Project = Project;