// scenes/shared.jsx — primitives réutilisables File Pilot
const FP = {
  bg:        'oklch(0.15 0.02 145)',     // dark green background
  card:      'oklch(0.20 0.02 145)',
  cardHi:    'oklch(0.24 0.025 145)',
  primary:   'oklch(0.80 0.16 115)',     // lime
  primaryDim:'oklch(0.80 0.16 115 / 0.18)',
  text:      'oklch(0.95 0 0)',
  muted:     'oklch(0.70 0 0)',
  mutedStrong: 'oklch(0.78 0 0)',
  border:    'rgba(255,255,255,0.18)',
  borderSoft:'rgba(255,255,255,0.09)',
  success:   '#34d399',
  successBg: 'rgba(6,78,59,0.30)',
  warn:      '#fb923c',
  warnBg:    'rgba(124,45,18,0.30)',
  danger:    'oklch(0.70 0.19 22)',
  dangerBg:  'rgba(127,29,29,0.32)',
};

const SANS   = "'Geist', ui-sans-serif, system-ui, sans-serif";
const MONO   = "'Geist Mono', ui-monospace, monospace";
const SERIF  = "'Instrument Serif', Georgia, serif";

// Backdrop — sits behind every scene, matches FP dark surface
function SceneBg({ color = FP.bg, children }) {
  return (
    <div style={{ position: 'absolute', inset: 0, background: color, overflow: 'hidden' }}>
      {children}
    </div>
  );
}

// Soft vignette/noise — adds subtle depth without gradient-hero slop
function SubtleGrain() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: 'radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0.02), transparent 60%)',
      pointerEvents: 'none',
    }} />
  );
}

// Subtitle ribbon across bottom — matches the "calm, didactic" tone
function Caption({ text, accent }) {
  const showCaptions = !window.__tweaks || window.__tweaks.showCaptions !== false;
  if (!showCaptions) return null;
  return (
    <div style={{
      position: 'absolute',
      left: 0, right: 0, bottom: 72,
      display: 'flex', justifyContent: 'center',
      fontFamily: SANS,
      fontSize: 28,
      fontWeight: 400,
      color: FP.mutedStrong,
      letterSpacing: '-0.01em',
      pointerEvents: 'none',
    }}>
      <span style={{ maxWidth: 1200, textAlign: 'center', textWrap: 'balance' }}>
        {text}
        {accent && <>&nbsp;<span style={{ fontFamily: SERIF, fontStyle: 'italic', color: FP.text }}>{accent}</span></>}
      </span>
    </div>
  );
}

// Pill / Badge matching shadcn dark style
function Badge({ children, variant = 'secondary', icon }) {
  const styles = {
    secondary: { bg: 'rgba(255,255,255,0.10)', fg: FP.text, bd: FP.borderSoft },
    success:   { bg: FP.successBg,  fg: FP.success, bd: 'rgba(52,211,153,0.30)' },
    warn:      { bg: FP.warnBg,     fg: FP.warn,    bd: 'rgba(251,146,60,0.30)' },
    danger:    { bg: FP.dangerBg,   fg: FP.danger,  bd: 'rgba(239,68,68,0.30)' },
    primary:   { bg: FP.primaryDim, fg: FP.primary, bd: 'rgba(204,228,106,0.35)' },
  }[variant];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '3px 10px',
      borderRadius: 999,
      background: styles.bg,
      color: styles.fg,
      border: `1px solid ${styles.bd}`,
      fontFamily: SANS,
      fontSize: 13,
      fontWeight: 500,
      letterSpacing: '-0.005em',
      whiteSpace: 'nowrap',
    }}>
      {icon}
      {children}
    </span>
  );
}

// Check mark icon (lucide-ish, stroke 2)
function CheckIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12" />
    </svg>
  );
}
function DotIcon({ size = 8, color = 'currentColor' }) {
  return <span style={{ width: size, height: size, borderRadius: 999, background: color, display: 'inline-block' }} />;
}
function AlertIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
      <line x1="12" y1="9" x2="12" y2="13" />
      <line x1="12" y1="17" x2="12.01" y2="17" />
    </svg>
  );
}
function MailIcon({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2"/>
      <path d="m22 7-10 6L2 7"/>
    </svg>
  );
}
function FileIcon({ size = 18, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
      <polyline points="14 2 14 8 20 8"/>
    </svg>
  );
}
function LockIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="11" width="18" height="11" rx="2"/>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
  );
}
function SparkleIcon({ size = 16, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3 14 10 21 12 14 14 12 21 10 14 3 12 10 10z"/>
    </svg>
  );
}

// File pilot wordmark drawn inline (dark bg, currentColor)
function Wordmark({ color = FP.text, size = 1 }) {
  const w = 280 * size, h = 64 * size;
  return (
    <svg width={w} height={h} viewBox="0 0 280 64" style={{ color }}>
      <g transform="translate(6,12)" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round">
        <path d="M2 20 L40 4 L32 40 L22 28 L12 34 Z M22 28 L32 18" />
      </g>
      <text x="62" y="44" fontSize="30" fontFamily={SANS} fontWeight="500" fill="currentColor">File</text>
      <text x="138" y="44" fontSize="34" fontFamily={SERIF} fontStyle="italic" fill="currentColor">Pilot</text>
    </svg>
  );
}

Object.assign(window, {
  FP, SANS, MONO, SERIF,
  SceneBg, SubtleGrain, Caption, Badge,
  CheckIcon, DotIcon, AlertIcon, MailIcon, FileIcon, LockIcon, SparkleIcon,
  Wordmark,
});