// Testimonials.jsx — Section I
// PLACEHOLDER — these quotes need real attribution from Google Reviews
// (or fresh quotes pulled by Tony). FDU contact in memory is Joe DelleMonache.
// Do NOT ship fabricated names or residential / Newport quotes.
const QUOTES = [
  {
    quote: '[Real Google Review quote — FDU welcome week, 1,200 students, 4 trucks rotated across campuses. Pull verbatim with permission.]',
    name:  'Joe DelleMonache',
    role:  '[Title to confirm]',
    org:   'Fairleigh Dickinson University',
    pending: true,
  },
  {
    quote: '[Real Google Review quote — corporate employee appreciation day, branded service, named client. Tony to confirm publishable attribution.]',
    name:  '[Client name pending]',
    role:  '[Title pending]',
    org:   '[NJ corporate client — Tony\u2019s approved list]',
    pending: true,
  },
  {
    quote: '[Real Google Review quote — campus or large activation, with specifics (guest count, turnaround). Pull from Google Reviews with consent.]',
    name:  '[Reviewer name pending]',
    role:  '[Title pending]',
    org:   '[Campus or corporate client pending]',
    pending: true,
  },
];

const Testimonials = () => (
  <section style={{ padding:'clamp(64px, 8vw, 96px) 24px', background: T.white }}>
    <div style={{ maxWidth:1200, margin:'0 auto' }}>
      <h2 style={{ margin:'0 0 36px' }}>What clients say</h2>
      <div className="grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24 }}>
        {QUOTES.map((q, i) => (
          <figure key={i} style={{
            margin:0,
            background: q.pending ? '#FFF8E1' : T.bgAlt,
            border: q.pending ? '1px dashed #C99A2E' : 'none',
            borderRadius:12, padding:'24px 26px',
            display:'flex', flexDirection:'column', gap:18,
            position:'relative',
          }}>
            {q.pending && (
              <span style={{
                position:'absolute', top:10, right:10,
                fontSize:10, fontWeight:700, letterSpacing:'.08em',
                color:'#7A5A00', background:'#FFE9A8',
                padding:'3px 7px', borderRadius:3,
              }}>PENDING REAL REVIEW</span>
            )}
            <blockquote style={{
              margin:0, fontSize:17, lineHeight:1.55, color: T.ink, textWrap:'pretty',
              fontStyle: q.pending ? 'italic' : 'normal',
              opacity: q.pending ? .82 : 1,
            }}>"{q.quote}"</blockquote>
            <figcaption style={{ display:'flex', alignItems:'center', gap:12, marginTop:'auto' }}>
              <div style={{ width:44, height:44, borderRadius:999, background:`linear-gradient(135deg, ${T.red}, ${T.redPressed})`, flex:'0 0 auto' }} />
              <div>
                <div style={{ fontWeight:600, fontSize:14, color: T.ink }}>{q.name}</div>
                <div style={{ fontSize:12, color: T.inkSoft, lineHeight:1.45 }}>{q.role} · {q.org}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Testimonials });