// Shared atoms: SVG placeholder cover, logo, tag, button, scanline
const { useState, useEffect, useRef, useMemo } = React;

// Exbyte Studios logo — uses full lockup PNG, auto-inverts in dark theme via CSS
function Logo({ size = 44, full = false }) {
  if (full) {
    return <img src="exbyte-logo.png" alt="Exbyte Studios" className="logo-img" style={{ height: size, width: "auto" }} />;
  }
  // Mark-only crop: render only icon portion (icon ~ first 150/512 of width)
  return (
    <span className="logo-mark" style={{ width: size, height: size }} aria-label="Exbyte" />);

}

// Striped placeholder cover with diagonal noise + caption — for game art and news cover
function Cover({ swatchA, swatchB, label, code, ratio = "16/9", noise = true, scanlines = true, accent, image }) {
  if (image) {
    return (
      <div className="cover" style={{ aspectRatio: ratio, background: swatchA }}>
        <img className="cover-img" src={image} alt={label || code || ""} loading="lazy" />
        {scanlines && <div className="cover-scan" aria-hidden="true" />}
        {label &&
          <div className="cover-caption">
            <span className="cover-code" style={{ color: accent || swatchB }}>[{code}]</span>
            <span className="cover-label">{label}</span>
          </div>}
        <div className="cover-corner cover-corner-tl" />
        <div className="cover-corner cover-corner-tr" />
        <div className="cover-corner cover-corner-bl" />
        <div className="cover-corner cover-corner-br" />
      </div>);
  }
  return (
    <div className="cover" style={{ aspectRatio: ratio, background: swatchA }}>
      <svg className="cover-art" viewBox="0 0 200 112" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <linearGradient id={`g-${code}`} x1="0" x2="1" y1="0" y2="1">
            <stop offset="0" stopColor={swatchA} />
            <stop offset="1" stopColor={swatchB} />
          </linearGradient>
          <pattern id={`s-${code}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(38)">
            <rect width="6" height="6" fill={`url(#g-${code})`} />
            <line x1="0" y1="0" x2="0" y2="6" stroke={swatchB} strokeOpacity="0.35" strokeWidth="1.5" />
          </pattern>
        </defs>
        <rect width="200" height="112" fill={`url(#s-${code})`} />
        {/* abstract geometric "art" shapes */}
        <circle cx="150" cy="40" r="22" fill={swatchB} fillOpacity="0.45" />
        <rect x="20" y="60" width="80" height="3" fill={swatchB} fillOpacity="0.7" />
        <rect x="20" y="68" width="50" height="3" fill={swatchB} fillOpacity="0.5" />
        <rect x="20" y="76" width="65" height="3" fill={swatchB} fillOpacity="0.3" />
      </svg>
      {scanlines && <div className="cover-scan" aria-hidden="true" />}
      {noise && <div className="cover-noise" aria-hidden="true" />}
      {label &&
      <div className="cover-caption">
          <span className="cover-code" style={{ color: accent || swatchB }}>[{code}]</span>
          <span className="cover-label">{label}</span>
        </div>
      }
      <div className="cover-corner cover-corner-tl" />
      <div className="cover-corner cover-corner-tr" />
      <div className="cover-corner cover-corner-bl" />
      <div className="cover-corner cover-corner-br" />
    </div>);

}

function Tag({ children, accent, size = "sm" }) {
  return (
    <span className={`tag tag-${size}`} style={accent ? { color: accent, borderColor: accent } : undefined}>
      {children}
    </span>);

}

function ArrowGlyph({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true" style={{ verticalAlign: "middle" }}>
      <path d="M2 7 L12 7 M7 2 L12 7 L7 12" stroke="currentColor" strokeWidth="1.6" />
    </svg>);

}

// Live ticker — infinite scroll
function Ticker({ items, accent }) {
  const doubled = [...items, ...items];
  return (
    <div className="ticker" style={accent ? { ["--accent"]: accent } : undefined}>
      <div className="ticker-track">
        {doubled.map((t, i) =>
        <span className="ticker-item" key={i}>
            <span className="ticker-dot">●</span>
            {t}
          </span>
        )}
      </div>
    </div>);

}

// Section header — index + label, brutalist
function SectionHeader({ idx, label, title, lang, kicker }) {
  return (
    <div className="sec-head">
      <div className="sec-head-meta">
        <span className="sec-idx">{idx}</span>
        <span className="sec-divider" />
        <span className="sec-label">{label}</span>
      </div>
      <h2 className="sec-title">{title}</h2>
      {kicker && <p className="sec-kicker">{kicker}</p>}
    </div>);

}

Object.assign(window, { Logo, Cover, Tag, ArrowGlyph, Ticker, SectionHeader });