/* === LOGISTICS — /logistics === */

const { useState: lgState } = React;

function LogisticsPage() {
  const titleRef = window.useReveal("reveal");
  const data = window.SITE_DATA.logistics;

  return (
    <>
      {/* HERO */}
      <section style={{
        padding: "120px 32px 80px",
        background: "#f8f7f4",
        position: "relative",
        overflow: "hidden",
      }}>
        <window.AnimatedBlob size={620} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ top: "-20%", right: "-10%" }} opacity={0.14} />
        <window.AnimatedBlob size={420} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ bottom: "-25%", left: "-5%" }} opacity={0.09} />
        <window.FloatingShape kind="diamond" size={80} color="#e85d00" style={{ top: "18%", right: "10%", opacity: 0.16 }} speed={22} />
        <window.FloatingShape kind="ring" size={130} color="#0a6ef5" style={{ bottom: "20%", left: "8%", opacity: 0.18 }} speed={28} />
        <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} />

        <div ref={titleRef} style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
          <window.Breadcrumb items={[{ to: "/", label: "Главная" }, { label: "Логистика" }]} />
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.5fr 1fr",
            gap: 60,
            alignItems: "center",
          }} className="lg-hero">
            <div>
              <window.SectionTag tone="warm">Global Supply Chain</window.SectionTag>
              <h1 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(48px, 6.4vw, 92px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.035em",
                lineHeight: 0.98,
                marginTop: 24,
                marginBottom: 28,
              }}>
                {window.tx(data.headline1)}<br />
                <span className="text-gradient-warm">{window.tx(data.headline2)}</span>
              </h1>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: "clamp(16px, 1.25vw, 19px)",
                lineHeight: 1.65, color: "#3a3a3a",
                maxWidth: 620, marginBottom: 36,
              }}>
                {window.tx(data.lead)}
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <window.GradientBtn to="/contact" size="lg" tone="warm">
                  Запросить расчёт
                </window.GradientBtn>
                <window.OutlineBtn onClick={() => document.getElementById("orders")?.scrollIntoView({ behavior: "smooth" })} size="lg">
                  Примеры заказов
                </window.OutlineBtn>
              </div>
            </div>

            {/* Stats panel */}
            <aside style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 14,
            }}>
              {data.globalStats.map((s, i) => {
                const Ic = window.I[s.icon];
                return (
                  <div key={i} className="card-fade" style={{
                    position: "relative",
                    padding: "22px 22px 20px",
                    background: "#ffffff",
                    borderRadius: 18,
                    border: "1px solid rgba(0,0,0,0.06)",
                    boxShadow: "0 6px 24px rgba(0,0,0,0.04)",
                    overflow: "hidden",
                    transition: "transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s ease",
                  }}
                    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "0 18px 48px rgba(0,0,0,0.10)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "0 6px 24px rgba(0,0,0,0.04)"; }}
                  >
                    <div className="accent-strip" style={{ background: `linear-gradient(90deg, #e85d00, #e85d0040)` }} />
                    {Ic && <div style={{
                      width: 36, height: 36, borderRadius: 10,
                      background: "rgba(232,93,0,0.08)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      marginBottom: 12, marginTop: 4,
                    }}>
                      <Ic size={16} color="#e85d00" />
                    </div>}
                    <div style={{
                      fontFamily: "Inter, sans-serif",
                      fontSize: 22, fontWeight: 700,
                      color: "#0d0d0d",
                      letterSpacing: "-0.02em",
                      fontVariantNumeric: "tabular-nums",
                      lineHeight: 1,
                    }}>
                      <window.AnimatedNum value={s.v} />
                    </div>
                    <div style={{ fontSize: 11, color: "#7a7a7a", marginTop: 6, fontWeight: 500 }}>{s.l}</div>
                  </div>
                );
              })}
            </aside>
          </div>
          <style>{`@media (max-width: 980px){ .lg-hero{ grid-template-columns: 1fr !important; }}`}</style>
        </div>
      </section>

      {/* WHY US */}
      <section style={{ padding: "80px 32px", background: "#f0ede8", position: "relative" }}>
        <window.FloatingShape kind="triangle" size={50} color="#e85d00" style={{ top: 60, right: "8%", opacity: 0.12 }} speed={22} />
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 48 }}>
            <window.SectionTag>Почему мы</window.SectionTag>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(30px, 3.8vw, 52px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.05,
              marginTop: 22,
              maxWidth: 700,
            }}>
              Четыре причины,<br />
              <span className="text-gradient-warm">по которым выбирают нас</span>
            </h2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 18,
          }}>
            {data.why.map((w, i) => <WhyCard key={i} w={w} index={i} />)}
          </div>
        </div>
      </section>

      {/* ORDERS / EXAMPLES */}
      <section id="orders" style={{ padding: "80px 32px", background: "#f8f7f4", position: "relative" }}>
        <div style={{ maxWidth: 1680, margin: "0 auto" }}>
          <div style={{ marginBottom: 48 }}>
            <window.SectionTag tone="warm">Реальные заказы</window.SectionTag>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginTop: 22 }}>
              <h2 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: "clamp(30px, 3.8vw, 52px)",
                fontWeight: 800,
                color: "#0d0d0d",
                letterSpacing: "-0.03em",
                lineHeight: 1.05,
                maxWidth: 700,
              }}>
                От серверов до luxury-подарков<br />
                <span className="text-gradient-warm">любой масштаб</span>
              </h2>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 15, lineHeight: 1.65, color: "#5a5a5a",
                maxWidth: 380,
              }}>
                Пять примеров заказов разного масштаба — от $980K до $47M, от
                21 дня до 90 дней.
              </p>
            </div>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))",
            gap: 22,
          }}>
            {data.orders.map((o, i) => <OrderCard key={o.slug} o={o} index={i} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "60px 32px 120px", background: "#f8f7f4" }}>
        <div style={{
          maxWidth: 1480, margin: "0 auto",
          padding: "52px 52px",
          borderRadius: 28,
          background: "linear-gradient(135deg, #e85d00 0%, #b34800 100%)",
          color: "#fff",
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 24,
          position: "relative",
          overflow: "hidden",
        }}>
          <window.AnimatedBlob size={420} gradient="linear-gradient(135deg, #f5a623, #e85d00)" style={{ top: "-30%", right: "-10%" }} opacity={0.4} />
          <div style={{ position: "relative", maxWidth: 580 }}>
            <h3 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(26px, 3.4vw, 40px)",
              fontWeight: 800, letterSpacing: "-0.025em",
              lineHeight: 1.1, marginBottom: 12,
            }}>
              Сложная закупка? Доставка из санкционной юрисдикции? Tight deadline?
            </h3>
            <p style={{
              fontSize: 15, lineHeight: 1.7,
              color: "rgba(255,255,255,0.85)", maxWidth: 540,
            }}>
              Расскажите, что нужно — мы вернёмся с расчётом и сроками в течение
              24 часов.
            </p>
          </div>
          <window.GradientBtn to="/contact" size="lg" style={{ background: "#fff", color: "#e85d00", boxShadow: "0 12px 36px rgba(0,0,0,0.18)" }}>
            <span style={{ color: "#e85d00", fontWeight: 600 }}>Запросить расчёт</span>
          </window.GradientBtn>
        </div>
      </section>
    </>
  );
}

function WhyCard({ w, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  return (
    <div ref={ref}>
      <div className="card-link" style={{
        padding: 26,
        background: "#ffffff",
        borderRadius: 18,
        border: "1px solid rgba(0,0,0,0.06)",
        boxShadow: "0 4px 20px rgba(0,0,0,0.03)",
        position: "relative",
        overflow: "hidden",
        minHeight: 200,
      }}>
        <div className="accent-strip" style={{ background: "linear-gradient(90deg, #e85d00, #e85d0040)" }} />
        <div style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 11, fontWeight: 700,
          letterSpacing: "0.1em", textTransform: "uppercase",
          color: "#e85d00",
          marginTop: 8, marginBottom: 14,
        }}>
          {String(index + 1).padStart(2, "0")}
        </div>
        <h4 style={{
          fontFamily: "Syne, sans-serif",
          fontSize: 18, fontWeight: 700, color: "#0d0d0d",
          letterSpacing: "-0.02em", lineHeight: 1.25,
          marginBottom: 12,
        }}>
          <span className="title-anim">{w.title}</span>
        </h4>
        <p style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 13, lineHeight: 1.7, color: "#5a5a5a",
        }}>
          {w.desc}
        </p>
      </div>
    </div>
  );
}

function OrderCard({ o, index }) {
  const ref = window.useReveal(index % 2 === 0 ? "reveal-left" : "reveal-right", 60 * index);
  const Ic = window.I[o.icon];
  return (
    <div ref={ref}>
      <window.Tilt max={4} scale={1.005}>
        <div className="card-link" style={{
          background: "#ffffff",
          borderRadius: 22,
          overflow: "hidden",
          border: "1px solid rgba(0,0,0,0.06)",
          display: "flex",
          flexDirection: "column",
        }}>
          {/* image header */}
          <div style={{ position: "relative", height: 200, overflow: "hidden" }}>
            <img src={o.image} alt={window.tx(o.title)} className="img-zoom" style={{
              width: "100%", height: "100%", objectFit: "cover",
            }} />
            <div className="img-overlay" style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%)",
              opacity: 0.55,
            }} />
            <div style={{
              position: "absolute", top: 14, left: 14,
              display: "flex", gap: 8, alignItems: "center",
            }}>
              <div style={{
                width: 34, height: 34, borderRadius: 9,
                background: `${o.accent}cc`,
                backdropFilter: "blur(8px)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                {Ic && <Ic size={15} color="#fff" />}
              </div>
            </div>
            <div style={{ position: "absolute", bottom: 14, left: 14, right: 14 }}>
              <div style={{
                fontSize: 9, fontWeight: 700, letterSpacing: "0.12em",
                textTransform: "uppercase", color: "rgba(255,255,255,0.65)",
                marginBottom: 4,
              }}>
                {o.rank} · {o.region}
              </div>
              <div style={{
                fontFamily: "Syne, sans-serif",
                fontSize: 17, fontWeight: 700, color: "#fff",
                lineHeight: 1.2, letterSpacing: "-0.015em",
              }}>
                <span className="title-anim">{window.tx(o.title)}</span>
              </div>
            </div>
          </div>

          {/* body */}
          <div style={{ padding: 22, flex: 1, display: "flex", flexDirection: "column" }}>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              marginBottom: 12,
            }}>
              <span style={{
                fontSize: 11, fontWeight: 600,
                letterSpacing: "0.06em", textTransform: "uppercase",
                color: o.accent,
              }}>
                {window.tx(o.subtitle)}
              </span>
              <span style={{
                fontFamily: "Inter, sans-serif", fontSize: 16, fontWeight: 700,
                color: o.accent, letterSpacing: "-0.015em",
                fontVariantNumeric: "tabular-nums",
              }}>
                {o.value}
              </span>
            </div>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.65,
              color: "#5a5a5a", marginBottom: 18, flex: 1,
            }}>
              {window.tx(o.desc)}
            </p>
            {/* specs */}
            <div style={{ marginBottom: 18 }}>
              {o.specs.map((s, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "flex-start", gap: 8,
                  padding: "5px 0", fontSize: 12, color: "#3a3a3a",
                }}>
                  <div style={{
                    width: 4, height: 4, borderRadius: "50%", background: o.accent,
                    marginTop: 7, flexShrink: 0,
                  }} />
                  <span>{s}</span>
                </div>
              ))}
            </div>
            <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              paddingTop: 14, borderTop: "1px solid rgba(0,0,0,0.06)",
            }}>
              <div>
                <div style={{ fontSize: 10, color: "#7a7a7a", marginBottom: 2 }}>Клиент</div>
                <div style={{ fontSize: 12, fontWeight: 600, color: "#0d0d0d" }}>{o.client}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontSize: 10, color: "#7a7a7a", marginBottom: 2 }}>Срок</div>
                <div style={{ fontSize: 12, fontWeight: 700, color: o.accent }}>{o.timeline}</div>
              </div>
            </div>
          </div>
        </div>
      </window.Tilt>
    </div>
  );
}

window.LogisticsPage = LogisticsPage;