// testimonials.jsx - real client reviews (Upwork). Rotating spotlight; scales to many.
// Add new entries to QUOTES; rating + project show automatically.
// Avatar is shown ONLY when `photo` is set - clients without a photo show no
// avatar (no initial, no circle), just their name/role.
// `highlight` (optional) = the single strongest pull-quote, shown large/focal;
// the full `quote` then renders smaller + muted beneath it. Omit highlight for
// already-short reviews - the full quote becomes the focal line.

const QUOTES = [
  {
    quote: 'Top-tier developer. I needed a custom automation to manage leads and subcontractors via SMS and Email, requiring complex data parsing and AI decision-making. Prometio delivered a robust solution that cleans data, protects client privacy, and generates professional reports automatically. Their communication was excellent, and they were proactive in suggesting improvements I hadn\u2019t thought of. Will definitely hire again.',
    author: 'Ernest Iremiren', role: 'CEO, UK Gas Plumbers Limited',
    highlight: 'Delivered a robust solution that cleans data, protects client privacy, and generates professional reports automatically.',
    photo: 'assets/team-ernest.png',
    project: 'AI Automation · Twilio · Google Sheets · Vapi',
    rating: 5,
  },
  {
    quote: 'Prometio is truly a wizard when it comes to n8n. They not only built out the workflow I requested, but improved it and made the flow much better than I had envisioned. They\u2019re great to work with and I will definitely be working with them on more projects moving forward. If you need an n8n build, look no further than Prometio.',
    author: 'Jonathan Bach', role: 'CEO, Riverstreet Media',
    highlight: 'Truly wizards when it comes to n8n. They made the flow much better than I had envisioned.',
    photo: 'assets/team-jonathan.png',
    project: 'n8n Workflow Automation',
    rating: 5,
  },
  {
    quote: 'Superb speed and quality of work. Very reliable, punctual and great attention to detail. Will be working with them again that\u2019s for sure.',
    author: 'David Szabo-Stuban', role: 'YouTuber',
    photo: 'assets/team-david.png',
    project: 'AI Automation',
    rating: 5,
  },
  {
    quote: 'Prometio did an outstanding job on my project. They understood the requirements immediately, communicated clearly throughout the process, and delivered a highly functional AI voice agent prototype faster than expected. Their technical depth in automations, n8n, voice AI, and integrations is impressive, and they handled every part of the workflow, from planning to execution, with professionalism and precision. I highly recommend working with them if you need a team that is reliable, efficient, and truly knowledgeable in AI automation.',
    author: 'Nicolas Olaya', role: 'Entrepreneur',
    highlight: 'Delivered a highly functional AI voice agent prototype faster than expected.',
    project: 'AI Voice Agent · n8n · Voice AI · Integrations',
    rating: 5,
  },
];

function Stars({ n = 5 }) {
  return (
    <div style={{ display: 'flex', gap: 3, justifyContent: 'center' }} aria-label={`${n} out of 5`}>
      {Array.from({ length: 5 }).map((_, k) => (
        <svg key={k} width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"
          fill={k < n ? 'var(--accent)' : 'var(--hairline)'}>
          <path d="M12 2l2.9 6.26L21.5 9.27l-4.75 4.64 1.12 6.55L12 17.27 6.13 20.46l1.12-6.55L2.5 9.27l6.6-1.01z" />
        </svg>
      ))}
    </div>
  );
}

function Testimonials() {
  const [ref, inView] = useInView({ threshold: 0.3 });
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [expanded, setExpanded] = React.useState(false);
  React.useEffect(() => { setExpanded(false); }, [i]);
  const many = QUOTES.length > 1;

  React.useEffect(() => {
    if (!inView || paused || !many) return;
    const id = setInterval(() => setI((p) => (p + 1) % QUOTES.length), 7000);
    return () => clearInterval(id);
  }, [inView, paused, many]);

  const t = QUOTES[i];

  return (
    <section id="testimonials" data-screen-label="Testimonials" className="sec" aria-labelledby="tst-h"
      style={{ minHeight: 'calc(100svh - 72px)', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 'clamp(32px, 5vh, 72px)' }}>
      <div className="sec-wrap" ref={ref} style={{ maxWidth: 880, textAlign: 'center' }}>
        <SectionHead eyebrow="In their words" align="center" max={680} style={{ marginBottom: 'clamp(24px, 4vh, 40px)' }}>
          <span id="tst-h">What clients <span className="accent">say</span></span>
        </SectionHead>

        <div className="glass-stage">
          <Reveal delay={120} className="glass glass-pro eglass eglass-soft lift"
            onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
            style={{ borderRadius: 24, padding: 'clamp(30px, 5vw, 56px)', position: 'relative', overflow: 'hidden',
              minHeight: 'clamp(330px, 42vh, 384px)', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <span aria-hidden="true" style={{ position: 'absolute', top: 2, left: 26, fontFamily: 'Georgia, serif', fontSize: 130, lineHeight: 1, color: 'var(--accent)', opacity: 0.1 }}>&ldquo;</span>

            <div key={`s${i}`} style={{ animation: 'fadeq 600ms cubic-bezier(0.16,1,0.3,1)' }}>
              <Stars n={t.rating} />
            </div>

            <p key={`q${i}`} style={{
              fontFamily: 'var(--font-display)', fontWeight: 550, fontSize: 'clamp(1.15rem, 2.1vw, 1.55rem)',
              lineHeight: 1.45, color: 'var(--fg)', margin: '20px 0 0', position: 'relative',
              animation: 'fadeq 600ms cubic-bezier(0.16,1,0.3,1)',
            }}>{t.highlight || t.quote}</p>

            {t.highlight && (
              <div style={{ marginTop: 18 }}>
                {expanded && (
                  <p key={`f${i}`} style={{
                    fontSize: 13.5, lineHeight: 1.65, color: 'var(--fg-muted)', margin: '0 auto 16px', maxWidth: 600,
                    animation: 'fadeq 400ms cubic-bezier(0.16,1,0.3,1)',
                  }}>{t.quote}</p>
                )}
                <button onClick={() => setExpanded((v) => !v)} aria-expanded={expanded} style={{
                  all: 'unset', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
                  fontSize: 12.5, fontWeight: 600, letterSpacing: '0.02em', color: 'var(--accent)', whiteSpace: 'nowrap',
                }}>
                  {expanded ? 'Hide full review' : 'Read full review'}
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="square"
                    style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 280ms ease' }}><path d="M6 9l6 6 6-6" /></svg>
                </button>
              </div>
            )}

            <div key={`a${i}`} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, marginTop: 28, flexWrap: 'wrap', animation: 'fadeq 600ms cubic-bezier(0.16,1,0.3,1)' }}>
              {t.photo && (
                <div style={{ width: 46, height: 46, borderRadius: 999, overflow: 'hidden', flexShrink: 0, border: '1px solid var(--eyebrow-bd)' }}>
                  <img src={t.photo} alt={t.author} style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'grayscale(1)' }} />
                </div>
              )}
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontWeight: 600, fontSize: 14.5, color: 'var(--fg)' }}>{t.author}</div>
                <div style={{ fontSize: 12.5, color: 'var(--fg-faint)' }}>{t.role}</div>
              </div>
              {t.project && (
                <React.Fragment>
                  <span style={{ width: 1, height: 26, background: 'var(--hairline)' }} />
                  <span className="mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-faint)', textAlign: 'left', maxWidth: 220 }}>{t.project}</span>
                </React.Fragment>
              )}
            </div>
          </Reveal>
        </div>

        {many && (
          <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 26 }}>
            {QUOTES.map((_, j) => (
              <button key={j} onClick={() => { setI(j); setPaused(true); }} aria-label={`Testimonial ${j + 1}`} style={{
                height: 8, width: j === i ? 24 : 8, borderRadius: 999, border: 'none', cursor: 'pointer', padding: 0,
                background: j === i ? 'var(--accent)' : 'var(--hairline)', transition: 'all 300ms ease',
              }} />
            ))}
          </div>
        )}

        <Reveal delay={180} style={{ marginTop: 22 }}>
          <p style={{ fontSize: 12.5, letterSpacing: '0.04em', color: 'var(--fg-faint)', margin: 0 }}>Verified reviews from Upwork engagements.</p>
        </Reveal>
      </div>
    </section>
  );
}

window.Testimonials = Testimonials;