function Testimonial() {
  return (
    <section id="stories" style={{ padding: '110px 0', background: 'var(--lmc-white)', borderBottom: '2px solid var(--lmc-black)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <div style={{ position: 'relative' }}>
          <img src="../../assets/samples/sample-07-polaroid-buds.jpg" alt="" style={{
            width: '100%', aspectRatio: 1, objectFit: 'cover',
            border: '3px solid var(--lmc-black)', borderRadius: 8,
            boxShadow: '12px 12px 0 var(--lmc-yellow), 12px 12px 0 4px var(--lmc-black)',
          }} />
          <div className="marker" style={{ position: 'absolute', top: -18, right: -10, transform: 'rotate(8deg)', fontSize: 28, background: 'var(--lmc-yellow)', border: '2px solid var(--lmc-black)', padding: '8px 14px', borderRadius: 8 }}>
            120+ shops!
          </div>
        </div>
        <div>
          <span className="eyebrow">Story 03 · Sacramento</span>
          <blockquote style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '20px 0 24px', color: 'var(--lmc-black)' }}>
            &ldquo;LMC sat through every city hall meeting with us. We opened on the date they promised. Nobody else does that.&rdquo;
          </blockquote>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 52, height: 52, borderRadius: 999, background: 'var(--lmc-green)', border: '2px solid var(--lmc-black)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-personality)', fontSize: 24 }}>D</div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 15 }}>Dani Ortega</div>
              <div style={{ fontSize: 13, color: 'var(--lmc-ink-60)' }}>Owner · Green Door Sacramento</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonial = Testimonial;