/* global React */
// Partner data + 3D orbit hero scene

const PARTNERS = [
  // FEATURED
  { id: 'academy', name: 'Key Academy Society', glyph: 'KA', cat: 'Community', tone: 'ember', size: 'featured',
    desc: 'A free education community I created for people who want to understand crypto security and self-custody without being sold a dream.',
    tag: 'Created by YStan', status: 'Free community', url: 'https://discord.com/invite/dxnnJm8pha', accent: 'community',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=discord.com',
    logoAlt: 'Discord logo',
    companyInfo: 'Key Academy Society is my free Discord community for crypto education, security basics, and self-custody discussions. It is a community I created, not a sponsored project or investment recommendation.' },
  { id: 'tangem', name: 'Tangem', glyph: 'TGM', cat: 'Wallets', tone: 'green', size: 'featured',
    desc: 'Self-custody hardware that fits in your wallet. This is an official wallet collaboration, not a crypto coin project.',
    tag: 'Tangem Ambassador', status: 'Hardware wallet', url: 'https://tangem.com/en/pricing/?promocode=YSTAN1&utm_source=tangem-rp&utm_medium=affiliate&utm_campaign=YSTAN1', accent: 'wallet',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=tangem.com',
    logoAlt: 'Tangem logo',
    companyInfo: 'Tangem makes hardware wallets for self-custody. The link sends you to Tangem, where you can view their wallet products and use my ambassador link/code if you choose.' },
  { id: 'onekey', name: 'OneKey', glyph: 'ONK', cat: 'Wallets', tone: 'blue', size: 'featured',
    desc: 'Open-source hardware and software wallet for people who want more control over their keys.',
    tag: 'OneKey Affiliate', status: 'Hardware wallet', url: 'https://onekey.so/?ref=ystan', accent: 'wallet',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=onekey.so',
    logoAlt: 'OneKey logo',
    companyInfo: 'OneKey makes open-source hardware and software wallets. The link sends you to OneKey so you can inspect the wallet ecosystem before deciding anything.' },
  { id: 'x', name: 'X / Twitter', glyph: 'X', cat: 'Content', tone: 'ink', size: 'featured',
    desc: 'Main channel for posts, threads, updates, and the fastest way to follow what I am building.',
    tag: '@YStan__', status: 'Main channel', url: 'https://x.com/YStan__', accent: 'social',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=x.com',
    logoAlt: 'X logo',
    companyInfo: 'X is the social platform where I post my main updates, threads, and creator content. The link sends you to my @YStan__ profile.' },

  // STANDARD
  { id: 'cmc', name: 'CoinMarketCap', glyph: 'CMC', cat: 'Community', tone: 'gold', size: 'std',
    desc: 'My creator profile on CoinMarketCap for educational posts and market context.',
    tag: 'CMC affiliate', status: 'Creator profile', url: 'https://coinmarketcap.com/community/profile/YStan_',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=coinmarketcap.com',
    logoAlt: 'CoinMarketCap logo',
    companyInfo: 'CoinMarketCap is a crypto market data and community platform. This link sends you to my creator profile there, not to an investment recommendation.' },
  { id: 'bitget', name: 'Bitget', glyph: 'BG', cat: 'Exchange', tone: 'blue', size: 'std',
    desc: 'Exchange link for people who choose to use Bitget through my referral.',
    tag: 'Referral link', status: 'Exchange', url: 'https://www.bitget.com/referral/register?clacCode=YSTAN',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=bitget.com',
    logoAlt: 'Bitget logo',
    companyInfo: 'Bitget is a crypto exchange. This referral link sends you to Bitget registration; it is not a recommendation to trade anything.' },
  { id: 'studio', name: 'Studio.Y1', glyph: 'Y1', cat: 'Content', tone: 'red', size: 'std',
    desc: 'Long-form YouTube channel for crypto education, security, wallets, and research.',
    tag: 'Created by YStan', status: 'YouTube channel', url: 'https://www.youtube.com/@Studio.Y1',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=youtube.com',
    logoAlt: 'YouTube logo',
    companyInfo: 'Studio.Y1 is my YouTube channel for long-form education, security content, wallet explainers, and research.' },
  { id: 'telegram', name: 'Telegram', glyph: 'TG', cat: 'Content', tone: 'blue', size: 'std',
    desc: 'New Telegram channel for direct updates, community posts, and fast announcements.',
    tag: 'Telegram channel', status: 'Channel', url: 'https://t.me/+jf86fbiXD4JhZDM0',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=telegram.org',
    logoAlt: 'Telegram logo',
    companyInfo: 'Telegram is a messaging and broadcast platform. This link sends you to my Telegram channel invite.' },

  // SLIM
  { id: 'kick', name: 'Kick', glyph: 'KCK', cat: 'Content', tone: 'red', size: 'slim',
    desc: '', tag: 'Live streams', status: 'Channel', url: 'https://kick.com/ystan1',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=kick.com',
    logoAlt: 'Kick logo',
    companyInfo: 'Kick is a livestreaming platform. This link sends you to my live channel.' },
  { id: 'discord', name: 'Discord', glyph: 'DC', cat: 'Community', tone: 'blue', size: 'slim',
    desc: '', tag: 'Key Academy Society', status: 'Community', url: 'https://discord.com/invite/dxnnJm8pha',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=discord.com',
    logoAlt: 'Discord logo',
    companyInfo: 'Discord is the platform hosting Key Academy Society, my free community. The invite takes you into the server.' },
  { id: 'neural', name: 'Neural Key', glyph: 'NK', cat: 'Created', tone: 'ember', size: 'slim',
    desc: '', tag: 'Created by YStan', status: 'Building', url: 'https://neuralkeyofficial.netlify.app/',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=neuralkeyofficial.netlify.app',
    logoAlt: 'Neural Key logo',
    companyInfo: 'Neural Key is a personal project I am building publicly. It is included here because I created it, not because it is an investment.' },
  { id: 'guide', name: 'Crypto Security Guide', glyph: 'CSG', cat: 'Created', tone: 'gold', size: 'slim',
    desc: '', tag: 'Created by YStan', status: 'Guide', url: 'https://radustan6.gumroad.com/l/crypto-simplified',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=gumroad.com',
    logoAlt: 'Gumroad logo',
    companyInfo: 'Crypto Security Guide is my educational guide about practical security and self-custody. The link sends you to Gumroad to view the guide details.' },
  { id: 'gaming', name: 'YStan Gaming', glyph: 'YG', cat: 'Content', tone: 'red', size: 'slim',
    desc: '', tag: 'Created by YStan', status: 'YouTube channel', url: 'https://youtube.com/@y.stangaming?si=-9YB2qdSmas2wAUT',
    logo: 'https://www.google.com/s2/favicons?sz=128&domain=youtube.com',
    logoAlt: 'YouTube logo',
    companyInfo: 'YStan Gaming is my gaming YouTube channel. The link sends you to that channel.' },
];

const FILTERS = [
  { id: 'all', label: 'All' },
  { id: 'Community', label: 'Community' },
  { id: 'Wallets', label: 'Wallets' },
  { id: 'Exchange', label: 'Exchange' },
  { id: 'Content', label: 'Content' },
  { id: 'Created', label: 'Created' },
];

// ============== 3D ORBIT HERO SCENE ==============
function OrbitScene({ paused, showConsole = true }) {
  // Nodes arranged on a sphere at varying angles.
  const R = 230;
  const nodes = [
    { glyph: 'TGM', label: 'Tangem', tone: 'green', logo: 'https://www.google.com/s2/favicons?sz=128&domain=tangem.com', az: 0, el: 0 },
    { glyph: 'ONK', label: 'OneKey', tone: 'blue', logo: 'https://www.google.com/s2/favicons?sz=128&domain=onekey.so', az: 40, el: 20 },
    { glyph: 'X', label: 'X', tone: 'ink', logo: 'https://www.google.com/s2/favicons?sz=128&domain=x.com', az: 80, el: -15 },
    { glyph: 'YT', label: 'YouTube', tone: 'red', logo: 'https://www.google.com/s2/favicons?sz=128&domain=youtube.com', az: 120, el: 10 },
    { glyph: 'TG', label: 'Telegram', tone: 'blue', logo: 'https://www.google.com/s2/favicons?sz=128&domain=telegram.org', az: 160, el: 25 },
    { glyph: 'CMC', label: 'CMC', tone: 'gold', logo: 'https://www.google.com/s2/favicons?sz=128&domain=coinmarketcap.com', az: 200, el: -10 },
    { glyph: 'BG', label: 'Bitget', tone: 'blue', logo: 'https://www.google.com/s2/favicons?sz=128&domain=bitget.com', az: 240, el: 25 },
    { glyph: 'KCK', label: 'Kick', tone: 'red', logo: 'https://www.google.com/s2/favicons?sz=128&domain=kick.com', az: 280, el: -20 },
    { glyph: 'DC', label: 'Discord', tone: 'blue', logo: 'https://www.google.com/s2/favicons?sz=128&domain=discord.com', az: 320, el: 15 },
  ];

  return (
    <div className="scene">
      <svg className="scene-svg" viewBox="0 0 600 640" preserveAspectRatio="none">
        <defs>
          <radialGradient id="aura" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(255,106,61,0.35)" />
            <stop offset="100%" stopColor="rgba(255,106,61,0)" />
          </radialGradient>
          <linearGradient id="ringg" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="rgba(255,106,61,0)" />
            <stop offset="0.5" stopColor="rgba(255,106,61,0.5)" />
            <stop offset="1" stopColor="rgba(92,200,255,0)" />
          </linearGradient>
        </defs>
        <circle cx="300" cy="320" r="240" fill="url(#aura)" />
        <ellipse cx="300" cy="320" rx="280" ry="50" fill="none" stroke="url(#ringg)" strokeWidth="1" />
        <ellipse cx="300" cy="320" rx="220" ry="110" fill="none" stroke="rgba(255,230,200,0.06)" strokeWidth="1" strokeDasharray="2 6" />
        <ellipse cx="300" cy="320" rx="160" ry="60" fill="none" stroke="rgba(92,200,255,0.12)" strokeWidth="1" />
        {/* corner reticles */}
        <g stroke="rgba(255,230,200,0.18)" strokeWidth="1" fill="none">
          <path d="M20 20 L20 50 M20 20 L50 20" />
          <path d="M580 20 L580 50 M580 20 L550 20" />
          <path d="M20 620 L20 590 M20 620 L50 620" />
          <path d="M580 620 L580 590 M580 620 L550 620" />
        </g>
        <text x="20" y="14" fontFamily="JetBrains Mono" fontSize="9" fill="#6d6358" letterSpacing="2">CHANNEL · YSTAN.ORBIT.001</text>
        <text x="580" y="14" textAnchor="end" fontFamily="JetBrains Mono" fontSize="9" fill="#6d6358" letterSpacing="2">REV 36.000s</text>
      </svg>

      <div className={"orbit-stage" + (paused ? " paused" : "")}>
        <div className="sigil">
          <div className="sigil-ring" />
          <div className="sigil-ring r2" />
          <div className="sigil-ring r3" />
          <div className="sigil-core" />
          <div className="sigil-glyph">Y</div>
        </div>

        {nodes.map((n, i) => {
          // position via translate3d
          const azRad = (n.az * Math.PI) / 180;
          const elRad = (n.el * Math.PI) / 180;
          const x = R * Math.cos(elRad) * Math.cos(azRad);
          const z = R * Math.cos(elRad) * Math.sin(azRad);
          const y = R * Math.sin(elRad);
          return (
            <div key={i} className="node"
                 style={{ transform: `translate3d(${x}px, ${y}px, ${z}px) translate(-50%, -50%)` }}>
              <div className="node-card" data-tone={n.tone}
                   style={{ transform: `rotateY(${-n.az}deg)` }}>
                <div className="nc-dot" />
                <img className="nc-logo" src={n.logo} alt="" onError={(e) => { e.currentTarget.remove(); }} />
                <div className="nc-glyph">{n.glyph}</div>
                <div className="nc-label">{n.label}</div>
              </div>
            </div>
          );
        })}
      </div>

      <div className="specs-card">
        <div className="row"><span className="pip" />Curated: {PARTNERS.length} doors</div>
        <div className="row"><span className="pip" />Region: Global</div>
        <div className="row"><span className="pip" />Stack: Self-Custody</div>
      </div>

      {showConsole && (
        <div className="live-console">
          <h4>// Hub Index</h4>
          <div className="row"><span className="k">Academy</span><span className="v up">Free community</span></div>
          <div className="row"><span className="k">X</span><span className="v">Main channel</span></div>
          <div className="row"><span className="k">Wallets</span><span className="v up">Tangem / OneKey</span></div>
          <div className="row"><span className="k">Guide</span><span className="v">Security resource</span></div>
          <div className="row"><span className="k">Links</span><span className="v">Direct destinations</span></div>
        </div>
      )}
    </div>
  );
}

window.PARTNERS = PARTNERS;
window.FILTERS = FILTERS;
window.OrbitScene = OrbitScene;