/* CREATORS HUB - flip cards */

function Creators() {
  const creators = [
    {
      handle: '@0xileri',
      name: '0xileri',
      role: 'Founder · opens the door',
      city: 'West Africa',
      hue: 150,
      bio: 'Dad of the gang.',
      stat: 'founder',
      stack: ['Vision', 'Alpha', 'Motion'],
      img: '/assets/avatars/0xileri.jpg',
    },
    {
      handle: '@blexy_cryptt',
      name: 'blexy',
      role: 'Co-founder · community',
      city: 'West Africa',
      hue: 280,
      bio: 'Co-founder energy. Keeps the chat warm and the wins loud.',
      stat: 'core team',
      stack: ['Community', 'Web3', 'NFTs'],
      img: '/assets/avatars/blexy_cryptt.jpg',
    },
    {
      handle: '@IdaraAkpabio882',
      name: 'Idara',
      role: 'Artist',
      city: 'West Africa',
      hue: 40,
      bio: 'Artist shipping into community drops. Always first to the tasks.',
      stat: 'active',
      stack: ['Art', 'Design', 'NFTs'],
      img: '/assets/avatars/IdaraAkpabio882.jpg',
    },
    {
      handle: '@subomiscott',
      name: 'subomi',
      role: 'Writer · moderator',
      city: 'West Africa',
      hue: 320,
      bio: 'Web3 writer and moderator. Keeps the signal high and the words sharp.',
      stat: 'moderator',
      stack: ['Writing', 'Web3', 'Comms'],
      img: '/assets/avatars/subomiscott.jpg',
    },
    {
      handle: '@poe_crypt',
      name: 'poe',
      role: 'Research · design',
      city: 'West Africa',
      hue: 100,
      bio: 'Research, writing, design. The one who finds it before it trends.',
      stat: 'research',
      stack: ['Research', 'Design', 'Writing'],
      img: '/assets/avatars/poe_crypt.jpg',
    },
    {
      handle: '@onegeex',
      name: 'onegeeX',
      role: 'alpha caller',
      city: 'West Africa',
      hue: 69,
      bio: 'drops the alpha, calls the motion, gets everybody eating',
      stat: 'alpha caller',
      stack: ['degen', 'art collector',],
      img: '/assets/avatars/onegeex.jpg',
    },
    {
      handle: '@kabnfa',
      name: 'kab',
      role: 'alpha caller, writer',
      city: 'West Africa',
      hue:230,
      bio: 'writing, ct gambler',
      stat: 'predictor',
      stack: ['iWrite', 'nfts, gambler'],
      img: '/assets/avatars/kabnfa.jpg',
    },
  
    {
      handle: '@_ValeriusX',
      name: 'VΛLΣRIUS',
      role: 'prompt engineer', 
      city: 'West Africa',
      hue:130,
      bio: 'thought leader',
      stat: 'SMM',
      stack: [' ai enthusiast', 'front end dev',],
      img: '/assets/avatars/valerius.jpg',
    },
  ];

  return (
    <section className="creators section-pad" id="creators">
      <div className="light-pool purple drift-a" style={{ width: 500, height: 500, left: '70%', top: '10%', opacity: .3 }}/>
      <div className="container">
        <Reveal className="creators-head">
          <div>
            <span className="eyebrow">- the faces · creators hub</span>
            <h2 className="h-display creators-title">
              The gang,<br/>
              <span className="gradient-text italic">in flesh.</span>
            </h2>
          </div>
          <p className="creators-lede">
            The gang. Hover to flip - see the work, the role, the stack.
            One of these could be you next month.
          </p>
        </Reveal>

        <div className="creators-grid">
          {creators.map((c, i) => (
            <Reveal key={i} delay={(i % 3) + 1} className="flip-card-wrap">
              <div className="flip-card hot">
                <div className="flip-inner">
                  <div className="flip-face flip-front"
                       style={{
                         background: `radial-gradient(120% 80% at 50% 0%, hsla(${c.hue},70%,50%,.25), transparent 70%), linear-gradient(180deg, var(--w-04), var(--w-01))`,
                       }}>
                    <div className="card-corner-tl">
                      <span className="eyebrow">creator · {String(i+1).padStart(2,'0')}</span>
                    </div>
                    <div className="card-corner-tr">
                      <span className="stat-pill" style={{ '--ph': c.hue, borderColor: `hsla(${c.hue},70%,55%,.5)` }}>
                        {c.stat}
                      </span>
                    </div>
                    <div className="flip-portrait">
                      {c.img ? (
                        <img src={c.img} alt={c.name} loading="lazy"
                          onError={(e) => { e.currentTarget.style.display = 'none'; }}
                          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
                      ) : (
                      <svg viewBox="0 0 200 240" width="100%" height="100%">
                        <defs>
                          <radialGradient id={`pg${i}`} cx="50%" cy="40%" r="70%">
                            <stop offset="0%" stopColor={`hsl(${c.hue},80%,60%)`} stopOpacity=".7"/>
                            <stop offset="60%" stopColor={`hsl(${c.hue},80%,40%)`} stopOpacity=".15"/>
                            <stop offset="100%" stopColor="transparent"/>
                          </radialGradient>
                        </defs>
                        <rect width="200" height="240" fill="transparent"/>
                        <circle cx="100" cy="100" r="80" fill={`url(#pg${i})`}/>
                        {/* head/silhouette */}
                        <path d={`M 100 60 Q 70 60 65 100 Q 60 130 75 145 L 75 165 Q 30 175 25 240 L 175 240 Q 170 175 125 165 L 125 145 Q 140 130 135 100 Q 130 60 100 60 Z`}
                              fill="rgba(10,7,17,.85)" stroke={`hsla(${c.hue},80%,60%,.5)`} strokeWidth="1"/>
                        {/* glowing eyes */}
                        <ellipse cx="86" cy="105" rx="5" ry="2.5" fill="#FFD60A" opacity=".9">
                          <animate attributeName="ry" values="2.5;1;2.5" dur="3s" repeatCount="indefinite"/>
                        </ellipse>
                        <ellipse cx="114" cy="105" rx="5" ry="2.5" fill="#FFD60A" opacity=".9">
                          <animate attributeName="ry" values="2.5;1;2.5" dur="3s" repeatCount="indefinite" begin=".2s"/>
                        </ellipse>
                      </svg>
                      )}
                    </div>
                    <div className="flip-front-bottom">
                      <div className="creator-handle">{c.handle}</div>
                      <div className="creator-name">{c.name}</div>
                      <div className="creator-role">{c.role}</div>
                    </div>
                  </div>

                  <div className="flip-face flip-back"
                       style={{ '--hue': c.hue }}>
                    <div className="card-corner-tl">
                      <span className="eyebrow">lore</span>
                    </div>
                    <div className="flip-back-inner">
                      <p className="back-bio">"{c.bio}"</p>
                      <div className="back-city">{c.city}</div>
                      <div className="back-stack">
                        {c.stack.map(s => <span key={s} className="chip">{s}</span>)}
                      </div>
                      <a className="back-cta" href={`https://x.com/${c.handle.replace('@','')}`} target="_blank" rel="noopener noreferrer">View on X <Arrow/></a>
                    </div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="creators-cta">
          <p>Think you've got the motion? <span className="stamp green">we eating</span></p>
          <a href="#join" className="btn btn-ghost hot">Submit your work <Arrow/></a>
        </Reveal>
      </div>

      <style>{`
        .creators { position: relative; }
        .creators-head {
          display: grid; grid-template-columns: 1.2fr 1fr;
          gap: 40px; margin-bottom: 64px; align-items: end;
        }
        .creators-title { font-size: clamp(48px, 7vw, 100px); line-height: .9; }
        .creators-lede { color: var(--muted); font-size: 16px; max-width: 420px; }
        @media (max-width: 800px) {
          .creators-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
        }

        .creators-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
          gap: 18px;
          justify-content: center;
        }
        @media (max-width: 1000px) { .creators-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
        @media (max-width: 600px)  { .creators-grid { grid-template-columns: repeat(2, 1fr); } }

        .flip-card-wrap { perspective: 1400px; }
        .flip-card {
          position: relative;
          width: 100%;
          aspect-ratio: 3 / 4;
          cursor: none;
        }
        .flip-inner {
          position: relative;
          width: 100%; height: 100%;
          transition: transform .85s var(--ease-out);
          transform-style: preserve-3d;
        }
        .flip-card:hover .flip-inner { transform: rotateY(180deg); }
        .flip-face {
          position: absolute; inset: 0;
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          border-radius: var(--r-lg);
          padding: 18px;
          border: 1px solid var(--ln-08);
          overflow: hidden;
          display: flex; flex-direction: column;
        }
        .flip-back {
          transform: rotateY(180deg);
          background: linear-gradient(160deg, hsla(var(--hue),75%,86%,.7), var(--card-bg));
        }
        [data-theme="dark"] .flip-back {
          background: linear-gradient(160deg, hsla(var(--hue),60%,18%,.7), rgba(10,7,17,.95));
        }

        .card-corner-tl, .card-corner-tr {
          position: absolute;
          top: 14px;
          font-size: 10px;
        }
        .card-corner-tl { left: 16px; }
        .card-corner-tr { right: 16px; }
        .stat-pill {
          display: inline-block;
          padding: 4px 10px;
          border-radius: 999px;
          border: 1px solid;
          background: var(--glass-strong);
          font-size: 11px;
          font-weight: 600;
          color: hsl(var(--ph,260),65%,38%);
        }
        [data-theme="dark"] .stat-pill { color: hsl(var(--ph,260),80%,75%); }
        .flip-portrait {
          flex: 1;
          display: grid; place-items: center;
          padding: 24px 0 12px;
        }
        .flip-portrait svg { max-width: 70%; height: auto; }
        .flip-front-bottom {
          border-top: 1px dashed var(--ln-1);
          padding-top: 14px;
        }
        .creator-handle {
          font-size: 11px; color: var(--muted); letter-spacing: .14em;
          text-transform: uppercase;
        }
        .creator-name {
          font-family: var(--font-display); font-weight: 700;
          font-size: 22px; letter-spacing: -.01em;
          margin: 2px 0;
        }
        .creator-role { color: var(--muted); font-size: 13px; }

        .flip-back-inner {
          flex: 1; display: flex; flex-direction: column;
          justify-content: center; gap: 14px;
          padding: 16px 4px 0;
        }
        .back-bio {
          font-family: var(--font-display);
          font-weight: 500;
          font-size: 18px;
          line-height: 1.35;
          color: var(--text);
        }
        .back-city { font-size: 12px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
        .back-stack { display: flex; gap: 6px; flex-wrap: wrap; }
        .chip {
          display: inline-block;
          padding: 4px 10px;
          border-radius: 999px;
          background: var(--w-06);
          border: 1px solid var(--w-08);
          font-size: 11px;
          color: var(--text);
        }
        .back-cta {
          margin-top: auto;
          display: inline-flex; align-items: center; gap: 8px;
          color: #9A6B00;
          font-weight: 600; font-size: 14px;
          padding: 12px 14px;
          border-radius: 999px;
          background: rgba(255,199,0,.16);
          border: 1px solid rgba(184,120,10,.4);
          align-self: flex-start;
        }
        .back-cta:hover { background: rgba(255,199,0,.26); }
        [data-theme="dark"] .back-cta {
          color: var(--yellow);
          background: rgba(255,199,0,.08);
          border-color: rgba(255,199,0,.3);
        }
        [data-theme="dark"] .back-cta:hover { background: rgba(255,199,0,.16); }

        .creators-cta {
          margin-top: 56px;
          display: flex; justify-content: space-between; align-items: center;
          gap: 20px; flex-wrap: wrap;
        }
        .creators-cta p {
          font-family: var(--font-display);
          font-size: clamp(20px, 2vw, 26px);
          color: var(--text); display: inline-flex; align-items: center; gap: 14px;
        }
      `}</style>
    </section>
  );
}

window.Creators = Creators;