/* eslint-disable */
// Weekly Commit — shared primitives. Loaded on every page.

const { useState, useEffect, useRef } = React;

function Button({ variant = "primary", size = "md", icon = null, iconRight = null, children, as = "button", href, ...rest }) {
  const base = {
    display: "inline-flex",
    alignItems: "center",
    gap: 8,
    fontFamily: "'DM Sans', sans-serif",
    fontWeight: 600,
    borderRadius: 100,
    border: "none",
    cursor: "pointer",
    textDecoration: "none",
    letterSpacing: "0.01em",
    transition: "all 180ms cubic-bezier(0.4,0,0.2,1)",
    whiteSpace: "nowrap",
    lineHeight: 1
  };
  const sizes = {
    sm: { padding: "8px 14px", fontSize: 13 },
    md: { padding: "12px 22px", fontSize: 14 },
    lg: { padding: "15px 28px", fontSize: 15 }
  };
  const variants = {
    cta: { background: "#fff", color: "#0d1f35" },
    primary: { background: "var(--navy-400)", color: "#fff" },
    secondary: { background: "transparent", border: "1px solid rgba(255,255,255,0.22)", color: "#fff" },
    ghost: { background: "transparent", color: "var(--navy-300)", padding: 0 },
    success: { background: "#10b981", color: "#02281b" },
    dark: { background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)", color: "#fff" }
  };
  const Cmp = as === "a" || href ? "a" : "button";
  const finalProps = href ? { href, ...rest } : rest;
  return (
    <Cmp {...finalProps} style={{ ...base, ...sizes[size], ...variants[variant], ...(rest.style || {}) }}>
      {icon ? <i data-lucide={icon} style={{ width: 16, height: 16, strokeWidth: 1.8 }} /> : null}
      {children}
      {iconRight ? <i data-lucide={iconRight} style={{ width: 16, height: 16, strokeWidth: 1.8 }} /> : null}
    </Cmp>);

}

function Badge({ variant = "primary", dot = false, children, style }) {
  const palettes = {
    primary: { bg: "rgba(45,106,170,0.20)", fg: "#7aade0", bd: "rgba(45,106,170,0.35)", dot: "#4a89c8" },
    success: { bg: "rgba(16,185,129,0.16)", fg: "#34d399", bd: "rgba(16,185,129,0.30)", dot: "#34d399" },
    warning: { bg: "rgba(245,158,11,0.16)", fg: "#f59e0b", bd: "rgba(245,158,11,0.30)", dot: "#f59e0b" },
    danger: { bg: "rgba(239,68,68,0.18)", fg: "#f87171", bd: "rgba(239,68,68,0.30)", dot: "#f87171" },
    neutral: { bg: "rgba(255,255,255,0.05)", fg: "#9bbdd0", bd: "rgba(255,255,255,0.10)", dot: "#9bbdd0" },
    accent: { bg: "rgba(74,137,200,0.10)", fg: "#b3d0ef", bd: "rgba(74,137,200,0.28)", dot: "#7aade0" }
  };
  const p = palettes[variant] || palettes.primary;
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 12,
      padding: "4px 10px", borderRadius: 100,
      background: p.bg, color: p.fg, border: `1px solid ${p.bd}`,
      ...style
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: "50%", background: p.dot }} />}
      {children}
    </span>);

}

const cardStyle = {
  default: { background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.07)" },
  elevated: { background: "#14304f", border: "1px solid rgba(255,255,255,0.10)" },
  accent: { background: "linear-gradient(135deg, rgba(30,60,100,0.65), rgba(20,48,79,0.85))", border: "1px solid rgba(74,137,200,0.30)" },
  glass: { background: "rgba(255,255,255,0.04)", backdropFilter: "blur(12px)", border: "1px solid rgba(255,255,255,0.10)" },
  flat: { background: "var(--navy-900)", border: "1px solid rgba(255,255,255,0.06)" }
};

function Card({ variant = "default", className = "", children, style, ...rest }) {
  return (
    <div className={className} style={{ borderRadius: 16, padding: 28, ...cardStyle[variant], ...style }} {...rest}>
      {children}
    </div>);

}

function Field({ label, hint, error, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      {label &&
      <label style={{ display: "block", fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 600, color: "#9bbdd0", marginBottom: 7, letterSpacing: "0.02em" }}>
          {label}
        </label>
      }
      {children}
      {hint && !error && <div style={{ fontSize: 11, color: "#527b9b", marginTop: 6 }}>{hint}</div>}
      {error && <div style={{ fontSize: 11, color: "#f87171", marginTop: 6 }}>{error}</div>}
    </div>);

}

function Input({ error, style, as = "input", ...rest }) {
  const [focused, setFocused] = useState(false);
  const base = {
    width: "100%",
    background: focused ? "rgba(255,255,255,0.06)" : "rgba(255,255,255,0.03)",
    border: `1px solid ${error ? "#ef4444" : focused ? "#4a89c8" : "rgba(255,255,255,0.10)"}`,
    borderRadius: 8,
    padding: "12px 14px",
    fontFamily: "'DM Sans', sans-serif",
    fontSize: 14,
    color: "#fff",
    outline: "none",
    transition: "all 180ms cubic-bezier(0.4,0,0.2,1)",
    ...style
  };
  const Cmp = as;
  return (
    <Cmp
      {...rest}
      onFocus={(e) => {setFocused(true);rest.onFocus && rest.onFocus(e);}}
      onBlur={(e) => {setFocused(false);rest.onBlur && rest.onBlur(e);}}
      style={base} />);


}

function SectionHeader({ num, kicker, title, desc, align = "split", maxTitle = 640 }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 48 }}>
      <div className="wc-kicker" style={{ fontSize: "12px" }}>
        {num ? `${num} · ` : ""}{kicker}
      </div>
      <div style={{
        display: "flex",
        flexDirection: align === "stack" ? "column" : "row",
        alignItems: align === "stack" ? "flex-start" : "flex-end",
        justifyContent: "space-between",
        gap: align === "stack" ? 14 : 32
      }}>
        <h2 style={{
          fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 40,
          letterSpacing: "-0.025em", lineHeight: 1.12, color: "#fff",
          margin: 0, maxWidth: maxTitle
        }}>{title}</h2>
        {desc &&
        <p style={{
          fontFamily: "'DM Sans', sans-serif", fontSize: 15, color: "#7299b5",
          lineHeight: 1.55, maxWidth: 380,
          textAlign: align === "stack" ? "left" : "right",
          margin: 0
        }}>{desc}</p>
        }
      </div>
    </div>);

}

function Avatar({ initials, size = 36, palette = "navy" }) {
  const palettes = {
    navy: "linear-gradient(135deg, #255892, #1a3d63)",
    steel: "linear-gradient(135deg, #527b9b, #2d4f6e)",
    success: "linear-gradient(135deg, #10b981, #047857)",
    warm: "linear-gradient(135deg, #f59e0b, #b45309)"
  };
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: palettes[palette] || palettes.navy,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontFamily: "'DM Sans', sans-serif", fontWeight: 700,
      fontSize: size * 0.36, color: "#fff", flexShrink: 0,
      border: "1px solid rgba(255,255,255,0.10)"
    }}>
      {initials}
    </div>);

}

function LogoTile({ size = 32, variant = "square" }) {
  const src = variant === "circle" ? "assets/logo-circle.png" : "assets/logo-square.png";
  return (
    <img src={src} alt="Weekly Commit" width={size} height={size}
    style={{ width: size, height: size, display: "block",
      borderRadius: variant === "circle" ? "50%" : size * 0.22, flexShrink: 0 }} />);


}

// Animated number counter — triggers when scrolled into view.
function Counter({ to, prefix = "", suffix = "", duration = 1400, format = (n) => n.toLocaleString() }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const startedRef = useRef(false);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          const start = performance.now();
          const numericTo = Number(to);
          function tick(now) {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(numericTo * eased);
            if (t < 1) requestAnimationFrame(tick);else
            setVal(numericTo);
          }
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(node);
    return () => io.disconnect();
  }, [to]);
  return (
    <span ref={ref}>{prefix}{format(typeof to === "number" && to % 1 !== 0 ? Number(val.toFixed(1)) : Math.round(val))}{suffix}</span>);

}

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as: As = "div", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => node.classList.add("is-in"), delay);
          io.unobserve(node);
        }
      });
    }, { threshold: 0.12 });
    io.observe(node);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className="wc-reveal" {...rest}>{children}</As>;
}

// Re-runs lucide.createIcons() after the React tree settles.
function useLucide() {
  useEffect(() => {
    if (window.lucide && window.lucide.createIcons) window.lucide.createIcons();
  });
}

Object.assign(window, {
  Button, Badge, Card, Field, Input, SectionHeader, Avatar, LogoTile,
  Counter, Reveal, useLucide
});