// Hero section — full-bleed vineyard image with overlay & strong type

function Hero() {
  return (
    <section id="top" style={{
      padding: 0,
      position: "relative",
      minHeight: "100vh",
      display: "flex",
      alignItems: "flex-end",
      overflow: "hidden",
      color: "#fff",
    }}>
      {/* image */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "url(assets/vigna3.jpg)",
        backgroundSize: "cover",
        backgroundPosition: "center 60%",
        transform: "scale(1.05)",
      }} />
      {/* gradient overlay */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(15,34,67,0.78) 0%, rgba(15,34,67,0.40) 30%, rgba(15,34,67,0.30) 60%, rgba(15,34,67,0.85) 100%)",
      }} />
      {/* navy bottom band w grain */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 80% 0%, rgba(27,152,232,0.22), transparent 50%)",
        mixBlendMode: "screen",
      }} />

      {/* content */}
      <div className="container-wide" style={{
        position: "relative",
        paddingTop: 160, paddingBottom: 80,
        width: "100%",
      }}>
        <div style={{ maxWidth: 980 }}>
          <div className="eyebrow on-dark reveal in" style={{ marginBottom: 32 }}>
            Erasmus+ • KA220-VET • 2023–2026
          </div>
          <h1 className="reveal in" style={{
            fontSize: "clamp(48px, 7.6vw, 124px)",
            fontFamily: '"Archivo Black", sans-serif',
            color: "#fff",
            letterSpacing: "-0.02em",
            lineHeight: 0.92,
            textTransform: "uppercase",
          }}>
            Learn to <em style={{
              fontStyle: "normal",
              color: "var(--blue)",
              fontFamily: '"Archivo Black", sans-serif',
            }}>irrigate</em><br/>
            the vineyard.
          </h1>
          <p style={{
            marginTop: 32,
            maxWidth: 620,
            fontSize: 19,
            lineHeight: 1.55,
            color: "rgba(255,255,255,0.88)",
            fontFamily: '"Tomorrow", sans-serif',
            fontWeight: 300,
          }}>
            A free European training course on intelligent water management
            for winegrowers, technical advisors and the next generation of
            viticulture. Twenty hours of e-learning, four languages, a network
            of pilot farms across France, Italy and Spain.
          </p>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 16, marginTop: 44 }}>
            <a href="#academy" className="btn btn-blue">
              Access the course
              <span className="arrow">→</span>
            </a>
            <a href="#project" className="btn btn-ghost-light">
              Discover the project
            </a>
          </div>
        </div>

        {/* meta row at bottom */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 24,
          marginTop: 96,
          paddingTop: 28,
          borderTop: "1px solid rgba(255,255,255,0.18)",
          color: "rgba(255,255,255,0.85)",
        }}>
          {[
            ["20h", "of e-learning"],
            ["6", "thematic chapters"],
            ["4", "languages available"],
            ["3", "countries · network of pilot farms"],
          ].map(([k, v], i) => (
            <div key={i}>
              <div className="wide" style={{
                fontFamily: '"Archivo Black", sans-serif',
                fontSize: 36,
                color: "#fff",
                lineHeight: 1,
              }}>{k}</div>
              <div style={{ fontSize: 12, marginTop: 8, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* EU flag corner */}
      <div style={{
        position: "absolute",
        top: 110,
        right: 48,
        display: "flex", alignItems: "center", gap: 12,
        background: "rgba(255,255,255,0.08)",
        backdropFilter: "blur(10px)",
        WebkitBackdropFilter: "blur(10px)",
        border: "1px solid rgba(255,255,255,0.18)",
        padding: "10px 14px",
        borderRadius: 12,
      }}>
        <EUFlag />
        <div style={{ fontSize: 11, lineHeight: 1.3, color: "#fff", maxWidth: 160 }}>
          Co-funded by the<br/>
          <strong>Erasmus+ Programme</strong><br/>
          of the European Union
        </div>
      </div>
    </section>
  );
}

function EUFlag() {
  // 12 stars EU flag (simplified)
  const stars = [];
  for (let i = 0; i < 12; i++) {
    const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
    stars.push(
      <text key={i} x={20 + Math.cos(a) * 11} y={15 + Math.sin(a) * 11} fontSize="6" fill="#FFCC00" textAnchor="middle">★</text>
    );
  }
  return (
    <svg width="42" height="30" viewBox="0 0 40 30">
      <rect width="40" height="30" fill="#003399" rx="2"/>
      {stars}
    </svg>
  );
}

window.Hero = Hero;
window.EUFlag = EUFlag;