const TrustStrip = () => {
  const reviews = [
    { name: 'Alex K.', quote: '"Dangerously good. I had to order a second box the same week."', tone: 'sky' },
    { name: 'Maria D.', quote: '"Sent as a thank-you gift. The client framed the card. Seriously."', tone: 'peach' },
    { name: 'Jordan P.', quote: '"The club is the best subscription I\'ve ever kept. Skip is easy."', tone: 'cream' },
  ];
  return (
    <section style={{ padding: '32px 0 24px', background: 'var(--cream-50)' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: 'auto 1fr', alignItems: 'center', gap: 32,
          paddingBottom: 26, borderBottom: '1px solid var(--brown-100)',
        }}
        className="trust-top">
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <Stars n={5} size={18}/>
            <div>
              <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--brown-800)' }}>
                Loved by 1,000+ cookie fans
              </div>
              <div style={{ fontSize: 13, color: 'var(--brown-600)' }}>
                4.9 average · 850+ verified reviews
              </div>
            </div>
          </div>

          <div className="press-row" style={{
            display: 'flex', alignItems: 'center', gap: 32, flexWrap: 'wrap', justifyContent: 'flex-end',
            fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 15, color: 'var(--brown-600)',
          }}>
            <span>As seen in</span>
            {['Feast Magazine', 'STL Post-Dispatch', 'Food & Wine', 'Bon Appétit'].map((p, i) => (
              <span key={i} style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontStyle: 'normal', letterSpacing: '0.02em' }}>
                {p}
              </span>
            ))}
          </div>
        </div>

        <div className="trust-reviews" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, paddingTop: 28,
        }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              padding: '20px 22px',
              borderRadius: 16,
              background: r.tone === 'sky' ? 'var(--sky-50)' : r.tone === 'peach' ? 'var(--peach-50)' : '#fff',
              border: '1px solid var(--brown-100)',
            }}>
              <Stars n={5} size={13}/>
              <p className="serif" style={{
                margin: '10px 0 12px', fontSize: 17, lineHeight: 1.45, fontWeight: 500,
                color: 'var(--brown-900)',
              }}>
                {r.quote}
              </p>
              <div style={{ fontSize: 13, color: 'var(--brown-600)', fontWeight: 500 }}>
                — {r.name} · Verified buyer
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .trust-top { grid-template-columns: 1fr !important; }
          .press-row { justify-content: flex-start !important; }
          .trust-reviews { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { TrustStrip });