// Praise — testimonial blurbs
const NikkiPraise = () => {
  const blurbs = [
    {
      quote: "Book 2 of Midnight Riders MC is amazing. I was hooked from beginning to end. Thrilling, steamy, dramatic.",
      source: "ccourt",
    },
    {
      quote: "So much yummy darkness. Despite her friends' warning, she went looking for it. Instead, he found her — and now he's going to claim every inch of her.",
      source: "Booksrule",
    },
    {
      quote: "The story is so amazingly beautiful and addictive that it sucks you in to the point you can't put it down. Worth every word.",
      source: "CursedKitty",
    },
    {
      quote: "This story was amazing! Can't wait to see what the next book will bring. This series is just heating up!",
      source: "Heather",
    },
  ];

  return (
    <section className="nr-praise" id="praise" data-screen-label="Praise">
      <div className="nr-praise-header">
        <span className="nr-eyebrow">Praise from the dark</span>
        <h2 className="nr-section-head nr-section-head-center">
          Whispered by readers who<br/>couldn&rsquo;t put it down.
        </h2>
      </div>
      <div className="nr-praise-grid">
        {blurbs.map((b, i) => (
          <figure key={i} className="nr-praise-card">
            <svg className="nr-quote-mark" width="28" height="22" viewBox="0 0 28 22" aria-hidden="true">
              <path d="M0 22V13C0 5.8 3.6 1 10.2 0l.8 3.2C7.2 4.2 5 7 5 10.8h5V22H0zm16 0V13c0-7.2 3.6-12 10.2-13l.8 3.2C23.2 4.2 21 7 21 10.8h5V22H16z" fill="currentColor"/>
            </svg>
            <blockquote>{b.quote}</blockquote>
            <figcaption>
              <span className="nr-caption-rule" />
              {b.source}
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
};

window.NikkiPraise = NikkiPraise;