// W2Go motion + skeleton + visual primitives

const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

// ─── Skeleton loaders ──────────────────────────────────────────
function Skeleton({ w = '100%', h = 16, r = 8, style = {} }) {
  return <div style={{
    width: w, height: h, borderRadius: r,
    background: 'linear-gradient(90deg, rgba(23,25,25,0.04) 0%, rgba(23,25,25,0.10) 50%, rgba(23,25,25,0.04) 100%)',
    backgroundSize: '200% 100%', animation: 'w-shimmer 1.6s ease-in-out infinite',
    ...style
  }}/>;
}

function SkeletonCard() {
  return (
    <div style={{ flex: '0 0 240px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <Skeleton h={180} r={20}/>
      <Skeleton h={14} w="70%"/>
      <Skeleton h={12} w="40%"/>
    </div>
  );
}

// ─── Fade/slide entrance ───────────────────────────────────────
// Stagger child elements as they enter.
function Stagger({ children, delay = 60, dir = 'up', enabled = true }) {
  const kids = React.Children.toArray(children);
  return <>{kids.map((c, i) => (
    <div key={i} style={{
      animation: enabled ? `w-enter-${dir} 520ms cubic-bezier(0.2,0.7,0.2,1) ${i * delay}ms both` : 'none'
    }}>{c}</div>
  ))}</>;
}

// ─── Image with premium treatment + fade-in ────────────────────
// Slight vignette + warm color grade overlay, smooth fade as it loads.
function LuxImage({ src, alt = '', height = 'auto', width = '100%', radius = 0, vignette = true, grade = 'warm', style = {} }) {
  const [loaded, setLoaded] = useStateM(false);
  return (
    <div style={{
      position: 'relative', width, height, borderRadius: radius, overflow: 'hidden',
      background: 'linear-gradient(135deg, #2a2422, #1a1614)',
      ...style
    }}>
      {!loaded && <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 100%)',
        backgroundSize: '200% 100%', animation: 'w-shimmer 1.4s ease-in-out infinite'
      }}/>}
      <img src={src} alt={alt} loading="lazy" onLoad={() => setLoaded(true)} style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
        opacity: loaded ? 1 : 0, transition: 'opacity 500ms cubic-bezier(0.2,0.7,0.2,1)',
        filter: grade === 'warm' ? 'saturate(1.05) contrast(1.04)' : 'saturate(0.95)',
      }}/>
      {vignette && <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.18) 100%)'
      }}/>}
    </div>
  );
}

// ─── Marquee text reveal (for hero) ────────────────────────────
function RevealText({ text, size = 30, weight = 800, color = 'inherit', delay = 0, ls = -0.6 }) {
  // Split by line breaks; each line is its own clip-reveal.
  const lines = text.split('\n');
  return (
    <div style={{ fontSize: size, fontWeight: weight, color, letterSpacing: ls, lineHeight: 1.05 }}>
      {lines.map((l, i) => (
        <div key={i} style={{ overflow: 'hidden', display: 'block' }}>
          <span style={{
            display: 'inline-block',
            animation: `w-reveal 700ms cubic-bezier(0.2,0.7,0.2,1) ${delay + i * 80}ms both`
          }}>{l || '\u00A0'}</span>
        </div>
      ))}
    </div>
  );
}

// ─── Bottom sheet that animates in ─────────────────────────────
function BottomSheet({ open, onClose, children, height = 'auto' }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'absolute', inset: 0, background: 'rgba(11,15,15,0.55)',
      backdropFilter: 'blur(6px)', zIndex: 10,
      display: 'flex', alignItems: 'flex-end', animation: 'w-fade-in .2s'
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        width: '100%', background: 'var(--w-cream)', borderRadius: '24px 24px 0 0',
        padding: '14px 18px 30px', animation: 'w-sheet-up .35s cubic-bezier(0.2,0.7,0.2,1)',
        maxHeight: height, overflowY: 'auto', boxShadow: '0 -12px 30px rgba(0,0,0,0.18)'
      }}>
        <div style={{ width: 40, height: 4, background: 'rgba(23,25,25,0.18)', borderRadius: 4, margin: '0 auto 14px' }}/>
        {children}
      </div>
    </div>
  );
}

// ─── Animations CSS (injected once) ────────────────────────────
if (!document.getElementById('w-anim-css')) {
  const s = document.createElement('style');
  s.id = 'w-anim-css';
  s.textContent = `
    @keyframes w-shimmer    { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    @keyframes w-enter-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes w-enter-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
    @keyframes w-enter-fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes w-enter-scale{ from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
    @keyframes w-reveal     { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes w-fade-in    { from { opacity: 0; } to { opacity: 1; } }
    @keyframes w-sheet-up   { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes w-pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
    @keyframes w-spin       { to { transform: rotate(360deg); } }
    @keyframes w-bump       { 0%,100% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(0.96); } }
    @keyframes w-pop        { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes w-pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } }
    @keyframes w-dot-jump   { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
  `;
  document.head.appendChild(s);
}

// ─── Typing/loading dots ───────────────────────────────────────
function TypingDots({ color = 'currentColor' }) {
  return (
    <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
      {[0,1,2].map(i => <span key={i} style={{
        width: 5, height: 5, borderRadius: 999, background: color,
        animation: `w-dot-jump 1.2s ease-in-out ${i * 0.15}s infinite`
      }}/>)}
    </span>
  );
}

Object.assign(window, { Skeleton, SkeletonCard, Stagger, LuxImage, RevealText, BottomSheet, TypingDots });