/* Shared atoms: Logo, buttons, badges, motifs, photo slots, court SVG. */

const LL_RED = "var(--c-red)";

/* === Brand mark === real London LOGIC Basketball logo (transparent PNG) === */
const LOGO_SRC = "assets/logo-london-logic-v2.png";

function LogoMark({ size = 44, alt = "London LOGIC Basketball" }) {
  return (
    <img
      src={LOGO_SRC}
      alt={alt}
      width={size}
      height={size}
      style={{
        width: size, height: size,
        objectFit: "contain",
        display: "inline-block",
        userSelect: "none"
      }}
      draggable={false} />);


}

/* Wordmark === renders the full emblem (the user's logo already contains the wordmark).
   `size` controls the visual height. Set `lockup="with-tag"` for a small label beside it. */
function Wordmark({ size = 56, lockup, tag = "London \u00b7 EST. 2026" }) {
  if (lockup === "with-tag") {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
        <LogoMark size={size} />
        <span style={{
          display: "inline-flex", flexDirection: "column", gap: 4,
          paddingLeft: 14, borderLeft: "1px solid currentColor",
          fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em",
          textTransform: "uppercase", lineHeight: 1.2, opacity: 0.85
        }}>
          <span>{tag}</span>
        </span>
      </span>);

  }
  return <LogoMark size={size} />;
}

/* ============ Buttons ============ */
function Btn({ to, href, onClick, kind = "primary", icon, children, full, type, disabled }) {
  const base = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
    fontFamily: "var(--font-display)",
    fontSize: 16,
    letterSpacing: "0.06em",
    textTransform: "uppercase",
    padding: "14px 22px",
    borderRadius: "var(--radius-pill)",
    border: "2px solid transparent",
    transition: "transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease",
    cursor: disabled ? "not-allowed" : "pointer",
    width: full ? "100%" : "auto",
    opacity: disabled ? 0.5 : 1
  };
  const styles = {
    primary: { background: "var(--c-red)", color: "#fff" },
    ghost: { background: "transparent", color: "var(--c-ink)", borderColor: "var(--c-ink)" },
    inverse: { background: "var(--c-ink)", color: "var(--c-paper)" },
    flat: { background: "var(--c-warm)", color: "var(--c-ink)" }
  };
  const Tag = href ? "a" : to ? "a" : "button";
  const props = href ? { href, target: "_blank", rel: "noreferrer" } :
  to ? { href: `#${to}`, onClick: (e) => {/* let hashchange fire */} } :
  { onClick, type: type || "button", disabled };
  return (
    <Tag {...props} style={{ ...base, ...styles[kind] }}
    onMouseEnter={(e) => !disabled && (e.currentTarget.style.transform = "translateY(-1px)")}
    onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
      {children}
      {icon || <Arrow />}
    </Tag>);

}

function Arrow({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ============ Tag / Eyebrow ============ */
function Eyebrow({ children, color }) {
  return (
    <span className="mono" style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      color: color || "var(--c-red)",
      fontWeight: 800,
      fontSize: 14,
      letterSpacing: "0.08em",
    }}>
      <span style={{ width: 20, height: 2, background: "currentColor", display: "inline-block" }} />
      {children}
    </span>);

}

function Pill({ children, tone }) {
  const bg = tone === "red" ? "var(--c-red)" :
  tone === "ink" ? "var(--c-ink)" : "var(--c-warm)";
  const fg = tone === "red" || tone === "ink" ? "#fff" : "var(--c-ink)";
  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 6,
      padding: "5px 11px",
      borderRadius: "var(--radius-pill)",
      background: bg, color: fg,
      fontFamily: "var(--font-mono)",
      fontSize: 11,
      letterSpacing: "0.08em",
      textTransform: "uppercase",
      fontWeight: 500
    }}>{children}</span>);

}

/* ============ Photo slot (placeholder) ============ */
function PhotoSlot({ label, src, ratio = "4 / 3", style, children }) {
  return (
    <div className="photo-slot" style={{
      aspectRatio: ratio,
      width: "100%",
      ...style,
      backgroundImage: src ? `url(${src})` : undefined,
      backgroundSize: "cover",
      backgroundPosition: "center"
    }}>
      {!src && (label || "Photo placeholder")}
      {children}
    </div>);

}

/* ============ Section header ============ */
function SectionHead({ eyebrow, title, kicker, align = "left" }) {
  return (
    <header style={{
      display: "flex",
      flexDirection: "column",
      gap: 14,
      alignItems: align === "center" ? "center" : "flex-start",
      textAlign: align,
      marginBottom: 36, color: "white"
    }}>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 className="display" style={{
        margin: 0,
        fontSize: "clamp(36px, 5.4vw, 78px)",
        color: "var(--c-ink)",
        maxWidth: 18 + "ch"
      }}>{title}</h2>
      {kicker && <p style={{
        margin: 0,
        maxWidth: "62ch",
        fontSize: 18,
        color: "var(--c-ink-soft)",
        lineHeight: 1.55
      }}>{kicker}</p>}
    </header>);

}

/* ============ Court diagram (used in Playbook / decoration) ============ */
function HalfCourt({ width = 320, opacity = 0.18, color }) {
  const stroke = color || "currentColor";
  return (
    <svg width={width} viewBox="0 0 200 190" fill="none" style={{ opacity }}>
      <rect x="2" y="2" width="196" height="186" stroke={stroke} strokeWidth="1.5" fill="none" />
      <line x1="2" y1="2" x2="198" y2="2" stroke={stroke} strokeWidth="3" />
      <rect x="70" y="2" width="60" height="76" stroke={stroke} strokeWidth="1.5" fill="none" />
      <circle cx="100" cy="78" r="22" stroke={stroke} strokeWidth="1.5" fill="none" />
      <line x1="70" y1="78" x2="130" y2="78" stroke={stroke} strokeWidth="1.5" strokeDasharray="3 3" />
      <circle cx="100" cy="20" r="3" stroke={stroke} strokeWidth="1.2" fill="none" />
      <path d="M30 2 Q30 95 100 95 Q170 95 170 2" stroke={stroke} strokeWidth="1.5" fill="none" />
      <line x1="2" y1="170" x2="198" y2="170" stroke={stroke} strokeWidth="0.8" strokeDasharray="2 4" />
    </svg>);

}

/* ============ Marquee strip ============ */
function Marquee({ items, speed = 38, fontSize = "clamp(28px, 5vw, 56px)", gap = 56, color = "var(--c-ink)", starColor = "var(--c-red)" }) {
  const seq = [...items, ...items, ...items];
  return (
    <div style={{ overflow: "hidden", whiteSpace: "nowrap", maskImage: "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)" }}>
      <div style={{
        display: "inline-flex",
        gap,
        animation: `mq ${speed}s linear infinite`,
        paddingTop: 6, paddingBottom: 6
      }}>
        {seq.map((it, i) =>
        <span key={i} style={{
          fontFamily: "var(--font-display)",
          fontSize,
          letterSpacing: "0.01em",
          textTransform: "uppercase",
          color,
          display: "inline-flex",
          alignItems: "center",
          gap
        }}>
            <span>{it}</span>
            <span style={{ color: starColor, fontSize: "0.55em" }}>★</span>
          </span>
        )}
      </div>
      <style>{`@keyframes mq { from { transform: translateX(0) } to { transform: translateX(-33.333%) } }`}</style>
    </div>);

}

/* ============ Animated counter ============ */
function Counter({ to, duration = 1200, suffix = "" }) {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    let raf,started = false;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started) {
        started = true;
        const t0 = performance.now();
        const tick = (t) => {
          const k = Math.min(1, (t - t0) / duration);
          setN(Math.round(to * (1 - Math.pow(1 - k, 3))));
          if (k < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => {obs.disconnect();cancelAnimationFrame(raf);};
  }, [to, duration]);
  return <span ref={ref}>{n}{suffix}</span>;
}

/* Export */
Object.assign(window, {
  LogoMark, Wordmark, Btn, Arrow, Eyebrow, Pill,
  PhotoSlot, SectionHead, HalfCourt, Marquee, Counter
});