// Projetos e Atividades — horizontal carousel
const Projetos = () => {
  const items = window.ABACO.projetos;
  const ref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const scroll = (dir) => {
    const el = ref.current;
    if (!el) return;
    const card = el.querySelector('.proj-card');
    const step = card ? card.offsetWidth + 24 : 320;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  const onScroll = () => {
    const el = ref.current;
    if (!el) return;
    const card = el.querySelector('.proj-card');
    const step = card ? card.offsetWidth + 24 : 320;
    setIdx(Math.round(el.scrollLeft / step));
  };

  return (
    <section id="projetos" className="proj">
      <div className="container proj-head">
        <div>
          <div className="eyebrow">Projetos & Atividades</div>
          <h2>Projetos que conectam<br/>aprender ao mundo.</h2>
        </div>
        <div className="proj-controls">
          <button className="proj-nav" onClick={() => scroll(-1)} aria-label="anterior">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
          <button className="proj-nav" onClick={() => scroll(1)} aria-label="próximo">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>

      <div className="proj-track-wrap">
        <div className="proj-track no-scrollbar" ref={ref} onScroll={onScroll}>
          {items.map((p, i) => (
            <article key={i} className="proj-card">
              <div className={"proj-thumb ph " + (p.tone === 'default' ? '' : p.tone)}>
                <span>{p.title}</span>
              </div>
              <div className="proj-body">
                <span className="proj-num">0{i + 1}</span>
                <h3>{p.title}</h3>
                <p>{p.subtitle}</p>
                <a className="proj-link" href="#">conhecer projeto →</a>
              </div>
            </article>
          ))}
        </div>
      </div>

      <div className="container">
        <div className="proj-dots">
          {items.map((_, i) => (
            <span key={i} className={"proj-dot " + (idx === i ? 'active' : '')} />
          ))}
        </div>
      </div>
    </section>
  );
};

window.Projetos = Projetos;