/* testimonials.jsx — Kundenstimmen-Karussell (CMS-verwaltet via /api/references) */
const { useState: useStateT, useRef: useRefT, useEffect: useEffectT } = React;

const initials = (n) => (n || '').trim().split(/\s+/).slice(0, 2).map((w) => w[0] || '').join('').toUpperCase() || '#';

function Stars({ n = 5, size = 16 }) {
  return (
    <div className="tstars">
      {Array.from({ length: 5 }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24"
          fill={i < n ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.6">
          <path d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.8 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z"
            strokeLinejoin="round" />
        </svg>
      ))}
    </div>
  );
}

function TCard({ t }) {
  return (
    <article className="tcard">
      <span className="quote">&rdquo;</span>
      <p className="qtext">{t.text}</p>
      <Stars n={t.stars} />
      <div className="tmeta">
        <div className="tavatar">{t.image ? <img src={t.image} alt="" /> : initials(t.name)}</div>
        <div>
          <div className="tname">{t.name}</div>
          <div className="trole">{t.role}</div>
        </div>
      </div>
    </article>
  );
}

function Testimonials() {
  const { Reveal } = window;
  const [list, setList] = useStateT([]);
  const trackRef = useRefT(null);
  const [nav, setNav] = useStateT({ left: false, right: true });

  // Referenzen aus dem CMS laden (öffentlicher GET, nur aktive)
  useEffectT(() => {
    fetch('/api/references')
      .then((r) => (r.ok ? r.json() : []))
      .then((data) => setList(Array.isArray(data) ? data : []))
      .catch(() => setList([]));
  }, []);

  const updNav = () => {
    const el = trackRef.current; if (!el) return;
    setNav({ left: el.scrollLeft > 8, right: el.scrollLeft < el.scrollWidth - el.clientWidth - 8 });
  };
  useEffectT(() => { updNav(); }, [list]);

  const scrollBy = (dir) => {
    const el = trackRef.current; if (!el) return;
    const card = el.querySelector('.tcard');
    const w = card ? card.offsetWidth + 24 : 380;
    el.scrollBy({ left: dir * w, behavior: 'smooth' });
  };

  // Solange keine Referenzen erfasst sind, Sektion nicht anzeigen
  if (!list.length) return null;

  return (
    <section className="section" id="feedback">
      <div className="wrap">
        <div className="eyebrow-row">
          <div>
            <Reveal><span className="kicker">Kunden Feedback</span></Reveal>
            <Reveal delay={60}>
              <h2 className="section-title" style={{ marginTop: 16, maxWidth: '16ch' }}>
                Stimmen, die für sich <span className="grad-text">sprechen</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={120}>
            <div className="tnav">
              <button onClick={() => scrollBy(-1)} disabled={!nav.left} aria-label="Zurück">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M15 5l-7 7 7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
              <button onClick={() => scrollBy(1)} disabled={!nav.right} aria-label="Weiter">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </button>
            </div>
          </Reveal>
        </div>

        <div className="tcarousel" ref={trackRef} onScroll={updNav}>
          {list.map((t, i) => <TCard key={t.id || (t.name + i)} t={t} />)}
        </div>

        <Reveal delay={80}>
          <div className="mt-m flex aic gap-m wrap-f">
            <span className="small" style={{ color: 'var(--text-dim)' }}>{list.length} Stimmen</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });