// Testimonials carousel
function Testimonials() {
  const [i, setI] = useState(0);
  const ref = useReveal();
  const t = TESTIMONIALS[i];
  const initials = t.name.split(' ').map(w => w[0]).join('');
  const next = () => setI((i + 1) % TESTIMONIALS.length);
  const prev = () => setI((i - 1 + TESTIMONIALS.length) % TESTIMONIALS.length);
  return (
    <section className="de-section de-section--dark de-testimonials" ref={ref}>
      <img className="de-testimonials__bg" src="assets/imagery/bedroom-bay-sunset.png" alt=""/>
      <div className="de-testimonials__overlay"></div>

      <div className="de-container">
        <div className="de-testimonials__head de-reveal is-in">
          <div className="de-eyebrow" style={{color: 'var(--de-gold)'}}>Reviews · Over 1,000 Trust</div>
          <h2 className="de-testimonials__heading">
            What our <em>principals</em><br/>say of the work.
          </h2>
        </div>

        <div className="de-testimonials__card de-reveal de-reveal-2 is-in" key={i}>
          <div className="de-testimonials__stars">
            {[0,1,2,3,4].map(j => <Icon key={j} name="star" size={16}/>)}
          </div>
          <blockquote className="de-testimonials__quote">"{t.quote}"</blockquote>
          <div className="de-testimonials__author">
            <div className="de-testimonials__avatar">{initials}</div>
            <div>
              <div className="de-testimonials__name">{t.name}</div>
              <div className="de-testimonials__role">{t.role}</div>
            </div>
          </div>
        </div>

        <div className="de-testimonials__nav de-reveal de-reveal-3 is-in">
          <button onClick={prev} aria-label="Previous"><Icon name="arrowDL" size={18}/></button>
          <div className="de-testimonials__count">
            <span>{String(i + 1).padStart(2, '0')}</span>
            <span className="de-testimonials__sep">/</span>
            <span>{String(TESTIMONIALS.length).padStart(2, '0')}</span>
          </div>
          <button onClick={next} aria-label="Next"><Icon name="arrow" size={18}/></button>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;