function FiverrReviews() {
  const reviews = [
    { q: "Not only did he meet my exact needs, he went way above and beyond! His editing skills are great and he's very open to constructive criticism.", n: 'karimss1', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Tawhid is incredibly intelligent and an obvious expert in his field. He would be an asset on any size project! Exceptional service.", n: 'rempelrt', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Tawhid is a true gem. Every time we work together, he delivers exactly what I need — clean, creative, and professional edits.", n: 'rempelrt', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "He's become my go-to editor. Consistent, creative, and just really easy to work with.", n: 'rempelrt', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Tawhid did an excellent job, found a style that works perfectly for our company — great attention to detail.", n: 'miloszkoziolek', c: 'Poland', f: '🇵🇱', r: 5 },
    { q: "Working with Tawhid was such a good experience. He listened carefully, and delivered exactly what I needed.", n: 'gengen11', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Tawhid is a true professional, extremely fast and helpful and replies quickly. Went above and beyond.", n: 'gengen11', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Amazing edit. Creatively went and obtained additional assets beyond what I provided.", n: 'jakepenn', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Tawhid exceeded my expectations on this project. He is constantly looking to improve his craft.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Tawhid has a great creative mind that allows my video ideas to be expressed clearly to my audience.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "This was a high quality collection of video edits. Really happy with his attention to detail and communication skills.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Tawhid was able to take the blueprint of my idea and create a high quality YouTube short after adding his own creative touch.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Tawhid has unparalleled communication and is always understanding when we need revisions made. Prompt, efficient, true team player.", n: 'avenue7media', c: 'US', f: '🇺🇸', r: 4.7 },
    { q: "Excellent quality of work and very flexible with his options!", n: 'avenue7media', c: 'US', f: '🇺🇸', r: 4.7 },
    { q: "Fantastic product — he was pro-active and went above what I asked. Will certainly be back for more!", n: 'scottmccormi496', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Great work! The reels were well-made and delivered right on time. Very satisfied with the quality.", n: 'safihariri', c: 'Belgium', f: '🇧🇪', r: 5 },
    { q: "i love working with Tawhid, he understands my project and the direction, proposes creative ways of editing.", n: 'helened18', c: 'Spain', f: '🇪🇸', r: 5 },
    { q: "Working with Tawhid is fantastic, he wants to develop a long-term relationship and see your brand succeed.", n: 'elite_persona', c: 'UK', f: '🇬🇧', r: 4.7 },
    { q: "Tawhid is pleasant to work with and honest. Doesn't compromise on quality and wants to build a long term relationship.", n: 'elite_persona', c: 'UK', f: '🇬🇧', r: 4.7 },
    { q: "World class level of editing across the board, quick updates too.", n: 'winningfitness_', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "World class as always.", n: 'winningfitness_', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Very high level work.", n: 'winningfitness_', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Brilliant work, reviewed by the best in my industry and got brilliant feedback too.", n: 'winningfitness_', c: 'UK', f: '🇬🇧', r: 5 },
    { q: "Very very good service, highest quality edits and will be using him long term.", n: 'winningfitness_', c: 'UK', f: '🇬🇧', r: 4.3 },
    { q: "He's done it once again! I can't stress enough how great these testimonials videos turn out.", n: 'kfmkfm', c: 'Canada', f: '🇨🇦', r: 4.3 },
    { q: "I was pleased with the work. His quality steps up on each delivery.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 3.7 },
    { q: "He's always providing the best work and insights, I will continue to work with Tawhid!", n: 'karimss1', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Always a blessing working with Tawhid. Highly recommend approaching this gentleman!", n: 'bennyghas', c: 'Belgium', f: '🇧🇪', r: 5 },
    { q: "Amazing work by tawhid as always.", n: 'bennyghas', c: 'Belgium', f: '🇧🇪', r: 5 },
    { q: "Always a pleasure with tawhid. Very good quality and amazing work!", n: 'bennyghas', c: 'Belgium', f: '🇧🇪', r: 5 },
    { q: "Amazing work, not my first time ordering because his work is amazing!", n: 'benny12333', c: 'Netherlands', f: '🇳🇱', r: 5 },
    { q: "Amazing work really appreciate it. Definitely recommend.", n: 'benny12333', c: 'Netherlands', f: '🇳🇱', r: 5 },
    { q: "Amazing work, definitely working again with him.", n: 'benny12333', c: 'Netherlands', f: '🇳🇱', r: 5 },
    { q: "Will be using your services for all podcast reels, amazing work!!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Great work and attention to detail. Appreciate the great communication, highly recommend!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Great attention to detail and appreciate the customization!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Thanks for the hard work on these reels, captions turned out perfect!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Highly recommend your services for short form editing! thank you :)", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Amazing work from Tawhid. We will definitely repeat.", n: 'aaronthomas814', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Tawhid is a fantastic video editor. He always exceeds expectations. I fully recommend his services.", n: 'aaronthomas814', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Tawhid always goes above and beyond. We highly recommend him.", n: 'aaronthomas814', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Amazing work as always.", n: 'aaronthomas814', c: 'US', f: '🇺🇸', r: 5 },
    { q: "AMAZING — I would highly recommend.", n: 'm1sh234', c: 'US', f: '🇺🇸', r: 5 },
    { q: "He is great to work with. I highly recommend. Super high quality!!!", n: 'm1sh234', c: 'US', f: '🇺🇸', r: 5 },
    { q: "He's the best. Recommend for sure.", n: 'm1sh234', c: 'US', f: '🇺🇸', r: 5 },
    { q: "He's absolutely perfect — helped my friend well.", n: 'knowaishere', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Great job with quick turnaround time!", n: 'annmp181', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Will use again. Great shorts that will make an impact.", n: 'waythree11', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Professional in his work.", n: 'ghazi2040', c: 'UAE', f: '🇦🇪', r: 5 },
    { q: "Great working with you bro! Thanks again.", n: 'alexbadelt', c: 'S. Africa', f: '🇿🇦', r: 5 },
    { q: "Awesome editor!", n: 'adamhart953', c: 'Japan', f: '🇯🇵', r: 5 },
    { q: "Fantastic edit.", n: 'kfmkfm', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "great work and great communication! Highly recommend.", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "Great job, good color matching and animation.", n: 'clarvoyance1k', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Will continue to buy from him!", n: 'karimss1', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Very Nice collaboration!", n: 'lnbacademy', c: 'France', f: '🇫🇷', r: 5 },
    { q: "Good to work with!", n: 'lindsayned1', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Thank you!", n: 'claudfuen', c: 'US', f: '🇺🇸', r: 5 },
    { q: "Great work on this, thank you!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "great attention to detail, thx!", n: 'rgiats', c: 'Canada', f: '🇨🇦', r: 5 },
    { q: "This delivery was up to standard.", n: 'ire2901', c: 'UK', f: '🇬🇧', r: 5 },
  ];

  // Distribute each reviewer's reviews across BOTH rows so heavy reviewers
  // (e.g. rgiats, ire2901, winningfitness_) don't pile up in one row.
  const groups = {};
  reviews.forEach(r => { (groups[r.n] = groups[r.n] || []).push(r); });
  const pool1 = [], pool2 = [];
  Object.values(groups).forEach(arr => {
    arr.forEach((r, i) => (i % 2 === 0 ? pool1 : pool2).push(r));
  });

  // Greedy shuffle inside a single row: each next card must have a different
  // reviewer than the previous one. Also closes the marquee loop seam so the
  // last card never sits next to the first (the doubled track wraps around).
  const buildRow = (pool) => {
    const remaining = [...pool];
    const out = [];
    let last = null;
    while (remaining.length) {
      let idx = remaining.findIndex(r => r.n !== last);
      if (idx === -1) idx = 0;
      out.push(remaining[idx]);
      last = remaining[idx].n;
      remaining.splice(idx, 1);
    }
    // Fix wrap-around: if last card matches first, swap last with the nearest
    // inner card whose name differs from both neighbors and from out[0].
    if (out.length > 2 && out[0].n === out[out.length - 1].n) {
      const tailName = out[out.length - 1].n;
      for (let i = out.length - 2; i > 0; i--) {
        const prev = out[i - 1]?.n;
        const next = out[i + 1]?.n;
        if (
          out[i].n !== tailName &&
          out[i].n !== out[0].n &&
          prev !== tailName &&
          next !== tailName
        ) {
          [out[i], out[out.length - 1]] = [out[out.length - 1], out[i]];
          break;
        }
      }
    }
    return out;
  };

  const row1 = buildRow(pool1);
  const row2 = buildRow(pool2);

  const Star = ({ filled = true }) => (
    <svg width="10" height="10" viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>
      <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z"
        fill={filled ? '#4a8eff' : 'rgba(255,255,255,0.18)'} />
    </svg>
  );

  const Stars = ({ rating }) => {
    const full = Math.floor(rating);
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
        {[0,1,2,3,4].map(i => (
          <Star key={i} filled={i < full} />
        ))}
        <span style={{
          fontFamily: 'Geist Mono, ui-monospace, monospace',
          fontSize: 10, color: 'var(--ink-muted)', marginLeft: 6,
        }}>{rating.toFixed(1)}</span>
      </div>
    );
  };

  const Card = ({ r }) => (
    <div className="fr-card" style={{
      flexShrink: 0,
      width: 320,
      padding: '14px 16px',
      borderRadius: 14,
      background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015))',
      border: '1px solid var(--line)',
      marginRight: 14,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Stars rating={r.r} />
        <span style={{ fontSize: 11, color: 'var(--ink-muted)' }}>{r.f} {r.c}</span>
      </div>
      <p style={{
        fontSize: 13.5,
        lineHeight: 1.5,
        color: 'var(--ink-dim)',
        margin: 0,
        display: '-webkit-box',
        WebkitLineClamp: 3,
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
      }}>"{r.q}"</p>
      <div style={{ fontSize: 11.5, color: 'var(--ink-muted)', fontFamily: 'Geist Mono, ui-monospace, monospace' }}>
        — {r.n}
      </div>
    </div>
  );

  const doubled1 = [...row1, ...row1];
  const doubled2 = [...row2, ...row2];

  return (
    <section id="reviews-wall" style={{
      padding: '56px 0 64px',
      position: 'relative',
      overflow: 'hidden',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        marginBottom: 28, gap: 24, flexWrap: 'wrap',
      }}>
        <div>
          <SectionEyebrow label={`${reviews.length} client reviews`} />
          <h2 className="display" style={{
            fontSize: 'clamp(28px, 3.4vw, 40px)',
            marginTop: 16,
            lineHeight: 1.05,
            letterSpacing: '-0.025em',
          }}>
            <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Don't take my word for it.</span>{' '}
            Take theirs.
          </h2>
        </div>
        <div className="fr-statbar" style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <Stat v="4.9" l="avg" star />
          <span style={{ width: 1, height: 32, background: 'var(--line)' }} />
          <Stat v={reviews.length} l="reviews" />
          <span style={{ width: 1, height: 32, background: 'var(--line)' }} />
          <Stat v="14" l="countries" />
        </div>
      </div>

      <div style={{
        maskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{ display: 'flex', width: 'max-content', animation: 'rw-scroll-l 220s linear infinite' }}>
          {doubled1.map((r, i) => <Card key={i} r={r} />)}
        </div>
        <div style={{ display: 'flex', width: 'max-content', animation: 'rw-scroll-r 260s linear infinite' }}>
          {doubled2.map((r, i) => <Card key={i} r={r} />)}
        </div>
      </div>

      <style>{`
        @keyframes rw-scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @keyframes rw-scroll-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        #reviews-wall:hover [style*="rw-scroll-l"], #reviews-wall:hover [style*="rw-scroll-r"] { animation-play-state: paused; }
      `}</style>
    </section>
  );
}

function Stat({ v, l, star }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
      <div style={{
        fontFamily: 'Instrument Serif, serif',
        fontSize: 24,
        letterSpacing: '-0.02em',
        color: 'var(--ink)',
        display: 'inline-flex', alignItems: 'center', gap: 5,
      }}>
        {v}
        {star && <svg width="14" height="14" viewBox="0 0 24 24" fill="#4a8eff">
          <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z" />
        </svg>}
      </div>
      <div style={{
        fontSize: 10,
        fontFamily: 'Geist Mono, ui-monospace, monospace',
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        color: 'var(--ink-muted)',
        marginTop: 6,
      }}>{l}</div>
    </div>
  );
}

Object.assign(window, { FiverrReviews });