// Training & Network section

const CHAPTERS = [
  { n: "01", t: "Calculating the irrigation need of the vine" },
  { n: "02", t: "Evaluating the costs of intelligent irrigation" },
  { n: "03", t: "Installing & maintaining the equipment" },
  { n: "04", t: "Tools to control irrigation & water quality" },
  { n: "05", t: "Additional equipment for fertigation" },
  { n: "06", t: "Avoiding common irrigation mistakes" },
];

function Training() {
  const [active, setActive] = React.useState(0);
  return (
    <section id="training" style={{ background: "var(--navy)", color: "#fff" }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, alignItems: "end", marginBottom: 80 }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 24 }}>Training & Network</div>
            <h2 style={{
              fontSize: "clamp(44px, 5vw, 76px)",
              color: "#fff",
              textTransform: "uppercase",
              fontFamily: '"Archivo Black", sans-serif',
            }}>
              Two ways<br/>
              to learn.
            </h2>
          </div>
          <p style={{ color: "rgba(255,255,255,0.75)", fontSize: 17, lineHeight: 1.6, maxWidth: 480, justifySelf: "end", textAlign: "right" }}>
            VINIRRIG combines digital know-how with on-the-ground practice —
            an online curriculum paired with field demonstrations on
            exemplary vineyards across the Mediterranean.
          </p>
        </div>

        {/* Two columns: e-learning vs network */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          {/* e-learning */}
          <div style={{
            background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.12)",
            borderRadius: 24,
            padding: 40,
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: "var(--blue)",
                display: "grid", placeItems: "center",
              }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
              </div>
              <div>
                <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--blue)", fontWeight: 600 }}>Pillar 01</div>
                <h3 style={{ color: "#fff", fontSize: 26, fontFamily: '"Archivo Black", sans-serif', textTransform: "uppercase" }}>E-learning course</h3>
              </div>
            </div>

            <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 15, lineHeight: 1.6, marginBottom: 28 }}>
              Around 20 hours of online training, available in EN/FR/IT/ES.
              Six chapters answering the key questions winegrowers and
              advisors face on irrigation.
            </p>

            <div style={{ borderTop: "1px solid rgba(255,255,255,0.1)", marginTop: 8 }}>
              {CHAPTERS.map((c, i) => (
                <button key={c.n}
                  onClick={() => setActive(i)}
                  style={{
                    width: "100%",
                    display: "grid",
                    gridTemplateColumns: "44px 1fr 24px",
                    alignItems: "center",
                    gap: 16,
                    padding: "18px 0",
                    borderBottom: "1px solid rgba(255,255,255,0.1)",
                    color: active === i ? "var(--blue)" : "#fff",
                    textAlign: "left",
                    transition: "color .2s ease",
                  }}>
                  <span style={{ fontFamily: '"Archivo Black", sans-serif', fontSize: 13, letterSpacing: ".05em", color: active === i ? "var(--blue)" : "rgba(255,255,255,0.4)" }}>{c.n}</span>
                  <span style={{ fontSize: 15, fontWeight: 500 }}>{c.t}</span>
                  <span style={{ opacity: active === i ? 1 : 0.4, transition: "all .2s ease", transform: active === i ? "translateX(4px)" : "none" }}>→</span>
                </button>
              ))}
            </div>
          </div>

          {/* Network */}
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{
              borderRadius: 24,
              overflow: "hidden",
              position: "relative",
              minHeight: 280,
              backgroundImage: "url(assets/vigna5.webp)",
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,34,67,0) 40%, rgba(15,34,67,0.85) 100%)" }} />
              <div style={{ position: "absolute", left: 28, bottom: 24, right: 28 }}>
                <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "#FFCC66", fontWeight: 600, marginBottom: 6 }}>Pillar 02</div>
                <h3 style={{ color: "#fff", fontSize: 26, fontFamily: '"Archivo Black", sans-serif', textTransform: "uppercase" }}>Network of pilot farms</h3>
              </div>
            </div>

            <div style={{
              background: "rgba(255,255,255,0.04)",
              border: "1px solid rgba(255,255,255,0.12)",
              borderRadius: 24,
              padding: 32,
              flex: 1,
            }}>
              <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 15, lineHeight: 1.6 }}>
                Best Irrigation Practice Vineyards in France, Italy and Spain
                host field training and demonstrations adapted to each
                regional context — combining digital know-how with hands-on
                experience.
              </p>

              <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
                {[
                  { c: "FR", n: "France", host: "IFV · Ag-Irrig" },
                  { c: "IT", n: "Italy", host: "Forma Farm" },
                  { c: "ES", n: "Spain", host: "LabFerrer" },
                ].map((co) => (
                  <div key={co.c} style={{
                    padding: 16,
                    borderRadius: 12,
                    background: "rgba(27,152,232,0.08)",
                    border: "1px solid rgba(27,152,232,0.2)",
                  }}>
                    <div style={{ fontFamily: '"Archivo Black", sans-serif', fontSize: 18, color: "var(--blue)" }}>{co.c}</div>
                    <div style={{ fontSize: 13, color: "#fff", marginTop: 6, fontWeight: 600 }}>{co.n}</div>
                    <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", marginTop: 2 }}>{co.host}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Training = Training;