// Testimonials Section - Minimalist Design
const { useState, useEffect } = React;

function Testimonials({ t }) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [isAutoPlay, setIsAutoPlay] = useState(true);

  const testimonials = [
    {
      quote: "AEQ's comprehensive EHS training transformed our workplace safety culture. Their hands-on approach and expert instructors made complex regulations accessible to our entire team.",
      name: "Ahmad Razak",
      title: "HSE Manager",
      company: "Petronas Chemicals Group"
    },
    {
      quote: "The ISO 45001 certification journey was seamless with AEQ's guidance. Their consultants stayed with us from gap analysis to successful certification — truly a one-stop solution.",
      name: "Sarah Lim",
      title: "Quality Assurance Director",
      company: "Intel Malaysia"
    },
    {
      quote: "AEQ delivered emergency response training for our offshore platform crew. The realistic simulations and professional instruction exceeded our expectations.",
      name: "Mohd Hafiz",
      title: "Operations Manager",
      company: "Sapura Energy"
    },
    {
      quote: "Outstanding forklift and crane operator certification programs. Our operators are now fully compliant and more confident in their daily operations.",
      name: "Lee Wei Ming",
      title: "Logistics Supervisor",
      company: "DHL Malaysia"
    }
  ];

  // Auto-play testimonials
  useEffect(() => {
    if (!isAutoPlay) return;
    const interval = setInterval(() => {
      setActiveIndex(prev => (prev + 1) % testimonials.length);
    }, 6000);
    return () => clearInterval(interval);
  }, [isAutoPlay, testimonials.length]);

  return (
    <section className="testimonials-section" id="testimonials">
      <div className="test-wrap">
        {/* Section Header */}
        <div className="test-header">
          <span className="test-tag">
            <span className="tag-line"></span>
            <span>Success Stories</span>
          </span>
          <h2 className="test-title">Trusted by Industry Leaders</h2>
          <p className="test-subtitle">
            Over 500+ training sessions delivered with 98% satisfaction rate
          </p>
        </div>

        {/* Testimonials */}
        <div
          className="testimonials-area"
          onMouseEnter={() => setIsAutoPlay(false)}
          onMouseLeave={() => setIsAutoPlay(true)}
        >
          {testimonials.map((test, i) => (
            <div
              key={i}
              className={`testimonial-card ${i === activeIndex ? 'active' : ''}`}
            >
              <blockquote className="test-quote">
                "{test.quote}"
              </blockquote>
              <div className="test-author">
                <div className="author-initials">
                  {test.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div className="author-info">
                  <strong>{test.name}</strong>
                  <span>{test.title}</span>
                  <span className="company">{test.company}</span>
                </div>
              </div>
            </div>
          ))}

          {/* Navigation */}
          <div className="test-nav">
            {testimonials.map((_, i) => (
              <button
                key={i}
                className={`nav-btn ${i === activeIndex ? 'active' : ''}`}
                onClick={() => setActiveIndex(i)}
                aria-label={`Testimonial ${i + 1}`}
              />
            ))}
          </div>
        </div>

        {/* CTA */}
        <div className="test-cta">
          <p>Ready to transform your organization's safety culture?</p>
          <a href="contact.html" className="cta-link">
            Get in touch
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M12 5l7 7-7 7"/>
            </svg>
          </a>
        </div>
      </div>

      <style>{`
        .testimonials-section {
          background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #172554 100%);
          padding: 100px 0;
        }

        .test-wrap {
          max-width: 900px;
          margin: 0 auto;
          padding: 0 clamp(20px, 5vw, 56px);
        }

        /* Header */
        .test-header {
          text-align: center;
          margin-bottom: 60px;
        }

        .test-tag {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
        }

        .test-tag .tag-line {
          width: 24px;
          height: 1px;
          background: rgba(255, 255, 255, 0.4);
        }

        .test-tag span:last-child {
          font-size: 13px;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.5);
          letter-spacing: 0.08em;
        }

        .test-title {
          font-size: clamp(28px, 3.5vw, 40px);
          font-weight: 300;
          color: #ffffff;
          margin: 0 0 16px;
          letter-spacing: -0.01em;
        }

        .test-subtitle {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.5);
          margin: 0;
          font-weight: 300;
        }

        /* Testimonials Area */
        .testimonials-area {
          position: relative;
          min-height: 280px;
          margin-bottom: 60px;
        }

        .testimonial-card {
          position: absolute;
          width: 100%;
          opacity: 0;
          transform: translateY(20px);
          transition: all 0.5s ease;
          pointer-events: none;
        }

        .testimonial-card.active {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }

        .test-quote {
          font-size: clamp(18px, 2.5vw, 24px);
          line-height: 1.7;
          color: rgba(255, 255, 255, 0.85);
          margin: 0 0 32px;
          font-weight: 300;
          font-style: normal;
          text-align: center;
        }

        .test-author {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 16px;
        }

        .author-initials {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
          font-weight: 500;
          letter-spacing: 0.02em;
        }

        .author-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
          text-align: left;
        }

        .author-info strong {
          font-size: 15px;
          font-weight: 500;
          color: #ffffff;
        }

        .author-info span {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.5);
          font-weight: 300;
        }

        .author-info .company {
          color: rgba(255, 255, 255, 0.4);
        }

        /* Navigation */
        .test-nav {
          display: flex;
          justify-content: center;
          gap: 8px;
          margin-top: 40px;
        }

        .nav-btn {
          width: 32px;
          height: 2px;
          background: rgba(255, 255, 255, 0.15);
          border: none;
          cursor: pointer;
          padding: 0;
          transition: all 0.3s ease;
        }

        .nav-btn:hover {
          background: rgba(255, 255, 255, 0.3);
        }

        .nav-btn.active {
          background: rgba(255, 255, 255, 0.7);
          width: 48px;
        }

        /* CTA */
        .test-cta {
          text-align: center;
          padding-top: 40px;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .test-cta p {
          font-size: 15px;
          color: rgba(255, 255, 255, 0.5);
          margin: 0 0 20px;
          font-weight: 300;
        }

        .cta-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: #ffffff;
          font-size: 14px;
          font-weight: 500;
          text-decoration: none;
          padding: 12px 24px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 6px;
          transition: all 0.3s ease;
        }

        .cta-link:hover {
          background: rgba(255, 255, 255, 0.05);
          border-color: rgba(255, 255, 255, 0.3);
        }

        .cta-link svg {
          transition: transform 0.3s ease;
        }

        .cta-link:hover svg {
          transform: translateX(4px);
        }

        /* Responsive */
        @media (max-width: 768px) {
          .testimonials-section {
            padding: 80px 0;
          }

          .testimonials-area {
            min-height: 320px;
          }

          .test-author {
            flex-direction: column;
            text-align: center;
          }

          .author-info {
            text-align: center;
          }
        }
      `}</style>
    </section>
  );
}

window.Testimonials = Testimonials;