// atoms.jsx — Atomic, reusable building blocks for the template system.
// Includes: NavBar, BracketLogo, CornerBrackets, ReadMorePill, MediaItem,
// StoryLabel, SourceCite, IconButton.

// ── BracketLogo ──────────────────────────────────────────────────────────
// "[INFINITY]" with camera-frame corner brackets. Used in nav header.
function BracketLogo({ word, color, size = 22 }) {
  const T = 2;  // bracket stroke
  const B = 9;  // bracket arm length
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      fontFamily: Tokens.fontDisplay,
      fontWeight: Tokens.weight.black,
      fontSize: size, color: color,
      letterSpacing: '0.04em',
      padding: '4px 10px',
      position: 'relative',
    }}>
      <span aria-hidden="true" style={{ position: 'absolute', left: 0, top: 0,     width: B, height: B, borderLeft:  `${T}px solid ${color}`, borderTop:    `${T}px solid ${color}` }}/>
      <span aria-hidden="true" style={{ position: 'absolute', right: 0, top: 0,    width: B, height: B, borderRight: `${T}px solid ${color}`, borderTop:    `${T}px solid ${color}` }}/>
      <span aria-hidden="true" style={{ position: 'absolute', left: 0, bottom: 0,  width: B, height: B, borderLeft:  `${T}px solid ${color}`, borderBottom: `${T}px solid ${color}` }}/>
      <span aria-hidden="true" style={{ position: 'absolute', right: 0, bottom: 0, width: B, height: B, borderRight: `${T}px solid ${color}`, borderBottom: `${T}px solid ${color}` }}/>
      {word}
    </span>
  );
}

// ── CornerBrackets ───────────────────────────────────────────────────────
// L-shape brackets framing a block. Always sits OUTSIDE the bounding rect
// so it never overlaps the content inside.
function CornerBrackets({ color = Tokens.purple300, size = 56, thickness = 2.5, opacity = 1, gap = 0 }) {
  const s = { position: 'absolute', background: color, opacity };
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: -gap, pointerEvents: 'none' }}>
      {/* top-left */}
      <div style={{ ...s, left: 0, top: 0, width: size, height: thickness }}/>
      <div style={{ ...s, left: 0, top: 0, width: thickness, height: size }}/>
      {/* top-right */}
      <div style={{ ...s, right: 0, top: 0, width: size, height: thickness }}/>
      <div style={{ ...s, right: 0, top: 0, width: thickness, height: size }}/>
      {/* bottom-left */}
      <div style={{ ...s, left: 0, bottom: 0, width: size, height: thickness }}/>
      <div style={{ ...s, left: 0, bottom: 0, width: thickness, height: size }}/>
      {/* bottom-right */}
      <div style={{ ...s, right: 0, bottom: 0, width: size, height: thickness }}/>
      <div style={{ ...s, right: 0, bottom: 0, width: thickness, height: size }}/>
    </div>
  );
}

// ── ReadMorePill / Pill ──────────────────────────────────────────────────
function Pill({ children, dark = false, icon }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '12px 24px',
      background: dark ? 'rgba(20,20,28,0.78)' : Tokens.ink,
      color: dark ? Tokens.ink : '#111',
      borderRadius: Tokens.radius.pill,
      fontFamily: Tokens.fontDisplay,
      fontSize: 14,
      fontWeight: Tokens.weight.semibold,
      border: dark ? `1px solid ${Tokens.inkLine}` : 'none',
      whiteSpace: 'nowrap',
      backdropFilter: dark ? 'blur(20px)' : 'none',
    }}>
      {icon}
      {children}
    </span>
  );
}

// ── StoryLabel ───────────────────────────────────────────────────────────
// Small colored dot + "STORY 0X" mono caps label.
function StoryLabel({ num, color, total }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
    }}>
      <span aria-hidden="true" style={{
        width: 8, height: 8, background: color,
      }}/>
      <span style={{
        fontFamily: Tokens.fontMono, fontSize: 13,
        color: Tokens.ink, letterSpacing: '0.28em',
        fontWeight: Tokens.weight.semibold,
        textTransform: 'uppercase',
      }}>
        STORY {String(num).padStart(2, '0')}{total ? <span style={{ color: Tokens.inkFaint }}> / {String(total).padStart(2, '0')}</span> : null}
      </span>
    </div>
  );
}

// ── SourceCite ───────────────────────────────────────────────────────────
function SourceCite({ children }) {
  return (
    <div style={{
      fontFamily: Tokens.fontMono, fontSize: 12,
      color: Tokens.inkSoft, letterSpacing: '0.16em',
      textTransform: 'uppercase',
      lineHeight: 1.5,
    }}>
      <span style={{ color: Tokens.inkFaint, marginRight: 8 }}>↳</span>{children}
    </div>
  );
}

// ── NavBar ───────────────────────────────────────────────────────────────
// Top center pill: hamburger + [INFINITY] EUROPEAN PLATFORM + search.
// Same on every slide → builds the "site" feel.
function NavBar({ scheme, slideNum, totalSlides, sectionLabel, sectionColor, bucket, onMenuClick }) {
  return (
    <>
      {/* center pill */}
      <div style={{
        position: 'absolute', top: 28, left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex', alignItems: 'center', gap: 11,
        padding: '7px 16px',
        background: 'rgba(20,20,28,0.55)',
        border: `1px solid ${Tokens.inkLine}`,
        borderRadius: Tokens.radius.pill,
        backdropFilter: 'blur(20px)',
        zIndex: 50,
      }}>
        <button onClick={onMenuClick} aria-label="Menu" style={{
          display: 'flex', flexDirection: 'column', gap: 3,
          background: 'none', border: 'none', cursor: 'pointer', padding: 0,
        }}>
          <span style={{ width: 14, height: 1.5, background: Tokens.ink }}/>
          <span style={{ width: 14, height: 1.5, background: Tokens.ink }}/>
          <span style={{ width: 14, height: 1.5, background: Tokens.ink }}/>
        </button>
        <div style={{
          fontFamily: Tokens.fontDisplay,
          fontSize: 11, fontWeight: Tokens.weight.extrabold,
          color: Tokens.ink, letterSpacing: '0.06em',
          display: 'flex', alignItems: 'center', gap: 7,
          whiteSpace: 'nowrap',
        }}>
          <BracketLogo word="INFINITY" color={Tokens.purple400} size={11}/>
          <span>EUROPEAN PLATFORM</span>
        </div>
        <svg width="14" height="14" viewBox="0 0 20 20" fill="none">
          <circle cx="8.5" cy="8.5" r="5.5" stroke={Tokens.ink} strokeWidth="1.8"/>
          <line x1="13" y1="13" x2="17" y2="17" stroke={Tokens.ink} strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      </div>

      {/* Slide counter top-right */}
      <div style={{
        position: 'absolute', top: 44, right: 80,
        fontFamily: Tokens.fontMono, fontSize: 13,
        color: Tokens.inkSoft, letterSpacing: '0.22em',
        textTransform: 'uppercase',
        zIndex: 50,
      }}>
        <span style={{ color: Tokens.ink, fontWeight: Tokens.weight.semibold }}>{String(slideNum).padStart(2, '0')}</span>
        <span style={{ color: Tokens.inkFaint }}> / {String(totalSlides).padStart(2, '0')}</span>
      </div>

      {/* Brand tag top-left (the bucket / breadcrumb) */}
      <div style={{
        position: 'absolute', top: 44, left: 80,
        fontFamily: Tokens.fontMono, fontSize: 13,
        color: Tokens.inkSoft, letterSpacing: '0.22em',
        textTransform: 'uppercase',
        zIndex: 50,
        display: 'flex', alignItems: 'center', gap: 10,
        whiteSpace: 'nowrap',
      }}>
        <span style={{
          width: 8, height: 8,
          background: sectionColor || scheme.accentBold,
          borderRadius: 2,
        }}/>
        Infinity / European Platform
        {sectionLabel && (
          <>
            <span style={{ color: Tokens.inkFaint }}>/</span>
            <span style={{ color: Tokens.ink, fontWeight: 600 }}>{sectionLabel}</span>
          </>
        )}
        {bucket && (
          <>
            <span style={{ color: Tokens.inkFaint }}>/</span>
            <span style={{ color: sectionColor || scheme.accent, fontWeight: 600 }}>{bucket}</span>
          </>
        )}
      </div>
    </>
  );
}

// ── MediaItem ────────────────────────────────────────────────────────────
// A rounded image card with optional title overlay.
function MediaItem({ src, w, h, rotate = 0, label, sub, hi = false, scheme, style }) {
  return (
    <div style={{
      position: 'relative',
      width: w, height: h,
      borderRadius: Tokens.radius.md,
      overflow: 'hidden',
      transform: `rotate(${rotate}deg)`,
      boxShadow: '0 18px 50px rgba(0,0,0,0.45)',
      border: hi ? `2px solid ${scheme.accent}` : `1px solid ${Tokens.inkLine}`,
      ...style,
    }}>
      <img src={src} alt={label || ''} style={{
        width: '100%', height: '100%', objectFit: 'cover', display: 'block',
      }}/>
      {label && (
        <>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(0deg, rgba(0,0,0,0.78) 0%, transparent 55%)',
          }}/>
          <div style={{
            position: 'absolute', left: 14, bottom: 12, right: 14,
            fontFamily: Tokens.fontDisplay,
            fontSize: 14, fontWeight: Tokens.weight.bold,
            color: Tokens.ink,
            letterSpacing: '-0.01em', lineHeight: 1.2,
          }}>
            {label}
            {sub && <div style={{
              fontSize: 11, fontWeight: Tokens.weight.regular,
              color: Tokens.inkSoft, marginTop: 2, letterSpacing: 0,
            }}>{sub}</div>}
          </div>
        </>
      )}
    </div>
  );
}

// ── IconArrow ────────────────────────────────────────────────────────────
function IconArrow({ dir = 'right', size = 18, color = Tokens.ink }) {
  const points = dir === 'right'
    ? `M ${size * 0.35} ${size * 0.18} L ${size * 0.72} ${size * 0.5} L ${size * 0.35} ${size * 0.82}`
    : `M ${size * 0.65} ${size * 0.18} L ${size * 0.28} ${size * 0.5} L ${size * 0.65} ${size * 0.82}`;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
      <path d={points} stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

Object.assign(window, {
  BracketLogo, CornerBrackets, Pill, StoryLabel, SourceCite, NavBar, MediaItem, IconArrow,
});