// Lightbox.jsx — first-visit campaign modal with entrance animation
function Lightbox({ raised, onClose, onDonate }) {
  const bp = useBreakpoint();
  const [entered, setEntered] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setEntered(true), 10);
    return () => clearTimeout(t);
  }, []);

  return (
    <div data-component="Lightbox" style={{
      ...lb.overlay,
      opacity: entered ? 1 : 0,
      transition: "opacity 0.15s ease",
    }}>
      <div style={{
        ...lb.modal,
        padding: bp.isMobile ? "var(--lin_space-8)" : "var(--lin_space-10)",
        margin: bp.isMobile ? "0 var(--lin_space-4)" : 0,
        transform: entered ? "scale(1)" : "scale(0.96)",
        opacity: entered ? 1 : 0,
        transition: "transform 0.22s ease, opacity 0.22s ease",
      }} role="dialog" aria-modal="true">
        <button onClick={onClose} style={lb.close} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            <line x1="1" y1="1" x2="13" y2="13"/><line x1="13" y1="1" x2="1" y2="13"/>
          </svg>
        </button>
        <div style={lb.overline}>Summer Heat Campaign | 2026</div>
        <h2 style={lb.headline}>Help cool the summer.</h2>
        <p style={lb.body}>
          Your gift funds the field work that protects workers from heat stress
          through the hottest months of the year. Goal: $50,000 by July 31.
        </p>
        <div style={lb.thermoWrap}>
          <CoolingThermometer raised={raised} goal={50000} compact />
        </div>
        <div style={lb.actions}>
          <button onClick={() => openGivebutter()} style={lb.btnPrimary}>Donate now</button>
          <button onClick={onClose} style={lb.btnGhost}>Maybe later</button>
        </div>
      </div>
    </div>
  );
}

const lb = {
  overlay: {
    position: "fixed", inset: 0, zIndex: 200,
    background: "rgba(13,15,16,0.72)",
    display: "flex", alignItems: "center", justifyContent: "center",
    padding: "var(--lin_space-6)",
  },
  modal: {
    background: "var(--lin_surface-navy)",
    borderRadius: "var(--lin_radius-xl)",
    maxWidth: 480, width: "100%",
    position: "relative",
    display: "flex", flexDirection: "column", gap: "var(--lin_space-5)",
    boxShadow: "var(--lin_shadow-xl)",
  },
  close: {
    position: "absolute", top: "var(--lin_space-4)", right: "var(--lin_space-4)",
    background: "var(--lin_navy-700)", border: "none", borderRadius: "var(--lin_radius-full)",
    width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer", color: "var(--lin_grey-300)",
  },
  overline: { fontSize: "var(--lin_text-xs)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-widest)", textTransform: "uppercase", color: "var(--lin_blue-400)" },
  headline: { fontSize: "var(--lin_text-3xl)", fontWeight: "var(--lin_weight-bold)", letterSpacing: "var(--lin_tracking-tight)", color: "#fff", margin: 0, lineHeight: "var(--lin_leading-tight)" },
  body: { fontSize: "var(--lin_text-base)", lineHeight: "var(--lin_leading-relaxed)", color: "var(--lin_grey-300)", margin: 0 },
  thermoWrap: { background: "var(--lin_navy-700)", borderRadius: "var(--lin_radius-lg)", padding: "var(--lin_space-5)" },
  actions: { display: "flex", gap: "var(--lin_space-3)", flexWrap: "wrap", marginTop: "var(--lin_space-2)" },
  btnPrimary: { flex: 1, background: "var(--lin_blue-500)", color: "#fff", border: "none", padding: "var(--lin_space-4) var(--lin_space-6)", borderRadius: "var(--lin_radius-md)", fontSize: "var(--lin_text-base)", fontWeight: "var(--lin_weight-semibold)", letterSpacing: "var(--lin_tracking-wide)", cursor: "pointer" },
  btnGhost: { background: "transparent", color: "var(--lin_grey-400)", border: "none", padding: "var(--lin_space-4) var(--lin_space-4)", fontSize: "var(--lin_text-sm)", cursor: "pointer" },
};

Object.assign(window, { Lightbox });