/* ============================================================
   STREAM WITH LIEN — Shared components & icons
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---------- Minimal inline icons ---------- */
function Icon({ name, size = 22, stroke = 2.2 }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "arrow": return (<svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "arrowUp": return (<svg {...common}><path d="M12 19V5M6 11l6-6 6 6"/></svg>);
    case "arrowUpRight": return (<svg {...common}><path d="M7 17 17 7M8 7h9v9"/></svg>);
    case "play": return (<svg {...common} fill="currentColor" stroke="none"><path d="M7 5.5v13l11-6.5z"/></svg>);
    case "menu": return (<svg {...common}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case "close": return (<svg {...common}><path d="M6 6l12 12M18 6 6 18"/></svg>);
    case "check": return (<svg {...common}><path d="M5 13l4 4L19 7"/></svg>);
    case "heart": return (<svg {...common} fill="currentColor" stroke="none"><path d="M12 21s-7.5-4.7-10-9.6C.5 8 2 4.5 5.4 4.5c2 0 3.3 1.1 4.6 2.7C11.3 5.6 12.6 4.5 14.6 4.5 18 4.5 19.5 8 18 11.4 15.5 16.3 12 21 12 21z"/></svg>);
    case "music": return (<svg {...common}><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg>);
    case "spotify": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.6 14.4a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.8-.96a.62.62 0 1 1-.28-1.21c3.83-.88 7.1-.5 9.73 1.1.3.18.39.57.21.86zm1.23-2.74a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.56 11.23 1.33.37.22.49.7.26 1.07zm.11-2.85C14.83 8.95 9.4 8.77 6.3 9.71a.93.93 0 1 1-.54-1.78c3.56-1.08 9.56-.87 13.34 1.37a.93.93 0 1 1-.95 1.6z"/></svg>);
    case "twitch": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M4 2 3 6v13h4v3h3l3-3h4l5-5V2zm16 11-3 3h-4l-3 3v-3H7V4h13zM15 7h2v5h-2zm-5 0h2v5h-2z"/></svg>);
    case "discord": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M19.6 5.6A17 17 0 0 0 15.4 4.3l-.2.4a15.7 15.7 0 0 1 3.7 1.2 13.7 13.7 0 0 0-11.7 0 15.7 15.7 0 0 1 3.7-1.2l-.2-.4A17 17 0 0 0 6.3 5.6 17.9 17.9 0 0 0 3.3 18a17.3 17.3 0 0 0 5.2 2.6l.4-.6a11.3 11.3 0 0 1-1.8-.9l.4-.3a12.2 12.2 0 0 0 10.6 0l.4.3a11.3 11.3 0 0 1-1.8.9l.4.6A17.3 17.3 0 0 0 22.7 18a17.9 17.9 0 0 0-3.1-12.4zM9.2 15.3c-.9 0-1.6-.8-1.6-1.8s.7-1.8 1.6-1.8 1.6.8 1.6 1.8-.7 1.8-1.6 1.8zm5.6 0c-.9 0-1.6-.8-1.6-1.8s.7-1.8 1.6-1.8 1.6.8 1.6 1.8-.7 1.8-1.6 1.8z"/></svg>);
    case "tiktok": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M16 3c.3 2.2 1.6 3.9 3.8 4.2v2.6c-1.3.1-2.5-.3-3.8-1v5.7c0 4-3.3 6.4-6.6 5.4-3-1-4-4.7-1.9-7.2 1-1.2 2.6-1.8 4.2-1.6v2.7c-.5-.1-1-.2-1.5 0-1.1.3-1.7 1.4-1.3 2.5.4 1.2 2 1.6 2.9.7.4-.4.6-1 .6-1.6V3z"/></svg>);
    case "instagram": return (<svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>);
    case "x": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 3h3l-7 8 8.2 10h-6.4l-4.3-5.6L5.4 21H2.4l7.5-8.6L2 3h6.6l3.9 5.2zm-1.1 16h1.7L7.7 4.8H5.9z"/></svg>);
    case "youtube": return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M22.5 7.2a3 3 0 0 0-2.1-2.1C18.6 4.6 12 4.6 12 4.6s-6.6 0-8.4.5A3 3 0 0 0 1.5 7.2 31 31 0 0 0 1 12a31 31 0 0 0 .5 4.8 3 3 0 0 0 2.1 2.1c1.8.5 8.4.5 8.4.5s6.6 0 8.4-.5a3 3 0 0 0 2.1-2.1A31 31 0 0 0 23 12a31 31 0 0 0-.5-4.8zM10 15.2V8.8l5.2 3.2z"/></svg>);
    case "mail": return (<svg {...common}><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg>);
    case "bag": return (<svg {...common}><path d="M6 7h12l1 13H5zM9 7a3 3 0 0 1 6 0"/></svg>);
    default: return null;
  }
}

/* ---------- Image placeholder ---------- */
function Ph({ label, h = 200, r, className = "", style = {} }) {
  return (
    <div className={"ph " + className} style={{ height: h, borderRadius: r, ...style }}>
      <span>{label}</span>
    </div>
  );
}

/* ---------- Reveal on scroll ---------- */
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    el.querySelectorAll(".reveal").forEach(n => io.observe(el.classList.contains("reveal") ? el : n));
    if (el.classList.contains("reveal")) io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---------- Button ---------- */
function Btn({ children, variant = "", size = "", icon, iconLeft, href, onClick, type, className = "" }) {
  const cls = ["btn", variant && "btn--" + variant, size && "btn--" + size, className].filter(Boolean).join(" ");
  const inner = (<>
    {iconLeft && <Icon name={iconLeft} size={18} />}
    {children}
    {icon && <Icon name={icon} size={18} />}
  </>);
  if (href) return (<a className={cls} href={href} target="_blank" rel="noopener noreferrer">{inner}</a>);
  return (<button className={cls} onClick={onClick} type={type || "button"}>{inner}</button>);
}

/* ---------- Live badge ---------- */
function LiveBadge({ live, ui }) {
  if (live) return (<span className="live"><span className="dot"></span>{ui.live}</span>);
  return (<span className="live" style={{ background: "var(--card-2)", color: "var(--ink-soft)", border: "2px solid var(--line)" }}>
    <span className="dot" style={{ background: "var(--ink-mute)", animation: "none", boxShadow: "none" }}></span>{ui.offline}</span>);
}

/* ---------- Social row ---------- */
const SOCIALS = [
  { key: "tiktok", icon: "tiktok", label: "TikTok" },
  { key: "instagram", icon: "instagram", label: "Instagram" },
  { key: "x", icon: "x", label: "X" },
  { key: "youtube", icon: "youtube", label: "YouTube" },
];
function SocialRow({ social, big }) {
  return (
    <div className="flex" style={{ gap: 14, flexWrap: "wrap" }}>
      {SOCIALS.map(s => (
        <a key={s.key} className="social-btn" href={social[s.key]} target="_blank" rel="noopener noreferrer" aria-label={s.label}
           style={{ width: big ? 58 : 48, height: big ? 58 : 48 }}>
          <Icon name={s.icon} size={big ? 24 : 20} />
        </a>
      ))}
    </div>
  );
}

/* ---------- Shared inner-page hero ---------- */
function PageHero({ kicker, title, lede, children }) {
  const ref = useReveal();
  return (
    <section className="page-hero reveal" ref={ref}>
      <div className="wrap">
        <span className="eyebrow">{kicker}</span>
        <h1 className="page-hero__title">{title}</h1>
        {lede && <p className="page-hero__lede soft">{lede}</p>}
        {children}
      </div>
    </section>
  );
}

Object.assign(window, { Icon, Ph, useReveal, Btn, LiveBadge, SocialRow, SOCIALS, PageHero });