// Dicas — editorial numbered tips, "o croissant perfeito".
function Dicas() {
  const tips = [
    { n: '1', t: 'Ouça a casca', d: 'Um bom folhado canta quando você aperta de leve. Se faz barulho, está no ponto.' },
    { n: '2', t: 'Morno, nunca quente', d: 'Deixe descansar dois minutos fora do forno. O recheio acomoda e a manteiga aparece.' },
    { n: '3', t: 'Sem faca', d: 'Folhado se parte com a mão. Você sente as camadas e não esmaga o miolo.' },
    { n: '4', t: 'Café por perto', d: 'O amargo equilibra a manteiga. Um espresso curto é o par certo.' },
  ];
  return (
    <section className="sec wrap" id="dicas">
      <div className="dicas-grid">
        <div className="dicas-media">
          <img src="../../assets/photos/banco-2026/croissant-close-editorial.jpg" alt="Folhado de chocolate" />
        </div>
        <div>
          <span className="eyebrow">Do nosso balcão para você</span>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.2rem,4vw,3.4rem)', color: 'var(--chianti)', lineHeight: 1.05, margin: '14px 0 10px' }}>
            Como aproveitar<br/>um folhado.
          </h2>
          <div>
            {tips.map((tp) => (
              <div className="tip" key={tp.n}>
                <span className="n">{tp.n}</span>
                <div>
                  <h3>{tp.t}</h3>
                  <p>{tp.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Dicas = Dicas;