// Header / nav with language switcher

const NAV = [
  { id: "academy", label: { en: "Academy", fr: "Académie", it: "Accademia", es: "Academia" } },
  { id: "project", label: { en: "The Project", fr: "Le Projet", it: "Il Progetto", es: "El Proyecto" } },
  { id: "training", label: { en: "Training & Network", fr: "Formation & Réseau", it: "Formazione & Rete", es: "Formación & Red" } },
  { id: "partnership", label: { en: "Partnership", fr: "Partenariat", it: "Partenariato", es: "Asociación" } },
  { id: "contact", label: { en: "Contact", fr: "Contact", it: "Contatti", es: "Contacto" } },
];

const LANGS = [
  { code: "EN", name: "English" },
  { code: "FR", name: "Français" },
  { code: "IT", name: "Italiano" },
  { code: "ES", name: "Español" },
];

function Header({ scrolled, lang, setLang }) {
  const [langOpen, setLangOpen] = React.useState(false);
  const langRef = React.useRef(null);
  React.useEffect(() => {
    const onClick = (e) => {
      if (langRef.current && !langRef.current.contains(e.target)) setLangOpen(false);
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  return (
    <header style={{
      position: "fixed",
      top: 0, left: 0, right: 0,
      zIndex: 100,
      transition: "background 300ms ease, backdrop-filter 300ms ease, border-color 300ms ease, box-shadow 300ms ease",
      background: scrolled ? "rgba(251,250,247,0.92)" : "transparent",
      backdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(140%) blur(14px)" : "none",
      borderBottom: `1px solid ${scrolled ? "var(--line)" : "transparent"}`,
    }}>
      <div className="container-wide" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 84,
      }}>
        {/* Logo */}
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Logomark color={scrolled ? "var(--navy)" : "#fff"} />
          <div style={{ lineHeight: 1 }}>
            <div className="wide" style={{
              fontFamily: '"Archivo Black", sans-serif',
              fontSize: 22,
              letterSpacing: "0.04em",
              color: scrolled ? "var(--navy)" : "#fff",
              transition: "color 300ms ease",
            }}>VINIRRIG</div>
            <div style={{
              fontSize: 10,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              marginTop: 4,
              color: scrolled ? "var(--muted)" : "rgba(255,255,255,.75)",
              transition: "color 300ms ease",
            }}>Learn irrigation practice</div>
          </div>
        </a>

        {/* Nav */}
        <nav style={{ display: "flex", alignItems: "center", gap: 36 }}>
          {NAV.map((n) => (
            <a key={n.id} href={`#${n.id}`} style={{
              fontFamily: '"Tomorrow", sans-serif',
              fontSize: 14,
              fontWeight: 500,
              color: scrolled ? "var(--navy)" : "#fff",
              transition: "color 300ms ease, opacity .2s ease",
              opacity: 0.9,
            }} onMouseEnter={(e)=>e.currentTarget.style.opacity=1} onMouseLeave={(e)=>e.currentTarget.style.opacity=.9}>
              {n.label[lang.toLowerCase()] || n.label.en}
            </a>
          ))}
        </nav>

        {/* Right: lang + CTA */}
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div ref={langRef} style={{ position: "relative" }}>
            <button onClick={() => setLangOpen(o=>!o)} style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "8px 14px",
              borderRadius: 999,
              border: `1px solid ${scrolled ? "var(--line)" : "rgba(255,255,255,.4)"}`,
              color: scrolled ? "var(--navy)" : "#fff",
              fontSize: 13,
              fontWeight: 600,
              letterSpacing: "0.06em",
              fontFamily: '"Tomorrow", sans-serif',
              transition: "all 300ms ease",
            }}>
              <GlobeIcon />
              {lang}
              <Caret open={langOpen} />
            </button>
            {langOpen && (
              <div style={{
                position: "absolute", top: "calc(100% + 8px)", right: 0,
                background: "#fff",
                border: "1px solid var(--line)",
                borderRadius: 14,
                padding: 6,
                minWidth: 160,
                boxShadow: "0 20px 50px -20px rgba(15,34,67,.25)",
              }}>
                {LANGS.map((l) => (
                  <button key={l.code} onClick={() => { setLang(l.code); setLangOpen(false); }} style={{
                    width: "100%",
                    padding: "10px 12px",
                    textAlign: "left",
                    borderRadius: 10,
                    fontSize: 13,
                    fontFamily: '"Tomorrow", sans-serif',
                    color: lang === l.code ? "#fff" : "var(--navy)",
                    background: lang === l.code ? "var(--navy)" : "transparent",
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
                  }}>
                    <span>{l.name}</span>
                    <span style={{ opacity: .7, fontSize: 11, letterSpacing: ".1em" }}>{l.code}</span>
                  </button>
                ))}
              </div>
            )}
          </div>

          <a href="#academy" className="btn btn-blue" style={{ padding: "12px 22px", fontSize: 12 }}>
            Access course
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function Logomark({ color = "var(--navy)" }) {
  // Stylized droplet+grape mark inspired by brand logo
  return (
    <svg width="42" height="48" viewBox="0 0 42 48" fill="none" style={{ transition: "all 300ms ease" }}>
      <path d="M21 2 C21 2, 3 22, 3 32 C3 41, 11 47, 21 47 C31 47, 39 41, 39 32 C39 22, 21 2, 21 2 Z" fill={color}/>
      {/* grape cluster (white dots) */}
      <g fill="#fff">
        <circle cx="14" cy="22" r="2.6"/>
        <circle cx="20" cy="22" r="2.6"/>
        <circle cx="26" cy="22" r="2.6"/>
        <circle cx="17" cy="27" r="2.6"/>
        <circle cx="23" cy="27" r="2.6"/>
        <circle cx="20" cy="32" r="2.6"/>
      </g>
      {/* cursor arrow */}
      <path d="M16 35 L22 42 L23 38 L26 38 L21 33 Z" fill="#fff"/>
    </svg>
  );
}

function GlobeIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="7" cy="7" r="5.5"/>
      <path d="M1.5 7h11M7 1.5c1.7 1.6 2.7 3.6 2.7 5.5S8.7 11 7 12.5C5.3 11 4.3 9 4.3 7S5.3 3 7 1.5z"/>
    </svg>
  );
}
function Caret({ open }) {
  return <svg width="10" height="6" viewBox="0 0 10 6" style={{ transition: "transform .2s ease", transform: open ? "rotate(180deg)" : "none" }}><path d="M1 1l4 4 4-4" stroke="currentColor" strokeWidth="1.5" fill="none"/></svg>;
}

window.Header = Header;
window.Logomark = Logomark;