// Footer

function Footer() {
  const cols = [
    {
      head: "Project",
      items: [["The Project", "#project"], ["Training & Network", "#training"], ["Why VINIRRIG", "#why"], ["Numbers", "#numbers"]],
    },
    {
      head: "Academy",
      items: [["Access course", "#academy"], ["Course chapters", "#training"], ["Pilot farms", "#training"], ["Survey", "#"]],
    },
    {
      head: "About",
      items: [["Partners", "#partnership"], ["Contact", "#contact"], ["Erasmus+ programme", "#"], ["Privacy & cookies", "#"]],
    },
  ];

  return (
    <footer id="contact" style={{ background: "var(--navy)", color: "#fff", paddingTop: 100, paddingBottom: 32 }}>
      <div className="container-wide">
        {/* big wordmark */}
        <div style={{
          fontFamily: '"Archivo Black", sans-serif',
          fontSize: "clamp(80px, 16vw, 260px)",
          color: "transparent",
          WebkitTextStroke: "1px rgba(255,255,255,0.18)",
          letterSpacing: "-0.02em",
          lineHeight: 0.85,
          marginBottom: 80,
          textTransform: "uppercase",
        }}>VINIRRIG</div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          gap: 48,
          paddingBottom: 60,
          borderBottom: "1px solid rgba(255,255,255,0.12)",
        }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 24 }}>
              <Logomark color="#fff" />
              <div>
                <div className="wide" style={{ fontFamily: '"Archivo Black", sans-serif', fontSize: 22, color: "#fff" }}>VINIRRIG</div>
                <div style={{ fontSize: 10, letterSpacing: ".22em", textTransform: "uppercase", marginTop: 4, color: "rgba(255,255,255,0.6)" }}>Learn irrigation practice</div>
              </div>
            </div>
            <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 14, lineHeight: 1.6, maxWidth: 360, marginBottom: 24 }}>
              VINIRRIG is an Erasmus+ funded project designing a training
              course on irrigation in viticulture for both novice and
              experienced winegrowers and technical advisors.
            </p>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "10px 14px",
              borderRadius: 10,
              border: "1px solid rgba(255,255,255,0.15)",
              background: "rgba(255,255,255,0.04)",
            }}>
              <EUFlag />
              <div style={{ fontSize: 11, lineHeight: 1.3, color: "rgba(255,255,255,0.85)" }}>
                Co-funded by the<br/>
                <strong>Erasmus+ Programme</strong>
              </div>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.head}>
              <div style={{ fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--blue)", fontWeight: 700, marginBottom: 18 }}>{c.head}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.map(([l, h]) => (
                  <li key={l}><a href={h} style={{ fontSize: 14, color: "rgba(255,255,255,0.78)", transition: "color .2s ease" }}
                    onMouseEnter={(e)=>e.currentTarget.style.color="#fff"}
                    onMouseLeave={(e)=>e.currentTarget.style.color="rgba(255,255,255,0.78)"}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* contact strip */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          padding: "40px 0",
          borderBottom: "1px solid rgba(255,255,255,0.12)",
        }}>
          {[
            { c: "FR", n: "IFV — Lead", a: "Domaine de l'Espiguette, 30240 Le Grau du Roi", e: "info@vignevin.com" },
            { c: "FR", n: "Ag-Irrig SAS", a: "13 Chem. des Mas, 30190 Aubussargues", e: "marc.gelly@ag-irrig.fr" },
            { c: "ES", n: "Centro de Asesoría Dr. Ferrer", a: "Ferran el Catòlic 3, 25200 Cervera", e: "info@lab-ferrer.com" },
            { c: "IT", n: "Forma Farm S.r.l.", a: "via Savona 10, 20144 Milano", e: "info@formafarm.com" },
          ].map((co, i) => (
            <div key={i}>
              <div style={{ fontSize: 11, letterSpacing: ".15em", color: "var(--blue)", fontWeight: 700, marginBottom: 8 }}>{co.c}</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: "#fff", marginBottom: 6 }}>{co.n}</div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", lineHeight: 1.5 }}>{co.a}</div>
              <a href={`mailto:${co.e}`} style={{ fontSize: 12, color: "rgba(255,255,255,0.85)", marginTop: 6, display: "inline-block", textDecoration: "underline", textUnderlineOffset: 3 }}>{co.e}</a>
            </div>
          ))}
        </div>

        <div style={{
          paddingTop: 32,
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          gap: 16,
          fontSize: 11,
          color: "rgba(255,255,255,0.5)",
          letterSpacing: ".05em",
        }}>
          <div>© 2023–2026 VINIRRIG Consortium · Project N° 2022-1-FR01-KA220-VET-000087901</div>
          <div>The European Commission's support does not constitute an endorsement of the contents.</div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;