/* Carpooling micro-animation for the hero white space.
   Seats fill one-by-one with passengers and the per-person cost drops live
   (€74 solo → €18.50 split four ways). Loops. Light-section friendly. */

function CarpoolAnimation() {
  const [count, setCount] = React.useState(1);
  const [, force] = React.useState(0);
  const TOTAL = 74;
  const D = window.__ELLA_DRIVERS__ || {};
  const seats = [
    { id: 'ΓΚ', color: '#1486E6', photo: D.d4 },
    { id: 'ΜΠ', color: '#00A86B', photo: D.d2 },
    { id: 'ΑΔ', color: '#7A5AF8', photo: D.d1 },
    { id: 'ΕΛ', color: '#F5A623', photo: D.d5 },
  ];

  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setCount(4); return; }
    let n = 1;
    const id = setInterval(() => {
      n = n >= 4 ? 1 : n + 1;
      setCount(n);
    }, 1500);
    const onLang = () => force(x => x + 1);
    window.addEventListener('langchange', onLang);
    return () => { clearInterval(id); window.removeEventListener('langchange', onLang); };
  }, []);

  React.useEffect(() => {
    const s = document.createElement('style');
    s.id = 'carpool-kf';
    s.textContent = `
      @keyframes seatPop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
      @keyframes carpoolWheel { to { transform: rotate(360deg); } }
    `;
    document.head.appendChild(s);
    return () => { const el = document.getElementById('carpool-kf'); if (el) el.remove(); };
  }, []);

  const t = window.t;
  const lang = window.__LANG__ || 'el';
  const perPerson = (TOTAL / count);
  const label = lang === 'el'
    ? `Κόστος μοιρασμένο σε ${count} ${count === 1 ? 'ταξιδιώτη' : 'ταξιδιώτες'}`
    : `Cost split between ${count} ${count === 1 ? 'traveller' : 'travellers'}`;
  const perLabel = lang === 'el' ? 'ανά άτομο' : 'per person';

  return (
    <div style={{
      background: '#fff',
      border: '1px solid var(--border-subtle)',
      borderRadius: 'var(--radius-lg)',
      boxShadow: 'var(--shadow-md)',
      padding: '22px 24px',
      display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
    }}>
      {/* van + seat avatars */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 18, flex: '1 1 260px' }}>
        {/* filled blue van — passengers appear as seats fill */}
        <CarpoolVan width={150} count={count} moving />
        {/* seat row — real driver photos (drop your own) */}
        <div style={{ display: 'flex', gap: 8 }}>
          {seats.map((s, i) => {
            const filled = i < count;
            return (
              <div key={s.id} style={{
                position: 'relative', width: 40, height: 40, borderRadius: '50%',
                animation: filled ? `seatPop 360ms var(--ease-out) both` : 'none',
                opacity: filled ? 1 : 0.4,
                transition: 'opacity 240ms',
              }}>
                {/* colored ring base */}
                <div style={{
                  position: 'absolute', inset: 0, borderRadius: '50%',
                  background: filled ? s.color : 'var(--gray-100)',
                  border: filled ? `2px solid ${s.color}` : '1.5px dashed var(--gray-300)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 12,
                  color: filled ? 'rgba(255,255,255,0.92)' : 'var(--gray-300)',
                }}>{filled ? s.id : ''}</div>
                {/* photo slot overlays the ring once a real photo is dropped */}
                <image-slot id={`carpool-driver-${i + 1}`} shape="circle" src={s.photo} style={{ position: 'absolute', inset: 0, width: '40px', height: '40px', opacity: filled ? 1 : 0 }} placeholder=""></image-slot>
              </div>
            );
          })}
        </div>
      </div>

      {/* live cost */}
      <div style={{ flex: '0 0 auto', textAlign: 'right', minWidth: 150 }}>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--text-muted)', marginBottom: 2 }}>{label}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, justifyContent: 'flex-end' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 34, color: 'var(--green)', letterSpacing: '-0.02em', lineHeight: 1 }}>
            €{perPerson.toFixed(2)}
          </span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--gray-500)' }}>{perLabel}</span>
        </div>
      </div>
    </div>
  );
}

window.CarpoolAnimation = CarpoolAnimation;