// scenes.jsx — HomeMind onboarding animation scenes
// Built on Stage/Sprite primitives from animations.jsx

const COLORS = {
  bg: '#111827',
  surface: '#1F2937',
  surface2: '#263244',
  border: '#374151',
  text: '#F9FAFB',
  textSec: '#9CA3AF',
  textMuted: '#6B7280',
  primary: '#22D3EE',
  primaryDim: 'rgba(34, 211, 238, 0.16)',
  accent: '#10B981',
  warning: '#F59E0B',
};

const FONT = '-apple-system, "SF Pro Display", "Inter", system-ui, sans-serif';

// ── Phone frame ─────────────────────────────────────────────────────────────
function Phone({ x, y, scale = 0.82, children, scaleAnim = 1, opacity = 1 }) {
  const W = 360, H = 780;
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width: W, height: H,
      transform: `translate(-50%, -50%) scale(${scale * scaleAnim})`,
      transformOrigin: 'center',
      opacity,
      willChange: 'transform, opacity',
    }}>
      {/* Bezel */}
      <div style={{
        position: 'absolute', inset: 0,
        background: '#000',
        borderRadius: 48,
        padding: 8,
        boxShadow: '0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06)',
      }}>
        {/* Screen */}
        <div style={{
          position: 'absolute', inset: 8,
          background: COLORS.bg,
          borderRadius: 40,
          overflow: 'hidden',
          fontFamily: FONT,
        }}>
          {/* Status bar */}
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            height: 44,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '0 24px',
            color: COLORS.text,
            fontSize: 13, fontWeight: 600,
            zIndex: 10,
          }}>
            <span>7:43</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
              <span>●●●●●</span>
              <span style={{ marginLeft: 4 }}>5G</span>
              <span style={{
                width: 22, height: 11, marginLeft: 4,
                border: '1px solid white', borderRadius: 2,
                position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', inset: 1,
                  background: 'white', borderRadius: 1,
                }} />
              </span>
            </span>
          </div>
          {/* Notch */}
          <div style={{
            position: 'absolute', top: 8, left: '50%',
            transform: 'translateX(-50%)',
            width: 100, height: 26,
            background: '#000', borderRadius: 14,
            zIndex: 11,
          }} />
          {/* Content */}
          <div style={{
            position: 'absolute', top: 44, left: 0, right: 0, bottom: 0,
            overflow: 'hidden',
          }}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Bottom tab bar (matching the app) ───────────────────────────────────────
function TabBar({ active = 'Home' }) {
  const tabs = [
    { id: 'Home',    icon: '⌂' },
    { id: 'Search',  icon: '⌕' },
    { id: 'Add',     icon: '⊕' },
    { id: 'Browse',  icon: '▦' },
    { id: 'Account', icon: '⏊' },
  ];
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: 72,
      background: COLORS.bg,
      borderTop: `1px solid ${COLORS.border}`,
      display: 'flex',
      paddingBottom: 18,
    }}>
      {tabs.map(t => {
        const isActive = t.id === active;
        return (
          <div key={t.id} style={{
            flex: 1,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 4,
            color: isActive ? COLORS.primary : COLORS.textMuted,
            fontSize: 11,
            fontWeight: isActive ? 600 : 400,
          }}>
            <TabIcon name={t.id} active={isActive} />
            <span>{t.id}</span>
          </div>
        );
      })}
    </div>
  );
}

function TabIcon({ name, active }) {
  const c = active ? COLORS.primary : COLORS.textMuted;
  const sw = 1.8;
  if (name === 'Home') return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1v-9z" stroke={c} strokeWidth={sw} strokeLinejoin="round"/>
    </svg>
  );
  if (name === 'Search') return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="11" cy="11" r="6" stroke={c} strokeWidth={sw}/>
      <path d="M16 16l4 4" stroke={c} strokeWidth={sw} strokeLinecap="round"/>
    </svg>
  );
  if (name === 'Add') return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke={c} strokeWidth={sw}/>
      <path d="M12 8v8M8 12h8" stroke={c} strokeWidth={sw} strokeLinecap="round"/>
    </svg>
  );
  if (name === 'Browse') return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <rect x="4" y="4" width="7" height="7" rx="1" stroke={c} strokeWidth={sw}/>
      <rect x="13" y="4" width="7" height="7" rx="1" stroke={c} strokeWidth={sw}/>
      <rect x="4" y="13" width="7" height="7" rx="1" stroke={c} strokeWidth={sw}/>
      <rect x="13" y="13" width="7" height="7" rx="1" stroke={c} strokeWidth={sw}/>
    </svg>
  );
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="9" r="4" stroke={c} strokeWidth={sw}/>
      <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke={c} strokeWidth={sw} strokeLinecap="round"/>
    </svg>
  );
}

// ── Caption (top-of-stage narration) ────────────────────────────────────────
function Caption({ children, sub, align = 'left' }) {
  const { localTime, duration } = useSprite();
  const inT = clamp(localTime / 0.5, 0, 1);
  const outT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const opacity = Easing.easeOutCubic(inT) * (1 - Easing.easeInCubic(outT));
  const ty = (1 - Easing.easeOutCubic(inT)) * 12;

  return (
    <div style={{
      position: 'absolute',
      left: align === 'right' ? 'auto' : 60,
      right: align === 'right' ? 60 : 'auto',
      top: 80,
      maxWidth: 360,
      opacity,
      transform: `translateY(${ty}px)`,
      fontFamily: FONT,
      color: COLORS.text,
      textAlign: align,
    }}>
      <div style={{
        fontSize: 38, fontWeight: 700,
        letterSpacing: '-0.02em',
        lineHeight: 1.05,
        textWrap: 'pretty',
      }}>
        {children}
      </div>
      {sub && (
        <div style={{
          marginTop: 16,
          fontSize: 17,
          color: COLORS.textSec,
          lineHeight: 1.45,
          maxWidth: 340,
          fontWeight: 400,
        }}>{sub}</div>
      )}
    </div>
  );
}

// ── Background ─────────────────────────────────────────────────────────────
function StageBg() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(circle at 30% 20%, #1a2438 0%, ${COLORS.bg} 55%, #0a0e1a 100%)`,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
      }} />
    </div>
  );
}

Object.assign(window, { COLORS, FONT, Phone, TabBar, TabIcon, Caption, StageBg });