// Sustainability + Certifications + About + Metrics strip + Contact + Footer

/* ============================================================ */
/* SUSTAINABILITY                                                */
/* ============================================================ */

function Sustainability() {
  const t = useT();
  return (
    <section id="sustainability" style={{ padding: "120px 0 120px", background: "transparent" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }} className="cc-sus-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t("sus.eyebrow")}</div>
            <h2>{t("sus.title.part1")}<br/><em className="serif">{t("sus.title.italic")}</em> {t("sus.title.part2")}</h2>
          </div>
          <div className="reveal d1">
            <p style={{ fontSize: 19, color: "var(--ink-2)", lineHeight: 1.55, marginBottom: 22 }}>{t("sus.body1")}</p>
            <p style={{ fontSize: 16, lineHeight: 1.6 }}>{t("sus.body2")}</p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 28 }}>
              <span className="pill">{t("sus.pill.1")}</span>
              <span className="pill">{t("sus.pill.2")}</span>
              <span className="pill">{t("sus.pill.3")}</span>
              <span className="pill">{t("sus.pill.4")}</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .cc-sus-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

function SusCard({ k, l, sub, icon: Icon, big }) {
  return (
    <div style={{
      background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 14,
      padding: 24, gridColumn: big ? "span 1" : "auto",
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      minHeight: 170,
    }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--bg-3)", display: "grid", placeItems: "center", color: "var(--ink-2)" }}>
        <Icon />
      </div>
      <div>
        <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.03em", color: "var(--ink)" }}>{k}</div>
        <div style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 4 }}>{l}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".08em", marginTop: 6 }}>{sub}</div>
      </div>
    </div>
  );
}

function LegendChip({ color, label }) {
  return (
    <span className="mono" style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 11, color: "var(--muted)", letterSpacing: ".08em" }}>
      <span style={{ width: 14, height: 2, background: color }}/>{label.toUpperCase()}
    </span>
  );
}

function EmissionsChart() {
  const years = [2019, 2020, 2021, 2022, 2023, 2024, 2025, 2026, 2028, 2030, 2035, 2040, 2050];
  // Historical (real-ish) then projection
  const hist = [82, 76, 70, 62, 55, 50, 48, 46]; // up to 2026
  const target = [82, 76, 70, 62, 55, 48, 41, 36, 25, 16, 8, 4, 0];
  const histFull = [...hist, ...Array(years.length - hist.length).fill(null)];

  const w = 1200, h = 280;
  const maxY = 90, minY = 0;
  const toX = i => (i / (years.length - 1)) * w;
  const toY = v => h - ((v - minY) / (maxY - minY)) * h;

  const histPath = histFull.map((v, i) => v == null ? null : `${i === 0 ? "M" : "L"}${toX(i)} ${toY(v)}`).filter(Boolean).join(" ");
  const targetPath = target.map((v, i) => `${i === 0 ? "M" : "L"}${toX(i)} ${toY(v)}`).join(" ");

  return (
    <div style={{ position: "relative" }}>
      <svg viewBox={`0 0 ${w} ${h + 30}`} style={{ width: "100%", height: "auto", display: "block" }}>
        {/* Grid */}
        {[0, 25, 50, 75].map(v => (
          <g key={v}>
            <line x1="0" x2={w} y1={toY(v)} y2={toY(v)} stroke="var(--line)"/>
            <text x="-4" y={toY(v)+3} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="11" textAnchor="end">{v}</text>
          </g>
        ))}
        {/* Target dashed area */}
        <path d={`${targetPath} L${w} ${h} L0 ${h} Z`} fill="rgba(226,29,36,.05)"/>
        {/* Target */}
        <path d={targetPath} fill="none" stroke="var(--brand)" strokeWidth="2" strokeDasharray="3 5"/>
        {/* Historical (solid) */}
        <path d={histPath} fill="none" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
        {/* Net-zero point */}
        <circle cx={toX(years.length - 1)} cy={toY(0)} r="6" fill="var(--accent-ok)"/>
        <text x={toX(years.length - 1)} y={toY(0) - 14} fill="var(--accent-ok)" fontFamily="var(--font-mono)" fontSize="11" textAnchor="end">NET-ZERO 2050</text>
        {/* Today marker */}
        <line x1={toX(hist.length - 1)} x2={toX(hist.length - 1)} y1="0" y2={h} stroke="var(--ink-2)" strokeWidth="1" strokeDasharray="2 3" opacity=".4"/>
        <text x={toX(hist.length - 1) + 6} y="14" fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="10">HOY · 2026</text>
        {/* Year labels */}
        {years.map((y, i) => (
          <text key={y} x={toX(i)} y={h + 22} fill="var(--muted)" fontFamily="var(--font-mono)" fontSize="11" textAnchor="middle">{y}</text>
        ))}
      </svg>
    </div>
  );
}

/* ============================================================ */
/* METRICS / TRUST STRIP                                         */
/* ============================================================ */

function MetricsStrip() {
  const t = useT();
  return (
    <section style={{ padding: "120px 0", background: "var(--bg)", color: "var(--ink)" }} className="dark">
      <div className="wrap">
        <div className="reveal eyebrow" style={{ marginBottom: 28 }}>{t("metrics.eyebrow")}</div>
        <div className="reveal d1" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }} className="cc-metrics-grid">
          {[
            { n: 20, suf: "", l: t("metrics.1.l"), sub: t("metrics.1.sub") },
            { n: 82, suf: "", l: t("metrics.2.l"), sub: t("metrics.2.sub") },
            { n: 98.4, suf: "%", l: t("metrics.3.l"), sub: t("metrics.3.sub"), dec: 1 },
            { n: 29, suf: t("metrics.4.suf"), l: t("metrics.4.l"), sub: t("metrics.4.sub") },
          ].map((m, i) => (
            <div key={i} style={{ position: "relative", borderTop: "1px solid var(--line)", paddingTop: 28 }}>
              <span style={{ position: "absolute", top: -1, left: 0, height: 2, width: 32, background: "var(--brand)" }}/>
              <div style={{ fontSize: 72, fontWeight: 400, letterSpacing: "-0.04em", color: "var(--ink)", lineHeight: 0.95 }}>
                <Counter to={m.n} suffix={m.suf} decimals={m.dec || 0}/>
              </div>
              <div style={{ marginTop: 14, fontSize: 16, color: "var(--ink)", fontWeight: 500 }}>{m.l}</div>
              <div className="mono" style={{ fontSize: 11, color: "var(--muted)", marginTop: 6, letterSpacing: ".06em" }}>{m.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .cc-metrics-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}
/* ============================================================ */
/* CERTIFICATIONS                                                */
/* ============================================================ */

function Certifications() {
  const t = useT();
  const certs = [
    { c: "ATP-FRC", n: t("certs.1.n"), d: t("certs.1.d"), meta: t("certs.1.meta") },
    { c: "ISO 9001:2015", n: t("certs.2.n"), d: t("certs.2.d"), meta: t("certs.2.meta") },
    { c: "GDP", n: t("certs.3.n"), d: t("certs.3.d"), meta: t("certs.3.meta") },
    { c: "TAPA TSR1", n: t("certs.4.n"), d: t("certs.4.d"), meta: t("certs.4.meta") },
    { c: t("certs.5.c"), n: t("certs.5.n"), d: t("certs.5.d"), meta: t("certs.5.meta") },
  ];

  return (
    <section id="certifications" style={{ padding: "140px 0 120px", background: "transparent" }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 72 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end" }} className="cc-cert-head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{t("certs.eyebrow")}</div>
              <h2>{t("certs.title.part1")}<br/><em className="serif">{t("certs.title.italic")}</em> {t("certs.title.part2")}</h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.55 }}>{t("certs.body")}</p>
          </div>
        </div>

        <div className="reveal d1" style={{ display: "flex", gap: 0, flexWrap: "wrap", borderTop: "1px solid var(--ink)", borderBottom: "1px solid var(--ink)", marginBottom: 56 }}>
          {certs.map((c, i) => (
            <div key={c.c} style={{
              flex: 1, minWidth: 180, padding: "20px 24px",
              borderRight: i < certs.length - 1 ? "1px solid var(--line)" : 0,
              display: "flex", alignItems: "center", gap: 12,
            }}>
              <span style={{ width: 6, height: 6, background: "var(--brand)", borderRadius: 999, flexShrink: 0 }}/>
              <span className="mono" style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", letterSpacing: ".04em" }}>{c.c}</span>
            </div>
          ))}
        </div>

        <div className="reveal d2" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }} className="cc-cert-grid">
          {certs.map((c, i) => (
            <div key={c.c} style={{ background: "var(--bg)", padding: "32px 28px", display: "flex", flexDirection: "column", minHeight: 320 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: ".12em", color: "var(--brand)", fontWeight: 600, marginBottom: 14 }}>0{i + 1}</div>
              <div style={{ fontSize: 18, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.015em", marginBottom: 6 }}>{c.c}</div>
              <div style={{ fontSize: 13, color: "var(--muted-2)", marginBottom: 16, fontWeight: 500 }}>{c.n}</div>
              <p style={{ fontSize: 13, lineHeight: 1.55, marginBottom: 20, flex: 1 }}>{c.d}</p>
              <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                <I.check style={{ color: "var(--brand)", flexShrink: 0 }}/>
                <div className="mono" style={{ fontSize: 10, color: "var(--ink)", letterSpacing: ".06em", fontWeight: 500, lineHeight: 1.4 }}>{c.meta}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="reveal d3" style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "center" }} className="cc-cert-foot">
          <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.55 }}>{t("certs.footnote")}</div>
          <div style={{ textAlign: "right" }}>
            <a href="#contact" className="btn btn-ghost" style={{ fontSize: 13 }}>
              {t("certs.cta")} <I.arrow />
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .cc-cert-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 900px) {
          .cc-cert-head { grid-template-columns: 1fr !important; gap: 24px !important; }
          .cc-cert-grid { grid-template-columns: 1fr !important; }
          .cc-cert-foot { grid-template-columns: 1fr !important; gap: 16px !important; text-align: left !important; }
        }
      `}</style>
    </section>
  );
}
/* ============================================================ */
/* ABOUT — story + leadership                                   */
/* ============================================================ */

function About() {
  const t = useT();
  const tl = [
    { y: "1997", t: t("about.tl.1.t"), d: t("about.tl.1.d") },
    { y: "2005", t: t("about.tl.2.t"), d: t("about.tl.2.d") },
    { y: "2013", t: t("about.tl.3.t"), d: t("about.tl.3.d") },
    { y: "2018", t: t("about.tl.4.t"), d: t("about.tl.4.d") },
    { y: "2022", t: t("about.tl.5.t"), d: t("about.tl.5.d") },
    { y: "2026", t: t("about.tl.6.t"), d: t("about.tl.6.d") },
  ];
  return (
    <section id="about" style={{ padding: "140px 0 120px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }} className="cc-about-grid">
          <div className="reveal" style={{ position: "sticky", top: 100 }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t("about.eyebrow")}</div>
            <h2>{t("about.title.part1")} <em className="serif">{t("about.title.italic")}</em> {t("about.title.part2")}</h2>
            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <a href="#contact" className="btn btn-primary">{t("about.cta")} <I.arrow /></a>
            </div>
          </div>
          <div>
            {tl.map((e, i) => (
              <div key={i} className="reveal" style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, borderTop: "1px solid var(--line)", padding: "28px 0" }}>
                <div className="mono" style={{ fontSize: 13, fontWeight: 500, color: "var(--brand)" }}>{"— " + e.y}</div>
                <div>
                  <h4 style={{ fontWeight: 500, marginBottom: 8 }}>{e.t}</h4>
                  <p>{e.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .cc-about-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .cc-about-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
}
/* ============================================================ */
/* CONTACT                                                       */
/* ============================================================ */

function Contact() {
  const t = useT();
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({
    company: "", name: "", email: "", origin: "", dest: "", load: "", message: "",
  });

  return (
    <section id="contact" className="dark" style={{ padding: "140px 0 120px", position: "relative", overflow: "hidden" }}>
      <RouteGridBg />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }} className="cc-contact-grid">
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>{t("contact.eyebrow")}</div>
            <h2>{t("contact.title.part1")}<br/><em className="serif" style={{ color: "var(--brand-2)" }}>{t("contact.title.italic")}</em></h2>
            <p style={{ marginTop: 24, fontSize: 18, maxWidth: 460 }}>{t("contact.body")}</p>

            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24 }}>
              <ContactRow icon={I.signal} k={t("contact.row.hours.k")} v="+34 972 863 031"/>
              <ContactRow icon={I.pin} k={t("contact.row.hq.k")} v="Carrer Llevant 21 · Fogars de la Selva · Barcelona"/>
              <ContactRow icon={I.globe} k={t("contact.row.dest.k")} v={t("contact.row.dest.v")}/>
            </div>
          </div>

          <div className="reveal d1" style={{
            background: "rgba(0,0,0,.025)",
            border: "1px solid rgba(0,0,0,.05)",
            borderRadius: 18, padding: 36,
            backdropFilter: "blur(8px)",
          }}>
            {!sent ? (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <ContactField label={t("contact.field.company")} v={form.company} onChange={v => setForm({...form, company: v})} ph={t("contact.field.company.ph")} />
                  <ContactField label={t("contact.field.name")} v={form.name} onChange={v => setForm({...form, name: v})} ph={t("contact.field.name.ph")} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <ContactField label={t("contact.field.email")} v={form.email} onChange={v => setForm({...form, email: v})} ph={t("contact.field.email.ph")} type="email"/>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18, marginTop: 16 }}>
                  <ContactField label={t("contact.field.origin")} v={form.origin} onChange={v => setForm({...form, origin: v})} ph={t("contact.field.origin.ph")} />
                  <ContactField label={t("contact.field.dest")} v={form.dest} onChange={v => setForm({...form, dest: v})} ph={t("contact.field.origin.ph")} />
                  <ContactField label={t("contact.field.load")} v={form.load} onChange={v => setForm({...form, load: v})} ph={t("contact.field.load.ph")} />
                </div>
                <div style={{ marginTop: 16 }}>
                  <ContactField label={t("contact.field.msg")} v={form.message} onChange={v => setForm({...form, message: v})} ph={t("contact.field.msg.ph")} textarea/>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 28, flexWrap: "wrap", gap: 16 }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: ".08em", color: "var(--muted)", maxWidth: 320 }}>
                    {t("contact.gdpr")}
                  </div>
                  <button type="submit" className="btn btn-primary">{t("contact.submit")} <I.arrow /></button>
                </div>
              </form>
            ) : (
              <div style={{ textAlign: "center", padding: "48px 24px" }}>
                <div style={{ width: 68, height: 68, borderRadius: 999, background: "var(--accent-ok)", display: "grid", placeItems: "center", margin: "0 auto 24px", color: "var(--ink)" }}>
                  <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M6 14l5 5 11-13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <h3 style={{ color: "var(--ink)" }}>{t("contact.ok.title")}</h3>
                <p style={{ marginTop: 12, maxWidth: 380, marginLeft: "auto", marginRight: "auto" }}>
                  {t("contact.ok.body")}
                </p>
                <div className="mono" style={{ fontSize: 11, color: "var(--brand-2)", marginTop: 18, letterSpacing: ".1em" }}>
                  TICKET · CC-{Math.floor(Math.random() * 90000 + 10000)}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .cc-contact-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}
function ContactRow({ icon: Icon, k, v }) {
  return (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
      <div style={{ width: 36, height: 36, borderRadius: 10, background: "rgba(0,0,0,.04)", display: "grid", placeItems: "center", flexShrink: 0, color: "var(--brand-2)" }}>
        <Icon />
      </div>
      <div>
        <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em" }}>{k}</div>
        <div style={{ fontSize: 16, color: "var(--ink)", marginTop: 4 }}>{v}</div>
      </div>
    </div>
  );
}

function ContactField({ label, v, onChange, ph, textarea, type = "text" }) {
  const props = {
    value: v,
    onChange: e => onChange(e.target.value),
    placeholder: ph,
    style: {
      width: "100%", padding: "14px 0",
      background: "transparent", border: 0, borderBottom: "1px solid rgba(0,0,0,.08)",
      color: "var(--ink)", fontFamily: "var(--font-sans)", fontSize: 15,
      outline: "none", resize: "none",
    },
  };
  return (
    <label style={{ display: "block" }}>
      <span className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".12em", textTransform: "uppercase", display: "block" }}>{label}</span>
      {textarea
        ? <textarea {...props} rows={3}/>
        : <input type={type} {...props}/>
      }
    </label>
  );
}

/* ============================================================ */
/* FOOTER                                                        */
/* ============================================================ */

function Footer() {
  const t = useT();
  return (
    <footer style={{ background: "transparent", color: "var(--muted)", padding: "100px 0 40px", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 56 }} className="cc-foot-grid">
          <div className="cc-foot-brand">
            <img
              src="assets/logo.svg?v=15"
              alt="CoolCargo Solutions S.L."
              style={{ height: 60, width: "auto", display: "block", maxWidth: "100%" }}
            />
            <p style={{ marginTop: 22, fontSize: 14, maxWidth: 360 }}>{t("footer.tagline")}</p>
            <div className="mono" style={{ fontSize: 11, color: "var(--ink-2)", marginTop: 24, letterSpacing: ".06em", fontWeight: 500 }}>
              T. +34 972 863 031
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--muted-2)", marginTop: 16, letterSpacing: ".1em" }}>
              <a href="panel.html" title="Acceso al panel CoolCargo" style={{
                color: "inherit",
                textDecoration: "none",
                display: "inline-block",
                padding: "2px 4px",
                marginLeft: -4,
                marginRight: 2,
                transition: "color .2s ease",
              }}
              onMouseEnter={e => { e.currentTarget.style.color = "var(--brand)"; }}
              onMouseLeave={e => { e.currentTarget.style.color = "inherit"; }}
              >{"©"}</a>
              2026 COOLCARGO SOLUTIONS S.L.
            </div>
          </div>
          <FootCol title={t("footer.col.services")} links={[t("footer.serv.1"), t("footer.serv.2"), t("footer.serv.3"), t("footer.serv.4"), t("footer.serv.5")]}/>
          <FootCol title={t("footer.col.company")} links={[t("footer.emp.1"), t("footer.emp.2"), t("footer.emp.3"), t("footer.emp.4"), t("footer.emp.5")]}/>
          <FootCol title={t("footer.col.legal")} links={[t("footer.legal.1"), t("footer.legal.2"), t("footer.legal.3"), t("footer.legal.4"), t("footer.legal.5")]}/>
        </div>

        <div className="cc-foot-bottom" style={{ marginTop: 80, paddingTop: 28, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
            <span className="mono" style={{ fontSize: 10, color: "var(--muted-2)", letterSpacing: ".14em" }}>ES · EN · FR · DE · IT · PT · NL · PL</span>
          </div>
          <div className="mono" style={{ fontSize: 10, color: "var(--muted-2)", letterSpacing: ".14em" }}>v2026.05  ·  build #4218</div>
        </div>
      </div>
      <style>{`
        /* En tablet (≤980) bajamos a 2 columnas: la marca ocupa toda la fila arriba
           y debajo Servicios/Empresa/Legal se reparten en 3 columnas que aún caben. */
        @media (max-width: 980px) {
          .cc-foot-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 32px !important; }
          .cc-foot-brand { grid-column: 1 / -1; }
        }
        /* En móvil (≤640) pasamos a 1 columna apilada — con 2 cols el texto se cortaba
           ("SER", "LEG", "Tra refr"…). Más vale altura que clipping. */
        @media (max-width: 640px) {
          .cc-foot-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
          .cc-foot-brand { grid-column: auto; }
          .cc-foot-bottom { margin-top: 48px !important; padding-top: 22px !important; }
        }
      `}</style>
    </footer>
  );
}
function FootCol({ title, links }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 10, letterSpacing: ".14em", color: "var(--brand)", marginBottom: 18, textTransform: "uppercase", fontWeight: 600 }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(l => (
          <li key={l}><a href="#" style={{ color: "var(--muted)", fontSize: 13.5, textDecoration: "none", transition: "color .2s ease" }} onMouseEnter={e => e.target.style.color = "var(--ink)"} onMouseLeave={e => e.target.style.color = "var(--muted)"}>{l}</a></li>
        ))}
      </ul>
    </div>
  );
}

Object.assign(window, { Sustainability, MetricsStrip, Certifications, About, Contact, Footer });