const TESTIMONIALS_I18N = {
  EN: {
    eyebrow: 'Testimonials',
    items: [
      { quote: 'Grey Space IT delivered our client\u2019s ERP solution in the UAE on time and to an exceptional standard. Professional, responsive, and technically sharp throughout \u2014 exactly the partner you want on a critical project. Future Sphere wholeheartedly recommends them.', name: 'Fatima', title: 'Operations Manager, Future Sphere', location: 'UAE', metric: { v: '100%', l: 'On-time delivery' } },
      { quote: 'GPU CFD that used to take a week now finishes overnight. Our engineers iterate on geometries we wouldn\u2019t have tried before.', name: 'Dr. Mateus Vega', title: 'Head of Simulation, Forge Industrial', location: 'Stuttgart · DE', metric: { v: '6.4×', l: 'Faster simulation cycle' } },
      { quote: 'A German-speaking desk that actually understands SAP HANA — we stopped escalating tickets and started closing them.', name: 'Lena Hoffmann', title: 'Head of IT Operations, Nordstern', location: 'Hamburg · DE', metric: { v: '38%', l: 'Avg. ticket time' } },
      { quote: 'Their ServiceNow team turned a stalled rollout into a working CMDB and HRSD portal in one quarter. Adoption took care of itself.', name: 'Priya Subramanian', title: 'VP Digital, Atlas Health', location: 'Frankfurt · DE', metric: { v: '94%', l: 'Employee adoption' } },
    ],
  },
  DE: {
    eyebrow: 'Stimmen',
    items: [
      { quote: 'Grey Space IT hat die ERP-Lösung für unseren Kunden in den VAE termingerecht und auf außergewöhnlich hohem Niveau geliefert. Professionell, reaktionsschnell und technisch versiert \u2014 genau der Partner, den man bei einem kritischen Projekt an seiner Seite haben möchte. Future Sphere spricht eine uneingeschränkte Empfehlung aus.', name: 'Fatima', title: 'Operations Manager, Future Sphere', location: 'VAE', metric: { v: '100%', l: 'Termingerechte Lieferung' } },
      { quote: 'GPU-CFD, das früher eine Woche dauerte, läuft jetzt über Nacht. Unsere Ingenieure iterieren über Geometrien, die wir vorher nie probiert hätten.', name: 'Dr. Mateus Vega', title: 'Leiter Simulation, Forge Industrial', location: 'Stuttgart · DE', metric: { v: '6.4×', l: 'Schnellerer Simulationszyklus' } },
      { quote: 'Ein deutschsprachiger Desk, der SAP HANA wirklich versteht — wir eskalieren keine Tickets mehr, wir schließen sie.', name: 'Lena Hoffmann', title: 'Leiterin IT-Betrieb, Nordstern', location: 'Hamburg · DE', metric: { v: '38%', l: 'Durchschn. Ticketzeit' } },
      { quote: 'Ihr ServiceNow-Team hat aus einem festgefahrenen Rollout in einem Quartal eine funktionierende CMDB und ein HRSD-Portal gemacht. Die Akzeptanz kam von allein.', name: 'Priya Subramanian', title: 'VP Digital, Atlas Health', location: 'Frankfurt · DE', metric: { v: '94%', l: 'Mitarbeiterakzeptanz' } },
    ],
  },
};

function Testimonials({ lang = 'EN' }) {
  const TT = TESTIMONIALS_I18N[lang] || TESTIMONIALS_I18N.EN;
  const TESTIMONIALS = TT.items;
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const total = TESTIMONIALS.length;
  const touch = React.useRef({ x: 0, y: 0, t: 0, active: false });

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setIdx((i) => (i + 1) % total), 6500);
    return () => clearTimeout(t);
  }, [idx, paused, total]);

  const t = TESTIMONIALS[idx];

  const onTouchStart = (e) => {
    const tc = e.touches[0];
    touch.current = { x: tc.clientX, y: tc.clientY, t: Date.now(), active: true };
    setPaused(true);
  };
  const onTouchEnd = (e) => {
    if (!touch.current.active) return;
    const tc = e.changedTouches[0];
    const dx = tc.clientX - touch.current.x;
    const dy = tc.clientY - touch.current.y;
    const dt = Date.now() - touch.current.t;
    touch.current.active = false;
    if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2 && dt < 800) {
      if (dx < 0) setIdx((idx + 1) % total);
      else setIdx((idx - 1 + total) % total);
    }
    setTimeout(() => setPaused(false), 4000);
  };

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      className="gs-testimonials-section"
      style={{padding: 'clamp(48px,8vw,120px) var(--page-px,40px)', background: 'var(--gs-50)'}}>
      <div style={{maxWidth: 1240, margin: '0 auto'}}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 13,
          letterSpacing: '0.14em', color: 'var(--fg-muted)',
          textTransform: 'uppercase', marginBottom: 40,
          display: 'inline-flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)'}}/>
          {TT.eyebrow}
        </div>

        <div style={{
          position: 'relative',
          minHeight: 360,
        }}>
          {TESTIMONIALS.map((item, i) => (
            <div key={i} style={{
              position: i === idx ? 'relative' : 'absolute',
              inset: 0,
              opacity: i === idx ? 1 : 0,
              transform: i === idx ? 'translateY(0)' : 'translateY(12px)',
              transition: 'opacity 520ms var(--ease-standard), transform 520ms var(--ease-standard)',
              pointerEvents: i === idx ? 'auto' : 'none',
            }}>
              <div className="gs-test-quotemark" style={{
                fontFamily: 'var(--font-serif)', fontStyle: 'italic',
                fontSize: 88, lineHeight: 0.6, color: 'var(--accent)',
                marginBottom: 0,
              }}>&ldquo;</div>
              <blockquote
                className="gs-testimonial-quote"
                style={{
                  margin: '8px 0 0',
                  fontSize: 38, lineHeight: 1.25, letterSpacing: '-0.018em',
                  fontWeight: 400, color: 'var(--gs-900)',
                  maxWidth: 1040,
                }}
                dangerouslySetInnerHTML={{__html: item.quote}}
              />

              <div className="gs-test-meta-grid" style={{
                marginTop: 56,
                display: 'grid',
                gridTemplateColumns: '1fr auto',
                alignItems: 'end',
                gap: 32,
                paddingTop: 28,
                borderTop: '1px solid var(--border)',
              }}>
                <div className="gs-test-author" style={{display: 'flex', alignItems: 'center', gap: 16}}>
                  <div style={{
                    width: 48, height: 48, borderRadius: '50%',
                    background: 'var(--gs-200)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 14, fontWeight: 600, color: 'var(--gs-700)',
                    fontFamily: 'var(--font-sans)',
                  }}>{item.name.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
                  <div>
                    <div className="gs-test-name" style={{fontSize: 15, fontWeight: 600, color: 'var(--gs-900)'}}>{item.name}</div>
                    <div className="gs-test-title" style={{fontSize: 13, color: 'var(--gs-500)', marginTop: 2}}>
                      {item.title}
                      <span className="gs-test-sep" style={{margin: '0 8px', color: 'var(--gs-300)'}}>·</span>
                      <span style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em'}}>{item.location}</span>
                    </div>
                  </div>
                </div>
                <div className="gs-test-metric" style={{textAlign: 'right'}}>
                  <div style={{
                    fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em',
                    color: 'var(--gs-900)', lineHeight: 1,
                  }}>{item.metric.v}</div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10,
                    letterSpacing: '0.14em', color: 'var(--gs-400)',
                    textTransform: 'uppercase', marginTop: 8,
                  }}>{item.metric.l}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Progress bars + manual controls */}
        <div className="gs-test-controls" style={{
          marginTop: 48,
          display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap',
        }}>
          <div style={{display: 'flex', gap: 8, marginRight: 8}}>
            <button
              onClick={() => setIdx((idx - 1 + total) % total)}
              aria-label="Previous testimonial"
              style={{
                width: 44, height: 44, borderRadius: 999,
                border: '1px solid var(--border-strong)',
                background: '#fff', color: 'var(--gs-900)',
                fontSize: 16, cursor: 'pointer',
                transition: 'background 160ms, border-color 160ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gs-900)'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = 'var(--gs-900)'; }}
            >←</button>
            <button
              onClick={() => setIdx((idx + 1) % total)}
              aria-label="Next testimonial"
              style={{
                width: 44, height: 44, borderRadius: 999,
                border: '1px solid var(--border-strong)',
                background: '#fff', color: 'var(--gs-900)',
                fontSize: 16, cursor: 'pointer',
                transition: 'background 160ms, border-color 160ms',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gs-900)'; e.currentTarget.style.color = '#fff'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = '#fff'; e.currentTarget.style.color = 'var(--gs-900)'; }}
            >→</button>
          </div>
          {TESTIMONIALS.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} aria-label={`Go to testimonial ${i+1}`} style={{
              flex: 1,
              height: 2,
              border: 'none', padding: 0,
              background: 'var(--gs-200)',
              position: 'relative',
              cursor: 'pointer',
              overflow: 'hidden',
            }}>
              <span style={{
                position: 'absolute', inset: 0,
                background: 'var(--gs-900)',
                transformOrigin: 'left',
                transform: i < idx ? 'scaleX(1)' : i === idx && !paused ? 'scaleX(1)' : i === idx ? 'scaleX(0.5)' : 'scaleX(0)',
                animation: i === idx && !paused ? 'tprog 6.5s linear forwards' : 'none',
              }}/>
            </button>
          ))}
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            letterSpacing: '0.14em', color: 'var(--gs-400)',
            marginLeft: 8, minWidth: 50, textAlign: 'right',
          }}>{String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
        </div>
      </div>
      <style>{`
        @keyframes tprog {
          from { transform: scaleX(0); }
          to { transform: scaleX(1); }
        }
      `}</style>
    </section>
  );
}

window.Testimonials = Testimonials;