function ReviewsMarquee() {
  const raw = [
    "If you're not creating content, you're invisible. Your competitor is not.",
    "You can have the best product in the world. But if nobody knows about it, it doesn't exist. — Gary V",
    "Every day you don't post is a day someone else claims your audience.",
    "Content isn't optional anymore. It's your business card. It's your resume. It's your proof.",
    "Do so much volume, it would be unreasonable that you don't succeed. — Alex Hormozi",
    "Your silence is someone else's opportunity. Every post you skip, they're posting three.",
    "Most people fail not because they can't create. They fail because they stop before anyone notices.",
    "Your audience is scrolling RIGHT NOW. Either they're seeing you or your competitor.",
    "Content is the cheapest way to build trust at scale. Everything else is expensive noise.",
    "30 days of consistent content will do more for your brand than 10 years of hoping.",
  ];

  const items = raw.map(line => {
    const m = line.split(/\s+—\s+/);
    return { quote: m[0].replace(/\.$/, '').trim(), author: m[1] || null };
  });

  // Exactly 2 copies for a seamless -50% translateX loop
  const doubled = [...items, ...items];

  const TILE_W = 340;   // fixed width — keeps every tile perfectly aligned
  const TILE_H = 92;    // fixed height — every quote fits in 2 lines, baseline matches
  const GAP = 0;        // gap handled by tile padding + divider

  return (
    <section style={{
      position: 'relative',
      zIndex: 3,
      overflow: 'hidden',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      background: 'var(--bg)',
    }}>
      <div style={{
        maskImage: 'linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)',
        WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)',
      }}>
        <div className="marquee" style={{ animationDuration: '140s', gap: GAP }}>
          {doubled.map((it, i) => (
            <div key={i} className="quote-tile" style={{
              flexShrink: 0,
              width: TILE_W,
              height: TILE_H,
              padding: '0 28px',
              display: 'flex',
              alignItems: 'center',
              borderRight: '1px solid var(--line)',
              position: 'relative',
            }}>
              <div style={{
                fontFamily: 'Instrument Serif, serif',
                fontStyle: 'italic',
                fontWeight: 400,
                fontSize: 16,
                lineHeight: 1.28,
                letterSpacing: '-0.003em',
                color: 'var(--ink-dim)',
                textWrap: 'balance',
                width: '100%',
              }}>
                <span style={{ color: 'var(--accent-2)', marginRight: 3, fontStyle: 'normal' }}>“</span>
                {it.quote}
                <span style={{ color: 'var(--accent-2)', marginLeft: 3, fontStyle: 'normal' }}>”</span>

                {it.author && (
                  <span style={{
                    display: 'block',
                    marginTop: 8,
                    fontFamily: 'Geist Mono, monospace',
                    fontStyle: 'normal',
                    fontSize: 9.5,
                    letterSpacing: '0.22em',
                    textTransform: 'uppercase',
                    color: 'var(--accent-2)',
                  }}>
                    — {it.author}
                  </span>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ReviewsMarquee });