const Testimonial = () => {
  const [i, setI] = React.useState(0);
  const quotes = [
    {
      q: 'The readout changed the room. We walked in planning a price cut and walked out re-phasing the launch. No other firm in this category gets that close to the shelf.',
      a: 'VP Product, tier-one GPU brand',
    },
    {
      q: 'Main Street does one thing and does it at a depth nobody else will fund. They are the only research we share with the board unedited.',
      a: 'Operating Partner, components-focused fund',
    },
    {
      q: 'Every brief arrives with a point of view. That is so rare in primary research that we have stopped shopping around.',
      a: 'CMO, cooling and power category leader',
    },
  ];
  return (
    <section className="quote" id="insights">
      <div className="container">
        <div className="q-wrap">
          <svg className="q-mark" viewBox="0 0 60 60" aria-hidden="true"><path d="M10 40 C10 28, 18 20, 28 18 L28 24 C22 25, 18 30, 18 36 L28 36 L28 50 L10 50 Z M34 40 C34 28, 42 20, 52 18 L52 24 C46 25, 42 30, 42 36 L52 36 L52 50 L34 50 Z" fill="currentColor"/></svg>
          <blockquote>{quotes[i].q}</blockquote>
          <div className="q-foot">
            <span className="q-attr">— {quotes[i].a}</span>
            <div className="q-dots">
              {quotes.map((_, idx) => (
                <button
                  key={idx}
                  aria-label={`Quote ${idx+1}`}
                  className={idx === i ? 'on' : ''}
                  onClick={() => setI(idx)}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonial = Testimonial;