/* ================================================================
   v2-testimonials.jsx — TestimonialsV2 ("Leadership is earned.")
================================================================ */

function TestimonialsV2() {
  const [expanded, setExpanded] = React.useState({});

  function toggle(i) {
    setExpanded(prev => ({ ...prev, [i]: !prev[i] }));
    if (window.lucide) setTimeout(() => window.lucide.createIcons(), 50);
  }

  const testimonials = [
    {
      theme: 'TRUST',
      excerpt: '"Ryan fostered confidence in myself that I must confess had diminished under past leadership.',
      full: '"Ryan fostered confidence in myself that I must confess had diminished under past leadership. He gave me the independence to problem solve and provide solutions to our clients, both internal and external."',
      initials: 'Jessica M.',
      role: 'Manager'
    },
    {
      theme: 'ALIGNMENT',
      excerpt: '"Our team was a silo and I can now confidently say that our silo has been removed.',
      full: '"Our team was a silo and I can now confidently say that our silo has been removed. Ryan rebuilt the support we needed, cleared roadblocks, and allowed our team to succeed."',
      initials: 'Theo C.',
      role: 'Senior Manager'
    },
    {
      theme: 'EMPOWERMENT',
      excerpt: '"One of Ryan\'s greatest strengths is allowing direct reports to work autonomously.',
      full: '"One of Ryan\'s greatest strengths is allowing direct reports to work autonomously. This trust and empowerment enable team members to take ownership of their projects and deliver outstanding results."',
      initials: 'Fabio F.',
      role: 'Director of Marketing & Creative'
    },
    {
      theme: 'EXECUTIVE PERSPECTIVE',
      excerpt: '"Ryan stands out for his ability to think and operate as an executive.',
      full: '"Ryan stands out for his ability to think and operate as an executive. He was instrumental in connecting digital transformation and AI projects to measurable business outcomes."',
      initials: 'Kent H.',
      role: 'CFO'
    },
  ];

  const bp = {
    margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
    fontSize: 15, lineHeight: 1.72, color: 'var(--fg-2)'
  };

  return (
    <section id="leadership" className="rm-section" style={{
      padding: 'clamp(64px, 8vw, 120px) 60px',
      background: 'var(--ground)'
    }}>
      {/* Section heading */}
      <div className="reveal" style={{ marginBottom: 56 }}>
        <SectionHeadV2
          eyebrow="Leadership"
          title="Leadership is earned."
          sub="Every leader talks about trust, collaboration, and accountability. Those qualities aren't measured by what leaders say. They're reflected in the experiences of the people who work alongside them."
        />
        <p style={{ ...bp, marginTop: -32, fontStyle: 'italic', color: 'var(--fg-3)' }}>
          These are a few of their perspectives.
        </p>
      </div>

      {/* Four pillar cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24, marginBottom: 80 }}>
        {testimonials.map((t, i) => (
          <div key={i} className={'reveal d' + (i % 3)} style={{
            background: 'var(--ink-raised)',
            borderRadius: 10,
            boxShadow: 'var(--shadow-md), var(--shadow-inset-top)',
            padding: '32px 28px',
            display: 'flex', flexDirection: 'column', gap: 16
          }}>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: 'var(--fg-3)'
            }}>{t.theme}</span>

            <p style={{ ...bp, fontStyle: 'italic', flex: 1 }}>
              {expanded[i] ? t.full : t.excerpt + '\u2026"'}
            </p>

            <button onClick={() => toggle(i)} style={{
              alignSelf: 'flex-start', background: 'none', border: 'none', padding: 0,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 11,
              letterSpacing: '.12em', textTransform: 'uppercase',
              color: 'var(--fg-3)', transition: 'color 140ms ease'
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-1)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--fg-3)'}>
              {expanded[i] ? 'Read less' : 'Read more'}
              <i data-lucide={expanded[i] ? 'chevron-up' : 'chevron-down'}
                style={{ width: 13, height: 13 }}></i>
            </button>

            <div style={{
              borderTop: '1px solid rgba(150,158,170,.1)',
              paddingTop: 14, display: 'flex', flexDirection: 'column', gap: 2
            }}>
              <span style={{
                fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 13, color: 'var(--fg-1)'
              }}>{t.initials}</span>
              <span style={{
                fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 12,
                color: 'var(--fg-3)', letterSpacing: '.03em'
              }}>{t.role}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Featured testimonial */}
      <div className="reveal" style={{
        borderTop: '1px solid rgba(150,158,170,.12)',
        paddingTop: 80,
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) clamp(280px,38vw,520px)',
        gap: 'clamp(40px, 6vw, 96px)',
        alignItems: 'start'
      }}>
        {/* Left heading */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <span style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600,
            fontSize: 11, letterSpacing: '.28em', textTransform: 'uppercase', color: 'var(--fg-3)'
          }}>Featured</span>
          <h3 style={{
            margin: 0, fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(1.8rem, 2.8vw, 2.8rem)', lineHeight: 1.1, color: 'var(--fg-1)'
          }}>The same leader. Different arena.</h3>
          <p style={{
            margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 300,
            fontSize: 15, lineHeight: 1.72, color: 'var(--fg-2)', maxWidth: 420
          }}>
            The same leadership that delivers business outcomes shows up on the ice, in the community, and in every environment where trust and accountability matter.
          </p>
        </div>

        {/* Right quote */}
        <blockquote style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 28 }}>
          <div aria-hidden="true" style={{
            width: 32, height: 2, background: 'var(--metal-silver)'
          }} />
          <p style={{
            margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(1.1rem, 1.7vw, 1.4rem)', lineHeight: 1.62, color: 'var(--fg-1)'
          }}>
            "I'm really impressed by Ryan's ability to notice a shift in a kid's mood or demeanour during a game, and deliver encouragement and feedback that's both meaningful and effective. This direct approach helps the players feel seen and supported, and positively impacts their overall performance.
          </p>
          <p style={{
            margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(1.1rem, 1.7vw, 1.4rem)', lineHeight: 1.62, color: 'var(--fg-1)'
          }}>
            Ryan has been an exemplar of dependable leadership, assisting both the kids and parents with administrative duties, driving, managing interpersonal conflicts and problem solving. He would no doubt be a positive asset to any team."
          </p>
          <footer style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 600,
              fontSize: 13, letterSpacing: '.08em', color: 'var(--fg-1)'
            }}>Jessica C.</span>
            <span style={{
              fontFamily: 'var(--font-sans)', fontWeight: 300,
              fontSize: 12, letterSpacing: '.06em', color: 'var(--fg-3)', fontStyle: 'italic'
            }}>Nurse Practitioner &amp; Hockey Team Trainer</span>
          </footer>
        </blockquote>
      </div>
    </section>
  );
}