// ============================================================
// Reality · galería editorial de la operación real
// ------------------------------------------------------------
// Bento grid de 4 fotos reales (instalaciones, equipo, flota,
// remolque branded). Se monta justo después del Hero, como
// "vista de lo que hay detrás del discurso" antes de pasar a
// Servicios. Estilo coherente con Services: eyebrow + h2 con
// <em className="serif">, paleta de variables CSS (var(--ink),
// var(--brand), var(--bg-2), var(--line)), animación reveal,
// hover sutil.
//
// Las imágenes viven físicamente en:
//   design_handoff_coolcargo_web/assets/empresa/
// con nombres exactos:
//   instalaciones.jpg · equipo.jpg · flota.jpg · remolque.jpg
// ============================================================

function Reality() {
  const t = useT();
  const items = [
    {
      src: "assets/empresa/instalaciones.jpg",
      cap: t("reality.cap.facilities"),
      meta: t("reality.meta.facilities"),
      span: "hero",         // ocupa toda la fila superior
      focal: "50% 30%",
    },
    {
      // OJO: esta foto trae el canvas con la imagen "viva" pegada a la derecha
      // (~53–100% horizontal). Forzamos background-position: 100% 50% para que
      // background-size: cover muestre el equipo centrado en el tile y no
      // el espacio blanco lateral del original.
      src: "assets/empresa/equipo.png",
      cap: t("reality.cap.team"),
      meta: t("reality.meta.team"),
      span: "card",
      focal: "100% 50%",
    },
    {
      src: "assets/empresa/flota.jpg",
      cap: t("reality.cap.fleet"),
      meta: t("reality.meta.fleet"),
      span: "card",
      focal: "50% 55%",
    },
    {
      src: "assets/empresa/remolque.jpg",
      cap: t("reality.cap.trailer"),
      meta: t("reality.meta.trailer"),
      span: "card",
      focal: "50% 45%",
    },
  ];

  return (
    <section id="reality" style={{ padding: "120px 0 80px", position: "relative" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 64, alignItems: "end", marginBottom: 56 }} className="cc-svc-head">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t("reality.eyebrow")}</div>
            <h2>{t("reality.title.part1")} <em className="serif">{t("reality.title.italic")}</em><br/>{t("reality.title.part2")}</h2>
          </div>
          <p className="reveal d1" style={{ fontSize: 18, alignSelf: "end", maxWidth: 520 }}>
            {t("reality.intro")}
          </p>
        </div>

        <div className="cc-reality-grid">
          {items.map((it, i) => (
            <figure
              key={i}
              className={"cc-reality-tile reveal d" + (i + 1) + " cc-reality-" + it.span}
              style={{ "--cc-focal": it.focal }}
            >
              <div className="cc-reality-img" style={{ backgroundImage: `url(${it.src})` }} aria-hidden="true" />
              <div className="cc-reality-overlay" aria-hidden="true" />
              <figcaption className="cc-reality-cap">
                <span className="cc-reality-cap-meta mono">{it.meta}</span>
                <span className="cc-reality-cap-text">{it.cap}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>

      <style>{`
        .cc-reality-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-auto-rows: 280px;
          gap: 16px;
        }
        .cc-reality-tile {
          position: relative;
          overflow: hidden;
          border-radius: 14px;
          isolation: isolate;
          background: var(--bg-2);
          border: 1px solid var(--line);
          cursor: pointer;
          transform: translateZ(0);
        }
        .cc-reality-hero {
          grid-column: 1 / -1;
          grid-row: span 2;
          min-height: 420px;
        }
        .cc-reality-card { grid-row: span 1; }

        .cc-reality-img {
          position: absolute; inset: 0;
          background-size: cover;
          background-position: var(--cc-focal, center);
          background-repeat: no-repeat;
          transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease;
          will-change: transform;
        }
        .cc-reality-tile:hover .cc-reality-img,
        .cc-reality-tile:focus-within .cc-reality-img {
          transform: scale(1.045);
          filter: saturate(1.08);
        }

        .cc-reality-overlay {
          position: absolute; inset: 0;
          background:
            linear-gradient(180deg, rgba(13,15,20,0) 38%, rgba(13,15,20,.78) 100%);
          opacity: .92;
          transition: opacity .35s ease;
        }
        .cc-reality-tile:hover .cc-reality-overlay { opacity: 1; }

        .cc-reality-cap {
          position: absolute;
          left: 22px; right: 22px; bottom: 20px;
          color: #fff;
          display: flex; flex-direction: column; gap: 6px;
          z-index: 1;
        }
        .cc-reality-cap-meta {
          font-size: 10.5px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: rgba(255,255,255,.62);
        }
        .cc-reality-cap-text {
          font-size: 18px;
          line-height: 1.25;
          font-weight: 500;
          letter-spacing: -.005em;
          max-width: 92%;
        }
        .cc-reality-hero .cc-reality-cap-text { font-size: 22px; }

        /* Sutil acento marca en la esquina sup-izq del tile activo */
        .cc-reality-tile::before {
          content: "";
          position: absolute;
          top: 14px; left: 14px;
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--brand);
          opacity: 0;
          transform: scale(.6);
          transition: opacity .35s ease, transform .35s ease;
          z-index: 2;
          box-shadow: 0 0 0 4px rgba(226,29,36,.18);
        }
        .cc-reality-tile:hover::before { opacity: 1; transform: scale(1); }

        @media (max-width: 900px) {
          .cc-reality-grid {
            grid-template-columns: 1fr;
            grid-auto-rows: 240px;
          }
          .cc-reality-hero { min-height: 320px; grid-row: span 1; }
          .cc-reality-cap-text { font-size: 17px; }
          .cc-reality-hero .cc-reality-cap-text { font-size: 19px; }
        }

        /* Placeholder cuando la imagen aún no existe en disco · evita el bloque vacío gris */
        .cc-reality-img {
          background-color: var(--bg-3);
        }
      `}</style>
    </section>
  );
}