/* Grow in Uganda — shared cards & form field */

/* ---- Sponsor child card ---- */
function SponsorCard({ child, showcase }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: "var(--white)", border: "1px solid var(--border)",
        borderRadius: "var(--r-lg)", overflow: "hidden",
        boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-3px)" : "none", transition: "all .2s cubic-bezier(.2,.7,.3,1)" }}>
      <div style={{ position: "relative", height: 210 }}>
        <img src={child.photo || (ASSET + "placeholder-portrait.svg")} alt={child.name} loading="lazy"
          style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: child.pos || "center" }} />
        <span style={{ position: "absolute", top: 12, left: 12,
          background: child.status === "needs" ? "var(--red-600)" : "var(--green-600)",
          color: "#fff", fontWeight: 800, fontSize: 11.5, padding: "5px 11px", borderRadius: "var(--r-pill)", whiteSpace: "nowrap",
          display: showcase ? "none" : "inline" }}>
          {child.wait}
        </span>
      </div>
      <div style={{ padding: "16px 18px 18px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 21, color: "var(--brown-800)" }}>
          {child.name}, {child.age} år
        </div>
        <div style={{ fontSize: 13.5, color: "var(--fg-subtle)", margin: "2px 0 6px", display: "flex", alignItems: "center", gap: 6 }}>
          <Icon name="map-pin" size={14} /> {child.place} · <b style={{ color: "var(--green-700)" }}>{child.grade}</b>
        </div>
        {child.dream && <div style={{ fontSize: 13.5, color: "var(--fg-muted)", marginBottom: showcase ? 2 : 14, display: "flex", gap: 6, alignItems: "center" }}>
          <Icon name="sparkles" size={14} color="var(--yellow-600)" /> {child.dream}</div>}
        {!showcase && <React.Fragment>
        <div style={{ display: "flex", alignItems: "baseline", gap: 5, marginBottom: 14, whiteSpace: "nowrap" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 23, color: "var(--brown-800)" }}>200 kr.</span>
          <span style={{ fontSize: 13.5, color: "var(--fg-subtle)", fontWeight: 700 }}>/md.</span>
        </div>
        <Button variant="primary" icon="heart-handshake" style={{ width: "100%" }} onClick={() => window.GU.openSponsor(child)}>
          Bliv {child.name}s fadder
        </Button>
        </React.Fragment>}
      </div>
    </div>
  );
}

/* ---- Project card ---- */
function ProjectCard({ p }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)",
        overflow: "hidden", boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-3px)" : "none", transition: "all .2s cubic-bezier(.2,.7,.3,1)" }}>
      <div style={{ position: "relative", height: 168 }}>
        <Photo kind="landscape" src={p.photo} pos={p.pos || "center"} h={168} radius={0} />
        <div style={{ position: "absolute", top: 12, left: 12 }}>
          {p.status === "done"
            ? <Badge tone="green"><Icon name="check" size={14} /> Fuldt finansieret</Badge>
            : <Badge tone="gold">Løbende</Badge>}
        </div>
        <div style={{ position: "absolute", top: 12, right: 12, width: 40, height: 40, borderRadius: "var(--r-md)",
          background: "rgba(255,251,244,.92)", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name={p.icon} size={20} color="var(--green-600)" />
        </div>
      </div>
      <div style={{ padding: "18px 20px 20px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--fg-subtle)", fontWeight: 700, marginBottom: 6 }}>
          <Icon name="map-pin" size={13} /> {p.loc}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, color: "var(--brown-800)" }}>{p.title}</div>
        <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.6, margin: "8px 0 16px" }}>{p.desc}</p>
        <Progress pct={p.pct} label={`Indsamlet ${p.raised} kr.`} amount={`${p.pct}% af ${p.goal}`} />
        <div style={{ marginTop: 16 }}>
          {p.status === "done"
            ? <Button variant="outline" size="sm" iconRight="arrow-right" style={{ width: "100%" }}>Se resultatet</Button>
            : <Button variant="accent" size="sm" icon="hand-coins" style={{ width: "100%" }} onClick={() => window.GU.openDonate(p.title)}>Støt projektet</Button>}
        </div>
      </div>
    </div>
  );
}

/* ---- News card ---- */
function NewsCard({ n }) {
  const [hover, setHover] = useState(false);
  return (
    <a href="nyheder.html" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "block", background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)",
        overflow: "hidden", boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-sm)",
        transform: hover ? "translateY(-3px)" : "none", transition: "all .2s cubic-bezier(.2,.7,.3,1)" }}>
      <Photo kind={n.kind} src={n.photo} pos={n.pos || "center"} h={180} radius={0} />
      <div style={{ padding: "18px 20px 22px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
          <Badge tone="brown">{n.tag}</Badge>
          <span style={{ fontSize: 12.5, color: "var(--fg-subtle)", fontWeight: 600 }}>{n.date}</span>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, color: "var(--brown-800)", lineHeight: 1.25 }}>{n.title}</div>
        <p style={{ fontSize: 14, color: "var(--fg-muted)", lineHeight: 1.6, margin: "8px 0 0" }}>{n.excerpt}</p>
      </div>
    </a>
  );
}

/* ---- Gift card ---- */
function GiftCard({ g }) {
  return (
    <div style={{ background: "var(--white)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)",
      overflow: "hidden", boxShadow: "var(--shadow-sm)" }}>
      <div style={{ height: 150, background: "var(--sand-100)", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <Icon name={g.icon} size={48} color="var(--brown-400)" strokeWidth={1.5} />
      </div>
      <div style={{ padding: "18px 20px 20px" }}>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--brown-800)" }}>{g.name}</div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 20, color: "var(--brown-800)" }}>{g.price} kr.</span>
          <Button variant="outline" size="sm" icon="bell" onClick={() => window.GU.openNotify()}>Få besked</Button>
        </div>
      </div>
    </div>
  );
}

/* ---- Form field ---- */
function Field({ label, placeholder, full, type = "text", value, onChange, as }) {
  const [f, setF] = useState(false);
  const shared = {
    width: "100%", boxSizing: "border-box", fontFamily: "var(--font-body)", fontSize: 15, color: "var(--brown-700)",
    padding: "11px 13px", borderRadius: "var(--r-sm)", background: "var(--white)",
    border: "1.5px solid " + (f ? "var(--green-600)" : "var(--border)"),
    boxShadow: f ? "0 0 0 3px var(--green-100)" : "none", outline: "none",
  };
  return (
    <div style={{ gridColumn: full ? "1 / -1" : "auto" }}>
      {label && <label style={{ fontWeight: 700, fontSize: 12, color: "var(--fg-muted)", display: "block", marginBottom: 6 }}>{label}</label>}
      {as === "textarea"
        ? <textarea onFocus={() => setF(true)} onBlur={() => setF(false)} placeholder={placeholder} value={value} onChange={onChange} rows={4} style={{ ...shared, resize: "vertical" }} />
        : <input type={type} onFocus={() => setF(true)} onBlur={() => setF(false)} placeholder={placeholder} value={value} onChange={onChange} style={shared} />}
    </div>
  );
}

Object.assign(window, { SponsorCard, ProjectCard, NewsCard, GiftCard, Field });