/* ============================================================
   WorkStay — cinematic CSS scenes + icon set
   exports to window: Scene, Icon
   ============================================================ */

/* Palette per scene variant: [sky/view top, view mid, horizon glow, room warm] */
const SCENE_PALETTES = {
  ocean:    { a: '#1b3a4b', b: '#2d6f86', c: '#e7a373', d: '#1a1410', sun: '#f4c98a', accent: '#7fb6c9' },
  mountain: { a: '#1d2433', b: '#3a4f63', c: '#c9b08a', d: '#15130f', sun: '#e9d3a8', accent: '#8aa0b8' },
  urban:    { a: '#171722', b: '#2a2740', c: '#9d90f6', d: '#120f14', sun: '#c9a0f0', accent: '#7c6cf0' },
  studio:   { a: '#14140f', b: '#2a2820', c: '#e7c37a', d: '#100f0c', sun: '#f2d79a', accent: '#c9bda8' },
  creative: { a: '#241626', b: '#4a2b46', c: '#e78aa3', d: '#160f14', sun: '#f0a6c0', accent: '#d98ab0' },
  warm:     { a: '#211710', b: '#3d2a1a', c: '#e7a373', d: '#140e09', sun: '#f4c177', accent: '#c9956a' },
};

function Scene({ variant = 'ocean', children, className = '', style = {}, plants = true, sill = true }) {
  const p = SCENE_PALETTES[variant] || SCENE_PALETTES.ocean;
  return (
    <div className={`ws-scene grain ${className}`} style={{ position: 'relative', overflow: 'hidden', background: p.d, ...style }}>
      {/* the view through a window */}
      <div style={{ position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${p.a} 0%, ${p.b} 46%, ${p.c} 72%, ${p.d} 100%)` }} />
      {/* sun glow */}
      <div style={{ position: 'absolute', left: '64%', top: '40%', width: '52%', height: '52%',
        background: `radial-gradient(circle, ${p.sun} 0%, transparent 62%)`, opacity: 0.55,
        filter: 'blur(8px)', animation: 'glowPulse 7s ease-in-out infinite' }} />
      {/* horizon line */}
      <div style={{ position: 'absolute', left: 0, right: 0, top: '70%', height: '1px',
        background: `linear-gradient(90deg, transparent, ${p.accent}66, transparent)` }} />
      {/* room ambient warm wash from bottom */}
      <div style={{ position: 'absolute', inset: 0,
        background: `linear-gradient(0deg, ${p.d} 0%, transparent 40%), radial-gradient(120% 60% at 50% 120%, ${p.c}22, transparent 60%)` }} />
      {/* window mullion frame */}
      {sill && (
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          <div style={{ position: 'absolute', left: '50%', top: 0, bottom: '30%', width: '2px',
            background: 'rgba(0,0,0,0.35)', transform: 'translateX(-50%)' }} />
          <div style={{ position: 'absolute', left: 0, right: 0, top: '34%', height: '2px',
            background: 'rgba(0,0,0,0.30)' }} />
          <div style={{ position: 'absolute', left: 0, right: 0, bottom: '30%', height: '3px',
            background: 'rgba(0,0,0,0.5)' }} />
        </div>
      )}
      {/* plant silhouette */}
      {plants && (
        <svg viewBox="0 0 120 200" preserveAspectRatio="xMidYMax meet" style={{ position: 'absolute', left: '6%', bottom: 0, height: '58%', opacity: 0.9 }}>
          <rect x="42" y="150" width="36" height="50" rx="5" fill="rgba(0,0,0,0.55)" />
          <path d="M60 150 C58 110 40 96 30 70 C48 84 58 108 60 132 C62 104 76 80 96 66 C82 96 64 112 60 150Z" fill="rgba(0,0,0,0.62)" />
          <path d="M60 150 C60 120 70 100 88 88 C76 112 66 126 62 150Z" fill="rgba(0,0,0,0.5)" />
        </svg>
      )}
      {/* desk lamp warm pool, lower right */}
      <div style={{ position: 'absolute', right: '8%', bottom: '6%', width: '34%', height: '30%',
        background: `radial-gradient(ellipse at bottom right, ${p.sun}33, transparent 70%)`, filter: 'blur(6px)' }} />
      {/* vignette */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        boxShadow: 'inset 0 0 140px 30px rgba(0,0,0,0.6)' }} />
      {children}
    </div>
  );
}

/* ---------------- Icon set (stroked, 24x24) ---------------- */
const ICONS = {
  wifi:   <><path d="M5 12.5a10 10 0 0 1 14 0"/><path d="M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/></>,
  quiet:  <><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M16 9.5a4 4 0 0 1 0 5"/><line x1="21" y1="4" x2="15" y2="20"/></>,
  power:  <><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>,
  desk:   <><rect x="3" y="5" width="18" height="3" rx="1"/><path d="M5 8v11M19 8v11M9 8v4h6V8"/></>,
  long:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  light:  <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></>,
  video:  <><rect x="2" y="6" width="13" height="12" rx="2"/><path d="m15 10 6-3v10l-6-3z"/></>,
  ergo:   <><circle cx="12" cy="5" r="2"/><path d="M9 21v-5l-2-2 2-5h4l2 4M15 21v-4"/></>,
  bolt:   <><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></>,
  shield: <><path d="M12 3 5 6v5c0 4 3 7 7 9 4-2 7-5 7-9V6z"/><path d="m9 12 2 2 4-4"/></>,
  search: <><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></>,
  pin:    <><path d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
  cal:    <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
  heart:  <><path d="M12 20s-7-4.5-9.5-9A4.7 4.7 0 0 1 12 6a4.7 4.7 0 0 1 9.5 5c-2.5 4.5-9.5 9-9.5 9z"/></>,
  star:   <><path d="m12 3 2.6 5.6 6 .7-4.4 4.1 1.2 6L12 16.8 6.6 19.4l1.2-6L3.4 9.3l6-.7z" fill="currentColor" stroke="none"/></>,
  arrow:  <><line x1="4" y1="12" x2="20" y2="12"/><path d="m14 6 6 6-6 6"/></>,
  arrowUR:<><path d="M7 17 17 7M9 7h8v8"/></>,
  check:  <><path d="m5 12 5 5 9-11"/></>,
  user:   <><circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/></>,
  grid:   <><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></>,
  gauge:  <><path d="M5 18a8 8 0 1 1 14 0"/><path d="M12 14l4-3"/><circle cx="12" cy="15" r="1.4" fill="currentColor" stroke="none"/></>,
  wave:   <><path d="M2 12c2-5 4-5 6 0s4 5 6 0 4-5 6 0"/></>,
  coffee: <><path d="M4 9h13v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z"/><path d="M17 10h2a2 2 0 0 1 0 4h-2"/><path d="M8 3v2M12 3v2"/></>,
  dumbbell:<><path d="M6 7v10M18 7v10M3 9v6M21 9v6M6 12h12"/></>,
  train:  <><rect x="5" y="3" width="14" height="13" rx="3"/><path d="M5 11h14M9 20l-2 2M15 20l2 2"/><circle cx="9" cy="13.5" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="13.5" r="1" fill="currentColor" stroke="none"/></>,
  cart:   <><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/><path d="M3 4h2l2 11h11l2-7H6"/></>,
  plus:   <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
  minus:  <><line x1="5" y1="12" x2="19" y2="12"/></>,
};

function Icon({ name, size = 20, stroke = 1.6, style = {}, className = '' }) {
  return (
    <svg className={className} width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ flexShrink: 0, ...style }}>
      {ICONS[name] || null}
    </svg>
  );
}

Object.assign(window, { Scene, Icon, SCENE_PALETTES });