function MomentCard({ photo, name, route, rot, accent }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        flexShrink: 0, width: 184, background: '#fff', borderRadius: 16,
        padding: 10, paddingBottom: 14,
        boxShadow: hov ? '0 20px 40px rgba(0,0,0,0.12)' : '0 4px 12px rgba(0,0,0,0.05)',
        border: '1px solid #e5e5e5',
        transform: `rotate(${hov ? 0 : rot}deg) translateY(${hov ? -8 : 0}px) scale(${hov ? 1.05 : 1})`,
        transition: 'transform 380ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 380ms ease-out',
        position: 'relative', zIndex: hov ? 5 : 1, cursor: 'default',
      }}
    >
      <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', height: 164, background: '#f3f3f3' }}>
        <img src={photo} alt={name} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        <div style={{
          position: 'absolute', top: 8, right: 8, width: 26, height: 26, borderRadius: '50%',
          background: 'rgba(255,255,255,0.9)', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 13, color: accent, transform: hov ? 'scale(1)' : 'scale(0)',
          transition: 'transform 320ms cubic-bezier(0.34,1.56,0.64,1)',
        }}>♥</div>
        <div style={{
          position: 'absolute', bottom: 8, left: 8, display: 'inline-flex', alignItems: 'center', gap: 4,
          padding: '3px 8px', borderRadius: 999, background: 'rgba(23,23,23,0.7)', backdropFilter: 'blur(4px)',
          color: '#fff', fontSize: 10, fontWeight: 600, fontFamily: "'DM Sans', sans-serif",
        }}>✓ Verified</div>
      </div>
      <div style={{ padding: '11px 4px 0' }}>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: 14, color: '#171717' }}>{name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3, fontSize: 11.5, color: '#6a6a6a', fontFamily: "'DM Sans', sans-serif" }}>
          <span style={{ width: 5, height: 5, borderRadius: '50%', background: accent }} /> {route}
        </div>
      </div>
    </div>
  );
}

function MomentsWall() {
  const [, force] = React.useState(0);
  React.useEffect(() => {
    const onLang = () => force(n => n + 1);
    window.addEventListener('langchange', onLang);
    return () => window.removeEventListener('langchange', onLang);
  }, []);

  React.useEffect(() => {
    const s = document.createElement('style');
    s.id = 'moments-kf-v6';
    s.textContent = `
      @keyframes momentsLV6 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      @keyframes momentsRV6 { from { transform: translateX(-50%); } to { transform: translateX(0); } }
      .moments-track-v6 { display: flex; gap: 22px; width: max-content; will-change: transform; }
      .moments-row-v6:hover .moments-track-v6 { animation-play-state: paused; }
    `;
    document.head.appendChild(s);
    return () => { const el = document.getElementById('moments-kf-v6'); if (el) el.remove(); };
  }, []);

  const t = window.t;
  const D = window.__ELLA_DRIVERS__ || {};
  const P = window.__ELLA_PERSONAS__ || {};
  const lang = window.__LANG__ || 'el';
  const L = (el, en) => (lang === 'el' ? el : en);

  const row1 = [
    { photo: D.d4, name: 'Γιώργος Κ.', route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#0096F7' },
    { photo: P.students, name: L('Παρέα φοιτητών', 'Student crew'), route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#00A86B' },
    { photo: D.d2, name: 'Μαρία Π.', route: L('Θεσ/νίκη → Αθήνα', 'Thessaloniki → Athens'), accent: '#7A5AF8' },
    { photo: D.d1, name: 'Ελένη Δ.', route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#0096F7' },
    { photo: P.commuter, name: L('Καθημερινοί', 'Daily commuters'), route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#F5A623' },
    { photo: D.d5, name: 'Νίκος Α.', route: L('Θεσ/νίκη → Αθήνα', 'Thessaloniki → Athens'), accent: '#00A86B' },
  ];
  const row2 = [
    { photo: D.d3, name: 'Δάφνη Λ.', route: L('Θεσ/νίκη → Αθήνα', 'Thessaloniki → Athens'), accent: '#7A5AF8' },
    { photo: P.family, name: L('Φίλοι', 'Friends'), route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#0096F7' },
    { photo: D.d4, name: 'Κώστας Μ.', route: L('Θεσ/νίκη → Αθήνα', 'Thessaloniki → Athens'), accent: '#00A86B' },
    { photo: D.d2, name: 'Άννα Σ.', route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#F5A623' },
    { photo: D.d1, name: 'Ραφαήλ Τ.', route: L('Θεσ/νίκη → Αθήνα', 'Thessaloniki → Athens'), accent: '#0096F7' },
    { photo: P.commuter, name: L('Η παρέα', 'The crew'), route: L('Αθήνα → Θεσσαλονίκη', 'Athens → Thessaloniki'), accent: '#7A5AF8' },
  ];
  const rots = [-3, 2.4, -1.6, 3, -2.2, 1.8];

  const Row = ({ items, dir, dur }) => {
    const loop = [...items, ...items];
    return (
      <div className="moments-row-v6 overflow-hidden py-6">
        <div className="moments-track-v6" style={{ animation: `${dir === 'l' ? 'momentsLV6' : 'momentsRV6'} ${dur}s linear infinite` }}>
          {loop.map((m, i) => <MomentCard key={i} {...m} rot={rots[i % rots.length]} />)}
        </div>
      </div>
    );
  };

  return (
    <section id="moments" className="bg-white py-20 overflow-hidden border-t border-b border-[#e5e5e5]">
      <div className="max-w-[1140px] mx-auto px-4 md:px-10 text-center" data-reveal>
        <span className="text-xs font-semibold text-[#0096F7] uppercase tracking-wider block mb-2">
          {t('moments.eyebrow')}
        </span>
        <h2 className="font-sans font-normal text-3xl md:text-[44px] text-[#171717] tracking-tight">
          {t('moments.title')}
        </h2>
        <p className="mt-3 max-w-[560px] mx-auto text-base text-[#6a6a6a]">
          {t('moments.sub')}
        </p>
      </div>

      <div className="mt-8">
        <Row items={row1} dir="l" dur={46} />
        <Row items={row2} dir="r" dur={54} />
      </div>
    </section>
  );
}

window.MomentsWall = MomentsWall;