/* About.jsx — trayectoria / sobre nosotros */
const VALUES = [
  { t: "Equipos propios", d: "No tercerizamos lo esencial. Maquinaria y operarios propios para responder en plazo." },
  { t: "Obra certificada", d: "Procedimientos, seguridad e higiene y controles de calidad en cada etapa." },
  { t: "Plazos que se cumplen", d: "Planificamos con cronograma y lo sostenemos. Sin sorpresas para el cliente." },
];

function About() {
  return (
    <section id="nosotros" className="sec-pad">
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(36px,6vw,88px)", alignItems: "center",
      }}>
        <Reveal className="about-media" style={{ position: "relative" }}>
          <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 3, overflow: "hidden" }}>
            <image-slot id="about-1" shape="rect" fit="cover"
              src="assets/photos/about-nivelacion.jpg"
              style={{ width: "100%", height: "100%" }}
              placeholder="Foto del equipo / maquinaria en obra"></image-slot>
          </div>
          <div style={{
            position: "absolute", bottom: -1, left: -1, background: "var(--accent)", color: "var(--on-accent)",
            padding: "20px 26px", maxWidth: 240,
          }}>
            <div className="display" style={{ fontSize: "2.6rem", lineHeight: 1 }}>+25</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: ".74rem", textTransform: "uppercase", letterSpacing: ".08em", marginTop: 4 }}>años haciendo caminos</div>
          </div>
        </Reveal>

        <div>
          <Reveal><SecHead num="03" kicker="Nosotros" title="Una empresa vial con la obra como respaldo" /></Reveal>
          <Reveal delay={80}>
            <p style={{ marginTop: 22, fontSize: "1.08rem", color: "var(--ink-2)", lineHeight: 1.65 }}>
              Nacimos con una retroexcavadora y una idea simple: hacer bien el trabajo y entregarlo a tiempo.
              Hoy ejecutamos obra pública y privada de punta a punta, sumando equipos, gente y experiencia
              en cada proyecto. Lo que no cambió es cómo encaramos cada obra.
            </p>
          </Reveal>
          <div style={{ marginTop: 34, display: "flex", flexDirection: "column", gap: 0 }}>
            {VALUES.map((v, i) => (
              <Reveal key={v.t} delay={i * 90} style={{
                display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "start",
                padding: "18px 0", borderTop: "1px solid var(--line)",
              }}>
                <span className="display" style={{ fontFamily: "var(--font-mono)", fontSize: ".82rem", color: "var(--accent)", paddingTop: 4, fontWeight: 600 }}>0{i + 1}</span>
                <div>
                  <h3 className="display" style={{ fontSize: "1.25rem" }}>{v.t}</h3>
                  <p style={{ color: "var(--ink-2)", marginTop: 4, fontSize: ".98rem" }}>{v.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width:840px){
          #nosotros .wrap{grid-template-columns:1fr!important}
          .about-media{max-width:440px}
        }
      `}</style>
    </section>
  );
}
Object.assign(window, { About });