/* Grow in Uganda — shared primitives & chrome
   Loaded on every page. Exposes everything on window. */

const { useState, useEffect, useRef } = React;

const ASSET = "assets/";

/* ---- Lucide refresh ---- */
function refreshIcons() {
  setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 0);
}
function Icon({ name, size = 20, color, strokeWidth = 2, style = {}, className = "" }) {
  return (
    <i data-lucide={name} className={className}
       style={{ width: size, height: size, color, strokeWidth, display: "inline-flex", flex: "none", ...style }}></i>
  );
}

/* ---- Button (renders <a> when href given, else <button>) ---- */
function Button({ variant = "primary", size = "md", icon, iconRight, children, onClick, href, style = {}, type }) {
  const base = {
    fontFamily: "var(--font-body)", fontWeight: 800, border: "none", cursor: "pointer",
    borderRadius: "var(--r-md)", display: "inline-flex", alignItems: "center", justifyContent: "center",
    gap: 9, transition: "all .18s cubic-bezier(.2,.7,.3,1)", whiteSpace: "nowrap", lineHeight: 1,
    textDecoration: "none",
  };
  const sizes = {
    sm: { padding: "9px 16px", fontSize: 14 },
    md: { padding: "13px 24px", fontSize: 15.5 },
    lg: { padding: "16px 30px", fontSize: 17 },
  };
  const variants = {
    primary: { background: "var(--primary)", color: "#fff", boxShadow: "var(--shadow-cta)" },
    accent:  { background: "var(--accent)", color: "#fff" },
    outline: { background: "transparent", color: "var(--brown-700)", boxShadow: "inset 0 0 0 2px var(--border-strong)" },
    ghost:   { background: "transparent", color: "var(--green-600)", boxShadow: "none" },
    light:   { background: "#fff", color: "var(--red-600)", boxShadow: "var(--shadow-sm)" },
    gold:    { background: "var(--yellow-500)", color: "var(--brown-900)" },
  };
  const isz = size === "lg" ? 20 : size === "sm" ? 16 : 18;
  const cls = "btn btn-" + variant;
  const inner = (<>{icon && <Icon name={icon} size={isz} />}{children}{iconRight && <Icon name={iconRight} size={isz} />}</>);
  const allStyle = { ...base, ...sizes[size], ...variants[variant], ...style };
  if (href) return <a href={href} onClick={onClick} className={cls} style={allStyle}>{inner}</a>;
  return <button type={type || "button"} onClick={onClick} className={cls} style={allStyle}>{inner}</button>;
}

/* ---- Eyebrow ---- */
function Eyebrow({ children, light, style = {} }) {
  return (
    <div style={{
      fontFamily: "var(--font-body)", fontWeight: 800, fontSize: 13, letterSpacing: ".08em",
      textTransform: "uppercase", color: light ? "var(--yellow-400)" : "var(--green-600)", ...style
    }}>{children}</div>
  );
}

/* ---- Flag rule ---- */
function FlagRule({ w = 56, h = 5, style = {} }) {
  return (
    <div style={{ display: "flex", height: h, width: w, borderRadius: 999, overflow: "hidden", flex: "none", ...style }}>
      <div style={{ flex: 1, background: "var(--red-600)" }}></div>
      <div style={{ flex: 1, background: "var(--yellow-500)" }}></div>
      <div style={{ flex: 1, background: "var(--green-600)" }}></div>
    </div>
  );
}

/* ---- Badge ---- */
function Badge({ tone = "green", children, style = {} }) {
  const tones = {
    green: { background: "var(--green-100)", color: "var(--green-700)" },
    red:   { background: "var(--red-100)", color: "var(--red-700)" },
    gold:  { background: "var(--yellow-100)", color: "#9A6B00" },
    brown: { background: "var(--sand-200)", color: "var(--brown-700)" },
    solid: { background: "var(--red-600)", color: "#fff" },
  };
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 800, fontSize: 12,
      padding: "6px 12px", borderRadius: "var(--r-pill)", whiteSpace: "nowrap", ...tones[tone], ...style
    }}>{children}</span>
  );
}

/* ---- Progress ---- */
function Progress({ pct, label, amount }) {
  const [w, setW] = useState(0);
  useEffect(() => { const t = setTimeout(() => setW(pct), 120); return () => clearTimeout(t); }, [pct]);
  return (
    <div>
      {(label || amount) && (
        <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5, fontWeight: 700, marginBottom: 6 }}>
          <span style={{ color: "var(--fg-muted)" }}>{label}</span>
          <span style={{ color: "var(--green-700)" }}>{amount}</span>
        </div>
      )}
      <div style={{ height: 11, background: "var(--sand-200)", borderRadius: 999, overflow: "hidden" }}>
        <div style={{ height: "100%", width: w + "%", borderRadius: 999,
          background: "linear-gradient(90deg,var(--green-500),var(--green-600))",
          transition: "width 1s cubic-bezier(.2,.7,.3,1)" }}></div>
      </div>
    </div>
  );
}

/* ---- Section wrapper ---- */
function Section({ alt, dark, sand, children, style = {}, pad = "var(--space-9)", id }) {
  const bg = dark ? "var(--brown-900)" : sand ? "var(--sand-200)" : alt ? "var(--bg-alt)" : "var(--bg)";
  return (
    <section id={id} style={{ background: bg, color: dark ? "var(--fg-on-dark)" : "inherit", padding: `${pad} 0`, ...style }}>
      <div className="gu-container">{children}</div>
    </section>
  );
}

/* ---- Photo (real image or placeholder frame) ---- */
function Photo({ kind = "landscape", src, pos = "center", h, gradient, caption, radius = "var(--r-lg)", style = {}, className = "" }) {
  return (
    <div className={className} style={{ position: "relative", borderRadius: radius, overflow: "hidden", height: h,
      boxShadow: "var(--shadow-sm)", background: "var(--sand-200)", ...style }}>
      <img src={src || (ASSET + "placeholder-" + kind + ".svg")} alt="" loading="lazy"
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: pos }} />
      {gradient && <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top,rgba(46,24,9,.82),transparent 58%)" }}></div>}
      {caption && <div style={{ position: "absolute", left: 22, bottom: 18, right: 22,
        color: "#FBF3E8", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, lineHeight: 1.15 }}>{caption}</div>}
    </div>
  );
}

/* ---- Social glyphs ---- */
function SocialGlyph({ name, size = 18 }) {
  if (name === "instagram") return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="4" width="16" height="16" rx="5"></rect><circle cx="12" cy="12" r="3.4"></circle><circle cx="17" cy="7" r="1" fill="currentColor" stroke="none"></circle>
    </svg>);
  if (name === "linkedin") return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M6.94 7.5a1.94 1.94 0 1 1 0-3.88 1.94 1.94 0 0 1 0 3.88zM5.3 9h3.3v10.5H5.3zM10.6 9h3.16v1.43h.05c.44-.83 1.5-1.7 3.1-1.7 3.3 0 3.9 2.17 3.9 5v5.77h-3.3v-5.12c0-1.22-.02-2.8-1.7-2.8-1.7 0-1.96 1.33-1.96 2.7v5.22h-3.3z"></path>
    </svg>);
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M13.5 21v-7h2.3l.4-2.7h-2.7V9.5c0-.78.22-1.3 1.33-1.3H16.4V5.9c-.25-.03-1.1-.1-2.1-.1-2.07 0-3.5 1.27-3.5 3.6v2h-2.3V14h2.3v7z"></path>
    </svg>);
}

/* ---- Header (sticky frosted nav with mobile menu) ---- */
const NAV = [
  ["Om os", "om.html"], ["Projekter", "projekter.html"],
  ["Rejser", "rejser.html"], ["Indsamling", "indsamling.html"], ["Webshop", "webshop.html"], ["Nyheder", "nyheder.html"],
];
function Header({ page }) {
  const [open, setOpen] = useState(false);
  useEffect(() => {
    document.body.classList.toggle("menu-open", open);
    return () => document.body.classList.remove("menu-open");
  }, [open]);
  const linkStyle = (key) => ({
    cursor: "pointer", fontWeight: 700, fontSize: 15, padding: "8px 13px", borderRadius: "var(--r-sm)", whiteSpace: "nowrap",
    color: page === key ? "var(--red-600)" : "var(--brown-700)",
    background: page === key ? "var(--red-50)" : "transparent",
  });
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 60,
      background: "rgba(255,251,244,.88)", backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid var(--border)" }}>
      <div className="gu-container" style={{ height: 74, display: "flex", alignItems: "center", gap: 20 }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center" }}>
          <img src={(window.__resources && window.__resources.logoFull) || (ASSET + "logo-full-transparent.png")} alt="Grow in Uganda" style={{ height: 52 }} />
        </a>
        <nav className="gu-navlinks">
          {NAV.map(([label, key]) => (
            <a key={key} href={key} style={linkStyle(key)}>{label}</a>
          ))}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", gap: 10, alignItems: "center" }} className="hide-mobile">
          <Button variant="primary" size="sm" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér</Button>
        </div>
        <button className="gu-hamburger" aria-label="Menu" onClick={() => setOpen(o => !o)}
          style={{ marginLeft: "auto", background: "transparent", border: "none", cursor: "pointer", color: "var(--brown-800)", padding: 6 }}>
          <Icon name={open ? "x" : "menu"} size={28} />
        </button>
      </div>
      <div className={"gu-mobile-menu" + (open ? " open" : "")} style={{
        position: "fixed", top: 74, left: 0, right: 0, bottom: 0, background: "var(--cream)", zIndex: 59,
        padding: "20px", overflowY: "auto" }}>
        <nav style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          {[["Forside", "index.html"], ...NAV, ["FAQ", "faq.html"], ["Kontakt", "kontakt.html"]].map(([label, key]) => (
            <a key={key} href={key} style={{ fontWeight: 700, fontSize: 18, padding: "14px 12px", borderRadius: "var(--r-md)",
              color: page === key ? "var(--red-600)" : "var(--brown-800)",
              background: page === key ? "var(--red-50)" : "transparent",
              borderBottom: "1px solid var(--divider)" }}>{label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 22 }}>
          <Button variant="primary" size="lg" icon="hand-coins" onClick={() => { setOpen(false); window.GU.openDonate(); }}>Donér</Button>
        </div>
      </div>
    </header>
  );
}

/* ---- Footer (deep brown) ---- */
function Footer() {
  return (
    <footer style={{ background: "var(--brown-900)", color: "var(--fg-on-dark)" }}>
      <div className="gu-container footer-grid" style={{ padding: "64px 28px 36px",
        display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1.2fr", gap: 40 }}>
        <div>
          <img src={(window.__resources && window.__resources.logoFull) || (ASSET + "logo-full-transparent.png")} alt="Grow in Uganda"
            style={{ height: 64, marginBottom: 16, filter: "drop-shadow(0 2px 8px rgba(0,0,0,.3))" }} />
          <p style={{ color: "var(--fg-on-dark-mut)", fontSize: 14.5, lineHeight: 1.7, maxWidth: 290, margin: 0 }}>
            Vi er en dansk forening, der skaber skolegang, mad og tryghed for børn og unge i Uganda — og følger hvert barn fra første skoledag til endt uddannelse.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
            {["facebook", "instagram", "linkedin"].map(s => (
              <a key={s} href="#" aria-label={s} style={{ width: 38, height: 38, borderRadius: "var(--r-pill)", background: "rgba(255,255,255,.1)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "var(--fg-on-dark)" }}>
                <SocialGlyph name={s} />
              </a>
            ))}
          </div>
        </div>
        {[["Støt", [["Donér", null], ["Indsamling af tøj", "indsamling.html"], ["Webshop", "webshop.html"], ["Projekter", "projekter.html"]]],
          ["Organisation", [["Om os", "om.html"], ["Arrangerede rejser", "rejser.html"], ["Nyheder", "nyheder.html"], ["FAQ", "faq.html"],
            ["Privatlivspolitik", "privatlivspolitik.html"], ["Cookiepolitik", "cookiepolitik.html"], ["Aftalevilkår", "aftalevilkaar.html"]]]
        ].map(([title, links]) => (
          <div key={title}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, marginBottom: 14 }}>{title}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {links.map(([l, k], i) => (
                k ? <a key={i} href={k} style={{ color: "var(--fg-on-dark-mut)", fontSize: 14.5 }}>{l}</a>
                  : <a key={i} onClick={() => window.GU.openDonate()} style={{ color: "var(--fg-on-dark-mut)", fontSize: 14.5, cursor: "pointer" }}>{l}</a>
              ))}
            </div>
          </div>
        ))}
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, marginBottom: 14 }}>Kontakt</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 11, color: "var(--fg-on-dark-mut)", fontSize: 14.5 }}>
            <a href="mailto:growinuganda@gmail.com" style={{ display: "flex", gap: 8, alignItems: "center" }}><Icon name="mail" size={16} /> growinuganda@gmail.com</a>
            <span style={{ display: "flex", gap: 8, alignItems: "center" }}><Icon name="map-pin" size={16} /> Plantagevej 3, 7600 Struer</span>
            <span style={{ display: "flex", gap: 8, alignItems: "center" }}><Icon name="building-2" size={16} /> CVR: 46 41 82 39</span>
          </div>
          <div style={{ marginTop: 16 }}>
            <Button variant="primary" size="sm" icon="hand-coins" onClick={() => window.GU.openDonate()}>Donér i dag</Button>
          </div>
        </div>
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,.1)" }}>
        <div className="gu-container" style={{ padding: "18px 28px",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10,
          color: "var(--fg-on-dark-mut)", fontSize: 13 }}>
          <span>© 2026 Grow in Uganda. Alle bidrag er fradragsberettigede efter §8A.</span>
          <span style={{ display: "flex", flexWrap: "wrap", gap: "4px 8px" }}>
            <a href="privatlivspolitik.html" style={{ color: "var(--fg-on-dark-mut)", textDecoration: "underline" }}>Privatlivspolitik</a>
            <span>·</span>
            <a href="cookiepolitik.html" style={{ color: "var(--fg-on-dark-mut)", textDecoration: "underline" }}>Cookiepolitik</a>
            <span>·</span>
            <a href="aftalevilkaar.html" style={{ color: "var(--fg-on-dark-mut)", textDecoration: "underline" }}>Aftalevilkår</a>
            <span>·</span>
            <a href="uploads/vedtaegter.pdf" target="_blank" rel="noopener" style={{ color: "var(--fg-on-dark-mut)", textDecoration: "underline" }}>Vedtægter</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  React, useState, useEffect, useRef, ASSET, refreshIcons,
  Icon, Button, Eyebrow, FlagRule, Badge, Progress, Section, Photo, SocialGlyph, Header, Footer, NAV,
});