// Nav + 3 hero variants
const navStyles = {
bar: {
position: "fixed", top: 0, left: 0, right: 0, zIndex: 40,
transition: "background .3s ease, backdrop-filter .3s ease, border-color .3s ease",
borderBottom: "1px solid transparent"
},
inner: {
display: "flex", alignItems: "center",
padding: "20px 24px",
maxWidth: 1480, margin: "0 auto"
},
brand: { display: "flex", alignItems: "center", gap: 10, textDecoration: "none", color: "inherit" },
brandMark: {
width: 28, height: 28, borderRadius: 8, background: "var(--ink)", color: "var(--ink)",
display: "grid", placeItems: "center", fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 14,
letterSpacing: "-0.02em"
},
links: { display: "flex", gap: 38, alignItems: "center", marginLeft: "auto", marginRight: 28 },
link: {
fontSize: 16, color: "inherit", textDecoration: "none", letterSpacing: "-0.005em",
fontWeight: 400, opacity: .85, transition: "opacity .2s ease"
}
};
function LangSwitcher({ dark }) {
const [open, setOpen] = useState(false);
const { lang, setLang } = useLang();
const langs = LANGS;
return (
setOpen(!open)} className="cc-hov" style={{
background: "transparent", border: `1px solid ${dark ? "rgba(0,0,0,.1)" : "var(--line-2)"}`,
color: "inherit", borderRadius: 999, padding: "9px 15px", fontFamily: "var(--font-mono)",
fontSize: 11.5, letterSpacing: ".08em", display: "inline-flex", alignItems: "center", gap: 8
}}>
{open &&
{langs.map((l) =>
{setLang(l.c);setOpen(false);}} style={{
display: "flex", width: "100%", padding: "8px 12px", justifyContent: "space-between",
background: l.c === lang ? dark ? "rgba(0,0,0,.03)" : "var(--bg-3)" : "transparent",
border: 0, borderRadius: 8, color: "inherit", fontFamily: "var(--font-sans)",
fontSize: 13, alignItems: "center"
}}>
{l.n}
{l.c}
)}
}
);
}
function Nav() {
const t = useT();
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onS = () => setScrolled(window.scrollY > 20);
window.addEventListener("scroll", onS, { passive: true });
return () => window.removeEventListener("scroll", onS);
}, []);
// Lock body scroll while the mobile drawer is open
useEffect(() => {
document.body.style.overflow = menuOpen ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [menuOpen]);
const navBg = scrolled || menuOpen ? "rgba(255,255,255,.92)" : "transparent";
const links = [
{ href: "#services", label: t("nav.services") },
{ href: "#fleet", label: t("nav.fleet") },
{ href: "#contact", label: t("nav.contact") },
{ href: "#tech", label: t("nav.tech") },
{ href: "#sustainability", label: t("nav.sustainability") },
{ href: "#about", label: t("nav.about") }];
return (
<>
setMenuOpen(false)}>
{t("nav.quote")}
setMenuOpen((v) => !v)}
style={{
background: "transparent",
border: "1px solid var(--line-2)",
borderRadius: 10,
padding: "10px 12px",
cursor: "pointer",
display: "none",
alignItems: "center",
justifyContent: "center",
color: "var(--ink)"
}}>
{/* Mobile drawer — rendered OUTSIDE the nav so the nav's backdrop-filter
(which establishes a containing block) doesn't trap its fixed position. */}
);
}
/* ============================================================ */
/* HERO VARIANT A — Editorial split with REAL truck photo */
/* ============================================================ */
function HeroA() {
// Parallax on scroll for the truck image
const imgRef = useRef(null);
useEffect(() => {
const onScroll = () => {
if (!imgRef.current) return;
const y = window.scrollY;
imgRef.current.style.transform = `translate3d(0, ${y * 0.08}px, 0)`;
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
CoolCargo Solutions S.L. · Operador logístico
Transporte refrigeradointernacional
Conjuntos Mercedes Actros con remolque frigorífico ATP-FRC.
Trazabilidad térmica continua, conductores propios y entregas en 20 países.
{[
["20", "Países"],
["ATP-FRC", "Certificado"],
["−20 / +20°", "Rango térmico"],
["24/7", "Operación"]].
map(([k, v], i) =>
)}
{/* Capabilities strip */}
{["ATP-FRC CERTIFIED", "ISO 9001:2015", "GDP COMPLIANT", "TAPA TSR1 · BUREAU VERITAS", "REG. SANITARIO 40.055673/B"].map((b, i) =>
{b}
)}
);
}
// Truck photo component with entrance animation + floating live data badges
const TruckPhoto = React.forwardRef(function TruckPhoto(_, ref) {
const [tick, setTick] = useState(0);
const [temp, setTemp] = useState(4.2);
useEffect(() => {
const id = setInterval(() => {
setTick((t) => t + 1);
setTemp(+(4 + (Math.random() - 0.5) * 0.6).toFixed(1));
}, 1600);
return () => clearInterval(id);
}, []);
return (
{/* Background plate (subtle grid) */}
{/* The truck image — animated entrance, slight float */}
{/* Floating live data badge — top right */}
VEHICLE CC-2418 · LIVE
+{temp.toFixed(1)}°C
Δ {(temp - 4).toFixed(1)}°
MAD → MUN · 1.832 km
{/* Bottom-right floating badge */}
ATP-FRC · 06-2026
Mercedes Actros
Conjunto frigorífico
FleetOps · Live
Active shipments
{trucks.map((tr) =>
{tr.temp > 0 ? "+" : ""}{tr.temp.toFixed(1)}°
ETA {tr.eta}
)}
{/* Mini graph */}
FLEET TEMP · LAST 24H
+0.2° drift
);
}
function MiniGraph({ tick }) {
const points = useMemo(() => {
const arr = [];
for (let i = 0; i < 40; i++) {
arr.push(Math.sin((i + tick) * 0.4) * 6 + Math.cos(i * 0.18 + tick * 0.1) * 4 + 20);
}
return arr;
}, [tick]);
const w = 320,h = 60;
const max = 32,min = 8;
const path = points.map((p, i) => {
const x = i / (points.length - 1) * w;
const y = h - (p - min) / (max - min) * h;
return `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`;
}).join(" ");
return (
);
}
/* ============================================================ */
/* HERO — Cinematic (single, final version) */
/* ============================================================ */
function HeroCinematic() {
const t = useT();
const [activeHub, setActiveHub] = useState(null);
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick((t) => t + 1), 80);
return () => clearInterval(id);
}, []);
return (
{t("hero.title.line1")}
{t("hero.title.italic")} {t("hero.title.line2.rest")}
{t("hero.subtitle")}
{/* Stats row — hvalai-style, sits below buttons inside the text column */}
{[
{ k: "20", s: t("hero.stat.countries") },
{ k: "ATP-FRC", s: t("hero.stat.certified") },
{ k: "−20 / +20 °C", s: t("hero.stat.range") },
{ k: "24/7", s: t("hero.stat.ops") }].
map((m, i) =>
{String(i + 1).padStart(2, "0")}
{m.k}
{m.s.toUpperCase()}
)}
{/* Stylish caption — refers to the 82 trucks animating across the map */}
82 conjuntos
nuestra flota un lunes por la mañana
);
}
// Floating live-data card — pinned on top of the hero truck
function HeroLiveCard() {
const [temp, setTemp] = useState(4.0);
const [km, setKm] = useState(1832);
useEffect(() => {
const id = setInterval(() => {
setTemp(+(4 + (Math.random() - 0.5) * 0.5).toFixed(1));
setKm((k) => k - 1);
}, 1400);
return () => clearInterval(id);
}, []);
return (
+{temp.toFixed(1)}°C
Target +4.0° · Δ {(temp - 4).toFixed(1)}°
MAD → MUN
{km.toLocaleString("es-ES")} km restantes
);
}
function RouteGridBg() {
return (
{/* Animated route lines */}
{[
"M0,420 C300,420 380,200 700,200 C1020,200 1100,520 1400,520",
"M0,300 C200,300 280,580 600,580 C920,580 1000,300 1400,300",
"M0,580 C260,580 340,360 720,360 C1100,360 1180,150 1400,150"].
map((d, i) =>
)}
);
}
/* ============================================================ */
/* HERO VARIANT C — Big number reveal + side specs */
/* ============================================================ */
function HeroC() {
return (
CoolCargo · Cold chain logistics
Logística refrigerada
para Europa. Sin compromisos.
Operamos uno de los corredores frigoríficos más fiables del sur de Europa:
29 años de experiencia, flota propia ATP, registros térmicos auditables y un
modelo de servicio diseñado para cargas sensibles de alto valor.
Capacidad operativa · 2026
{[
["Países en cobertura activa", "20"],
["Conjuntos en flota", "+82"],
["Rango térmico ATP", "−20 a +20°C"],
["Cumplimiento SLA", "98,4%"],
["Certificaciones activas", "5"]].
map(([k, v], i) =>
{k}
{v}
)}
{/* Camera/IoT preview */}
);
}
function BigVisualStrip() {
// 3 placeholder visuals with technical overlays
return (
MAD-HUB-03 · 14:22:08 UTC
Loading bay 7 · 38 units
VEHICLE CC-2418
+4.2° C
Target +4.0° · Δ +0.2°
STABLE · LAST 24H
CC-3201 · Valencia → Hamburg
−19.8°C · 6,4t
);
}
function StripedPlaceholder({ label }) {
return (
);
}
Object.assign(window, { Nav, HeroCinematic, HeroA, HeroC, MiniGraph, LangSwitcher }); 
{/* Floating live data badge — top right */}