/* Testimonials — 3D coverflow stack with avatar filmstrip tabs and a progress ring. */
const QUOTES = [
  { q: "I was stuck trying to make my startup fashion brand look distinctive — we could not settle on a logo or a palette that showed our vibe. The team at ZaviFx built the whole visual identity and the graphic assets that go with it.", n: 'Emilia Clarke', r: 'Manager · Fashion label', m: 'Brand identity', a: 'avatars/a1.png' },
  { q: "Really happy with the website ZaviFx made for my business. Their designers gave us a proper visual brand with a clean logo and colours that show customers who we are. Fast service, top notch results.", n: 'Cristian Torres', r: 'Founder · Interiors studio', m: 'WordPress build', a: 'avatars/a2.png' },
  { q: "ZaviFx know their stuff. Since working with their team our traffic and sales have noticeably gone up. What stands out is that they learn your business goals before touching a campaign.", n: 'Michael Terry', r: 'Director · B2B services', m: 'Performance marketing', a: 'avatars/a3.png' },
  { q: "The SEO audit was the first one we have received that our developers could actually action. Every issue had a file, a fix and a priority — and the rankings followed.", n: 'Priya Nair', r: 'Marketing lead · SaaS', m: 'Technical SEO' },
  { q: "We came for a WordPress rebuild and left with a documented design system. Page speed went from painful to instant, and the enquiry form finally converts on mobile.", n: 'Rahul Menon', r: 'Owner · Manufacturing', m: 'Website rebuild' },
  { q: "One brief, one team. We used to brief three vendors and reconcile three reports. Now the strategy, the build and the ads sit in one conversation.", n: 'Sana Fatima', r: 'Head of growth · E-commerce', m: 'Growth retainer' },
  { q: "Their content calendar is built around search demand and the objections our sales team actually hears. That alone changed the quality of our inbound leads.", n: 'Daniel Roy', r: 'Co-founder · Fintech', m: 'Content strategy' },
  { q: "Handover was the best part. Accounts, code, design files and the tracking plan were all ours from day one, documented. No lock-in, no mystery.", n: 'Aisha Khan', r: 'COO · Healthcare group', m: 'Handover' },
  { q: "Reporting is one page and it answers the only question my board asks: what did this cost, and what did it return.", n: 'Vikram Shetty', r: 'MD · Logistics', m: 'Reporting' },
];

function TFace({ t, cls }) {
  if (t.a) return <img className={cls} src={window.ASSETS + t.a} alt="" loading="lazy" />;
  return <span className={cls + ' zx-tq__ini'} aria-hidden="true">{t.n.split(' ').map((w) => w[0]).join('')}</span>;
}

function Testimonials() {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const N = QUOTES.length;
  const step = (d) => setI((n) => (n + d + N) % N);
  React.useEffect(() => {
    if (reduce || paused) return;
    const t = setInterval(() => setI((n) => (n + 1) % N), 6000);
    return () => clearInterval(t);
  }, [paused, reduce, N]);

  const tilt = (e) => {
    const el = e.currentTarget, r = el.getBoundingClientRect();
    el.style.setProperty('--tx', (((e.clientX - r.left) / r.width - 0.5) * 9).toFixed(2) + 'deg');
    el.style.setProperty('--ty', (((e.clientY - r.top) / r.height - 0.5) * -7).toFixed(2) + 'deg');
    el.style.setProperty('--lx', (((e.clientX - r.left) / r.width) * 100).toFixed(1) + '%');
    el.style.setProperty('--ly', (((e.clientY - r.top) / r.height) * 100).toFixed(1) + '%');
  };
  const untilt = (e) => { const s = e.currentTarget.style; s.setProperty('--tx', '0deg'); s.setProperty('--ty', '0deg'); };

  return (
    <section className="zx-tq" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <span className="zx-tq__aura" aria-hidden="true" />
      <div className="zx-container zx-tq__inner">
        <header className="zx-tq__head" data-reveal>
          <span className="zx-tq__eyebrow"><i aria-hidden="true" />Real testimonials</span>
          <h2 className="zx-tq__h2">Nine clients, in their own words</h2>
        </header>

        <div className="zx-tq__deck">
          {QUOTES.map((t, n) => {
            const o = ((n - i) % N + N) % N;
            const pos = o === 0 ? 0 : o === 1 ? 1 : o === N - 1 ? -1 : 2;
            return (
              <article key={t.n} className="zx-tq__card" data-pos={pos} aria-hidden={pos !== 0}
                onMouseMove={pos === 0 ? tilt : undefined} onMouseLeave={pos === 0 ? untilt : undefined}
                onClick={pos !== 0 ? () => setI(n) : undefined}>
                <span className="zx-tq__veil" aria-hidden="true" />
                <span className="zx-tq__glare" aria-hidden="true" />
                <span className="zx-tq__mark" aria-hidden="true">”</span>
                <span className="zx-tq__tag">{t.m}</span>
                <blockquote className="zx-tq__q">
                  {t.q.split(' ').map((w, k) => (
                    <span key={k} className="zx-tq__word" style={{ animationDelay: (k * 0.024) + 's' }}>{w}&nbsp;</span>
                  ))}
                </blockquote>
                <footer className="zx-tq__by">
                  <TFace t={t} cls="zx-tq__ava" />
                  <span>
                    <strong>{t.n}</strong>
                    <em>{t.r}</em>
                  </span>
                </footer>
              </article>
            );
          })}
        </div>

        <div className="zx-tq__ctrl">
          <button type="button" className="zx-tq__arrow" onClick={() => step(-1)} aria-label="Previous testimonial">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M14 9H4M8 4L3.5 9l4.5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
          <div className="zx-tq__strip" role="tablist" aria-label="Testimonials">
            {QUOTES.map((t, n) => (
              <button key={t.n} type="button" role="tab" aria-selected={n === i} aria-label={'Testimonial from ' + t.n}
                className="zx-tq__thumb" data-on={n === i ? '' : undefined} onClick={() => setI(n)}>
                <TFace t={t} cls="zx-tq__thumbimg" />
                <span className="zx-tq__ring" data-paused={paused ? '' : undefined} aria-hidden="true" />
              </button>
            ))}
          </div>
          <button type="button" className="zx-tq__arrow" onClick={() => step(1)} aria-label="Next testimonial">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 9h10M10 4l4.5 5-4.5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Testimonials, QUOTES });