/* FOOTER - HQ sign-off */

function Footer() {
  const X_URL = 'https://x.com/webesgng';
  const DISCORD_URL = 'https://discord.com/invite/NG5jGQTEM';
  const ILERI_URL = 'https://x.com/0xileri';
  const BLEXY_URL = 'https://x.com/blexy_cryptt';

  const cols = [
    {
      title: 'The HQ',
      links: [
        { label: 'Home', url: '#top' },
        { label: 'The GNG', url: '#lore' },
        { label: 'Win Wall', url: '#wins' },
        { label: 'Creators', url: '#creators' },
        { label: 'Motion Board', url: '#motion' },
        { label: 'Gang Map', url: '#map' },
      ],
    },
    {
      title: 'Community',
      links: [
        { label: 'X · @webesgng', url: X_URL, ext: true },
        { label: 'Discord', url: DISCORD_URL, ext: true },
      ],
    },
    {
      title: 'The team',
      links: [
        { label: '@0xileri', url: ILERI_URL, ext: true },
        { label: '@blexy_cryptt', url: BLEXY_URL, ext: true },
      ],
    },
  ];

  return (
    <footer className="foot">
      <div className="light-pool green" style={{ width: 700, height: 700, left: '-15%', top: '-20%', opacity: .2 }}/>
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="foot-logo-row">
              <img style={{ width: 56, height: 56, borderRadius: '50%', objectFit: 'cover' }} src="/assets/avatars/webesgng.jpg" alt="Webes GNG" />
              <div>
                <div className="foot-wm">WEBES <span className="g">GNG</span></div>
                <div className="foot-tag">Winners & motionorr - est. yktv</div>
              </div>
            </div>
            <p className="foot-pitch">
              We pull each other up. When one of us eats, all of us eat.
              The door is always open.
            </p>
            <div className="foot-pulse">
              <span className="dot"></span>
              <span>HQ pulse · <strong><CountUp to={427}/></strong> in motion</span>
            </div>
          </div>

          <div className="foot-cols">
            {cols.map(c => (
              <div key={c.title} className="foot-col">
                <div className="eyebrow">{c.title}</div>
                <ul>
                  {c.links.map(l => (
                    <li key={l.label}>
                      <a href={l.url} className="hot"
                         {...(l.ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                        {l.label}{l.ext ? ' ↗' : ''}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="foot-stamp-row">
          <span className="stamp green">see you in motion</span>
          <span className="stamp">yktv</span>
          <span className="stamp purple">e pos</span>
          <span className="stamp green">tuff win</span>
        </div>

        <div className="foot-bottom">
          <div>© 2026 Webes GNG · all the gang's wins.</div>
          <div className="foot-channels">
            <a href="https://x.com/webesgng" className="hot" target="_blank" rel="noopener noreferrer" aria-label="Webes GNG on X">𝕏</a>
            <a href="https://discord.com/invite/NG5jGQTEM" className="hot" target="_blank" rel="noopener noreferrer" aria-label="Webes GNG Discord">◆</a>
          </div>
          <div className="foot-lagos">Built in Lagos · maxed everywhere</div>
        </div>
      </div>

      <style>{`
        .foot {
          position: relative;
          padding: 80px 0 40px;
          border-top: 1px solid var(--ln-06);
          background: linear-gradient(180deg, transparent, rgba(139,92,246,.04));
          overflow: hidden;
        }

        .foot-top {
          display: grid;
          grid-template-columns: 1.3fr 2fr;
          gap: 48px;
          padding-bottom: 48px;
          border-bottom: 1px dashed var(--ln-08);
        }
        @media (max-width: 900px) {
          .foot-top { grid-template-columns: 1fr; gap: 36px; }
        }

        .foot-logo-row {
          display: flex; align-items: center; gap: 14px;
          margin-bottom: 18px;
        }
        .foot-wm {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 20px;
          letter-spacing: .04em;
        }
        .foot-wm .g {
          background: var(--grad); -webkit-background-clip: text; background-clip: text;
          color: transparent; font-weight: 700;
        }
        .foot-tag {
          font-size: 12px;
          color: var(--muted);
          margin-top: 2px;
          letter-spacing: .04em;
        }
        .foot-pitch {
          color: var(--muted);
          font-size: 14px;
          line-height: 1.55;
          max-width: 360px;
          margin: 0 0 20px;
        }
        .foot-pulse {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 8px 14px;
          background: rgba(22,224,122,.06);
          border: 1px solid rgba(22,224,122,.2);
          border-radius: 999px;
          font-size: 12px;
          color: var(--muted);
        }
        .foot-pulse strong { color: var(--text); font-variant-numeric: tabular-nums; }
        .foot-pulse .dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: var(--green);
          box-shadow: 0 0 10px var(--green);
          animation: heroDot 1.6s ease-in-out infinite;
        }

        .foot-cols {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
        }
        @media (max-width: 600px) {
          .foot-cols { grid-template-columns: repeat(2, 1fr); }
        }
        .foot-col .eyebrow { margin-bottom: 14px; }
        .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
        .foot-col a {
          color: var(--text);
          font-size: 14px;
          transition: color .25s;
          display: inline-block;
        }
        .foot-col a:hover { color: var(--green); }

        .foot-stamp-row {
          display: flex; gap: 14px; flex-wrap: wrap;
          padding: 28px 0;
          align-items: center;
        }

        .foot-bottom {
          display: flex; justify-content: space-between; align-items: center;
          gap: 24px;
          padding-top: 24px;
          border-top: 1px dashed var(--ln-08);
          font-size: 12px;
          color: var(--muted);
          flex-wrap: wrap;
        }
        .foot-channels { display: flex; gap: 12px; }
        .foot-channels a {
          width: 32px; height: 32px;
          border-radius: 50%;
          display: grid; place-items: center;
          background: var(--w-04);
          border: 1px solid var(--w-06);
          transition: background .25s, border-color .25s;
          color: var(--text);
        }
        .foot-channels a:hover {
          background: var(--grad);
          border-color: transparent;
        }
        .foot-lagos { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;