// Services + Fleet + Cold chain visualization + IoT sensors

/* ============================================================ */
/* SERVICES — large interactive grid                            */
/* ============================================================ */

function Services() {
  const t = useT();
  const items = [
    { n: "01", icon: I.snow,   title: t("services.01.title"), lede: t("services.01.lede"), bullets: [t("services.01.b1"), t("services.01.b2"), t("services.01.b3")] },
    { n: "02", icon: I.globe,  title: t("services.02.title"), lede: t("services.02.lede"), bullets: [t("services.02.b1"), t("services.02.b2"), t("services.02.b3")] },
    { n: "03", icon: I.pill,   title: t("services.03.title"), lede: t("services.03.lede"), bullets: [t("services.03.b1"), t("services.03.b2"), t("services.03.b3")] },
    { n: "04", icon: I.box,    title: t("services.04.title"), lede: t("services.04.lede"), bullets: [t("services.04.b1"), t("services.04.b2"), t("services.04.b3")] },
    { n: "05", icon: I.thermo, title: t("services.05.title"), lede: t("services.05.lede"), bullets: [t("services.05.b1"), t("services.05.b2"), t("services.05.b3")] },
    { n: "06", icon: I.shield, title: t("services.06.title"), lede: t("services.06.lede"), bullets: [t("services.06.b1"), t("services.06.b2"), t("services.06.b3")] },
  ];

  const [hover, setHover] = useState(null);

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

        <div className="cc-svc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden" }}>
          {items.map((s, i) =>
          <div key={i} className="reveal cc-hov"
          onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
          style={{
            background: hover === i ? "var(--ink)" : "var(--bg-2)",
            color: hover === i ? "#fff" : "var(--ink)",
            padding: "36px 32px",
            transition: "background .35s ease, color .35s ease",
            position: "relative", cursor: "none",
            minHeight: 320,
            display: "flex", flexDirection: "column", justifyContent: "space-between"
          }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{
                width: 44, height: 44, borderRadius: 12,
                display: "grid", placeItems: "center",
                background: hover === i ? "var(--brand)" : "var(--bg-3)",
                color: hover === i ? "#fff" : "var(--ink)",
                transition: "all .35s ease"
              }}>
                  <s.icon />
                </div>
                <div className="mono" style={{ fontSize: 13, letterSpacing: ".12em", fontWeight: 600, color: hover === i ? "var(--brand-2)" : "var(--brand)" }}>{s.n}</div>
              </div>
              <div>
                <h3 style={{ marginBottom: 12, color: "inherit" }}>{s.title}</h3>
                <p style={{ color: hover === i ? "rgba(255,255,255,.65)" : "var(--muted)", marginBottom: 18 }}>{s.lede}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {s.bullets.map((b, j) =>
                <span key={j} style={{
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: ".06em",
                  padding: "4px 8px", borderRadius: 999,
                  background: hover === i ? "rgba(0,0,0,.05)" : "var(--bg-3)",
                  color: hover === i ? "#fff" : "var(--ink-2)",
                  border: `1px solid ${hover === i ? "rgba(0,0,0,.06)" : "var(--line)"}`
                }}>{b}</span>
                )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cc-svc-grid { grid-template-columns: 1fr !important; }
          .cc-svc-head { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
        @media (min-width: 901px) and (max-width: 1200px) {
          .cc-svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>);

}

/* ============================================================ */
/* FLEET — large showcase + spec rows                           */
/* ============================================================ */

function Fleet() {
  const t = useT();
  return (
    <section id="fleet" style={{ padding: "140px 0 120px", background: "transparent" }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 80 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t("fleet.eyebrow")}</div>
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "end" }} className="cc-svc-head">
            <h2>{t("fleet.title.part1")}<br /><em className="serif">{t("fleet.title.italic")}</em> {t("fleet.title.part2")}</h2>
            <p style={{ fontSize: 18 }}>
              {t("fleet.body")}
            </p>
          </div>
        </div>

        {/* Supporting stats grid */}
        <div className="reveal d1" style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
        }} className="cc-fleet-supp">
          {[
            { k: t("fleet.supp.1.k"), v: t("fleet.supp.1.v"), sub: t("fleet.supp.1.sub") },
            { k: t("fleet.supp.2.k"), v: t("fleet.supp.2.v"), sub: t("fleet.supp.2.sub") },
            { k: t("fleet.supp.3.k"), v: t("fleet.supp.3.v"), sub: t("fleet.supp.3.sub") },
            { k: t("fleet.supp.4.k"), v: t("fleet.supp.4.v"), sub: t("fleet.supp.4.sub") },
          ].map((s, i) => (
            <div key={i} style={{ background: "var(--bg)", padding: "32px 36px" }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: ".14em", color: "var(--muted)", marginBottom: 10, fontWeight: 500 }}>{s.k.toUpperCase()}</div>
              <div style={{ fontSize: 22, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.02em", marginBottom: 8 }}>{s.v}</div>
              <div style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.5 }}>{s.sub}</div>
            </div>
          ))}
        </div>

        {/* Fleet rollup */}
        <div className="reveal d2" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, paddingTop: 32, borderTop: "1px solid var(--line)" }} className="cc-fleet-stats">
          {[
            { v: "+82", l: t("fleet.stat.1.l") },
            { v: t("fleet.stat.2.v"), l: t("fleet.stat.2.l") },
            { v: t("fleet.stat.3.v"), l: t("fleet.stat.3.l") },
            { v: "100%", l: t("fleet.stat.4.l") },
          ].map((s, i) => (
            <div key={i}>
              <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: "-0.03em", color: "var(--ink)", lineHeight: 1 }}>{s.v}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 12, fontWeight: 500 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cc-fleet-supp { grid-template-columns: 1fr !important; }
          .cc-fleet-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
        }
      `}</style>
    </section>);

}

// Fleet truck — clean photo with scroll-in entrance, no callouts
function FleetTruck() {
  const [revealed, setRevealed] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {if (e.isIntersecting) setRevealed(true);});
    }, { threshold: 0.3 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ position: "relative", width: "100%" }}>
      <img
        src="assets/truck.png"
        alt="Mercedes-Benz Actros con remolque frigorífico CoolCargo"
        style={{
          width: "100%",
          height: "auto",
          display: "block",
          opacity: revealed ? 1 : 0,
          transform: revealed ? "scale(1)" : "scale(1.04)",
          transition: "opacity 1.2s cubic-bezier(.2,.8,.2,1), transform 1.2s cubic-bezier(.2,.8,.2,1)"
        }} />
      
    </div>);

}

// Truck visual — original isometric SVG (technical drawing style)
function TruckVisual({ variant }) {
  // Simple side-view diagram with annotations.
  const isSmall = variant === "URBAN-EV" || variant === "PHARMA-V";
  const isMulti = variant === "MULTI-T";

  return (
    <svg viewBox="0 0 600 360" style={{ width: "100%", maxWidth: 560, height: "auto", display: "block" }}>
      <defs>
        <linearGradient id="trk" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#f4f4f5" />
          <stop offset="100%" stopColor="#e4e4e7" />
        </linearGradient>
      </defs>
      {/* Ground */}
      <line x1="20" y1="290" x2="580" y2="290" stroke="rgba(0,0,0,.06)" strokeDasharray="2 4" />

      {/* Trailer body */}
      {!isSmall &&
      <g>
          <rect x="40" y="120" width={isMulti ? 360 : 360} height="150" rx="6" fill="url(#trk)" stroke="rgba(0,0,0,.08)" />
          {isMulti &&
        <g>
              <line x1="160" y1="120" x2="160" y2="270" stroke="rgba(0,0,0,.22)" strokeDasharray="3 3" />
              <line x1="280" y1="120" x2="280" y2="270" stroke="rgba(0,0,0,.22)" strokeDasharray="3 3" />
              <text x="100" y="200" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="11">−20°</text>
              <text x="220" y="200" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="11">+4°</text>
              <text x="340" y="200" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="11">+18°</text>
            </g>
        }
          {!isMulti &&
        <g>
              <rect x="60" y="140" width="320" height="110" fill="none" stroke="rgba(0,0,0,.08)" />
              <text x="220" y="200" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="12" textAnchor="middle">{variant === "PHARMA-V" ? "+2°C / +8°C ± 0.5°" : "−20°C / +20°C"}</text>
            </g>
        }
          {/* Cool unit on top */}
          <rect x="50" y="98" width="80" height="22" rx="3" fill="#e4e4e7" stroke="rgba(0,0,0,.08)" />
          <circle cx="90" cy="109" r="6" fill="none" stroke="var(--brand-2)" strokeWidth="1" />
          <path d="M84 109h12M90 103v12M86 105l8 8M86 113l8-8" stroke="var(--brand-2)" strokeWidth=".8" />
          {/* Cab */}
          <path d="M400 270 V160 H440 L470 200 V270 Z" fill="url(#trk)" stroke="rgba(0,0,0,.08)" />
          <rect x="420" y="170" width="38" height="32" fill="rgba(0,0,0,.06)" stroke="rgba(0,0,0,.13)" />
          {/* Logo on side */}
          <text x="220" y="158" fill="rgba(0,0,0,.4)" fontFamily="var(--font-sans)" fontWeight="500" fontSize="18" textAnchor="middle" letterSpacing="-0.5">CoolCargo</text>
          {/* Wheels */}
          {[100, 200, 300, 430].map((cx) =>
        <g key={cx}>
              <circle cx={cx} cy="290" r="20" fill="#ffffff" stroke="rgba(0,0,0,.12)" />
              <circle cx={cx} cy="290" r="8" fill="rgba(0,0,0,.06)" />
            </g>
        )}
        </g>
      }

      {/* Small vans */}
      {isSmall &&
      <g>
          <path d="M80 270 V160 H260 L300 130 H440 V270 Z" fill="url(#trk)" stroke="rgba(0,0,0,.08)" />
          <rect x="320" y="140" width="80" height="50" fill="rgba(0,0,0,.06)" stroke="rgba(0,0,0,.13)" />
          <rect x="100" y="180" width="180" height="70" fill="none" stroke="rgba(0,0,0,.08)" />
          <text x="190" y="222" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="11" textAnchor="middle">{variant === "URBAN-EV" ? "Tri-zone · EV" : "+2°C / +8°C"}</text>
          <text x="190" y="170" fill="rgba(0,0,0,.4)" fontFamily="var(--font-sans)" fontWeight="500" fontSize="14" textAnchor="middle">CoolCargo</text>
          {[140, 380].map((cx) =>
        <g key={cx}>
              <circle cx={cx} cy="290" r="22" fill="#ffffff" stroke="rgba(0,0,0,.12)" />
              <circle cx={cx} cy="290" r="9" fill="rgba(0,0,0,.06)" />
            </g>
        )}
        </g>
      }

      {/* Annotation lines */}
      <g stroke="rgba(0,0,0,.3)" strokeWidth=".7">
        <line x1="50" y1="98" x2="50" y2="60" />
        <line x1="50" y1="60" x2="160" y2="60" />
      </g>
      <text x="60" y="55" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="1.2">UNIT FRIGO · DUAL SENSOR</text>
    </svg>);

}

/* ============================================================ */
/* COLD CHAIN — animated cross-section + tech stack             */
/* ============================================================ */

function ColdChain() {
  const t = useT();
  return (
    <section id="tech" style={{ padding: "140px 0 120px", background: "transparent" }}>
      <div className="wrap">
        <div className="reveal" style={{ marginBottom: 72, maxWidth: 820 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>{t("cc.eyebrow")}</div>
          <h2>{t("cc.title.part1")} <em className="serif">{t("cc.title.italic")}</em> {t("cc.title.part2")}</h2>
          <p style={{ marginTop: 18, fontSize: 18 }}>
            {t("cc.body")}
          </p>
        </div>

        <div className="reveal d1" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 32 }} className="cc-cc-grid">
          <ColdChainViz />
          <ColdChainStack />
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .cc-cc-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}

function ColdChainViz() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 80);
    return () => clearInterval(id);
  }, []);

  // Animated sensors data
  const sensors = useMemo(() => [
  { id: "S01", label: "Front", temp: -19.7 + Math.sin(tick * 0.05) * 0.3, x: 110, y: 140 },
  { id: "S02", label: "Mid", temp: -20.1 + Math.cos(tick * 0.04) * 0.2, x: 270, y: 140 },
  { id: "S03", label: "Rear", temp: -19.9 + Math.sin(tick * 0.06 + 1) * 0.4, x: 420, y: 140 },
  { id: "S04", label: "Door", temp: -18.4 + Math.sin(tick * 0.08) * 0.5, x: 510, y: 200 }],
  [tick]);

  return (
    <div style={{
      background: "linear-gradient(180deg, #ffffff 0%, #fafafa 100%)",
      borderRadius: 18, padding: 28, color: "var(--ink)", position: "relative", overflow: "hidden",
      minHeight: 480
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18, alignItems: "center" }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: ".14em", color: "var(--muted)" }}>VEHICLE CROSS-SECTION · CC-3201</div>
          <div style={{ fontSize: 22, fontWeight: 500, marginTop: 6 }}>Trailer sensor mesh</div>
        </div>
        <LiveDot color="var(--brand-2)" label="STREAMING · 47ms" />
      </div>

      <svg viewBox="0 0 580 280" style={{ width: "100%", height: "auto", display: "block" }}>
        {/* Trailer outline */}
        <rect x="40" y="80" width="500" height="160" rx="8" fill="none" stroke="rgba(0,0,0,.22)" strokeWidth="1.2" />
        {/* Pallets */}
        {Array.from({ length: 6 }).map((_, i) =>
        <rect key={i} x={60 + i * 78} y={130} width={64} height={90} fill="rgba(0,0,0,.03)" stroke="rgba(0,0,0,.1)" strokeDasharray="2 2" />
        )}
        {/* Cool air flow */}
        {Array.from({ length: 18 }).map((_, i) => {
          const phase = (tick * 0.06 + i * 0.4) % (Math.PI * 2);
          const x = 60 + (tick * 1.5 + i * 30) % 480;
          const y = 100 + Math.sin(phase) * 6;
          return <circle key={i} cx={x} cy={y} r="1.5" fill="rgba(0,0,0,.45)" />;
        })}
        {/* Sensors */}
        {sensors.map((s, i) =>
        <g key={s.id}>
            <circle cx={s.x} cy={s.y} r="14" fill="rgba(0,0,0,.03)" stroke="var(--brand-2)" strokeWidth="1" />
            <circle cx={s.x} cy={s.y} r="3" fill="var(--brand-2)" />
            <circle cx={s.x} cy={s.y} r={14 + (tick + i * 8) % 30} fill="none" stroke="var(--brand-2)" strokeWidth=".5" opacity={Math.max(0, 1 - (tick + i * 8) % 30 / 30)} />
            <line x1={s.x} y1={s.y - 14} x2={s.x} y2={s.y - 32} stroke="rgba(0,0,0,.2)" strokeWidth=".8" strokeDasharray="2 2" />
            <rect x={s.x - 32} y={s.y - 56} width={64} height={22} rx="4" fill="rgba(0,0,0,.05)" stroke="rgba(0,0,0,.13)" />
            <text x={s.x} y={s.y - 41} fill="#fff" fontFamily="var(--font-mono)" fontSize="11" textAnchor="middle">{s.temp.toFixed(1)}°</text>
          </g>
        )}
        {/* Cooling unit */}
        <rect x="40" y="60" width="80" height="22" rx="3" fill="rgba(0,0,0,.05)" stroke="rgba(0,0,0,.15)" />
        <text x="80" y="75" fill="var(--brand-2)" fontFamily="var(--font-mono)" fontSize="10" textAnchor="middle">COOL UNIT</text>
      </svg>

      {/* Live readouts */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 28 }}>
        {sensors.map((s) =>
        <div key={s.id} style={{ borderTop: "1px solid rgba(0,0,0,.06)", paddingTop: 10 }}>
            <div className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: ".1em" }}>{s.id} · {s.label.toUpperCase()}</div>
            <div className="mono" style={{ fontSize: 20, fontWeight: 500, color: "var(--ink)", marginTop: 2 }}>{s.temp.toFixed(1)}°</div>
          </div>
        )}
      </div>
    </div>);

}

function ColdChainStack() {
  const tr = useT();
  const layers = [
    { t: tr("cc.stack.1.t"), d: tr("cc.stack.1.d"), k: tr("cc.stack.1.k") },
    { t: tr("cc.stack.2.t"), d: tr("cc.stack.2.d"), k: tr("cc.stack.2.k") },
    { t: tr("cc.stack.3.t"), d: tr("cc.stack.3.d"), k: tr("cc.stack.3.k") },
    { t: tr("cc.stack.4.t"), d: tr("cc.stack.4.d"), k: tr("cc.stack.4.k") },
  ];
  
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {layers.map((l, i) =>
      <div key={i} style={{ background: "var(--bg)", border: "1px solid var(--line)", borderRadius: 14, padding: "22px 22px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
              <span className="mono" style={{ fontSize: 11, color: "var(--brand)", letterSpacing: ".1em" }}>L{i + 1}</span>
              <h4 style={{ fontWeight: 500 }}>{l.t}</h4>
            </div>
            <I.check style={{ color: "var(--accent-ok)" }} />
          </div>
          <p style={{ fontSize: 14, marginBottom: 10 }}>{l.d}</p>
          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".08em" }}>{l.k}</div>
        </div>
      )}
    </div>);

}

Object.assign(window, { Services, Fleet, ColdChain });