/* TESTIMONIALS */

function Testimonials() {
  const isMobile = useWindowWidth() < 768;
  const featured = [
    { metric: '8×', title: 'Increase in conversion rate',  body: '"We needed a modern, high-converting website, and the Ecomlifters team delivered far beyond expectations. Their design and SEO expertise helped us increase conversion rate by 800% in just two weeks. Highly recommend."', name: 'David Callahan',  role: 'Marketing Director', hue: 220 },
    { metric: '2×', title: 'Increase in lead generation',  body: '"From branding to website design, every detail was meticulously handled. The team\'s expertise helped us launch faster, and the results have been phenomenal."',           name: 'Sarah Mitchell',  role: 'Marketing Director', hue: 340 },
  ];
  const small = [
    { body: '"Their animation work took our product videos to the next level. The team truly understands user experience and storytelling."',    name: 'Tom Becker',     role: 'Founder', hue: 30 },
    { body: '"We were burning through a $60K/mo Meta budget with a 1.4x ROAS. Eight weeks with Ecomlifters and we\'re at 4.6x. They found the creative angle we were blind to."', name: 'Danielle Reyes', role: 'Founder', hue: 190 },
    { body: '"They feel like part of our team, not a vendor. Weekly experiments, monthly compounding wins, no decks."',                                        name: 'Maria Okafor',    role: 'Head of Growth', hue: 280 },
    { body: '"Best $40k I\'ve spent on growth in 4 years running this brand. Audit alone paid for itself in 6 weeks."',                                       name: 'Jordan Lee',      role: 'Founder & CEO', hue: 100 },
  ];

  return (
    <section data-screen-label="12 Testimonials" id="testimonials" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--bg-2)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Testimonials"
          title={<>Results that speak volume.<br /><span className="accent">Read success stories.</span></>}
          lead="Find out how our happy clients are raving about us."
          align="center"
        />

        {/* Featured row — 2 big cards */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 18, marginBottom: 18 }}>
          {featured.map((t, i) => (
            <Reveal key={t.name} delay={i * 120} className="card" style={{ padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginBottom: 18 }}>
                <span className="num" style={{ fontSize: 72, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--ink)' }}>{t.metric}</span>
                <div>
                  <div className="mono-label" style={{ color: 'var(--green-deep)' }}>Result</div>
                  <div style={{ fontSize: 17, fontWeight: 500, marginTop: 4 }}>{t.title}</div>
                </div>
              </div>
              <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, margin: 0 }}>{t.body}</p>

              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 28, paddingTop: 18, borderTop: '1px dashed var(--hairline)' }}>
                <Avatar name={t.name} size={40} hue={t.hue} />
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{t.role}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Smaller row */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 16 }}>
          {small.map((t, i) => (
            <Reveal key={t.name} delay={i * 80} className="card" style={{ padding: 20 }}>
              <div style={{ color: 'var(--green-deep)', fontSize: 22, lineHeight: 1, marginBottom: 8, fontFamily: 'Georgia, serif' }}>"</div>
              <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.5, margin: '0 0 18px 0' }}>{t.body}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Avatar name={t.name} size={30} hue={t.hue} />
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600 }}>{t.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>{t.role}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Bottom row */}
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'center', marginTop: 40, padding: '20px 24px', background: 'white', borderRadius: 16, border: '1px solid var(--hairline-2)', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 14, color: 'var(--ink-soft)' }}>150 satisfied clients love our services</span>
            <div style={{ display: 'flex', gap: 2, color: 'var(--warn)' }}>
              {[1,2,3,4,5].map(i => <Icon.Star key={i} size={14} />)}
            </div>
            <span style={{ fontSize: 14, fontWeight: 600 }}>4.9</span>
            <span style={{ fontSize: 13, color: 'var(--muted)' }}>Based on 115 reviews</span>
          </div>
          <BtnGreen>Book a call</BtnGreen>
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;