// Ritual — "café da manhã" moments. Olive field, gallery of curated cards.
function Ritual() {
  const items = [
    { n: '01 · 06h30', img: '../../assets/photos/banco-2026/cesta-paes-fundo-oliva.jpg', t: 'A primeira fornada', d: 'A casca ainda estala quando chega ao balcão. É o som que abre o dia na Panetteria.' },
    { n: '02 · 08h00', img: '../../assets/photos/banco-2026/cafe-espresso-mesa.jpg', t: 'O café que demora', d: 'Um espresso tirado na hora, sem pressa nenhuma. O ritual de quem fica.' },
    { n: '03 · 10h00', img: '../../assets/photos/banco-2026/doce-creme-pistache-a.jpg', t: 'O doce do meio-dia', d: 'Um sonho de pistache para adoçar a pausa. Porque também se merece.' },
  ];
  return (
    <section className="sec ritual" id="rituais">
      <div className="wrap">
        <div className="sec-head center">
          <span className="eyebrow">Ritual do café da manhã</span>
          <h2>O dia tem hora certa<br/>para ser bom.</h2>
          <p>Pequenos momentos que se repetem todas as manhãs, e que valem a visita.</p>
        </div>
        <div className="rit-grid">
          {items.map((it) => (
            <article className="rit-card" key={it.n}>
              <img src={it.img} alt={it.t} />
              <div className="b">
                <div className="num">{it.n}</div>
                <h3>{it.t}</h3>
                <p>{it.d}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Ritual = Ritual;