// ---------- Shared hooks & primitives ----------
const { useState, useEffect, useRef, useCallback } = React;

// Cursor-following spotlight glow for dark sections
function useSpotlight() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    el.classList.add('spotlight-zone');
    let raf = null;
    let x = 0, y = 0;
    const apply = () => {
      el.style.setProperty('--mx', `${x}px`);
      el.style.setProperty('--my', `${y}px`);
      raf = null;
    };
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      x = e.clientX - r.left;
      y = e.clientY - r.top;
      if (raf == null) raf = requestAnimationFrame(apply);
    };
    const onLeave = () => {
      el.style.setProperty('--spotlight-opacity', '0');
    };
    const onEnter = () => {
      el.style.setProperty('--spotlight-opacity', '1');
    };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    el.addEventListener('mouseenter', onEnter);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
      el.removeEventListener('mouseenter', onEnter);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return ref;
}

// Scroll progress through an element (0 when entering viewport from bottom → 1 when exiting at top)
function useScrollProgress(ref) {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = null;
    const compute = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh;
      const passed = vh - r.top;
      const p = Math.max(0, Math.min(1, passed / total));
      setProgress(p);
      raf = null;
    };
    const onScroll = () => {
      if (raf == null) raf = requestAnimationFrame(compute);
    };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [ref]);
  return progress;
}

// Thin scroll progress bar at top of page
function ScrollProgressBar() {
  const [p, setP] = React.useState(0);
  React.useEffect(() => {
    let raf = null;
    const compute = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setP(max > 0 ? Math.max(0, Math.min(1, window.scrollY / max)) : 0);
      raf = null;
    };
    const onScroll = () => { if (raf == null) raf = requestAnimationFrame(compute); };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className="scroll-progress" aria-hidden="true">
      <div className="scroll-progress-bar" style={{ transform: `scaleX(${p})` }}/>
    </div>
  );
}

// 3D tilt on hover (for cards). Returns ref + style props.
function useTilt(maxTilt = 8) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = null;
    let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
    const tick = () => {
      currentX += (targetX - currentX) * 0.12;
      currentY += (targetY - currentY) * 0.12;
      el.style.transform = `perspective(900px) rotateX(${currentY}deg) rotateY(${currentX}deg) translateZ(0)`;
      if (Math.abs(targetX - currentX) > 0.01 || Math.abs(targetY - currentY) > 0.01) {
        raf = requestAnimationFrame(tick);
      } else {
        raf = null;
      }
    };
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top)  / r.height - 0.5;
      targetX = px * maxTilt;
      targetY = -py * maxTilt;
      if (raf == null) raf = requestAnimationFrame(tick);
    };
    const onLeave = () => {
      targetX = 0; targetY = 0;
      if (raf == null) raf = requestAnimationFrame(tick);
    };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [maxTilt]);
  return ref;
}

// Mouse parallax — tracks pointer vs element center
function useMouseParallax(ref) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = ((e.clientX - r.left) / r.width  - 0.5) * 2; // -1 to 1
      const y = ((e.clientY - r.top)  / r.height - 0.5) * 2;
      setPos({ x, y });
    };
    const onLeave = () => {
      setPos({ x: 0, y: 0 });
    };
    el.addEventListener('mousemove', onMove);
    el.addEventListener('mouseleave', onLeave);
    return () => {
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
    };
  }, [ref]);
  return pos;
}

// Element center progress: -1 when element below viewport, 0 when centers align, +1 when above viewport
function useElementCenterProgress(ref) {
  const [p, setP] = React.useState(-1);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = null;
    const compute = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const elCenter = r.top + r.height / 2;
      const viewCenter = vh / 2;
      const distance = viewCenter - elCenter;
      const maxDist = (vh + r.height) / 2;
      setP(Math.max(-1, Math.min(1, distance / maxDist)));
      raf = null;
    };
    const onScroll = () => { if (raf == null) raf = requestAnimationFrame(compute); };
    compute();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [ref]);
  return p;
}

// Element center progress: -1 when below, 0 when centered, +1 when above viewport
function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function Reveal({ as: As = 'div', stagger, className = '', children, ...rest }) {
  const ref = useReveal();
  const cls = ['reveal', stagger ? 'stagger' : '', className].filter(Boolean).join(' ');
  return <As ref={ref} className={cls} {...rest}>{children}</As>;
}

// Animated count-up
function useCountUp(target, duration = 1600, start = false) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!start) return;
    let raf;
    const t0 = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - t0) / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setVal(Math.round(eased * target));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [start, target, duration]);
  return val;
}

function CountUp({ to, format = (v) => v.toLocaleString(), duration }) {
  const [start, setStart] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setStart(true); io.disconnect(); }
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const v = useCountUp(to, duration, start);
  return <span ref={ref}>{format(v)}</span>;
}

// Magnetic button — subtle pointer follow
function MagneticBtn({ children, className = '', as: As = 'a', ...rest }) {
  const ref = useRef(null);
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const x = e.clientX - r.left - r.width / 2;
    const y = e.clientY - r.top - r.height / 2;
    ref.current.style.transform = `translate(${x * 0.18}px, ${y * 0.22}px)`;
  };
  const onLeave = () => { if (ref.current) ref.current.style.transform = 'translate(0,0)'; };
  return (
    <As ref={ref} className={className} onMouseMove={onMove} onMouseLeave={onLeave} {...rest}>
      {children}
    </As>
  );
}

// ---------- Hero pipeline tiles ----------

function BriefTile() {
  return (
    <div className="tile brief-card">
      <div className="head">
        <div className="logo">N</div>
        <span>NORTHFOLK / BRIEF</span>
      </div>
      <h4>Show how it fits a one-bag setup.</h4>
      <div className="meta">
        <span className="chip green">15s</span>
        <span className="chip">UGC</span>
        <span className="chip">demo + voice</span>
      </div>
    </div>
  );
}

function BountyTile() {
  return (
    <div className="tile bounty-card">
      <div className="row">
        <span style={{fontFamily:'var(--mono)',fontSize:11,color:'var(--ink-3)',letterSpacing:'.06em'}}>BOUNTY</span>
        <span className="chip green" style={{padding:'3px 7px'}}>LIVE</span>
      </div>
      <div className="amount" style={{marginTop:6}}>
        $1,250<span className="per">/ post</span>
      </div>
      <div className="stat-row">
        <div className="stat"><b>248</b> creators</div>
        <div className="stat"><b>62</b> in progress</div>
      </div>
    </div>
  );
}

// SVG placeholder "video" — solid stylized backgrounds (no AI imagery)
function VideoBg({ palette }) {
  // palette: array of two colors
  const [a, b] = palette;
  return (
    <svg viewBox="0 0 130 230" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
      <defs>
        <linearGradient id={`vg-${a.replace('#','')}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={a}/>
          <stop offset="100%" stopColor={b}/>
        </linearGradient>
      </defs>
      <rect width="130" height="230" fill={`url(#vg-${a.replace('#','')})`}/>
      {/* abstract head silhouette */}
      <circle cx="65" cy="95" r="34" fill="rgba(255,255,255,0.18)"/>
      <path d="M20 230 C20 170 45 145 65 145 C85 145 110 170 110 230 Z" fill="rgba(255,255,255,0.18)"/>
      <circle cx="65" cy="95" r="22" fill="rgba(0,0,0,0.15)"/>
    </svg>
  );
}

function VideoTile({ platform, palette, creator, views, style }) {
  return (
    <div className="tile video-tile" style={style}>
      <VideoBg palette={palette} />
      <div className="platform">{platform}</div>
      <div className="views">{views}</div>
      <div className="creator"><div className="av" style={{background: palette[0]}}/>{creator}</div>
    </div>
  );
}

// Creator phone mockup — vertical phone showing a short-form video
function CreatorPhone({ className = '', palette, platform, creator, caption, views, likes, comments, style }) {
  return (
    <div className={`phone ${className}`} style={style}>
      <div className="screen">
        <div className="phone-bg" style={{background: `linear-gradient(170deg, ${palette[0]}, ${palette[1]})`}}>
          <svg viewBox="0 0 230 470" preserveAspectRatio="xMidYMid slice"
            style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
            <circle cx="115" cy="195" r="62" fill="rgba(255,255,255,0.22)"/>
            <path d="M40 470 C40 360 75 318 115 318 C155 318 190 360 190 470 Z" fill="rgba(255,255,255,0.22)"/>
            <circle cx="115" cy="195" r="38" fill="rgba(0,0,0,0.16)"/>
          </svg>
        </div>
        <div className="phone-platform">{platform}</div>
        <div className="phone-views">{views}</div>
        <div className="phone-bottom">
          <div className="phone-creator">
            <div className="phone-av" style={{background: palette[0]}}/>
            <div>
              <div className="phone-handle">{creator}</div>
              <div className="phone-cap">{caption}</div>
            </div>
          </div>
          <div className="phone-meta">
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>
              <svg viewBox="0 0 24 24" fill="currentColor" width="13" height="13">
                <path d="M12 21s-7-4.5-9.5-9c-1.7-3 .4-7 4-7 1.8 0 3.3.9 4.5 2.4C12.2 5.9 13.7 5 15.5 5c3.6 0 5.7 4 4 7C19 16.5 12 21 12 21z"/>
              </svg>
              {likes}
            </span>
            <span style={{display:'inline-flex',alignItems:'center',gap:5}}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="13" height="13">
                <path d="M21 12a8 8 0 1 1-3.5-6.6L21 4l-1.5 4A8 8 0 0 1 21 12z"/>
              </svg>
              {comments}
            </span>
          </div>
        </div>
      </div>
      <div className="notch"/>
    </div>
  );
}

function ResultTile() {
  const pts = [4, 8, 6, 12, 18, 16, 24, 28, 30, 36];
  const w = 168, h = 38, max = 40;
  const step = w / (pts.length - 1);
  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${i*step} ${h - (p/max)*h}`).join(' ');
  const areaPath = `${linePath} L ${w} ${h} L 0 ${h} Z`;
  return (
    <div className="tile result-card">
      <div className="label">REACH · 7D</div>
      <div className="num">
        <CountUp to={8420000} format={(v) => v >= 1000000 ? (v/1000000).toFixed(2) + 'M' : v.toLocaleString()} />
        <small>views</small>
      </div>
      <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        <path className="area" d={areaPath} />
        <path d={linePath} />
      </svg>
    </div>
  );
}

// SVG connection lines drawn across the hero stage
function HeroLines() {
  // 4 columns; draw curves between centers
  return (
    <div className="hero-lines">
      <svg viewBox="0 0 1200 520" preserveAspectRatio="none">
        <path className="stroke dash-flow" d="M 165 260 C 230 220, 270 220, 335 260" />
        <path className="stroke dash-flow" d="M 465 260 C 530 320, 570 320, 635 260" />
        <path className="stroke dash-flow" d="M 765 260 C 830 220, 870 220, 935 260" />
        <circle className="dot" cx="165" cy="260" r="4"/>
        <circle className="dot" cx="465" cy="260" r="4"/>
        <circle className="dot" cx="765" cy="260" r="4"/>
        <circle className="dot" cx="1035" cy="260" r="4"/>
      </svg>
    </div>
  );
}

// ---------- Step art (How it works) ----------

function StepArtBrief() {
  return (
    <div className="step-art">
      <div className="brief-mini">
        <div className="skeleton-line w-50"/>
        <div className="skeleton-line w-90"/>
        <div className="skeleton-line w-70"/>
        <div className="bag-row">
          <span className="bag green">UGC</span>
          <span className="bag">15s</span>
          <span className="bag">demo</span>
        </div>
      </div>
    </div>
  );
}

function StepArtBounty() {
  const colors = ['#7BE25A','#A78BFA','#60A5FA','#F472B6','#FBBF24'];
  return (
    <div className="step-art" style={{background:'#F0EDE3'}}>
      <div className="bounty-mini">
        <div>
          <div className="label">BOUNTY</div>
          <div className="amt">$1,250</div>
        </div>
        <span style={{display:'inline-flex',alignItems:'center',gap:6,fontSize:11,fontFamily:'var(--mono)',background:'var(--accent)',padding:'4px 9px',borderRadius:999}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:'var(--ink)'}}/>OPEN
        </span>
      </div>
      <div className="bounty-creators">
        <div className="avatar-stack">
          {colors.map((c,i) => <div key={i} className="av-circle" style={{background:c}}/>)}
        </div>
        <span className="text">+243 creators joined</span>
      </div>
    </div>
  );
}

function StepArtShorts() {
  const cols = [
    ['#FF4E62','#7E1129','T'],
    ['#7BE25A','#1d5a26','R'],
    ['#FF0F33','#5a0e1c','Y'],
    ['#A78BFA','#3b1a8a','T'],
    ['#60A5FA','#0d3a8b','R'],
    ['#FBBF24','#7a4a08','Y']
  ];
  return (
    <div className="step-art">
      <div className="shorts-grid">
        {cols.map(([a,b,p],i) => (
          <div key={i} className="v" style={{background:`linear-gradient(180deg, ${a}, ${b})`}}>
            <span className="platform-mini">{p}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepArtPerf() {
  // Heights animate via CSS transition once it enters viewport
  const ref = useRef(null);
  const [start, setStart] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setStart(true); io.disconnect(); }
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const bars = [42, 65, 30, 80, 55, 95, 70];
  return (
    <div className="step-art" ref={ref}>
      <div className="perf-bars">
        {bars.map((h, i) => (
          <div key={i} className={`bar${h > 75 ? ' green' : ''}`}>
            <div className="fill" style={{ height: start ? `${h}%` : '6%' }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---------- Feature icons (Why BNTW) ----------

function FIcon({ kind }) {
  const stroke = "#ECEAE1";
  const accent = "#7BE25A";
  switch (kind) {
    case 'perf':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <path d="M3 17l5-5 4 4 8-9" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="20" cy="7" r="2" fill={accent}/>
        </svg>
      );
    case 'scale':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="4" width="6" height="6" rx="1.5" stroke={stroke} strokeWidth="1.5"/>
          <rect x="15" y="4" width="6" height="6" rx="1.5" stroke={stroke} strokeWidth="1.5"/>
          <rect x="3" y="14" width="6" height="6" rx="1.5" stroke={stroke} strokeWidth="1.5"/>
          <rect x="15" y="14" width="6" height="6" rx="1.5" fill={accent}/>
        </svg>
      );
    case 'setup':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="3" fill={accent}/>
          <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      );
    case 'creator':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="8" r="3.5" stroke={stroke} strokeWidth="1.5"/>
          <path d="M4 21c1.2-4 4.4-6 8-6s6.8 2 8 6" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
          <circle cx="19" cy="6" r="2.2" fill={accent}/>
        </svg>
      );
    case 'platforms':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <circle cx="6" cy="12" r="3" stroke={stroke} strokeWidth="1.5"/>
          <circle cx="18" cy="6" r="3" stroke={stroke} strokeWidth="1.5"/>
          <circle cx="18" cy="18" r="3" fill={accent}/>
          <path d="M8.5 10.5L15.5 7M8.5 13.5L15.5 17" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      );
    case 'call':
      return (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="5" width="18" height="14" rx="2.5" stroke={stroke} strokeWidth="1.5"/>
          <path d="M3 9h18" stroke={stroke} strokeWidth="1.5"/>
          <circle cx="8" cy="14" r="1.5" fill={accent}/>
          <path d="M12 14h6" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      );
    default: return null;
  }
}

// Bold visual glyph at the bottom of each feature card
function FeatureGlyph({ kind }) {
  switch (kind) {
    case 'perf':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90" preserveAspectRatio="xMidYMid meet">
          {[16,28,22,40,36,58,52,72,68,84].map((h,i) => (
            <rect key={i} x={10 + i*18} y={84 - h} width="10" height={h} rx="2"
              fill={h > 60 ? '#7BE25A' : 'rgba(255,255,255,0.18)'} />
          ))}
        </svg>
      );
    case 'scale':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90">
          {Array.from({length: 6}).map((_, r) =>
            Array.from({length: 12}).map((_, c) => {
              const active = (r + c) % 4 === 0 && r < 4;
              return <rect key={`${r}-${c}`} x={10 + c*15} y={6 + r*14} width="10" height="10" rx="2"
                fill={active ? '#7BE25A' : 'rgba(255,255,255,0.10)'}/>;
            })
          )}
        </svg>
      );
    case 'setup':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90">
          {[0,1,2].map(i => (
            <g key={i}>
              <circle cx={30 + i*70} cy="45" r="14" fill={i === 1 ? '#7BE25A' : 'rgba(255,255,255,0.10)'} stroke="rgba(255,255,255,0.25)"/>
              <text x={30 + i*70} y="50" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="12" fontWeight="600" fill={i===1 ? '#0E0E0C' : '#ECEAE1'}>{i+1}</text>
              {i < 2 && <line x1={48 + i*70} y1="45" x2={86 + i*70} y2="45" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" strokeDasharray="3 4"/>}
            </g>
          ))}
        </svg>
      );
    case 'creator':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90">
          {[
            {x: 30, c:'#A78BFA'},
            {x: 60, c:'#7BE25A'},
            {x: 90, c:'#60A5FA'},
            {x: 120, c:'#F472B6'},
            {x: 150, c:'#FBBF24'},
            {x: 180, c:'#ECEAE1'}
          ].map((a,i) => (
            <circle key={i} cx={a.x} cy="45" r="18" fill={a.c} opacity={i === 1 ? 1 : 0.75}
              stroke="#0E0E0C" strokeWidth="2"/>
          ))}
        </svg>
      );
    case 'platforms':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90">
          {['T','R','Y'].map((p,i) => (
            <g key={i}>
              <circle cx={40 + i*60} cy="45" r="22" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)"/>
              <text x={40 + i*60} y="51" textAnchor="middle" fontFamily="Geist" fontSize="20" fontWeight="700" fill="#ECEAE1">{p}</text>
            </g>
          ))}
          <circle cx="40" cy="22" r="5" fill="#7BE25A"/>
        </svg>
      );
    case 'call':
      return (
        <svg width="100%" height="90" viewBox="0 0 200 90">
          <rect x="30" y="14" width="140" height="62" rx="10" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.18)"/>
          <rect x="30" y="14" width="140" height="14" rx="10" fill="rgba(255,255,255,0.08)"/>
          <circle cx="40" cy="21" r="2" fill="rgba(255,255,255,0.4)"/>
          <circle cx="48" cy="21" r="2" fill="rgba(255,255,255,0.4)"/>
          <circle cx="56" cy="21" r="2" fill="rgba(255,255,255,0.4)"/>
          <rect x="44" y="38" width="48" height="28" rx="4" fill="#7BE25A"/>
          <text x="68" y="56" textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" fontWeight="600" fill="#0E0E0C">TUE 10:00</text>
          <rect x="100" y="38" width="60" height="6" rx="2" fill="rgba(255,255,255,0.18)"/>
          <rect x="100" y="50" width="40" height="6" rx="2" fill="rgba(255,255,255,0.18)"/>
          <rect x="100" y="62" width="48" height="6" rx="2" fill="rgba(255,255,255,0.18)"/>
        </svg>
      );
    default: return null;
  }
}

Object.assign(window, {
  useMouseParallax, useScrollProgress, useElementCenterProgress, ScrollProgressBar, useTilt, useSpotlight,
  useReveal, Reveal, useCountUp, CountUp, MagneticBtn,
  BriefTile, BountyTile, VideoTile, VideoBg, ResultTile, HeroLines, CreatorPhone,
  StepArtBrief, StepArtBounty, StepArtShorts, StepArtPerf,
  FIcon, FeatureGlyph
});