// popups.jsx — Popup window contents (used inside Win95Window)

function MusicPlayerContent({ playing, onTogglePlay }) {
  const [progress, setProgress] = React.useState(0);
  const [tick, setTick] = React.useState(0);

  // Drive the visualizer + progress bar from a real interval. The progress
  // bar loops every ~24s (one trip through the four-chord progression).
  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setTick(t => t + 1);
      setProgress(p => (p >= 1 ? 0 : p + 1 / 240)); // 24s loop at 100ms tick
    }, 100);
    return () => clearInterval(id);
  }, [playing]);

  // Start/stop the procedural audio loop in lockstep with the playing prop.
  React.useEffect(() => {
    if (!window.apMusic) return;
    if (playing) window.apMusic.start();
    else window.apMusic.stop();
    return () => { if (window.apMusic) window.apMusic.stop(); };
  }, [playing]);

  return (
    <div style={{ padding: 4 }}>
      <div className="w95-inset" style={{ padding: 6, marginBottom: 6, background: '#000', color: '#5fff5f', fontFamily: 'monospace', fontSize: 10 }}>
        <div style={{ marginBottom: 2 }}>♪ NOW PLAYING ♪</div>
        <div style={{ color: '#ffe14d' }}>ASTRAL — Mall Souls (slowed)</div>
        <div style={{ color: '#ff7ad9', fontSize: 9 }}>Track 03 / 12 · 4:21</div>
        {/* visualizer bars */}
        <div style={{ display: 'flex', gap: 1, height: 18, alignItems: 'flex-end', marginTop: 4 }}>
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} style={{
              flex: 1,
              height: playing ? `${20 + Math.abs(Math.sin(i * 0.7 + tick * 0.3)) * 80}%` : '20%',
              background: i % 3 === 0 ? '#ff7ad9' : '#5fff5f',
              transition: 'height 0.15s',
            }} />
          ))}
        </div>
      </div>
      {/* progress bar */}
      <div style={{
        height: 4, background: '#000', border: '1px solid #fff', marginBottom: 6,
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: 0,
          width: `${progress * 100}%`, background: 'linear-gradient(90deg,#ff7ad9,#6cf2ff)',
        }} />
      </div>
      <div style={{ display: 'flex', gap: 4, justifyContent: 'center' }}>
        <button className="w95-btn" style={{ minWidth: 32, padding: '4px 6px' }}>⏮</button>
        <button className="w95-btn" style={{ minWidth: 32, padding: '4px 6px' }} onClick={onTogglePlay}>
          {playing ? <IconPause /> : <IconPlay />}
        </button>
        <button className="w95-btn" style={{ minWidth: 32, padding: '4px 6px' }}>⏭</button>
        <button className="w95-btn" style={{ minWidth: 32, padding: '4px 6px' }}>♥</button>
      </div>
    </div>
  );
}

// ─── WelcomeContent ─────────────────────────────────────────────────────────
// First-visit popup. Establishes the brand (real Goa-based indie clothing
// store, not dropship), bakes in some humour, and pushes WELCOME10 + the
// newsletter as twin conversion levers. Auto-opens once per device — gated
// by `ap-welcome-seen` in localStorage from app.jsx.
function WelcomeContent({ onClose, onShop, onNewsletter }) {
  const [copied, setCopied] = React.useState(false);

  const copyCode = () => {
    try {
      const t = 'WELCOME10';
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(t);
      }
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch (e) { /* clipboard blocked — user can copy manually */ }
  };

  return (
    <div style={{
      padding: 8,
      background: 'linear-gradient(180deg,#fff,#ffe6f5 60%,#dcefff)',
      fontSize: 11, color: '#000', lineHeight: 1.45,
    }}>
      {/* hero */}
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{
          fontSize: 18, fontWeight: 'bold', color: '#6a2bd9',
          textShadow: '2px 2px 0 #ff7ad9', letterSpacing: '0.04em',
        }}>
          ★ WELCOME, EARTHLING ★
        </div>
        <div style={{ fontSize: 9, color: '#444', marginTop: 2 }}>
          transmission received · 1995-2026 · ASTRAL.NET
        </div>
      </div>

      {/* body */}
      <div className="w95-inset" style={{ padding: 8, background: '#fff', marginBottom: 8 }}>
        <p style={{ margin: '0 0 6px' }}>
          you've reached the front door of <b>Astral Project</b> — a real,
          actual <b>indie clothing brand based in Goa, India</b>. not a
          dropship site. not an AI. (well, mostly.) every tee is screen-printed
          in small batches by humans who once stayed up too late reading
          Tumblr.
        </p>
        <p style={{ margin: '0 0 6px' }}>
          we make stuff for <i>the ones who feel too much</i> — band tees,
          dreamcore shirts, vaporwave fits, sad-girl-summer staples, and the
          occasional cargo pant. shipped from Goa to your doorstep with
          actual tracking and a heart-rate-elevating amount of pink.
        </p>
        <ul style={{ margin: '0 0 0 16px', padding: 0 }}>
          <li>made in India · INR ₹ · cash on delivery available</li>
          <li>free shipping on orders over ₹2000</li>
          <li>7-day easy returns · we will actually answer your DMs</li>
        </ul>
      </div>

      {/* coupon block */}
      <div style={{
        border: '2px dashed #ff3eb5', background: '#fff0fa',
        padding: 6, marginBottom: 8, textAlign: 'center',
      }}>
        <div style={{ fontSize: 10, color: '#000' }}>
          first time here? have <b style={{ color: '#ff3eb5' }}>10% off</b> on the house:
        </div>
        <button
          onClick={copyCode}
          className="w95-btn"
          style={{
            marginTop: 4, fontFamily: 'monospace', fontSize: 14,
            fontWeight: 'bold', letterSpacing: '0.15em',
            background: '#000', color: '#5fff5f',
            padding: '4px 10px', cursor: 'pointer',
          }}>
          {copied ? '✓ COPIED!' : 'WELCOME10'}
        </button>
        <div style={{ fontSize: 9, color: '#666', marginTop: 3 }}>
          tap to copy · auto-applies at checkout
        </div>
      </div>

      {/* CTAs */}
      <div style={{ display: 'flex', gap: 4, flexDirection: 'column' }}>
        <button className="w95-btn"
          onClick={() => { onShop && onShop(); onClose && onClose(); }}
          style={{ background: '#ff7ad9', color: '#000', fontWeight: 'bold', padding: '6px 8px' }}>
          ★ Enter the store
        </button>
        <div style={{ display: 'flex', gap: 4 }}>
          <button className="w95-btn" style={{ flex: 1 }}
            onClick={() => { onNewsletter && onNewsletter(); onClose && onClose(); }}>
            ✉ get the newsletter
          </button>
          <button className="w95-btn" style={{ flex: 1 }} onClick={onClose}>
            just browsing
          </button>
        </div>
      </div>

      <div style={{ fontSize: 9, color: '#666', marginTop: 8, textAlign: 'center' }}>
        ※ no popups after this one — promise (mostly)
      </div>
    </div>
  );
}

function NewsletterContent({ onClose, onSubmit }) {
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async () => {
    if (!email.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
      setError('Invalid email address.exe');
      return;
    }
    if (typeof window.callFn !== 'function') {
      setError('Backend not ready — try again.');
      return;
    }
    setBusy(true);
    try {
      await window.callFn('subscribeNewsletter', { email, source: 'popup' });
      onSubmit(email);
    } catch (e) {
      console.error('[newsletter]', e);
      setError((e && (e.message || e.code)) || 'Could not subscribe.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{ padding: 8, background: 'linear-gradient(180deg,#fff,#ffd6f0)' }}>
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{ fontSize: 22, fontWeight: 'bold', color: '#ff3eb5', textShadow: '2px 2px 0 #000', letterSpacing: '0.05em' }}>
          ★ 5% OFF ★
        </div>
        <div style={{ fontSize: 11, color: '#000', marginTop: 4 }}>
          subscribe to the newsletter for exclusive drops, secret sales &amp; cosmic dispatches
        </div>
      </div>
      <div style={{ marginBottom: 4 }}>
        <input
          className="w95-input"
          type="email"
          placeholder="your.email@domain.com"
          value={email}
          inputMode="email"
          autoComplete="email"
          autoCapitalize="none"
          spellCheck={false}
          onChange={(e) => { setEmail(e.target.value); setError(''); }}
        />
      </div>
      {error && (
        <div style={{ color: '#aa0000', fontSize: 10, marginBottom: 4 }}>
          <div style={{ fontWeight: 'bold' }}>⚠ {error}</div>
          <div style={{ fontSize: 9, color: '#666' }}>tap Subscribe again to retry</div>
        </div>
      )}
      <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
        <button className="w95-btn" disabled={busy} onClick={onClose}>No thanks</button>
        <button className="w95-btn" disabled={busy} onClick={submit}
          style={{ background: '#ff7ad9', color: '#000', fontWeight: 'bold' }}>
          {busy ? 'Sending…' : 'Subscribe ★'}
        </button>
      </div>
    </div>
  );
}

function LoginContent({ user, onClose, onToast }) {
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');

  const run = (fn, successMsg) => {
    setBusy(true); setError('');
    Promise.resolve()
      .then(fn)
      .then(() => { onToast && onToast(successMsg); onClose && onClose(); })
      .catch((err) => {
        console.error('[auth]', err);
        const msg = err && err.code === 'auth/popup-closed-by-user'
          ? 'Sign-in cancelled'
          : (err && err.message) || 'Sign-in failed';
        setError(msg);
      })
      .finally(() => setBusy(false));
  };

  if (user) {
    const name = user.displayName || (user.isAnonymous ? 'Guest' : (user.email || 'User'));
    const sub = user.isAnonymous ? 'anonymous session' : (user.email || '');
    return (
      <div style={{ padding: 10, background: 'linear-gradient(180deg,#fff,#e6dcff)' }}>
        <div className="w95-inset" style={{ padding: 8, marginBottom: 8, background: '#fff', display: 'flex', alignItems: 'center', gap: 10 }}>
          {user.photoURL ? (
            <img src={user.photoURL} alt="" aria-hidden="true" style={{ width: 40, height: 40, border: '1px solid #000', imageRendering: 'pixelated' }} />
          ) : (
            <div style={{
              width: 40, height: 40, border: '1px solid #000',
              background: 'linear-gradient(135deg,#ff7ad9,#6cf2ff)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 'bold', fontSize: 18, color: '#000',
            }}>{(name[0] || '?').toUpperCase()}</div>
          )}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontWeight: 'bold', fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</div>
            <div style={{ fontSize: 10, color: '#444', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{sub}</div>
            <div style={{ fontSize: 9, color: '#5fff5f', background: '#000', display: 'inline-block', padding: '0 4px', marginTop: 2 }}>★ ONLINE ★</div>
          </div>
        </div>
        {user.isAnonymous && (
          <div style={{ fontSize: 10, marginBottom: 6, color: '#000' }}>
            you're signed in as a guest. link a Google account to save your session across devices.
          </div>
        )}
        {error && (
          <div style={{ color: '#aa0000', fontSize: 10, marginBottom: 4, fontWeight: 'bold' }}>⚠ {error}</div>
        )}
        <div style={{ display: 'flex', gap: 4, flexDirection: 'column' }}>
          {user.isAnonymous && (
            <button className="w95-btn" disabled={busy}
              onClick={() => run(() => window.signInWithGoogle(), 'Linked Google account')}
              style={{ background: '#fff', fontWeight: 'bold' }}>
              ★ Link Google account
            </button>
          )}
          <button className="w95-btn" disabled={busy}
            onClick={() => run(() => window.signOutUser(), 'Signed out')}>
            Sign out
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: 10, background: 'linear-gradient(180deg,#fff,#dcefff)' }}>
      <div style={{ textAlign: 'center', marginBottom: 8 }}>
        <div style={{ fontSize: 18, fontWeight: 'bold', color: '#6a2bd9', textShadow: '2px 2px 0 #ff7ad9', letterSpacing: '0.05em' }}>
          ★ ASTRAL.LOGIN ★
        </div>
        <div style={{ fontSize: 10, color: '#000', marginTop: 4 }}>
          identify yourself to enter the cosmos
        </div>
      </div>
      {error && (
        <div style={{ color: '#aa0000', fontSize: 10, marginBottom: 6, fontWeight: 'bold' }}>⚠ {error}</div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <button className="w95-btn" disabled={busy}
          onClick={() => run(() => window.signInWithGoogle(), 'Signed in with Google')}
          style={{ background: '#fff', fontWeight: 'bold', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '6px 8px' }}>
          <span style={{
            display: 'inline-block', width: 14, height: 14,
            background: 'conic-gradient(from 0deg, #ea4335 0deg 90deg, #fbbc05 90deg 180deg, #34a853 180deg 270deg, #4285f4 270deg 360deg)',
            borderRadius: '50%', border: '1px solid #000',
          }} />
          Sign in with Google
        </button>
        <div style={{ textAlign: 'center', fontSize: 9, color: '#666' }}>— or —</div>
        <button className="w95-btn" disabled={busy}
          onClick={() => run(() => window.signInAnonymous(), 'Continuing as guest')}
          style={{ background: '#ff7ad9', color: '#000', fontWeight: 'bold', padding: '6px 8px' }}>
          ☆ Continue as Guest
        </button>
      </div>
      <div style={{ fontSize: 9, color: '#444', marginTop: 8, textAlign: 'center' }}>
        guest sessions persist on this device only
      </div>
    </div>
  );
}

// ─── AccountContent ─────────────────────────────────────────────────────────
// Full-fat account dashboard for signed-in users. Tabbed Win95 surface with
// loyalty / orders / wishlist / settings, designed to drive a second purchase.

const AP_TIERS = [
  { id: 'newbie',    name: 'NEWBIE',    min: 0,    color: '#888' },
  { id: 'stargazer', name: 'STARGAZER', min: 1500, color: '#6cf2ff' },
  { id: 'astronaut', name: 'ASTRONAUT', min: 5000, color: '#ff7ad9' },
  { id: 'cosmic',    name: 'COSMIC',    min: 15000, color: '#ffe14d' },
];

function apTierFor(spent) {
  let t = AP_TIERS[0];
  for (const tier of AP_TIERS) if (spent >= tier.min) t = tier;
  const idx = AP_TIERS.indexOf(t);
  const next = AP_TIERS[idx + 1];
  return { tier: t, next, progress: next ? Math.min(1, (spent - t.min) / (next.min - t.min)) : 1 };
}

function apReferralCode(user) {
  const seed = (user && (user.uid || user.email || user.displayName || 'GUEST')) + '';
  let h = 0; for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const alpha = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
  let s = '';
  for (let i = 0; i < 6; i++) { s += alpha[h % alpha.length]; h = Math.floor(h / alpha.length) + 7; }
  return 'AP-' + s;
}

function AccountTabBar({ tabs, active, onChange }) {
  return (
    <div style={{
      display: 'flex', gap: 0, padding: '0 4px',
      borderBottom: '1px solid #000',
      background: 'var(--w95-bg)',
    }}>
      {tabs.map(t => {
        const isActive = t.id === active;
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            border: '1px solid', borderColor: isActive
              ? '#fff #000 transparent #fff'
              : '#fff #000 #000 #fff',
            borderBottom: isActive ? 'none' : '1px solid #000',
            background: isActive ? 'var(--w95-bg)' : 'var(--w95-bg-light)',
            padding: '4px 6px', marginRight: 1,
            marginBottom: isActive ? -1 : 0,
            fontFamily: 'inherit', fontSize: 10, fontWeight: isActive ? 'bold' : 'normal',
            cursor: 'pointer', position: 'relative',
            color: '#000',
          }}>{t.label}</button>
        );
      })}
    </div>
  );
}

function AccountStatTile({ label, value, sub, color }) {
  return (
    <div className="w95-inset" style={{
      flex: 1, padding: '4px 6px', background: '#fff',
      display: 'flex', flexDirection: 'column', minWidth: 0,
    }}>
      <div style={{ fontSize: 9, color: '#444', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 'bold', color: color || '#000', lineHeight: 1, marginTop: 2 }}>{value}</div>
      {sub && <div style={{ fontSize: 9, color: '#666', marginTop: 1 }}>{sub}</div>}
    </div>
  );
}

function AccountContent({ user, onClose, onToast, onOpen, wishlist = [], onToggleWish, achievements = [] }) {
  const [tab, setTab] = React.useState('home');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');

  // Locally persisted prefs — keyed by uid so guest/google sessions don't collide.
  // Used as a fast cache; remote prefs from Firestore overlay onto this on load.
  const storeKey = `ap-account:${user.uid}`;
  const [prefs, setPrefs] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem(storeKey) || '{}'); } catch { return {}; }
  });
  React.useEffect(() => {
    try { localStorage.setItem(storeKey, JSON.stringify(prefs)); } catch {}
  }, [prefs, storeKey]);

  // Sync prefs with the Firestore user doc — server-controlled fields
  // (lifetimeSpend, points, orderCount) overwrite local on each load so the
  // user always sees the truthful balance after a payment.
  const [orders, setOrders] = React.useState([]);
  const [ordersLoaded, setOrdersLoaded] = React.useState(false);
  React.useEffect(() => {
    if (!user) { setOrdersLoaded(true); return; }
    let cancelled = false;
    if (typeof window.loadUserPrefs === 'function') {
      window.loadUserPrefs(user.uid).then((remote) => {
        if (cancelled || !remote) return;
        setPrefs((p) => ({
          ...p,
          notif: remote.notif || p.notif,
          lifetimeSpend: typeof remote.lifetimeSpend === 'number' ? remote.lifetimeSpend : p.lifetimeSpend,
          orderCount: typeof remote.orderCount === 'number' ? remote.orderCount : p.orderCount,
          points: typeof remote.points === 'number' ? remote.points : p.points,
          redemptions: remote.redemptions || p.redemptions,
        }));
      });
    }
    if (typeof window.loadMyOrders === 'function') {
      window.loadMyOrders().then((list) => {
        if (cancelled) return;
        setOrders(list);
        setOrdersLoaded(true);
      }).catch(() => setOrdersLoaded(true));
    } else {
      setOrdersLoaded(true);
    }
    return () => { cancelled = true; };
  }, [user && user.uid]);

  // Persist notif prefs + redemptions to Firestore so they follow the user.
  const setRemotePref = (partial) => {
    setPrefs((p) => ({ ...p, ...partial }));
    if (user && typeof window.saveUserPrefs === 'function') {
      window.saveUserPrefs(user.uid, partial);
    }
  };

  const lifetimeSpend = prefs.lifetimeSpend || 0;
  const spentRedeem = (prefs.redemptions || []).reduce((s, r) => s + (r.cost || 0), 0);
  const points = Math.max(0, Math.floor(lifetimeSpend / 10) - spentRedeem);
  const savings = prefs.savings || 0;
  const tierInfo = apTierFor(lifetimeSpend);

  // Resolve wishlist slugs back to product objects via window.PRODUCTS.
  // Falls back to ARCHIVED_PRODUCTS so a wished item that got hidden by an
  // admin doesn't silently vanish from the user's list.
  const wishProducts = React.useMemo(() => {
    const all = [...(window.PRODUCTS || []), ...(window.ARCHIVED_PRODUCTS || [])];
    const idx = Object.fromEntries(all.map((p) => [p.slug, p]));
    return (wishlist || []).map((slug) => idx[slug]).filter(Boolean);
  }, [wishlist]);

  const redeem = (r) => {
    if (points < r.cost) return;
    const code = 'AP-RDM-' + Math.random().toString(36).slice(2, 8).toUpperCase();
    const next = [...(prefs.redemptions || []), {
      cost: r.cost, label: r.label, code, at: Date.now(),
    }];
    setRemotePref({ redemptions: next });
    onToast && onToast(`★ Redeemed: ${r.label} (code ${code})`);
    try { navigator.clipboard.writeText(code); } catch {}
  };
  const memberSince = user.metadata && user.metadata.creationTime
    ? new Date(user.metadata.creationTime)
    : new Date();
  const referralCode = apReferralCode(user);

  const name = user.displayName || (user.isAnonymous ? 'Guest Astronaut' : (user.email || 'User'));
  const sub = user.isAnonymous ? 'guest session · this device only' : (user.email || '');

  const run = (fn, successMsg) => {
    setBusy(true); setError('');
    Promise.resolve().then(fn)
      .then(() => { onToast && onToast(successMsg); })
      .catch((e) => {
        console.error('[auth]', e);
        const msg = e && e.code === 'auth/popup-closed-by-user'
          ? 'Sign-in cancelled' : (e && e.message) || 'Something went wrong';
        setError(msg);
      })
      .finally(() => setBusy(false));
  };

  const copyRef = () => {
    try {
      navigator.clipboard.writeText(referralCode);
      onToast && onToast(`Copied: ${referralCode}`);
    } catch {
      onToast && onToast(referralCode);
    }
  };

  // ── Header ───────────────────────────────────────────────────────────────
  const header = (
    <div style={{
      background: 'linear-gradient(135deg, #6a2bd9 0%, #ff3eb5 60%, #ff7a18 100%)',
      color: '#fff', padding: '8px 10px',
      borderBottom: '2px solid #000',
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none',
        background: 'repeating-linear-gradient(0deg, transparent 0 2px, #000 2px 3px)',
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
        {user.photoURL ? (
          <img src={user.photoURL} alt="" aria-hidden="true"
            style={{ width: 44, height: 44, border: '2px solid #fff', boxShadow: '2px 2px 0 #000' }} />
        ) : (
          <div style={{
            width: 44, height: 44, border: '2px solid #fff', boxShadow: '2px 2px 0 #000',
            background: 'linear-gradient(135deg,#fff,#6cf2ff)',
            color: '#000', fontWeight: 'bold', fontSize: 22,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{(name[0] || '?').toUpperCase()}</div>
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 14, fontWeight: 'bold', textShadow: '2px 2px 0 #000',
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{name}</div>
          <div style={{
            fontSize: 9, opacity: 0.9, marginTop: 1,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{sub}</div>
          <div style={{ marginTop: 3, display: 'flex', alignItems: 'center', gap: 4 }}>
            <span style={{
              background: '#000', color: tierInfo.tier.color,
              padding: '1px 5px', fontSize: 9, fontWeight: 'bold', letterSpacing: '0.1em',
              border: '1px solid #fff',
            }}>★ {tierInfo.tier.name}</span>
            <span style={{ fontSize: 9, opacity: 0.85 }}>
              member since {memberSince.toLocaleDateString('en-IN', { month: 'short', year: 'numeric' })}
            </span>
          </div>
        </div>
      </div>
    </div>
  );

  // ── Tabs ─────────────────────────────────────────────────────────────────
  const tabs = [
    { id: 'home',     label: 'Home' },
    { id: 'orders',   label: `Orders${orders.length ? ` (${orders.length})` : ''}` },
    { id: 'wishlist', label: `Wishlist${wishlist.length ? ` (${wishlist.length})` : ''}` },
    { id: 'rewards',  label: 'Rewards' },
    { id: 'settings', label: 'Settings' },
  ];

  // ── Home tab ─────────────────────────────────────────────────────────────
  const homeTab = (
    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* Stats row */}
      <div style={{ display: 'flex', gap: 4 }}>
        <AccountStatTile label="Orders"  value={orders.length} sub={orders.length ? 'lifetime' : 'no orders yet'} />
        <AccountStatTile label="Points"  value={points} color="var(--ap-pink-deep)" sub="★ STAR POINTS" />
        <AccountStatTile label="Saved"   value={`₹${savings}`} color="#0a8a0a" sub="all-time" />
      </div>

      {/* Tier progress */}
      <div className="w95-inset" style={{ padding: 6, background: '#fff' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, marginBottom: 4 }}>
          <span style={{ fontWeight: 'bold' }}>★ {tierInfo.tier.name}</span>
          {tierInfo.next && (
            <span style={{ color: '#444' }}>
              ₹{(tierInfo.next.min - lifetimeSpend).toLocaleString('en-IN')} to <b>{tierInfo.next.name}</b>
            </span>
          )}
        </div>
        <div style={{ height: 10, background: '#000', border: '1px solid #fff', position: 'relative', boxShadow: 'inset 1px 1px 0 #444' }}>
          <div style={{
            height: '100%', width: `${tierInfo.progress * 100}%`,
            background: 'linear-gradient(90deg, var(--ap-cyan), var(--ap-pink), var(--ap-orange))',
            transition: 'width 0.4s',
          }} />
          <div style={{
            position: 'absolute', inset: 0, fontSize: 9, color: '#fff', fontWeight: 'bold',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            textShadow: '1px 1px 0 #000',
          }}>{Math.round(tierInfo.progress * 100)}%</div>
        </div>
      </div>

      {/* First-order CTA — only if zero orders */}
      {orders.length === 0 && (
        <div style={{
          padding: 8,
          background: 'linear-gradient(135deg, #ffe14d, #ff7ad9)',
          border: '2px solid #000', boxShadow: '3px 3px 0 #000',
          textAlign: 'center',
        }}>
          <div style={{ fontSize: 14, fontWeight: 'bold', color: '#000', textShadow: '1px 1px 0 #fff' }}>
            ★ 10% OFF YOUR FIRST DROP ★
          </div>
          <div style={{ fontSize: 10, color: '#000', marginTop: 2 }}>
            use code <b style={{ background: '#000', color: '#5fff5f', padding: '1px 4px', fontFamily: 'monospace' }}>WELCOME10</b> at checkout
          </div>
          <button className="w95-btn" style={{ marginTop: 6, fontWeight: 'bold' }}
            onClick={() => { onClose && onClose(); onOpen && onOpen('shop'); }}>
            Shop new arrivals →
          </button>
        </div>
      )}

      {/* Referral block */}
      <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 2 }}>★ refer a friend, get ₹100</div>
        <div style={{ fontSize: 9, color: '#444', marginBottom: 6 }}>
          your friend gets ₹100 off, you get ₹100 store credit when they place their first order.
        </div>
        <div style={{ display: 'flex', gap: 4, alignItems: 'stretch' }}>
          <div style={{
            flex: 1, padding: '4px 6px', background: '#000', color: '#5fff5f',
            fontFamily: 'monospace', fontSize: 12, fontWeight: 'bold',
            letterSpacing: '0.1em', border: '1px solid #000',
            display: 'flex', alignItems: 'center',
          }}>{referralCode}</div>
          <button className="w95-btn" onClick={copyRef}>Copy</button>
        </div>
      </div>

      {/* Achievements grid — locked badges shown greyed-out, unlocked in
          their assigned color. Pulled from window.apAchievements.CATALOG. */}
      {window.apAchievements && (() => {
        const catalog = window.apAchievements.CATALOG;
        const unlocked = new Set(achievements);
        return (
          <div className="w95-inset" style={{ background: '#fff', padding: 6, marginBottom: 6 }}>
            <div style={{ fontSize: 9, color: '#666', marginBottom: 4, fontWeight: 'bold' }}>
              ★ ACHIEVEMENTS — {unlocked.size} / {catalog.length}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
              {catalog.map((a) => {
                const got = unlocked.has(a.id);
                return (
                  <div key={a.id} title={got ? `${a.title} — ${a.desc}` : `LOCKED — ${a.desc}`}
                    style={{
                      padding: 4, border: '1px solid #888', background: got ? '#000' : '#ddd',
                      display: 'flex', flexDirection: 'column', alignItems: 'center',
                      opacity: got ? 1 : 0.55,
                    }}>
                    <pre style={{
                      margin: 0, fontSize: 9, lineHeight: 1.05,
                      color: got ? a.color : '#666', fontFamily: 'monospace',
                    }}>{a.pixel}</pre>
                    <div style={{
                      fontSize: 8, marginTop: 2, fontWeight: 'bold',
                      color: got ? '#fff' : '#666', textAlign: 'center',
                    }}>{got ? a.title : '???'}</div>
                  </div>
                );
              })}
            </div>
          </div>
        );
      })()}

      {/* Quick actions */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
        <button className="w95-btn" onClick={() => { onClose && onClose(); onOpen && onOpen('track'); }}>
          📦 Track an order
        </button>
        <button className="w95-btn" onClick={() => { onClose && onClose(); onOpen && onOpen('shop'); }}>
          🛒 Continue shopping
        </button>
        <button className="w95-btn" onClick={() => setTab('wishlist')}>
          ♥ My wishlist
        </button>
        <button className="w95-btn" onClick={() => { onClose && onClose(); onOpen && onOpen('contact'); }}>
          ✉ Contact support
        </button>
      </div>
    </div>
  );

  // ── Orders tab ───────────────────────────────────────────────────────────
  const fmtDate = (ms) => ms
    ? new Date(ms).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' })
    : '—';
  const ordersTab = (
    <div style={{ padding: 8 }}>
      {!ordersLoaded ? (
        <div className="w95-inset" style={{ padding: 16, background: '#fff', textAlign: 'center', fontSize: 10, color: '#666' }}>
          decoding orders…
        </div>
      ) : orders.length === 0 ? (
        <div className="w95-inset" style={{ padding: 16, background: '#fff', textAlign: 'center' }}>
          <pre style={{ fontFamily: 'monospace', fontSize: 14, color: '#ff3eb5', margin: 0, lineHeight: 1.1, marginBottom: 6 }}>
{`  ┌────────┐
  │ ░░░░░░ │
  │ ▓ AP ▓ │
  └─┬────┬─┘
    └────┘`}
          </pre>
          <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 2 }}>ORDERS.LOG — empty</div>
          <div style={{ fontSize: 9, color: '#666', marginBottom: 8 }}>
            your first order awaits transmission
          </div>
          <button className="w95-btn" onClick={() => { onClose && onClose(); onOpen && onOpen('shop'); }}
            style={{ background: 'var(--ap-pink)', fontWeight: 'bold' }}>
            ★ Browse the catalog
          </button>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {orders.map((o) => {
            const stColor = o.status === 'paid' ? '#0a8a0a'
              : o.status === 'failed' ? '#c00' : '#aa5500';
            return (
              <div key={o.id} className="w95-inset" style={{ padding: 6, background: '#fff' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, fontWeight: 'bold' }}>
                  <span style={{ fontFamily: 'monospace' }}>{o.receipt || o.id}</span>
                  <span style={{ color: stColor, textTransform: 'uppercase' }}>{o.status}</span>
                </div>
                <div style={{ fontSize: 9, color: '#444', marginTop: 2 }}>
                  {fmtDate(o.paidAt || o.createdAt)} · ₹{o.total} · {(o.items || []).reduce((s, l) => s + l.qty, 0)} item(s)
                </div>
                {o.items && o.items.length > 0 && (
                  <div style={{ fontSize: 9, color: '#666', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {o.items.map((l) => `${l.name} × ${l.qty}`).join(' · ')}
                  </div>
                )}
                <div style={{ marginTop: 4 }}>
                  <button className="w95-btn" style={{ fontSize: 9, padding: '1px 6px' }}
                    onClick={() => { onClose && onClose(); onOpen && onOpen('track'); }}>
                    Track →
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );

  // ── Wishlist tab ─────────────────────────────────────────────────────────
  const wishlistTab = (
    <div style={{ padding: 8 }}>
      {wishProducts.length === 0 ? (
        <div className="w95-inset" style={{ padding: 16, background: '#fff', textAlign: 'center' }}>
          <pre style={{ fontFamily: 'monospace', fontSize: 14, color: '#ff3eb5', margin: 0, lineHeight: 1.1, marginBottom: 6 }}>
{` ♡   ♡
  \\\\ //
   ╳
  // \\\\`}
          </pre>
          <div style={{ fontSize: 11, fontWeight: 'bold' }}>WISHLIST.DAT — empty</div>
          <div style={{ fontSize: 9, color: '#666', marginTop: 2, marginBottom: 8 }}>
            save items to materialize them here
          </div>
          <button className="w95-btn" onClick={() => { onClose && onClose(); onOpen && onOpen('shop'); }}
            style={{ background: 'var(--ap-cyan)', fontWeight: 'bold' }}>
            ★ Find something cosmic
          </button>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          {wishProducts.map((p) => (
            <div key={p.slug} style={{
              display: 'flex', alignItems: 'center', gap: 6, padding: 4,
              background: '#fff', border: '1px solid #888', cursor: 'pointer',
            }} onClick={() => { onClose && onClose(); onOpen && onOpen('product-view', p); }}>
              {p.image && (
                <img src={p.image} alt={p.name} style={{ width: 32, height: 32, objectFit: 'cover', border: '1px solid #888' }} />
              )}
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 10, fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {p.name}
                </div>
                {(() => {
                  const u = window.upsellInfo && window.upsellInfo(p);
                  if (!u) return <div style={{ fontSize: 9, color: '#ff3eb5', fontWeight: 'bold' }}>₹{p.price}</div>;
                  return (
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 9, color: '#ff3eb5', fontWeight: 'bold' }}>₹{u.sale}</span>
                      <span style={{ fontSize: 8, color: '#888', textDecoration: 'line-through' }}>₹{u.original}</span>
                      <span style={{ fontSize: 7, fontWeight: 'bold', color: '#fff', background: '#0a8a0a', padding: '0 2px' }}>
                        −{u.percent}%
                      </span>
                    </div>
                  );
                })()}
              </div>
              <button className="w95-btn" style={{ fontSize: 9, padding: '1px 5px' }}
                onClick={(e) => { e.stopPropagation(); onToggleWish && onToggleWish(p.slug); }}>
                ×
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  // ── Rewards tab ──────────────────────────────────────────────────────────
  const rewardsTab = (
    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{
        padding: 10, textAlign: 'center',
        background: 'radial-gradient(ellipse at center, #6a2bd9 0%, #1a0033 100%)',
        color: '#fff', border: '2px solid #000', boxShadow: '3px 3px 0 #000',
      }}>
        <div style={{ fontSize: 9, letterSpacing: '0.2em', color: 'var(--ap-cyan)' }}>★ STAR POINTS BALANCE ★</div>
        <div style={{ fontSize: 36, fontWeight: 'bold', textShadow: '3px 3px 0 #000', color: 'var(--ap-yellow)', lineHeight: 1, margin: '4px 0' }}>
          {points}
        </div>
        <div style={{ fontSize: 9, opacity: 0.9 }}>1 point = ₹1 off · earn 1 pt per ₹10 spent</div>
      </div>

      <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 4 }}>your perks</div>
        {[
          { ok: true, label: 'Welcome bonus — 10% off first order' },
          { ok: tierInfo.tier.id !== 'newbie', label: 'Free shipping over ₹999' },
          { ok: ['astronaut','cosmic'].includes(tierInfo.tier.id), label: 'Early access to drops (24h)' },
          { ok: tierInfo.tier.id === 'cosmic', label: 'Free birthday tee 🎂' },
        ].map((p, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 6, fontSize: 10,
            padding: '3px 0', color: p.ok ? '#000' : '#888',
          }}>
            <span style={{
              width: 14, height: 14, border: '1px solid #000', display: 'inline-flex',
              alignItems: 'center', justifyContent: 'center',
              background: p.ok ? '#5fff5f' : '#ddd', fontWeight: 'bold', fontSize: 10,
            }}>{p.ok ? '✓' : '·'}</span>
            <span style={{ textDecoration: p.ok ? 'none' : 'line-through' }}>{p.label}</span>
          </div>
        ))}
      </div>

      <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 4 }}>redeem points</div>
        {[
          { cost: 100, label: '₹100 off any order' },
          { cost: 250, label: 'free domestic shipping' },
          { cost: 500, label: 'mystery sticker pack' },
          { cost: 1000, label: 'exclusive vault tee' },
        ].map((r, i) => {
          const can = points >= r.cost;
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '3px 0', fontSize: 10 }}>
              <span style={{ minWidth: 50, fontFamily: 'monospace', fontWeight: 'bold', color: can ? 'var(--ap-pink-deep)' : '#888' }}>
                {r.cost} pts
              </span>
              <span style={{ flex: 1, color: can ? '#000' : '#888' }}>{r.label}</span>
              <button className="w95-btn" disabled={!can}
                onClick={() => redeem(r)}
                style={{ fontSize: 9, padding: '2px 6px' }}>
                Redeem
              </button>
            </div>
          );
        })}
      </div>

      {prefs.redemptions && prefs.redemptions.length > 0 && (
        <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
          <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 4 }}>your codes</div>
          {prefs.redemptions.slice().reverse().map((r, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '2px 0', fontSize: 10 }}>
              <span style={{ minWidth: 90, fontFamily: 'monospace', background: '#000', color: '#5fff5f', padding: '0 4px' }}>{r.code}</span>
              <span style={{ flex: 1, color: '#444' }}>{r.label}</span>
              <span style={{ fontSize: 9, color: '#888' }}>−{r.cost}p</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  // ── Settings tab ─────────────────────────────────────────────────────────
  const settingsTab = (
    <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 4 }}>profile</div>
        <div style={{ fontSize: 10, marginBottom: 2 }}>
          <span style={{ color: '#666' }}>name: </span>{name}
        </div>
        <div style={{ fontSize: 10, marginBottom: 2 }}>
          <span style={{ color: '#666' }}>email: </span>{user.email || '(none — anonymous)'}
        </div>
        <div style={{ fontSize: 10, marginBottom: 2 }}>
          <span style={{ color: '#666' }}>uid: </span>
          <span style={{ fontFamily: 'monospace', fontSize: 9 }}>{user.uid.slice(0, 16)}…</span>
        </div>
        <div style={{ fontSize: 10 }}>
          <span style={{ color: '#666' }}>provider: </span>
          {user.isAnonymous ? 'anonymous' : (user.providerData[0] && user.providerData[0].providerId) || '—'}
        </div>
      </div>

      <div className="w95-inset" style={{ padding: 8, background: '#fff' }}>
        <div style={{ fontSize: 11, fontWeight: 'bold', marginBottom: 4 }}>notifications</div>
        {[
          { key: 'newsletter', label: 'newsletter — drops &amp; restocks', def: true },
          { key: 'sms',        label: 'SMS — order updates only',      def: true },
          { key: 'priceAlert', label: 'price-drop alerts on wishlist', def: true },
          { key: 'birthday',   label: 'birthday surprise (₹500 gift)', def: true },
        ].map(n => {
          const notif = prefs.notif || {};
          const v = notif[n.key] !== undefined ? notif[n.key] : n.def;
          return (
            <label key={n.key} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, padding: '2px 0', cursor: 'pointer' }}>
              <input type="checkbox" checked={v}
                onChange={(e) => {
                  const nextNotif = { ...(prefs.notif || {}), [n.key]: e.target.checked };
                  setRemotePref({ notif: nextNotif });
                }} />
              <span dangerouslySetInnerHTML={{ __html: n.label }} />
            </label>
          );
        })}
      </div>

      {error && (
        <div style={{ color: '#aa0000', fontSize: 10, fontWeight: 'bold' }}>⚠ {error}</div>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {user.isAnonymous && (
          <button className="w95-btn" disabled={busy}
            style={{ background: '#fff', fontWeight: 'bold' }}
            onClick={() => run(() => window.signInWithGoogle(), 'Linked Google account')}>
            ★ Save my account — link Google
          </button>
        )}
        <button className="w95-btn" disabled={busy}
          onClick={() => run(() => window.signOutUser().then(() => onClose && onClose()), 'Signed out')}>
          Sign out
        </button>
      </div>
      <div style={{ fontSize: 9, color: '#666', textAlign: 'center', marginTop: 4 }}>
        ＡＳＴＲＡＬ.95 · session secured via firebase
      </div>
    </div>
  );

  const body =
    tab === 'orders'   ? ordersTab :
    tab === 'wishlist' ? wishlistTab :
    tab === 'rewards'  ? rewardsTab :
    tab === 'settings' ? settingsTab :
    homeTab;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', background: 'var(--w95-bg)' }}>
      {header}
      <AccountTabBar tabs={tabs} active={tab} onChange={setTab} />
      <div className="w95-scroll" style={{ flex: 1, overflow: 'auto' }}>
        {body}
      </div>
    </div>
  );
}

function RecycleBinContent({ onSecret }) {
  const [pressTimer, setPressTimer] = React.useState(null);
  const items = [
    { name: 'mom_jeans_v1.psd', kind: 'design', size: '4.2 MB' },
    { name: 'old_logo.bmp', kind: 'image', size: '128 KB' },
    { name: 'IMG_0420.jpg', kind: 'image', size: '2.1 MB' },
    { name: 'discontinued_tee.png', kind: 'image', size: '890 KB' },
    { name: 'README_2018.txt', kind: 'text', size: '2 KB' },
    { name: 'venice_beach.jpg', kind: 'image', size: '3.4 MB' },
    { name: 'demo_track.wav', kind: 'audio', size: '12 MB' },
    { name: 'archive.zip', kind: 'zip', size: '88 MB' },
  ];
  // Right-click → fake "Properties" prompt → opens minesweeper. On touch
  // devices, a 600ms long-press on the title strip triggers the same path.
  const handleProperties = (e) => {
    if (e) { e.preventDefault(); e.stopPropagation(); }
    if (typeof onSecret === 'function') onSecret();
  };
  const onTouchStart = () => {
    if (pressTimer) clearTimeout(pressTimer);
    setPressTimer(setTimeout(() => handleProperties(), 600));
  };
  const onTouchEnd = () => {
    if (pressTimer) { clearTimeout(pressTimer); setPressTimer(null); }
  };
  return (
    <div className="w95-inset" style={{ background: '#fff', minHeight: '100%' }}
      onContextMenu={handleProperties}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}>
      <div style={{ padding: 4, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: 4, fontSize: 10 }}>
            <div style={{ width: 32, height: 32, background:
              it.kind === 'image' ? 'linear-gradient(135deg,#ff7ad9,#6cf2ff)' :
              it.kind === 'audio' ? '#ffe14d' :
              it.kind === 'zip' ? '#888' :
              it.kind === 'design' ? '#0080ff' : '#fff',
              border: '1px solid #000', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'monospace', fontWeight: 'bold', fontSize: 9,
            }}>
              {it.kind === 'image' ? 'IMG' : it.kind === 'audio' ? 'WAV' : it.kind === 'zip' ? 'ZIP' : it.kind === 'design' ? 'PSD' : 'TXT'}
            </div>
            <div style={{ fontSize: 9, textAlign: 'center', marginTop: 2, wordBreak: 'break-all' }}>
              {it.name}
            </div>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid #888', padding: '2px 6px', fontSize: 10, color: '#000' }}>
        {items.length} object(s) · {(items.reduce((a,b)=>a+parseFloat(b.size),0)).toFixed(1)} MB
      </div>
    </div>
  );
}

function PromoSidebarContent({ onShop }) {
  return (
    <div style={{ padding: 6 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <PromoTile color="#ff3eb5" title="NEW DROP" sub="Spring '95 collection" emoji="★" onClick={onShop} />
        <PromoTile color="#6cf2ff" title="LOOKBOOK" sub="behind the lens" emoji="✦" onClick={onShop} />
        <PromoTile color="#ffe14d" title="ARCHIVE" sub="rare & sold out" emoji="◆" onClick={onShop} />
      </div>
    </div>
  );
}
function PromoTile({ color, title, sub, emoji, onClick }) {
  return (
    <button onClick={onClick} style={{
      background: color, border: '2px solid #000', padding: 8, textAlign: 'left',
      fontFamily: 'inherit', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
      boxShadow: '3px 3px 0 #000',
    }}>
      <div style={{ fontSize: 24, fontWeight: 'bold', color: '#000' }}>{emoji}</div>
      <div>
        <div style={{ fontSize: 12, fontWeight: 'bold', color: '#000', textShadow: '1px 1px 0 #fff' }}>{title}</div>
        <div style={{ fontSize: 10, color: '#000' }}>{sub}</div>
      </div>
    </button>
  );
}

function VideoPopupContent() {
  return (
    <div style={{ padding: 4 }}>
      <div style={{
        aspectRatio: '4/3', background: '#000', position: 'relative', overflow: 'hidden',
        border: '1px solid #000',
      }}>
        {/* fake VHS noise */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            repeating-linear-gradient(180deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 4px),
            linear-gradient(135deg, #ff3a8e 0%, #6cf2ff 50%, #ffe14d 100%)
          `,
        }} />
        {/* tshirt silhouette */}
        <svg viewBox="0 0 100 100" style={{ position: 'absolute', inset: '15%', filter: 'drop-shadow(0 0 8px #fff)' }}>
          <path d="M20 25 L35 15 L40 20 L60 20 L65 15 L80 25 L75 40 L65 35 L65 80 L35 80 L35 35 L25 40 Z"
                fill="#fff" stroke="#000" strokeWidth="1"/>
          <text x="50" y="55" textAnchor="middle" fontSize="9" fontFamily="serif" fontWeight="bold" fill="#000">
            ASTRAL
          </text>
          <text x="50" y="65" textAnchor="middle" fontSize="6" fontFamily="serif" fill="#000">
            PROJECT
          </text>
        </svg>
        {/* play overlay */}
        <div style={{
          position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%', background: 'rgba(0,0,0,0.6)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '2px solid #fff',
          }}>
            <div style={{
              width: 0, height: 0,
              borderLeft: '12px solid #fff', borderTop: '8px solid transparent',
              borderBottom: '8px solid transparent', marginLeft: 4,
            }} />
          </div>
        </div>
        {/* REC indicator */}
        <div style={{ position: 'absolute', top: 4, right: 4, color: '#ff3a3a', fontSize: 9, fontFamily: 'monospace', fontWeight: 'bold' }}>
          ● REC 00:42
        </div>
      </div>
      <div style={{ fontSize: 10, marginTop: 4, textAlign: 'center', color: '#000' }}>
        ★ NEW TEE — watch the lookbook film ★
      </div>
    </div>
  );
}

function MarqueeContent() {
  return (
    <div style={{ padding: 16, background: '#000', textAlign: 'center', minHeight: 80, position: 'relative' }}>
      <div style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
        <div className="scroll-text" style={{
          fontSize: 32, fontWeight: 'bold',
          color: '#ff7ad9',
          textShadow: '2px 2px 0 #6cf2ff, 4px 4px 0 #ffe14d',
          fontFamily: 'serif',
          letterSpacing: '0.1em',
        }}>
          ★ ＡＳＴＲＡＬ ＰＲＯＪＥＣＴ ★ NEW DROP ★ FREE SHIPPING ₹200+ ★ ＡＳＴＲＡＬ ＰＲＯＪＥＣＴ ★
        </div>
      </div>
    </div>
  );
}

// ── Portfolio.exe — Kushagra's dev/musician portfolio ──────────────────────
// Console / arcade aesthetic inside the Win95 frame. Reuses AccountTabBar +
// AccountStatTile for cartridge-style tabs and header stat tiles.

const PORTFOLIO_GAMES = [
  { slug: 'mystic-motors', title: 'Mystic Motors', studio: 'Tec Ventures', year: '2025', platform: 'Android · Unity 6.2', role: 'Senior Dev', tags: ['Racing', 'URP', 'Addressables', 'Profiling'], highlight: '60 FPS Ultra on low-end · −2 GB runtime RAM' },
  { slug: 'xana-builder', title: 'XANA Builder', studio: 'Noborderz', year: '2023', platform: 'Win · Mac · iOS · Android · WebGL', role: 'Vice Product Lead', tags: ['Web3', 'Sandbox', 'Tools'], highlight: '6000+ ETH in pre-sales for the JP market' },
  { slug: 'xana', title: 'XANA', studio: 'Noborderz', year: '2023', platform: 'iOS · Android', role: 'Lead Game Designer', tags: ['Web3', 'Metaverse', 'Multiplayer'], highlight: 'Open-world Web3 metaverse with wallet auth' },
  { slug: 'x-summit', title: 'X-Summit', studio: 'Noborderz', year: '2023', platform: 'Android', role: 'Lead Designer', tags: ['Web3', 'Social'], highlight: 'Companion mobile experience for the XANA universe' },
  { slug: 'x-duel', title: 'X-Duel', studio: 'Noborderz', year: '2023', platform: 'Android', role: 'Lead Designer', tags: ['PvP', 'Cards'], highlight: 'Card-duel spinoff sharing the XANA art bible' },
  { slug: 'nft-duel', title: 'NFT Duel', studio: 'Noborderz', year: '2022', platform: 'iOS · Android', role: 'Developer', tags: ['Web3', 'Card Battle', 'Photon'], highlight: 'Async PvP card battler with on-chain decks' },
  { slug: 'run-money', title: 'Run for the Money', studio: 'Noborderz', year: '2022', platform: 'Mobile', role: 'Product Lead', tags: ['Netflix IP', 'FujiTV', 'Multiplayer'], highlight: 'Game adaptation of the hit Japanese TV show' },
  { slug: 'breaking-down', title: 'Breaking Down', studio: 'Noborderz', year: '2022', platform: 'Mobile', role: 'Lead Designer', tags: ['Sports', 'MMA'], highlight: 'Official Japanese MMA promotion tie-in' },
  { slug: 'meaow', title: 'MEAOW', studio: 'Independent', year: '2021', platform: 'Telegram', role: 'Solo Dev', tags: ['Bot', 'Chain Game'], highlight: 'Side-quest indie game inside Telegram' },
];

const PORTFOLIO_CAREER = [
  { from: '2020', to: '2021', role: 'Freelance', org: 'Independent' },
  { from: '2021', to: '2021', role: 'Unity Dev', org: 'NMS Games' },
  { from: '2021', to: '2022', role: 'Unity Dev', org: 'Colexion / Payiza' },
  { from: '2022', to: '2024', role: 'Senior Dev / Lead Designer', org: 'Noborderz' },
  { from: '2023', to: 'now',  role: 'Co-Lead',  org: 'IGG @ Google Play' },
  { from: '2025', to: 'now',  role: 'Senior Game Developer', org: 'Tec Ventures' },
];

const PORTFOLIO_SKILLS = [
  { label: 'Architecture & Tools',  level: 6, tags: ['Unity 6', 'C#', 'C++', 'ECS / DOTS', 'Scriptable Objects', 'Cinemachine', 'Custom Editors'] },
  { label: 'Performance',           level: 6, tags: ['Profiling', 'GPU / CPU Opt', 'Addressables', 'Burst', 'Jobs', 'Memory'] },
  { label: 'Rendering & VFX',       level: 5, tags: ['Shader Graph', 'URP', 'HDRP', 'VFX Graph', 'Lighting', 'PBR'] },
  { label: 'Multiplayer & Backend', level: 5, tags: ['Photon PUN / Fusion', 'Netcode', 'WebSockets', 'Web3 Wallets', 'REST APIs'] },
  { label: 'AI & PCG',              level: 4, tags: ['Behavior Trees', 'PCG', 'AI Toolchains', 'Automated QA'] },
  { label: 'DevOps & SDKs',         level: 5, tags: ['Git', 'CI', 'AWS', 'Firebase', 'Google SDK', 'Facebook SDK'] },
  { label: 'Leadership',            level: 5, tags: ['Sprint Planning', 'Code Review', 'Mentorship', 'Client Relations', 'Product Direction'] },
];

const PORTFOLIO_INSTRUMENTS = [
  { name: 'Classical Guitar', cat: 'Strings' },
  { name: 'Electric Guitar',  cat: 'Strings' },
  { name: 'Acoustic Guitar',  cat: 'Strings' },
  { name: 'Bass',             cat: 'Strings' },
  { name: 'Ukelele',          cat: 'Strings' },
  { name: 'Violin',           cat: 'Strings' },
  { name: 'Piano',            cat: 'Keys' },
  { name: 'Synth',            cat: 'Keys' },
  { name: 'Drums',            cat: 'Percussion' },
  { name: 'Cajon',            cat: 'Percussion' },
];

const PORTFOLIO_TALKS = [
  { event: "Google Developer Group's DevFest 2022", city: 'Indore',  role: 'Speaker' },
  { event: 'Google I/O Extended 2023',              city: 'Noida',   role: 'Speaker' },
  { event: "Google Developer Group's DevFest 2023", city: 'New Delhi', role: 'Speaker' },
  { event: 'Goa Developers Summit 2.0',             city: 'Goa',     role: 'Speaker' },
  { event: "Google Developer Group's DevFest 2024", city: 'Goa',     role: 'Speaker' },
  { event: "Hosted GDG Indore DevFest 2023 + 2024", city: 'Indore',  role: 'Host' },
];

const PORTFOLIO_CAT_COLOR = {
  Strings:    'var(--ap-pink)',
  Keys:       'var(--ap-cyan)',
  Percussion: 'var(--ap-yellow)',
};

function PortfolioBezel({ children, style }) {
  // Black CRT bezel with scanlines (pure CSS).
  return (
    <div style={{
      position: 'relative',
      background: 'linear-gradient(180deg, #0c0c14 0%, #1a0820 100%)',
      border: '2px solid #000',
      boxShadow: 'inset 0 0 0 1px #2a1840, inset 0 0 18px rgba(108, 242, 255, 0.18)',
      padding: 10,
      overflow: 'hidden',
      ...style,
    }}>
      {/* scanlines */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0px, rgba(0,0,0,0.32) 1px, transparent 1px, transparent 3px)',
        opacity: 0.55,
      }} />
      {/* vignette */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%)',
      }} />
      <div style={{ position: 'relative' }}>{children}</div>
    </div>
  );
}

function PortfolioPill({ children, color = '#ff7ad9', light = false }) {
  return (
    <span style={{
      display: 'inline-block',
      padding: '1px 5px',
      fontSize: 9,
      fontWeight: 'bold',
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      background: light ? '#fff' : color,
      color: light ? '#000' : '#000',
      border: '1px solid #000',
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

function PortfolioGameCard({ game }) {
  const [imgOk, setImgOk] = React.useState(true);
  const src = `images/portfolio/${game.slug}.png`;
  return (
    <div style={{
      display: 'flex', gap: 8,
      background: '#000',
      border: '2px solid #000',
      boxShadow: 'inset 0 0 0 1px #6cf2ff, 0 0 0 1px #ff7ad9',
      padding: 6, marginBottom: 8,
    }}>
      <div style={{
        width: 132, minWidth: 132, height: 84,
        background: '#0a0a14',
        border: '1px solid #6cf2ff',
        overflow: 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative',
      }}>
        {imgOk ? (
          <img src={src} alt={game.title} onError={() => setImgOk(false)}
            style={{ width: '100%', height: '100%', objectFit: 'cover', imageRendering: 'pixelated', display: 'block' }} />
        ) : (
          <div style={{ transform: 'scale(2.4)' }}><Icon name="cd" size={28} /></div>
        )}
        {/* corner stripe */}
        <div style={{
          position: 'absolute', top: 0, left: 0,
          padding: '1px 4px', fontSize: 8, fontWeight: 'bold',
          background: 'var(--ap-pink)', color: '#000',
          fontFamily: 'monospace',
        }}>{game.year}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0, color: '#fff' }}>
        <div style={{
          fontSize: 13, fontWeight: 'bold', color: 'var(--ap-yellow)',
          textShadow: '1px 1px 0 #ff7ad9',
          letterSpacing: '0.04em', lineHeight: 1.1, marginBottom: 2,
        }}>{game.title.toUpperCase()}</div>
        <div style={{ fontSize: 10, color: '#6cf2ff', marginBottom: 3 }}>
          {game.studio} · {game.platform}
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3, marginBottom: 4 }}>
          <PortfolioPill color="var(--ap-yellow)">{game.role}</PortfolioPill>
          {game.tags.map(t => <PortfolioPill key={t} color="var(--ap-cyan)">{t}</PortfolioPill>)}
        </div>
        <div style={{ fontSize: 10, color: '#fff', lineHeight: 1.25 }}>
          ▸ {game.highlight}
        </div>
      </div>
    </div>
  );
}

function PortfolioCareerTimeline() {
  return (
    <div className="w95-inset" style={{ background: '#000', padding: 8, marginTop: 4 }}>
      <div style={{
        fontSize: 10, color: 'var(--ap-cyan)', fontWeight: 'bold',
        letterSpacing: '0.08em', marginBottom: 6,
      }}>▌ CAREER TIMELINE ▐</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {PORTFOLIO_CAREER.map((c, i) => (
          <div key={i} style={{
            display: 'flex', gap: 6, alignItems: 'center',
            fontSize: 10, color: '#fff', fontFamily: 'monospace',
          }}>
            <span style={{ color: 'var(--ap-yellow)', minWidth: 80 }}>
              {c.from}–{c.to}
            </span>
            <span style={{ color: 'var(--ap-pink)', fontWeight: 'bold', minWidth: 140 }}>
              {c.role}
            </span>
            <span style={{ color: '#6cf2ff' }}>@ {c.org}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function PortfolioSkillBar({ skill }) {
  const pct = Math.min(100, (skill.level / 6) * 100);
  return (
    <div className="w95-inset" style={{ background: '#0a0a14', padding: 6, marginBottom: 4 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }}>
        <span style={{ fontSize: 11, fontWeight: 'bold', color: 'var(--ap-yellow)', letterSpacing: '0.04em' }}>
          {skill.label.toUpperCase()}
        </span>
        <span style={{ fontSize: 9, color: '#6cf2ff', fontFamily: 'monospace' }}>
          LV {skill.level}/6
        </span>
      </div>
      <div style={{
        height: 8, background: '#000', border: '1px solid #6cf2ff',
        position: 'relative', overflow: 'hidden', marginBottom: 4,
      }}>
        <div style={{
          height: '100%', width: `${pct}%`,
          background: 'linear-gradient(90deg, var(--ap-cyan) 0%, var(--ap-pink) 100%)',
          boxShadow: '0 0 6px var(--ap-pink)',
        }} />
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 4px)',
          pointerEvents: 'none',
        }} />
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 3 }}>
        {skill.tags.map(t => <PortfolioPill key={t} color="var(--ap-pink)">{t}</PortfolioPill>)}
      </div>
    </div>
  );
}

function PortfolioContent({ onToast, onOpenWindow }) {
  const [tab, setTab] = React.useState('games');

  const tabs = [
    { id: 'games',    label: 'GAMES' },
    { id: 'skills',   label: 'SKILLS' },
    { id: 'music',    label: 'MUSIC' },
    { id: 'speaking', label: 'SPEAKING' },
  ];

  const header = (
    <PortfolioBezel style={{ margin: 6 }}>
      <div style={{
        fontSize: 22, fontWeight: 'bold',
        letterSpacing: '0.08em',
        background: 'linear-gradient(90deg, var(--ap-pink) 0%, var(--ap-cyan) 50%, var(--ap-yellow) 100%)',
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent',
        fontFamily: 'monospace',
        textAlign: 'center',
        lineHeight: 1,
      }}>KUSHAGRA·OS</div>
      <div style={{
        fontSize: 9, color: '#6cf2ff', fontFamily: 'monospace',
        letterSpacing: '0.18em', textAlign: 'center', marginTop: 3, marginBottom: 8,
      }}>SR. GAME DEVELOPER · LEAD DESIGNER · IGG CO-LEAD</div>
      <div style={{ display: 'flex', gap: 4 }}>
        <AccountStatTile label="Years" value="6+" color="var(--ap-pink)" />
        <AccountStatTile label="Games" value={PORTFOLIO_GAMES.length} color="var(--ap-yellow)" />
        <AccountStatTile label="Instruments" value={PORTFOLIO_INSTRUMENTS.length} color="var(--ap-cyan)" />
        <AccountStatTile label="Talks" value={PORTFOLIO_TALKS.length} color="var(--ap-pink-deep, #ff3eb5)" />
      </div>
    </PortfolioBezel>
  );

  const gamesTab = (
    <div style={{ padding: 8 }}>
      <div style={{
        fontSize: 10, color: '#000', background: 'var(--ap-yellow)',
        border: '1px solid #000', padding: '3px 6px', marginBottom: 8,
        fontWeight: 'bold', letterSpacing: '0.06em', textAlign: 'center',
      }}>★ SHIPPED TITLES ★ PRESS A TO INSPECT ★</div>
      {PORTFOLIO_GAMES.map(g => <PortfolioGameCard key={g.slug} game={g} />)}
      <PortfolioCareerTimeline />
    </div>
  );

  const skillsTab = (
    <div style={{ padding: 8 }}>
      <div style={{
        fontSize: 10, color: '#000', background: 'var(--ap-cyan)',
        border: '1px solid #000', padding: '3px 6px', marginBottom: 8,
        fontWeight: 'bold', letterSpacing: '0.06em', textAlign: 'center',
      }}>▌ CHARACTER STATS ▐</div>
      {PORTFOLIO_SKILLS.map(s => <PortfolioSkillBar key={s.label} skill={s} />)}
    </div>
  );

  const musicTab = (
    <div style={{ padding: 8 }}>
      <div style={{
        fontSize: 10, color: '#000', background: 'var(--ap-pink)',
        border: '1px solid #000', padding: '3px 6px', marginBottom: 8,
        fontWeight: 'bold', letterSpacing: '0.06em', textAlign: 'center',
      }}>♪ SOUNDTRACK · KUSHAGRA PLAYS ♪</div>
      <button className="w95-btn" style={{ width: '100%', marginBottom: 8, padding: '4px 8px' }}
        onClick={() => onOpenWindow && onOpenWindow('music')}>
        ▶ Open AstralFM
      </button>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 4,
      }}>
        {PORTFOLIO_INSTRUMENTS.map(ins => (
          <div key={ins.name} className="w95-inset" style={{
            background: '#0a0a14', padding: '6px 8px',
            display: 'flex', flexDirection: 'column', gap: 2,
          }}>
            <span style={{
              fontSize: 11, fontWeight: 'bold', color: '#fff',
              letterSpacing: '0.04em',
            }}>{ins.name}</span>
            <span style={{ fontSize: 9, color: PORTFOLIO_CAT_COLOR[ins.cat], fontWeight: 'bold' }}>
              ▸ {ins.cat.toUpperCase()}
            </span>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 8, padding: 6,
        background: '#000', color: '#6cf2ff',
        border: '1px solid #6cf2ff',
        fontSize: 10, fontFamily: 'monospace', lineHeight: 1.4,
      }}>
        Playing music since childhood. Picks up new instruments the way most
        devs pick up new frameworks — guitar is home base, drums for catharsis,
        synth for the late-night vaporwave sessions.
      </div>
    </div>
  );

  const speakingTab = (
    <div style={{ padding: 8 }}>
      <div style={{
        fontSize: 10, color: '#000', background: 'var(--ap-yellow)',
        border: '1px solid #000', padding: '3px 6px', marginBottom: 8,
        fontWeight: 'bold', letterSpacing: '0.06em', textAlign: 'center',
      }}>📡 BROADCAST LOG · TALKS &amp; COMMUNITY</div>
      <div className="w95-inset" style={{ background: '#000', padding: 8, marginBottom: 8 }}>
        {PORTFOLIO_TALKS.map((t, i) => (
          <div key={i} style={{
            display: 'flex', gap: 6, marginBottom: 4, alignItems: 'baseline',
            fontFamily: 'monospace', fontSize: 10,
          }}>
            <span style={{ color: 'var(--ap-yellow)', minWidth: 50 }}>[{t.role.toUpperCase()}]</span>
            <span style={{ color: '#fff', flex: 1 }}>{t.event}</span>
            <span style={{ color: 'var(--ap-cyan)' }}>· {t.city}</span>
          </div>
        ))}
      </div>
      <div style={{
        fontSize: 10, color: '#fff', background: '#000', border: '1px solid var(--ap-pink)',
        padding: 6, marginBottom: 8, fontFamily: 'monospace', lineHeight: 1.4,
      }}>
        Co-Lead of <span style={{ color: 'var(--ap-pink)', fontWeight: 'bold' }}>Indie Games Group India</span>,
        the Google-Play-supported community for Indian indie game devs.
      </div>
      <div style={{
        fontSize: 10, color: '#000', background: 'var(--ap-cyan)',
        border: '1px solid #000', padding: '3px 6px', marginBottom: 6,
        fontWeight: 'bold', letterSpacing: '0.06em', textAlign: 'center',
      }}>☎ CONTACT</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, marginBottom: 4 }}>
        <button className="w95-btn" style={{ padding: '4px 8px', fontSize: 10 }}
          onClick={() => window.open('https://www.linkedin.com/in/kushagranagar25/', '_blank', 'noopener')}>
          LinkedIn
        </button>
        <button className="w95-btn" style={{ padding: '4px 8px', fontSize: 10 }}
          onClick={() => window.open('mailto:kushagranagar25@gmail.com', '_blank')}>
          Email
        </button>
        <button className="w95-btn" style={{ padding: '4px 8px', fontSize: 10 }}
          onClick={() => window.open('https://web.xana.net/', '_blank', 'noopener')}>
          XANA Demo
        </button>
        <button className="w95-btn" style={{ padding: '4px 8px', fontSize: 10 }}
          onClick={() => window.open('https://www.astralproject.in/portfolio', '_blank', 'noopener')}>
          Astral Portfolio
        </button>
      </div>
      <div style={{
        fontSize: 10, fontFamily: 'monospace',
        background: '#000', color: 'var(--ap-yellow)',
        border: '1px solid #000', padding: 6, textAlign: 'center',
      }}>
        ✆ +91 87200 91043 &nbsp;·&nbsp; ✉ kushagranagar25@gmail.com
      </div>
    </div>
  );

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', height: '100%',
      background: 'var(--w95-bg)',
    }}>
      {header}
      <AccountTabBar tabs={tabs} active={tab} onChange={setTab} />
      <div className="w95-scroll" style={{ flex: 1, overflow: 'auto', background: 'var(--w95-bg)' }}>
        {tab === 'games'    && gamesTab}
        {tab === 'skills'   && skillsTab}
        {tab === 'music'    && musicTab}
        {tab === 'speaking' && speakingTab}
      </div>
    </div>
  );
}

Object.assign(window, {
  MusicPlayerContent, NewsletterContent, RecycleBinContent,
  PromoSidebarContent, VideoPopupContent, MarqueeContent,
  PortfolioContent, WelcomeContent,
});