/* global React */
const { useState: useStateTesti, useEffect: useEffectTesti, useRef: useRefTesti } = React;

/** Word wrapper for staggered fade-up */
const TWord = ({ children, delay }) => (
  <span className="word" style={{ transitionDelay: `${delay}ms` }}>{children}</span>
);

/** Count-up component shared shape — animates 0 → target on viewport enter */
function CountUpTesti({ to, duration = 1600, delay = 0, format }) {
  const [v, setV] = useStateTesti(0);
  const ref = useRefTesti(null);
  useEffectTesti(() => {
    const el = ref.current;
    if (!el) return;
    let raf = 0;
    let active = false;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !active) {
            active = true;
            setV(0);
            const start = performance.now() + delay;
            const tick = (now) => {
              if (now < start) { raf = requestAnimationFrame(tick); return; }
              const t = Math.min(1, (now - start) / duration);
              const eased = 1 - Math.pow(1 - t, 3);
              setV(to * eased);
              if (t < 1) raf = requestAnimationFrame(tick);
            };
            raf = requestAnimationFrame(tick);
          } else if (!e.isIntersecting) {
            active = false;
            cancelAnimationFrame(raf);
          }
        });
      },
      { threshold: 0.4 }
    );
    io.observe(el);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [to, duration, delay]);
  return <span ref={ref}>{format(v)}</span>;
}

const QUOTES = [
  {
    name: "Majad Hussain",
    role: "CEO · Klinically",
    body: "Working with Zian was an absolute pleasure. His knowledge and expertise is second to none. He understood what I was trying to achieve straight away and did everything I asked and more. The GHL snapshot he built was an absolute monster — very detailed and intricate. He is a master at GHL. I would 100% use him again.",
    count: 400, countFmt: (v) => `${Math.round(v)}+`, lbl: "workflows",
  },
  {
    name: "Samuel Deegan",
    role: "CEO · The Tech Team",
    body: "Zian is a brilliant man. He is honest and very hard working, with a relatively rare character. He has been amazingly helpful in the areas of operations and project management. I can not recommend him enough.",
    chip: "Operations",
  },
  {
    name: "Greg Farricielli",
    role: "Owner · Stacked Property Holdings",
    body: "Zian is really knowledgeable and able to think and make things happen!",
    chip: "GHL",
  },
  {
    name: "Paul Ace",
    role: "CEO · Amplifyc.com",
    body: "A fantastic addition to any team. Great team player with a strong focus on personal development. Really appreciated Zian's work on our project. Highly recommended.",
    chip: "Project mgmt",
  },
];

function Testimonials() {
  return (
    <section className="at-section at-testi" id="testimonials">
      <div className="at-container">
        <div className="at-eyebrow">Operators on record</div>
        <h2 className="at-testi-quote">
          <TWord delay={0}>What</TWord>{' '}
          <TWord delay={70}>the</TWord>{' '}
          <TWord delay={140}>people</TWord>{' '}
          <TWord delay={210}>who</TWord>
          <br />
          <TWord delay={300}>paid</TWord>{' '}
          <TWord delay={370}>us</TWord>{' '}
          <TWord delay={440}>actually</TWord>{' '}
          <TWord delay={510}>said.</TWord>
        </h2>

        <div className="at-testi-stack">
          {QUOTES.map((q, i) => (
            <article key={i} className="at-testi-card" style={{ '--i': i }}>
              <div className="at-testi-author">
                <span className="at-testi-name">{q.name}</span>
                <span className="at-testi-role">{q.role}</span>
              </div>
              <p className="at-testi-body">"{q.body}"</p>
              <div className="at-testi-meta">
                {q.count != null ? (
                  <>
                    <span className="big">
                      <CountUpTesti to={q.count} duration={1600} delay={300} format={q.countFmt} />
                    </span>
                    {q.lbl}
                  </>
                ) : (
                  <span className="at-testi-chip">{q.chip}</span>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;