/* global React, Reveal, Icon */
// המלצות — infinite horizontal marquee carousel + admin supports image upload (WhatsApp screenshots etc.)
const { useState: useStateT, useRef: useRefT, useEffect: useEffectT } = React;

const TestimonialCard = ({ t }) => (
  <div style={{
    flexShrink: 0, width: 340, background: 'var(--white)', borderRadius: 'var(--radius-lg)',
    padding: '28px 26px 24px', border: '1px solid rgba(28,20,19,0.05)',
    boxShadow: 'var(--shadow-md)', display: 'flex', flexDirection: 'column',
    margin: '0 12px', position: 'relative',
  }}>
    <div aria-hidden="true" style={{ position: 'absolute', top: 16, left: 20, color: 'var(--red-100)' }}>
      <Icon name="quote" size={40} />
    </div>
    <div style={{ display: 'flex', gap: 3, color: 'var(--gold)', marginBottom: 14, position: 'relative' }}>
      {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={15} style={{ fill: 'var(--gold)' }} />)}
    </div>

    {t.img && (
      <div style={{
        width: '100%', borderRadius: 10, overflow: 'hidden',
        marginBottom: 16, background: 'var(--surface-tint)', position: 'relative',
      }}>
        <img
          src={t.img}
          alt={`המלצה מאת ${t.name}`}
          style={{ width: '100%', maxHeight: 240, objectFit: 'contain', display: 'block' }}
        />
      </div>
    )}

    <p style={{
      position: 'relative', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 17.5,
      lineHeight: 1.65, color: 'var(--ink-900)', margin: '0 0 20px', flex: 1,
    }}>„{t.text}"</p>
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{
        width: 44, height: 44, borderRadius: '50%', overflow: 'hidden', flexShrink: 0,
        background: 'var(--red-200)', display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--brand)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18,
      }}>
        {(t.name || '?').trim().charAt(0)}
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, color: 'var(--ink-900)' }}>{t.name}</div>
        {t.role && <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-500)' }}>{t.role}</div>}
      </div>
    </div>
  </div>
);

const TestimonialsSection = ({ testimonials }) => {
  const trackRef = useRefT(null);
  const [paused, setPaused] = useStateT(false);

  // Duplicate cards for seamless infinite scroll
  const items = testimonials.length > 0 ? [...testimonials, ...testimonials, ...testimonials] : [];
  const speed = Math.max(testimonials.length * 8, 24); // seconds for full scroll

  useEffectT(() => {
    const track = trackRef.current;
    if (!track || testimonials.length === 0) return;
    // Reset scroll position for seamless loop
    const cardW = 364; // 340 + 2*12 margin
    const totalW = cardW * testimonials.length;
    let animId;
    let pos = 0;
    const step = () => {
      if (!paused) {
        pos += 0.6;
        if (pos >= totalW) pos = 0;
        track.style.transform = `translateX(${pos}px)`;
      }
      animId = requestAnimationFrame(step);
    };
    animId = requestAnimationFrame(step);
    return () => cancelAnimationFrame(animId);
  }, [testimonials, paused]);

  return (
    <section id="testimonials" style={{ background: 'var(--paper)', padding: 'var(--section-y) 0', overflow: 'hidden' }}>
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '0 28px' }}>
        <Reveal as="div" style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="mln-eyebrow">המלצות</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(1.9rem, 3.4vw, 2.8rem)', margin: 0, color: 'var(--ink-900)' }}>
            מה אומרים מי שכבר נגעו במילים
          </h2>
        </Reveal>
      </div>

      {testimonials.length === 0 ? (
        <div style={{ textAlign: 'center', color: 'var(--ink-500)', fontFamily: 'var(--font-body)', padding: '0 28px' }}>
          בקרוב יתווספו כאן המלצות.
        </div>
      ) : (
        <div
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{ overflow: 'hidden', cursor: 'default' }}
        >
          <div
            ref={trackRef}
            style={{
              display: 'flex', alignItems: 'stretch',
              willChange: 'transform',
            }}
          >
            {items.map((t, i) => (
              <TestimonialCard key={t.id + '-' + i} t={t} />
            ))}
          </div>
        </div>
      )}
    </section>
  );
};
window.TestimonialsSection = TestimonialsSection;