/* COMMUNITY VOICES - testimonials wall + X embeds */

function Voices() {
  // Real handles + avatars. Text is representative of the community's voice
  // (exact reply text not all sourced) - kept on-brand, not attributed as exact quotes.
  const posts = [
    { author: '0xileri', handle: '@0xileri', time: 'founder', text: 'me and the gng planning to max out AI, web3 and nfts opportunities. delusional and confident asf.', big: true, color: 'green', img: '/assets/avatars/0xileri.jpg' },
    { author: 'webes gng', handle: '@webesgng', time: 'this week', text: 'inner-circle call ran $7 → $78. when the circle moves, the circle eats. tuff win.', big: false, color: 'purple', img: '/assets/avatars/webesgng.jpg' },
    { author: 'blexy', handle: '@blexy_cryptt', time: '1d', text: 'every win in this chat gets celebrated like it’s mine. that’s the whole tech.', big: false, color: 'green', img: '/assets/avatars/blexy_cryptt.jpg' },
    { author: 'subomi', handle: '@subomiscott', time: '1d', text: 'webes gng > MBA', big: false, color: 'yellow', img: '/assets/avatars/subomiscott.jpg' },
    { author: 'unify', handle: '@oxunify', time: '2d', text: 'came in to build. stayed for the gang. shipping is just easier when your people are watching.', big: false, color: 'purple', img: '/assets/avatars/oxunify.jpg' },
    { author: 'Idara', handle: '@IdaraAkpabio882', time: '2d', text: 'first to the tasks, every time. e pos.', big: true, color: 'yellow', img: '/assets/avatars/IdaraAkpabio882.jpg' },
    { author: 'vikktor', handle: '@vikktorrrre', time: '3d', text: 'dropped 33 creator agencies for the gang. we share the alpha, we don’t hoard it.', big: false, color: 'green', img: '/assets/avatars/vikktorrrre.jpg' },
    { author: 'poe', handle: '@poe_crypt', time: '4d', text: 'abeg, the energy here is unmatched. motionorr. all of it.', big: false, color: 'purple', img: '/assets/avatars/poe_crypt.jpg' },
  ];

  return (
    <section className="voices section-pad" id="voices">
      <div className="container">
        <Reveal className="voices-head">
          <span className="eyebrow">- the family speaks · community voices</span>
          <h2 className="h-display voices-title">
            Real chat.<br/>
            <span className="gradient-text italic">Real receipts.</span>
          </h2>
        </Reveal>

        <div className="voices-grid">
          {posts.map((p, i) => (
            <Reveal key={i} delay={(i % 4) + 1} className={`voice-card card ${p.big ? 'big' : ''}`}>
              <div className="voice-top">
                <Avatar img={p.img} name={p.author} className="voice-avatar" style={{ background: `hsl(${i*43}, 60%, 50%)` }} />
                <div>
                  <div className="voice-author">{p.author}</div>
                  <div className="voice-handle">{p.handle} · {p.time}</div>
                </div>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" className="voice-x">
                  <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity=".5"/>
                  <path d="M3 3l7 9-7 9h2l6-7.7L17 21h4l-7.5-9.7L20 3h-2l-5.7 7.3L7 3H3z" fill="currentColor" opacity=".7"/>
                </svg>
              </div>
              <p className="voice-text">
                {p.text}
              </p>
              {p.big && (
                <span className={`stamp ${p.color}`} style={{ alignSelf: 'flex-start', marginTop: 'auto' }}>tuff word</span>
              )}
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .voices-head {
          display: flex; flex-direction: column; gap: 12px;
          margin-bottom: 56px;
        }
        .voices-title { font-size: clamp(44px, 6.5vw, 90px); line-height: .9; }

        .voices-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: minmax(160px, auto);
          gap: 16px;
        }
        @media (max-width: 1000px) { .voices-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px)  { .voices-grid { grid-template-columns: 1fr; } }

        .voice-card {
          padding: 18px;
          display: flex; flex-direction: column; gap: 12px;
        }
        .voice-card.big {
          grid-column: span 2;
          grid-row: span 2;
        }
        @media (max-width: 1000px) {
          .voice-card.big { grid-column: span 2; grid-row: span 1; }
        }
        @media (max-width: 560px) {
          .voice-card.big { grid-column: span 1; }
        }
        .voice-top {
          display: flex; align-items: center; gap: 10px;
        }
        .voice-avatar {
          width: 36px; height: 36px; border-radius: 50%;
          display: grid; place-items: center;
          font-weight: 700;
          color: #fff;
          font-size: 14px;
        }
        .voice-author { font-weight: 700; font-size: 13px; }
        .voice-handle { font-size: 11px; color: var(--muted); }
        .voice-x { margin-left: auto; color: var(--muted); }
        .voice-text {
          color: var(--text);
          font-size: 14px;
          line-height: 1.55;
          font-family: var(--font-body);
        }
        .voice-card.big .voice-text {
          font-family: var(--font-display);
          font-size: clamp(20px, 2vw, 28px);
          font-weight: 500;
          line-height: 1.25;
          letter-spacing: -.01em;
        }
      `}</style>
    </section>
  );
}

window.Voices = Voices;