// VELOUR marketing site — rotating testimonial pull quotes.
const { Avatar } = window.VelourDesignSystem_380ed4;

// EMPTY ON PURPOSE, and the section hides itself while it is. Three invented
// members — Jude Lin, Priya Natesan, Marcus Reid — sat here with quotes and
// join dates under the heading "From the people who use it". Nobody uses it
// yet. A testimonial is a person's word, so it can only ever be attributed to
// a person who actually said it; add real ones and the section returns.
const QUOTES = [];

function Testimonial() {
  const [i, setI] = React.useState(0);
  const [out, setOut] = React.useState(false);
  const timer = React.useRef(null);
  const go = (next) => {
    setOut(true);
    setTimeout(() => { setI(next); setOut(false); }, 380);
  };
  React.useEffect(() => {
    if (!QUOTES.length) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    timer.current = setInterval(() => go((i + 1) % QUOTES.length), 7000);
    return () => clearInterval(timer.current);
  }, [i]);
  if (!QUOTES.length) return null;
  const t = QUOTES[i];
  return (
    <window.Section bg="var(--surface-card)" pad={112} style={{ borderTop: "var(--border-width) solid var(--border)", borderBottom: "var(--border-width) solid var(--border)" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <window.Eyebrow style={{ marginBottom: 32 }}>From the people who use it</window.Eyebrow>
        <div aria-live="polite" style={{ opacity: out ? 0 : 1, transform: out ? "translateY(10px)" : "none", transition: "opacity .38s cubic-bezier(.16,1,.3,1), transform .38s cubic-bezier(.16,1,.3,1)" }}>
          <blockquote style={{ fontFamily: "var(--font-serif)", fontWeight: 500, fontStyle: "italic", fontSize: 36, lineHeight: 1.32, letterSpacing: "-0.015em", color: "var(--text-primary)", margin: 0, minHeight: "3.9em", display: "flex", alignItems: "center", justifyContent: "center", textWrap: "balance" }}>
          “{t.q}”
          </blockquote>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, marginTop: 36 }}>
            <Avatar name={t.name} ring={t.ring} />
            <div style={{ textAlign: "left" }}>
              <div style={{ fontSize: 15, color: "var(--text-primary)", fontWeight: 500 }}>{t.name}</div>
              <div style={{ fontSize: 13, color: "var(--text-tertiary)" }}>{t.since}</div>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 10, marginTop: 34 }}>
          {QUOTES.map((_, j) => (
            <button key={j} aria-label={`Quote ${j + 1}`} onClick={() => { if (j !== i) go(j); }} style={{
              width: 8, height: 8, borderRadius: "50%", padding: 0, border: "none", cursor: "pointer",
              background: j === i ? "var(--ink)" : "var(--border)", transition: "background .4s, transform .4s",
              transform: j === i ? "scale(1.25)" : "none",
            }}></button>
          ))}
        </div>
      </div>
    </window.Section>
  );
}

window.Testimonial = Testimonial;