/* MOTION BOARD - opportunities & alpha */

function MotionBoard() {
  const items = [
    {
      type: 'agency',
      tag: 'Curated · @vikktorrrre',
      title: '33 creator agencies you should know',
      reward: null,
      info: 'Real list shared in the community',
      deadline: 'evergreen',
      live: true,
      hot: true,
      color: 'green',
      url: 'https://x.com/vikktorrrre/status/2054121666674823684',
    },
    {
      type: 'wl',
      tag: 'Collab · @0xileri',
      title: 'WL spots drop to the gang via collabs',
      reward: null,
      info: '2 GTD spots distributed (InkGenetics)',
      deadline: 'recurring',
      live: true,
      color: 'purple',
      url: 'https://x.com/0xileri/status/2060405826083312062',
    },
    {
      type: 'role',
      tag: 'Contributor',
      title: 'Volunteer roles open as the gang grows',
      reward: null,
      info: 'Early team started at ~7–8, expanding',
      deadline: 'open',
      live: true,
      hot: true,
      color: 'yellow',
      url: 'https://x.com/0xileri/status/2060385284433273264',
    },
    {
      type: 'pathway',
      tag: 'AI · Web3 · NFTs',
      title: 'Pick a lane (or all three) and start shipping',
      reward: null,
      info: 'The gang maxes every stack together',
      deadline: 'always',
      live: false,
      color: 'green',
    },
    {
      type: 'wl',
      tag: 'Community tasks',
      title: 'Tasks + giveaways drop in the chat',
      reward: null,
      info: 'Follow / repost / wallet submit mechanics',
      deadline: 'ongoing',
      live: true,
      color: 'purple',
    },
    {
      type: 'role',
      tag: 'Join the motion',
      title: 'More drops loading - get in the gang first',
      reward: null,
      info: 'New opportunities posted regularly',
      deadline: 'soon',
      live: false,
      color: 'yellow',
    },
  ];

  const [filter, setFilter] = useState('all');
  const filtered = filter === 'all' ? items : items.filter(i => i.type === filter);

  return (
    <section className="motion section-pad" id="motion">
      <div className="container">
        <Reveal className="motion-head">
          <div>
            <span className="eyebrow">- motion board · live edge</span>
            <h2 className="h-display motion-title">
              The edge.<br/>
              <span className="gradient-text italic">Always fresh.</span>
            </h2>
          </div>
          <div className="motion-filters">
            {['all', 'agency', 'wl', 'role', 'pathway'].map(f => (
              <button key={f} className={`f ${filter === f ? 'on' : ''} hot`} onClick={() => setFilter(f)}>
                {f}
              </button>
            ))}
          </div>
        </Reveal>

        <div className="motion-grid">
          {filtered.map((it, i) => (
            <Reveal key={i} delay={(i % 3) + 1} className={`motion-card card ${it.hot ? 'is-hot' : ''}`}>
              <div className="motion-top">
                <span className={`type-pill ${it.color}`}>
                  {it.live && <span className="live-dot"></span>}
                  {it.type}
                </span>
                <span className="motion-tag">{it.tag}</span>
              </div>
              <h3 className="motion-title-s">{it.title}</h3>
              <div className="motion-info">{it.info || ''}</div>
              <div className="motion-bottom">
                {it.reward != null ? (
                  <div className="motion-reward">
                    <span className="r-num">$<CountUp to={it.reward}/></span>
                    <span className="r-curr">{it.currency}</span>
                  </div>
                ) : (
                  <div className="motion-reward open">- open -</div>
                )}
                <div className="motion-deadline">{it.deadline}</div>
              </div>
              <a className="motion-cta hot" href={it.url || 'https://discord.com/invite/NG5jGQTEM'} target={it.url ? '_blank' : undefined} rel={it.url ? 'noopener noreferrer' : undefined}>
                <span>{it.url ? 'See it' : 'Take it to Discord'}</span>
                <Arrow/>
              </a>
              {it.hot && <div className="hot-flame">🔥</div>}
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .motion-head {
          display: flex; justify-content: space-between; align-items: flex-end;
          margin-bottom: 56px; gap: 32px; flex-wrap: wrap;
        }
        .motion-title { font-size: clamp(44px, 6.5vw, 90px); line-height: .92; }
        .motion-filters {
          display: flex; gap: 4px; padding: 4px;
          background: var(--w-03);
          border: 1px solid var(--w-06);
          border-radius: 999px;
        }
        .motion-filters .f {
          padding: 8px 16px; border-radius: 999px;
          font-size: 12px; letter-spacing: .12em;
          text-transform: uppercase;
          color: var(--muted); font-weight: 600;
          transition: background .25s, color .25s;
        }
        .motion-filters .f.on {
          background: var(--text); color: var(--stage);
        }
        .motion-filters .f:hover:not(.on) { color: var(--text); }

        .motion-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
        }
        @media (max-width: 1000px) { .motion-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px)  { .motion-grid { grid-template-columns: 1fr; } }

        .motion-card {
          padding: 24px;
          display: flex; flex-direction: column; gap: 14px;
          position: relative;
        }
        .motion-card.is-hot {
          border-color: rgba(255,199,0,.25);
        }
        .hot-flame {
          position: absolute; top: 16px; right: 16px;
          font-size: 16px;
          filter: drop-shadow(0 0 8px rgba(255,199,0,.6));
        }
        .motion-top {
          display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        }
        .type-pill {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 4px 10px;
          border-radius: 999px;
          background: var(--w-05);
          font-size: 11px;
          letter-spacing: .14em;
          text-transform: uppercase;
          font-weight: 700;
        }
        .type-pill.green { color: var(--green); background: rgba(22,224,122,.1); }
        .type-pill.purple { color: var(--purple); background: rgba(139,92,246,.12); }
        .type-pill.yellow { color: var(--warning); background: rgba(255,199,0,.16); }
        [data-theme="dark"] .type-pill.purple { color: #b794ff; }
        [data-theme="dark"] .type-pill.yellow { color: var(--yellow); background: rgba(255,199,0,.12); }
        .live-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: currentColor;
          box-shadow: 0 0 8px currentColor;
          animation: heroDot 1.6s ease-in-out infinite;
        }
        .motion-tag {
          font-size: 11px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--muted);
        }

        .motion-title-s {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 19px;
          line-height: 1.25;
          color: var(--text);
          letter-spacing: -.005em;
          margin: 0;
        }
        .motion-info {
          font-size: 13px; color: var(--muted);
          margin-top: -4px;
          min-height: 1.5em;
        }
        .motion-bottom {
          display: flex; justify-content: space-between; align-items: baseline;
          padding-top: 8px;
          border-top: 1px dashed var(--ln-08);
        }
        .motion-reward {
          display: flex; align-items: baseline; gap: 6px;
          font-family: var(--font-display);
        }
        .r-num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
        .r-curr { font-size: 11px; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
        .motion-reward.open { color: var(--muted); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
        .motion-deadline {
          font-size: 11px; color: var(--muted);
          letter-spacing: .14em; text-transform: uppercase;
        }

        .motion-cta {
          margin-top: 6px;
          display: inline-flex; align-items: center; justify-content: space-between;
          padding: 12px 16px;
          border-radius: var(--r-md);
          background: var(--w-04);
          border: 1px solid var(--w-06);
          color: var(--text);
          font-weight: 600;
          font-size: 13px;
          transition: background .3s, border-color .3s, transform .3s var(--ease-out);
        }
        .motion-card:hover .motion-cta {
          background: var(--yellow);
          color: #0a0711;
          border-color: var(--yellow);
        }
      `}</style>
    </section>
  );
}

window.MotionBoard = MotionBoard;