/* ============================================================
   Representative outcomes — ethical, illustrative client wins.
   ============================================================ */
const TESTIMONIALS = [
  {
    quote: 'Example outcome: a local clinic launches a clean website with a WhatsApp enquiry flow, making it easier for patients to ask about appointments and get a faster first response.',
    name: 'Local clinic', role: 'Representative website + WhatsApp win', icon: 'Stethoscope',
  },
  {
    quote: 'Example outcome: a restaurant or cafe improves online discovery, presents its menu clearly and receives order or booking enquiries faster through a simple digital flow.',
    name: 'Restaurant / cafe', role: 'Representative discovery + enquiry win', icon: 'Building2',
  },
  {
    quote: 'Example outcome: a service business uses an AI/WhatsApp lead assistant to capture enquiries, answer common questions and reduce manual follow-up for the owner and team.',
    name: 'Service business', role: 'Representative automation win', icon: 'MessageCircle',
  },
];

function TestimonialCard({ t, i }) {
  return (
    <Reveal delay={i * 110} className="testimonial-card"
      style={{ display: 'flex', flexDirection: 'column', padding: '30px 28px', borderRadius: '22px', border: '1px solid rgba(255,255,255,0.09)', background: 'rgba(255,255,255,0.035)', transition: 'transform 0.3s ease, border-color 0.3s ease' }}>
      <div style={{ display: 'inline-flex', alignSelf: 'flex-start', alignItems: 'center', gap: '7px', marginBottom: '18px', padding: '6px 12px', borderRadius: '9999px', background: 'rgba(155,232,221,0.1)', border: '1px solid rgba(155,232,221,0.22)', color: '#9BE8DD', fontSize: '0.74rem', fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
        <Icon name="Sparkles" size={14} style={{ color: '#9BE8DD' }} /> Example outcome
      </div>
      <p style={{ fontSize: '1.04rem', lineHeight: 1.62, color: 'rgba(236,234,242,0.9)', margin: '0 0 24px', flex: 1, textWrap: 'pretty' }}>
        {t.quote}
      </p>
      <div style={{ display: 'flex', alignItems: 'center', gap: '13px' }}>
        <div style={{ width: '44px', height: '44px', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(155,232,221,0.1)', border: '1px solid rgba(155,232,221,0.2)', flex: '0 0 auto' }}>
          <Icon name={t.icon} size={20} style={{ color: '#9BE8DD' }} />
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: '0.98rem', color: '#fff' }}>{t.name}</div>
          <div style={{ fontSize: '0.86rem', color: 'rgba(236,234,242,0.6)' }}>{t.role}</div>
        </div>
      </div>
    </Reveal>
  );
}

function Testimonials() {
  return (
    <Section id="testimonials" data-screen-label="Representative outcomes" style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 100%)' }}>
      <SectionHead
        eyebrow="Representative examples" eyebrowIcon="Heart" align="center" maxW="700px"
        title="Representative Client"
        titleAccent="Outcomes"
        sub="These are example business wins we build toward — not fabricated client testimonials or quoted reviews. Real results depend on scope, market and execution."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: '20px', marginTop: 'clamp(40px,5vw,56px)' }} className="testimonials-grid">
        {TESTIMONIALS.map((t, i) => <TestimonialCard key={t.name} t={t} i={i} />)}
      </div>
    </Section>
  );
}

Object.assign(window, { Testimonials });