/* global React */
function Garantias() {
  const list = [
    { n: '01', t: 'Presupuesto gratuito y personalizado', p: 'Propuesta adaptada a cada proyecto. Tras aprobación, definimos juntos materiales, acabados y todos los detalles de la reforma.' },
    { n: '02', t: 'Proyectos a medida', p: 'Cada reforma se diseña de forma personalizada. Conectamos profesionales para acompañarle durante todo el proceso.' },
    { n: '03', t: 'Profesionales cualificados', p: 'Especialistas de cada gremio con experiencia demostrable: interioristas, arquitectos, técnicos. Trabajo seguro, preciso y de calidad.' },
    { n: '04', t: 'Garantía y transparencia', p: 'Ofrecemos seguimiento y compromiso proporcionando confianza y tranquilidad desde el inicio hasta la entrega final.' },
  ];
  return (
    <section id="garantias" style={{ background: 'var(--bg-alt)' }}>
      <SectionHead
        eyebrow="Nuestras promesas"
        title="Cuatro compromisos que firmamos."
        subtitle="Lo que recibes cuando trabajas con nosotros."
      />
      <div className="container-wide">
        <div className="garantias-grid">
          {list.map((it, i) => (
            <div key={it.n} className="garantia reveal" style={{ transitionDelay: `${i * 0.06}s` }}>
              <div className="num">{it.n}</div>
              <h4>{it.t}</h4>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Garantias = Garantias;