/* === HOME — landing page === */

const { useState: hsState, useEffect: hsEffect, useRef: hsRef } = React;

function HeroTypewriter() {
  const t = window.useT ? window.useT() : (k) => k;
  const HERO_WORDS = [t("hero.word1"), t("hero.word2"), t("hero.word3"), t("hero.word4")];
  const [idx, setIdx] = hsState(0);
  const [text, setText] = hsState("");
  const [typing, setTyping] = hsState(true);

  hsEffect(() => {
    const word = HERO_WORDS[idx];
    let timer;
    if (typing) {
      if (text.length < word.length) {
        timer = setTimeout(() => setText(word.slice(0, text.length + 1)), 80);
      } else {
        timer = setTimeout(() => setTyping(false), 2200);
      }
    } else {
      if (text.length > 0) {
        timer = setTimeout(() => setText(text.slice(0, -1)), 45);
      } else {
        setIdx((i) => (i + 1) % HERO_WORDS.length);
        setTyping(true);
      }
    }
    return () => clearTimeout(timer);
  }, [text, typing, idx]);

  return (
    <span>
      <span className="text-gradient-blue">{text || "\u200b"}</span>
      <span className="cursor-blink" style={{ color: "#0a6ef5", marginLeft: 2 }}>|</span>
    </span>);

}

/* === Floating product showcase shown to the right of the hero === */
const HERO_QUOTES = [
{ id: "q1", label: "Суть", accent: "#0a6ef5", text: "Мы не продаём технологии. Мы продаём результат, который они создают. Каждый продукт — это не инструмент, а конкурентное преимущество. Мы не внедряем AI. Мы внедряем будущее, в котором ваш бизнес доминирует." },
{ id: "q2", label: "Стоимость бездействия", accent: "#e85d00", text: "Вопрос не в том, сможете ли вы позволить себе корпоративный AI-мозг. Вопрос — сколько вы ещё готовы терять, работая по-старому?" },
{ id: "q3", label: "Скорость мышления", accent: "#05b89c", text: "Руководитель видит состояние компании в реальном времени, а не в ежеквартальном отчёте. Это не автоматизация задач. Это автоматизация понимания реальности." },
{ id: "q4", label: "Масштаб", accent: "#0a6ef5", text: "Ваш конкурент уже внедряет AI. Не завтра — сегодня. Разница лишь в том, что он нанимает команду из 50 инженеров на 18 месяцев, а вы получаете готовое решение через 6 недель." },
{ id: "q5", label: "Превосходство", accent: "#e85d00", text: "Мы не делаем вас лучше конкурентов. Мы делаем конкурентов нерелевантными. Когда вся ваша компания думает быстрее, предугадывает раньше и решает точнее — вы перестаёте играть в их игру. Вы создаёте правила, по которым играют все остальные." }];


const HERO_STACK_CFG = [
{ rotate: 0, tx: 0, ty: 0, scale: 1.00, z: 6 },
{ rotate: 5, tx: 22, ty: 22, scale: 0.95, z: 5 },
{ rotate: -6, tx: -24, ty: 44, scale: 0.90, z: 4 },
{ rotate: 4, tx: 18, ty: 66, scale: 0.86, z: 3 },
{ rotate: -3, tx: -14, ty: 86, scale: 0.82, z: 2 },
{ rotate: 2, tx: 10, ty: 104, scale: 0.78, z: 1 }];


function HeroProductStack() {
  const products = HERO_QUOTES;
  const [active, setActive] = hsState(0);
  const [drag, setDrag] = hsState({ x: 0, y: 0, grabbed: false, flying: null });
  const startRef = hsRef({ x: 0, y: 0, t: 0 });
  const movedRef = hsRef(false);
  const pendingNavRef = hsRef(null);

  const len = products.length || 1;

  const advance = (dir = 1) => {
    // animate top card off-screen in dir, then rotate stack
    setDrag({ grabbed: false, flying: dir > 0 ? "right" : "left", x: dir * 900, y: 60 });
    setTimeout(() => {
      setActive((a) => (a + 1) % len);
      setDrag({ x: 0, y: 0, grabbed: false, flying: null });
    }, 420);
  };
  const rewind = () => {
    setDrag({ grabbed: false, flying: "left", x: -900, y: 60 });
    setTimeout(() => {
      setActive((a) => (a - 1 + len) % len);
      setDrag({ x: 0, y: 0, grabbed: false, flying: null });
    }, 420);
  };

  const onDown = (e) => {
    if (e.button !== undefined && e.button !== 0) return;
    e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId);
    startRef.current = { x: e.clientX, y: e.clientY, t: Date.now() };
    movedRef.current = false;
    setDrag({ x: 0, y: 0, grabbed: true, flying: null });
  };
  const onMove = (e) => {
    if (!startRef.current.t) return;
    const dx = e.clientX - startRef.current.x;
    const dy = e.clientY - startRef.current.y;
    if (Math.abs(dx) > 6 || Math.abs(dy) > 6) movedRef.current = true;
    setDrag((d) => ({ ...d, x: dx, y: dy, grabbed: true }));
  };
  const onUp = (e, slug) => {
    if (!startRef.current.t) return;
    const dt = Math.max(1, Date.now() - startRef.current.t);
    const dx = e.clientX - startRef.current.x;
    const dy = e.clientY - startRef.current.y;
    const vx = dx / dt; // px / ms
    const goFly = Math.abs(dx) > 120 || Math.abs(vx) > 0.5;
    startRef.current = { x: 0, y: 0, t: 0 };

    if (goFly) {
      const dir = dx > 0 ? 1 : -1;
      setDrag({ grabbed: false, flying: dir > 0 ? "right" : "left", x: dir * 900, y: dy + 120 });
      setTimeout(() => {
        setActive((a) => (a + 1) % len);
        setDrag({ x: 0, y: 0, grabbed: false, flying: null });
      }, 420);
    } else {
      // weak drag → snap back
      setDrag({ grabbed: false, flying: "back", x: 0, y: 0 });
      setTimeout(() => setDrag({ x: 0, y: 0, grabbed: false, flying: null }), 380);
    }
  };
  const onCancel = () => {
    startRef.current = { x: 0, y: 0, t: 0 };
    setDrag({ grabbed: false, flying: "back", x: 0, y: 0 });
    setTimeout(() => setDrag({ x: 0, y: 0, grabbed: false, flying: null }), 380);
  };

  return (
    <div style={{
      position: "relative",
      width: "100%",
      maxWidth: 520,
      aspectRatio: "1 / 1.05",
      userSelect: "none",
      WebkitUserSelect: "none"
    }}>
      {/* soft halo */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        width: "85%", height: "85%",
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(10,110,245,0.12), transparent 70%)",
        filter: "blur(40px)",
        pointerEvents: "none"
      }} />
      {/* orbit ring */}
      <div style={{
        position: "absolute",
        top: "50%", left: "50%",
        transform: "translate(-50%, -50%)",
        width: "92%", height: "92%",
        borderRadius: "50%",
        border: "1px dashed rgba(10,110,245,0.18)",
        animation: "spin-slow 60s linear infinite",
        pointerEvents: "none"
      }} />

      {/* clickable chevrons */}
      <button
        type="button"
        aria-label="Предыдущая"
        onClick={(e) => {e.preventDefault();rewind();}}
        style={heroStackChevronStyle("left", drag)}>
        ‹</button>
      <button
        type="button"
        aria-label="Следующая"
        onClick={(e) => {e.preventDefault();advance(1);}}
        style={heroStackChevronStyle("right", drag)}>
        ›</button>

      {products.map((p, i) => {
        const stackPos = (i - active + len) % len;
        const cfg = HERO_STACK_CFG[stackPos] || HERO_STACK_CFG[0];
        const isTop = stackPos === 0;
        const extraX = isTop ? drag.x : 0;
        const extraY = isTop ? drag.y : 0;
        const extraR = isTop ? drag.x * 0.06 : 0;
        const transition = isTop && drag.grabbed ?
        "none" :
        "transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, opacity 0.35s ease";
        const opacity = isTop && drag.flying && drag.flying !== "back" ? 0 : 1;

        return (
          <div
            key={p.id}
            onPointerDown={isTop ? onDown : undefined}
            onPointerMove={isTop ? onMove : undefined}
            onPointerUp={isTop ? onUp : undefined}
            onPointerCancel={isTop ? onCancel : undefined}
            onDragStart={(e) => e.preventDefault()}
            style={{
              position: "absolute",
              top: "50%", left: "50%",
              width: "78%",
              transform: `translate(-50%, -50%) translate(${cfg.tx + extraX}px, ${cfg.ty + extraY}px) rotate(${cfg.rotate + extraR}deg) scale(${cfg.scale})`,
              transition,
              opacity,
              zIndex: cfg.z,
              pointerEvents: isTop ? "auto" : "none",
              touchAction: "none",
              cursor: isTop ? drag.grabbed ? "grabbing" : "grab" : "default",
              willChange: "transform",
              WebkitUserDrag: "none"
            }}>
            
            <HeroQuoteCard q={p} drag={isTop ? drag : null} />
          </div>);

      })}

      {/* tiny pager dots */}
      <div style={{
        position: "absolute", bottom: -28, left: "50%",
        transform: "translateX(-50%)",
        display: "flex", gap: 8, zIndex: 5
      }}>
        {products.map((_, i) =>
        <button
          key={i}
          type="button"
          onClick={(e) => {e.preventDefault();setActive(i);}}
          aria-label={`Карточка ${i + 1}`}
          style={{
            width: i === active ? 22 : 8, height: 8,
            borderRadius: 100,
            background: i === active ? "#0a6ef5" : "rgba(10,110,245,0.25)",
            border: "none", padding: 0, cursor: "pointer",
            transition: "width 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s ease"
          }} />

        )}
      </div>
    </div>);

}

function heroStackChevronStyle(side, drag) {
  const active = drag.grabbed && Math.abs(drag.x) > 30;
  const matchSide = drag.x > 0 ? "right" : "left";
  const highlight = active && matchSide === side;
  return {
    position: "absolute",
    top: "50%", [side]: -8,
    transform: "translateY(-50%)",
    width: 44, height: 44,
    display: "flex", alignItems: "center", justifyContent: "center",
    fontSize: 30, lineHeight: 1,
    color: highlight ? "#fff" : "#0a6ef5",
    background: highlight ? "#0a6ef5" : "rgba(255,255,255,0.85)",
    border: "1px solid rgba(10,110,245,0.25)",
    borderRadius: "50%",
    fontFamily: "Syne, sans-serif",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 6px 18px rgba(10,110,245,0.18)",
    backdropFilter: "blur(8px)",
    transition: "color 0.2s ease, background 0.2s ease, transform 0.2s ease",
    zIndex: 6
  };
}

function HeroQuoteCard({ q, drag }) {
  const accent = q.accent || "#0a6ef5";
  const dx = drag && drag.grabbed ? drag.x : 0;
  const overlayOpacity = Math.min(0.10, Math.abs(dx) / 800);
  return (
    <div style={{
      background: "#fff",
      borderRadius: 24,
      overflow: "hidden",
      border: "1px solid rgba(0,0,0,0.06)",
      boxShadow: `0 30px 60px rgba(0,0,0,0.10), 0 0 0 1px ${accent}14`,
      position: "relative",
      padding: "32px 30px 28px",
      minHeight: 360,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      backgroundImage: `radial-gradient(circle at 100% 0%, ${accent}10, transparent 60%)`
    }}>
      {/* large quotation mark */}
      <div aria-hidden style={{
        position: "absolute", top: 14, right: 22,
        fontFamily: "Syne, sans-serif", fontSize: 120, lineHeight: 1,
        color: `${accent}1f`, fontWeight: 800, pointerEvents: "none"
      }}>“</div>

      <div style={{ position: "relative", zIndex: 2 }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "4px 12px", borderRadius: 100,
          background: `${accent}10`, border: `1px solid ${accent}30`,
          fontSize: 10, fontWeight: 700, letterSpacing: "0.14em",
          textTransform: "uppercase", color: accent, marginBottom: 22
        }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: accent }} />
          {q.label}
        </div>
        <p style={{
          fontFamily: "Syne, sans-serif",
          fontSize: 19, lineHeight: 1.35, fontWeight: 600,
          color: "#0d0d0d", letterSpacing: "-0.015em"
        }}>
          «{q.text}»
        </p>
      </div>

      <div style={{
        marginTop: 26,
        fontSize: 11, color: "#7a7a7a", letterSpacing: "0.08em",
        textTransform: "uppercase", fontWeight: 600,
        display: "flex", alignItems: "center", gap: 8
      }}>
        <span style={{ width: 24, height: 1, background: accent }} />
        Allion Group
      </div>

      {/* drag-direction tint */}
      {dx !== 0 &&
      <div style={{
        position: "absolute", inset: 0,
        background: dx > 0 ? "#05b89c" : "#e85d00",
        opacity: overlayOpacity,
        mixBlendMode: "multiply",
        pointerEvents: "none",
        transition: "opacity 0.1s linear"
      }} />
      }
    </div>);

}

function HomeHero() {
  const heroRef = hsRef(null);
  const [parallaxY, setParY] = hsState(0);
  const t = window.useT ? window.useT() : (k) => k;

  hsEffect(() => {
    const onScroll = () => setParY(window.scrollY * 0.3);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section
      ref={heroRef}
      style={{
        position: "relative",
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        overflow: "hidden",
        paddingTop: 72,
        background: "#f8f7f4"
      }}>
      
      <window.ParticleField density={160} />
      <div className="grid-bg" style={{ position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none", zIndex: 0 }} />
      <window.AnimatedBlob size={620} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "10%", right: "-10%", transform: `translateY(${parallaxY * 0.4}px)` }} opacity={0.13} />
      <window.AnimatedBlob size={520} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ bottom: "-5%", left: "-8%", transform: `translateY(${-parallaxY * 0.25}px)` }} opacity={0.10} />
      <window.FloatingShape kind="diamond" size={64} color="#0a6ef5" style={{ top: "18%", right: "12%", opacity: 0.18 }} speed={16} />
      <window.FloatingShape kind="triangle" size={44} color="#05b89c" style={{ bottom: "22%", left: "10%", opacity: 0.2 }} speed={22} />
      <window.FloatingShape kind="ring" size={120} color="#e85d00" style={{ top: "30%", left: "5%", opacity: 0.15 }} speed={26} />

      <div style={{
        position: "relative",
        zIndex: 10,
        maxWidth: 1680,
        margin: "0 auto",
        padding: "60px 32px 80px",
        width: "100%",
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.35fr) minmax(0, 1fr)",
        gap: 56,
        alignItems: "center"
      }} className="hero-grid">
        <div>
        {/* Status badge */}
        <div style={{
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            padding: "8px 16px",
            background: "rgba(10,110,245,0.07)",
            border: "1px solid rgba(10,110,245,0.15)",
            borderRadius: 100,
            marginBottom: 40,
            backdropFilter: "blur(8px)"
          }}>
          <span className="pulse-dot" style={{
              width: 8, height: 8, borderRadius: "50%",
              background: "#05b89c",
              boxShadow: "0 0 12px rgba(5,184,156,0.4)"
            }} />
          <span style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 12, fontWeight: 600,
              letterSpacing: "0.1em", textTransform: "uppercase",
              color: "#0a6ef5"
            }}>
            {t("hero.badge")}
          </span>
        </div>

        {/* Headline */}
        <div style={{ maxWidth: 1000, marginBottom: 44 }}>
          <h1 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(48px, 6vw, 108px)",
              fontWeight: 800,
              lineHeight: 0.98,
              letterSpacing: "-0.035em",
              color: "#0d0d0d"
            }}>
            {t("hero.line1")}
          </h1>
          <h1 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(48px, 6vw, 108px)",
              fontWeight: 800,
              lineHeight: 0.98,
              letterSpacing: "-0.035em"
            }}>
            <HeroTypewriter />
          </h1>
          <h1 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(48px, 6vw, 108px)",
              fontWeight: 800,
              lineHeight: 0.98,
              letterSpacing: "-0.035em",
              color: "#0d0d0d"
            }}>
            {t("hero.line3")}
          </h1>
        </div>

        <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: "clamp(16px, 1.25vw, 19px)",
            fontWeight: 400,
            lineHeight: 1.7,
            color: "#3a3a3a",
            maxWidth: 620,
            marginBottom: 52
          }}>
          {window.tx(window.SITE_DATA.brand.description)} {t("hero.lead")}
        </p>

        <div style={{
            display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 80
          }}>
          <window.GradientBtn to="/services" size="lg">{t("hero.cta_services")}</window.GradientBtn>
          <window.OutlineBtn to="/work" size="lg">{t("hero.cta_work")}</window.OutlineBtn>
        </div>

        {/* Quiet stats — small icons + modest numbers */}
        <div style={{
            display: "flex", gap: 56, flexWrap: "wrap"
          }}>
          {[
            { icon: window.I.Brain, label: t("hero.stat_projects"), value: "150+", color: "#0a6ef5" },
            { icon: window.I.Globe, label: t("hero.stat_countries"), value: "40+", color: "#05b89c" },
            { icon: window.I.Zap, label: t("hero.stat_uptime"), value: "99.9%", color: "#e85d00" }].
            map((s, i) => {
              const Ic = s.icon;
              return (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                    width: 42, height: 42, borderRadius: 12,
                    background: `${s.color}10`,
                    border: `1px solid ${s.color}25`,
                    display: "flex", alignItems: "center", justifyContent: "center"
                  }}>
                  <Ic size={17} color={s.color} />
                </div>
                <div>
                  <div style={{
                      fontFamily: "Inter, sans-serif",
                      fontSize: 18, fontWeight: 600,
                      color: "#0d0d0d",
                      letterSpacing: "-0.01em",
                      fontVariantNumeric: "tabular-nums"
                    }}>
                    <window.AnimatedNum value={s.value} />
                  </div>
                  <div style={{ fontSize: 12, color: "#7a7a7a", fontWeight: 400 }}>{s.label}</div>
                </div>
              </div>);

            })}
        </div>
        </div>

        {/* ============ RIGHT — floating product cards ============ */}
        <div className="hero-right" style={{
          position: "relative",
          minHeight: 520,
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }}>
          <HeroProductStack />
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px){
          .hero-grid{ grid-template-columns: 1fr !important; }
          .hero-right{ display: none !important; }
        }
      `}</style>

      {/* Scroll indicator */}
      <div style={{
        position: "absolute", bottom: 40, left: "50%",
        transform: "translateX(-50%)", zIndex: 10,
        display: "flex", flexDirection: "column",
        alignItems: "center", gap: 8,
        cursor: "pointer",
        animation: "float 3s ease-in-out infinite"
      }} onClick={() => window.scrollTo({ top: window.innerHeight, behavior: "smooth" })}>
        <span style={{ fontSize: 10, fontWeight: 600, letterSpacing: "0.16em", color: "#7a7a7a", textTransform: "uppercase" }}>
          {t("common.scroll")}
        </span>
        <window.I.ArrowDown size={14} color="#7a7a7a" />
      </div>
    </section>);

}

function HomeServicesPreview() {
  const titleRef = window.useReveal("reveal");
  return (
    <section style={{
      padding: "120px 32px",
      background: "#f8f7f4",
      position: "relative"
    }}>
      <window.FloatingShape kind="diamond" size={80} color="#0a6ef5" style={{ top: 60, right: "6%", opacity: 0.1 }} speed={20} />

      <div style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
        <div ref={titleRef} style={{ marginBottom: 64 }}>
          <window.SectionTag>Что мы делаем</window.SectionTag>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginTop: 24
          }}>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 3.4vw, 64px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.02,
              maxWidth: 700
            }}>
              Технологии, которые<br />
              <span className="text-gradient-blue">формируют будущее</span>
            </h2>
            <p style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 16, lineHeight: 1.7, color: "#5a5a5a",
              maxWidth: 420
            }}>


            </p>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(420px, 1fr))",
          gap: 24
        }}>
          {window.SITE_DATA.services.map((s, i) => {
            const Ic = window.I[s.icon];
            return (
              <ServicePreviewCard key={s.slug} service={s} Ic={Ic} index={i} />);

          })}
        </div>

        {/* === 3D showcase — asymmetric, free space, breaks out to the right === */}
        <ServiceShowcaseAsymmetric />
      </div>
    </section>);

}

function ServicePreviewCard({ service, Ic, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  return (
    <div ref={ref} className="tilt-root">
      <window.Tilt max={5} scale={1.015}>
        <window.Link to={`/services/${service.slug}`}>
          <div style={{
            background: "#ffffff",
            borderRadius: 24,
            padding: "32px 30px",
            border: "1px solid rgba(0,0,0,0.06)",
            position: "relative",
            overflow: "hidden",
            transition: "border-color 0.3s ease, box-shadow 0.5s ease",
            cursor: "pointer",
            minHeight: 320,
            display: "flex",
            flexDirection: "column"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.borderColor = `${service.accent}40`;e.currentTarget.style.boxShadow = `0 24px 60px ${service.accent}18`;}}
          onMouseLeave={(e) => {e.currentTarget.style.borderColor = "rgba(0,0,0,0.06)";e.currentTarget.style.boxShadow = "none";}}>
            
            <div style={{
              position: "absolute", top: 0, right: 0,
              width: 130, height: 130,
              background: `radial-gradient(circle at top right, ${service.accent}18, transparent 70%)`,
              pointerEvents: "none"
            }} />
            <div style={{ position: "relative", flex: 1, display: "flex", flexDirection: "column" }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14,
                background: `${service.accent}10`,
                border: `1px solid ${service.accent}25`,
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 24,
                transform: "translateZ(40px)"
              }}>
                {Ic && <Ic size={22} color={service.accent} />}
              </div>
              <div style={{
                fontSize: 11, fontWeight: 600, letterSpacing: "0.08em",
                textTransform: "uppercase", color: service.accent,
                marginBottom: 8
              }}>
                {window.tx(service.subtitle)}
              </div>
              <h3 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: 22, fontWeight: 700, color: "#0d0d0d",
                marginBottom: 14, letterSpacing: "-0.02em", lineHeight: 1.2
              }}>
                <span className="title-anim">{window.tx(service.title)}</span>
              </h3>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 14, lineHeight: 1.7, color: "#5a5a5a",
                marginBottom: 18, flex: 1
              }}>
                {window.tx(service.shortDesc)}
              </p>
              <span className="link-anim" style={{
                fontSize: 13, fontWeight: 600, color: service.accent,
                fontFamily: "Inter, sans-serif"
              }}>
                Подробнее <window.I.Chevron size={13} color={service.accent} />
              </span>
            </div>
          </div>
        </window.Link>
      </window.Tilt>
    </div>);

}

function HomeWorkPreview() {
  const titleRef = window.useReveal("reveal");
  const cases = window.SITE_DATA.work;
  return (
    <section style={{
      padding: "120px 32px",
      background: "#f0ede8",
      position: "relative",
      overflow: "hidden"
    }}>
      <window.Orb size={700} color="rgba(10,110,245,0.05)" style={{ top: "30%", left: "50%", transform: "translate(-50%, -50%)" }} drift />

      <div style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
        <div ref={titleRef} style={{ marginBottom: 64 }}>
          <window.SectionTag>Наши продукты</window.SectionTag>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginTop: 24
          }}>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 3.4vw, 64px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.02,
              maxWidth: 700
            }}>
              Продукты, которые<br />
              <span className="text-gradient-blue">определяют стандарт качества</span>
            </h2>
            <window.Link to="/work" className="link-anim" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 14, fontWeight: 600, color: "#0a6ef5"
            }}>
              Все продукты <window.I.ArrowUpRight size={14} color="#0a6ef5" />
            </window.Link>
          </div>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))",
          gap: 28
        }}>
          {cases.map((c, i) => <WorkPreviewCard key={c.slug} c={c} index={i} />)}
        </div>
      </div>
    </section>);

}

function WorkPreviewCard({ c, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  const [hovered, setH] = hsState(false);
  return (
    <div ref={ref}>
      <window.Tilt max={5} scale={1.01}>
        <window.Link to={`/work/${c.slug}`}>
          <div
            onMouseEnter={() => setH(true)}
            onMouseLeave={() => setH(false)}
            style={{
              background: "#fff",
              borderRadius: 28,
              overflow: "hidden",
              border: "1px solid rgba(0,0,0,0.06)",
              transition: "box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1)",
              boxShadow: hovered ? "0 40px 100px rgba(0,0,0,0.14)" : "0 4px 24px rgba(0,0,0,0.04)",
              cursor: "pointer"
            }}>
            
            <div style={{ position: "relative", height: 260, overflow: "hidden" }}>
              <img src={c.image} alt={window.tx(c.title)} style={{
                width: "100%", height: "100%", objectFit: "cover",
                transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)",
                transform: hovered ? "scale(1.08)" : "scale(1)"
              }} />
              <div style={{
                position: "absolute", inset: 0,
                background: `linear-gradient(to bottom, transparent 40%, ${c.accent}cc 100%)`,
                opacity: hovered ? 0.85 : 0.55,
                transition: "opacity 0.4s ease"
              }} />
              <div style={{
                position: "absolute", top: 18, left: 22,
                fontSize: 11, fontWeight: 700, color: "rgba(255,255,255,0.85)",
                letterSpacing: "0.12em", textTransform: "uppercase"
              }}>
                {window.tx(c.category)}
              </div>
              <div style={{
                position: "absolute", bottom: 20, left: 22,
                color: "#fff"
              }}>
                <div style={{ fontFamily: "Syne, sans-serif", fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em" }}>
                  <span className="title-anim">{window.tx(c.title)}</span>
                </div>
                <div style={{ fontSize: 12, color: "rgba(255,255,255,0.8)", marginTop: 4 }}>
                  {window.tx(c.subtitle)}
                </div>
              </div>
            </div>
            <div style={{ padding: "26px 28px" }}>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 14, lineHeight: 1.7, color: "#5a5a5a",
                marginBottom: 18
              }}>
                {window.tx(c.shortDesc)}
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                {c.tags.map((t, ti) => <window.Tag key={(typeof t === "string" ? t : t.ru || t.en) + "-" + ti} accent={c.accent}>{t}</window.Tag>)}
              </div>
            </div>
          </div>
        </window.Link>
      </window.Tilt>
    </div>);

}

function HomeIndustriesPreview() {
  const titleRef = window.useReveal("reveal");
  return (
    <section style={{
      padding: "120px 32px",
      background: "#f8f7f4",
      position: "relative"
    }}>
      <div style={{ maxWidth: 1680, margin: "0 auto" }}>
        <div ref={titleRef} style={{ marginBottom: 64 }}>
          <window.SectionTag tone="teal">Индустрии</window.SectionTag>
          <h2 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(32px, 3.4vw, 64px)",
            fontWeight: 800,
            color: "#0d0d0d",
            letterSpacing: "-0.03em",
            lineHeight: 1.02,
            maxWidth: 800,
            marginTop: 24
          }}>
            Глубокая экспертиза в<br />
            <span className="text-gradient-blue">регулируемых сегментах</span>
          </h2>
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))",
          gap: 24
        }}>
          {window.SITE_DATA.industries.map((ind, i) => <IndustryPreviewCard key={ind.slug} ind={ind} index={i} />)}
        </div>
      </div>
    </section>);

}

function IndustryPreviewCard({ ind, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  const Ic = window.I[ind.icon];
  const [hov, setH] = hsState(false);
  return (
    <div ref={ref}>
      <window.Tilt max={4} scale={1.01}>
        <window.Link to={`/industries/${ind.slug}`}>
          <div
            onMouseEnter={() => setH(true)}
            onMouseLeave={() => setH(false)}
            style={{
              borderRadius: 24,
              overflow: "hidden",
              border: "1px solid rgba(0,0,0,0.06)",
              position: "relative",
              cursor: "pointer",
              minHeight: 340,
              background: "#fff",
              transition: "box-shadow 0.5s ease, transform 0.5s ease",
              boxShadow: hov ? "0 30px 80px rgba(0,0,0,0.12)" : "0 4px 20px rgba(0,0,0,0.03)"
            }}>
            
            <div style={{ height: 200, position: "relative", overflow: "hidden" }}>
              <img src={ind.image} alt={window.tx(ind.title)} style={{
                width: "100%", height: "100%", objectFit: "cover",
                transform: hov ? "scale(1.08)" : "scale(1)",
                transition: "transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)"
              }} />
              <div style={{
                position: "absolute", inset: 0,
                background: `linear-gradient(135deg, ${ind.accent}30, ${ind.accent}80)`,
                mixBlendMode: "multiply"
              }} />
              <div style={{
                position: "absolute", top: 18, left: 22,
                width: 44, height: 44, borderRadius: 12,
                background: "rgba(255,255,255,0.18)",
                backdropFilter: "blur(10px)",
                border: "1px solid rgba(255,255,255,0.3)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                {Ic && <Ic size={18} color="#fff" />}
              </div>
            </div>
            <div style={{ padding: "24px 26px" }}>
              <div style={{
                fontSize: 10, fontWeight: 700, letterSpacing: "0.12em",
                textTransform: "uppercase", color: ind.accent, marginBottom: 8
              }}>
                {window.tx(ind.kicker)}
              </div>
              <h3 style={{
                fontFamily: "Syne, sans-serif",
                fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em",
                lineHeight: 1.2, marginBottom: 10, color: "#0d0d0d"
              }}>
                <span className="title-anim">{window.tx(ind.title)}</span>
              </h3>
              <p style={{
                fontFamily: "Inter, sans-serif",
                fontSize: 13, lineHeight: 1.65, color: "#5a5a5a",
                marginBottom: 14
              }}>
                {window.tx(ind.shortDesc)}
              </p>
              <span className="link-anim" style={{
                fontSize: 12, fontWeight: 600, color: ind.accent
              }}>
                Перейти к индустрии <window.I.ArrowRight size={12} color={ind.accent} />
              </span>
            </div>
          </div>
        </window.Link>
      </window.Tilt>
    </div>);

}

function HomeCTA() {
  const ref = window.useReveal("reveal");
  return (
    <section ref={ref} style={{ padding: "100px 32px 140px", background: "#f8f7f4", position: "relative" }}>
      <div style={{
        maxWidth: 1480, margin: "0 auto",
        borderRadius: 32,
        background: "linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%)",
        color: "#fff",
        padding: "80px 60px",
        position: "relative",
        overflow: "hidden",
        textAlign: "center"
      }}>
        <window.AnimatedBlob size={500} gradient="linear-gradient(135deg, #0a6ef5, #05b89c)" style={{ top: "-30%", left: "10%" }} opacity={0.35} />
        <window.AnimatedBlob size={400} gradient="linear-gradient(135deg, #e85d00, #f5a623)" style={{ bottom: "-30%", right: "5%" }} opacity={0.25} />
        <div style={{ position: "relative" }}>
          <window.SectionTag>
            <span style={{ color: "#7daefb" }}>Готовы начать?</span>
          </window.SectionTag>
          <h2 style={{
            fontFamily: "Syne, sans-serif",
            fontSize: "clamp(36px, 4vw, 76px)",
            fontWeight: 800,
            letterSpacing: "-0.035em",
            lineHeight: 1.0,
            marginTop: 28,
            marginBottom: 24,
            maxWidth: 800,
            marginLeft: "auto", marginRight: "auto"
          }}>
            Построим что-то<br />
            <span className="text-gradient-blue">экстраординарное</span>
          </h2>
          <p style={{
            fontFamily: "Inter, sans-serif",
            fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.65)",
            maxWidth: 560, margin: "0 auto 40px"
          }}>
            Расскажите про задачу — мы вернёмся с архитектурным мнением и оценкой
            сроков в течение 24 часов.
          </p>
          <div style={{ display: "inline-flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <window.GradientBtn to="/contact" size="lg">Начать проект</window.GradientBtn>
            <window.Link to="/work" style={{
              padding: "16px 30px",
              borderRadius: 100,
              border: "1.5px solid rgba(255,255,255,0.2)",
              fontFamily: "Inter, sans-serif",
              fontSize: 14, fontWeight: 500,
              color: "rgba(255,255,255,0.9)",
              transition: "all 0.25s ease",
              display: "inline-flex", alignItems: "center", gap: 8
            }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";e.currentTarget.style.background = "rgba(255,255,255,0.05)";}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = "rgba(255,255,255,0.2)";e.currentTarget.style.background = "transparent";}}>
              
              Смотреть продукты
            </window.Link>
          </div>
        </div>
      </div>
    </section>);

}

function HomeSupplyChain() {
  const titleRef = window.useReveal("reveal");
  const data = window.SITE_DATA.logistics;
  const featured = data.orders.slice(0, 3);
  return (
    <section style={{
      padding: "120px 32px",
      background: "#f8f7f4",
      position: "relative",
      overflow: "hidden"
    }}>
      <window.Orb size={700} color="rgba(232,93,0,0.05)" style={{ top: "30%", left: "50%", transform: "translate(-50%, -50%)" }} drift />
      <window.FloatingShape kind="ring" size={120} color="#e85d00" style={{ top: 80, right: "5%", opacity: 0.14 }} speed={26} />

      <div style={{ maxWidth: 1680, margin: "0 auto", position: "relative" }}>
        <div ref={titleRef} style={{ marginBottom: 56 }}>
          <window.SectionTag tone="warm">Global Supply Chain</window.SectionTag>
          <div style={{
            display: "flex", justifyContent: "space-between",
            alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginTop: 24
          }}>
            <h2 style={{
              fontFamily: "Syne, sans-serif",
              fontSize: "clamp(32px, 3.4vw, 64px)",
              fontWeight: 800,
              color: "#0d0d0d",
              letterSpacing: "-0.03em",
              lineHeight: 1.02,
              maxWidth: 700
            }}>
              От factory до<br />
              <span className="text-gradient-warm">вашего порога</span>
            </h2>
            <p style={{
              fontFamily: "Inter, sans-serif",
              fontSize: 16, lineHeight: 1.7, color: "#5a5a5a",
              maxWidth: 420
            }}>
              Лицензированный международный коммерческий оператор — от
              одного GPU-сервера до полного дата-центра. Sourcing,
              customs, last-mile в одном контракте.
            </p>
          </div>
        </div>

        {/* Global stats bar */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
          gap: 16,
          marginBottom: 40
        }}>
          {data.globalStats.map((s, i) => {
            const Ic = window.I[s.icon];
            return (
              <div key={i} className="card-fade" style={{
                padding: "22px 24px",
                background: "#ffffff",
                border: "1px solid rgba(0,0,0,0.06)",
                borderRadius: 18,
                display: "flex",
                alignItems: "center",
                gap: 14,
                position: "relative",
                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.08)";}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.boxShadow = "none";}}>
                
                <div className="accent-strip" style={{ background: `linear-gradient(90deg, #e85d00, #e85d0040)` }} />
                <div style={{
                  width: 40, height: 40, borderRadius: 11,
                  background: "rgba(232,93,0,0.08)",
                  border: "1px solid rgba(232,93,0,0.18)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0
                }}>
                  {Ic && <Ic size={17} color="#e85d00" />}
                </div>
                <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: 12, color: "#7a7a7a", marginTop: 4 }}>{s.l}</div>
                </div>
              </div>);

          })}
        </div>

        {/* Featured orders */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(330px, 1fr))",
          gap: 22,
          marginBottom: 48
        }}>
          {featured.map((o, i) => <SupplyMiniCard key={o.slug} o={o} index={i} />)}
        </div>

        {/* Bottom row: link + CTA banner */}
        <div style={{
          padding: "32px 36px",
          borderRadius: 24,
          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={300} gradient="linear-gradient(135deg, #f5a623, #e85d00)" style={{ top: "-30%", right: "-5%" }} opacity={0.4} />
          <div style={{ position: "relative" }}>
            <div style={{
              fontFamily: "Syne, sans-serif", fontSize: 24, fontWeight: 800,
              letterSpacing: "-0.02em", marginBottom: 6
            }}>
              Нужно сложное оборудование с доставкой?
            </div>
            <p style={{
              fontSize: 14, color: "rgba(255,255,255,0.85)",
              maxWidth: 540, lineHeight: 1.55
            }}>
              Один GPU-сервер или полный data center build-out — sourcing,
              customs, logistics, last-mile под одним контрактом.
            </p>
          </div>
          <window.Link to="/logistics" style={{
            padding: "14px 26px", borderRadius: 100,
            background: "#fff", color: "#e85d00",
            fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 700,
            display: "inline-flex", alignItems: "center", gap: 8,
            flexShrink: 0,
            boxShadow: "0 12px 32px rgba(0,0,0,0.18)",
            transition: "transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)",
            position: "relative"
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-2px)"}
          onMouseLeave={(e) => e.currentTarget.style.transform = "translateY(0)"}>
            
            Все о логистике <window.I.ArrowRight size={14} color="#e85d00" />
          </window.Link>
        </div>
      </div>
    </section>);

}

function SupplyMiniCard({ o, index }) {
  const ref = window.useReveal("reveal", 80 * index);
  const Ic = window.I[o.icon];
  return (
    <div ref={ref}>
      <window.Tilt max={4} scale={1.005}>
        <window.Link to="/logistics">
          <div className="card-link" style={{
            background: "#fff", borderRadius: 22,
            overflow: "hidden", border: "1px solid rgba(0,0,0,0.06)",
            display: "flex", flexDirection: "column"
          }}>
            <div style={{ position: "relative", height: 180, 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%, ${o.accent}cc 100%)`,
                opacity: 0.5
              }} />
              <div style={{
                position: "absolute", top: 14, left: 14,
                width: 34, height: 34, borderRadius: 10,
                background: `${o.accent}cc`,
                backdropFilter: "blur(8px)",
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                {Ic && <Ic size={15} color="#fff" />}
              </div>
              <div style={{
                position: "absolute", bottom: 14, left: 14, right: 14,
                color: "#fff"
              }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.75)", marginBottom: 4 }}>
                  {o.rank} · {o.region}
                </div>
                <div style={{ fontFamily: "Syne, sans-serif", fontSize: 17, fontWeight: 700, letterSpacing: "-0.015em", lineHeight: 1.2 }}>
                  <span className="title-anim">{window.tx(o.title)}</span>
                </div>
              </div>
            </div>
            <div style={{ padding: "20px 22px" }}>
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                fontSize: 11, fontWeight: 600,
                letterSpacing: "0.04em",
                marginBottom: 8
              }}>
                <span style={{ color: o.accent, textTransform: "uppercase" }}>{window.tx(o.subtitle)}</span>
                <span style={{ color: o.accent, fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 700 }}>{o.value}</span>
              </div>
              <div style={{ fontSize: 11, color: "#7a7a7a" }}>
                {o.client} · <span style={{ color: "#0d0d0d", fontWeight: 600 }}>{o.timeline}</span>
              </div>
            </div>
          </div>
        </window.Link>
      </window.Tilt>
    </div>);

}

/* === 3D scene — free-space asymmetric showcase, NOT a grid tile === */
function ServiceShowcaseAsymmetric() {
  const ref = window.useReveal("reveal", 100);
  const t = window.useT ? window.useT() : (k) => k;
  return (
    <div ref={ref} style={{
      marginTop: 96,
      position: "relative",
      display: "grid",
      gridTemplateColumns: "minmax(260px, 5fr) minmax(420px, 8fr)",
      gap: 0,
      alignItems: "stretch",
      /* break out to the right past the section container */
      marginRight: "clamp(-160px, -6vw, -40px)"
    }} className="showcase-asym">
      {/* ============ LEFT — manifesto text ============ */}
      <div style={{
        display: "flex", flexDirection: "column", justifyContent: "center",
        padding: "40px 56px 40px 0",
        position: "relative", zIndex: 2
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "5px 12px", borderRadius: 100,
          background: "rgba(10,110,245,0.07)",
          border: "1px solid rgba(10,110,245,0.18)",
          fontSize: 10, fontWeight: 700, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "#0a6ef5",
          marginBottom: 22, width: "fit-content"
        }}>
          <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: "50%", background: "#05b89c" }} />
          Live ecosystem
        </div>
        <h3 style={{
          fontFamily: "Syne, sans-serif",
          fontSize: "clamp(28px, 2.6vw, 48px)",
          fontWeight: 800, color: "#0d0d0d",
          letterSpacing: "-0.025em", lineHeight: 1.05,
          marginBottom: 20
        }}>
          Всё работает <span className="text-gradient-blue">в одной экосистеме</span>
        </h3>
        <p style={{
          fontFamily: "Inter, sans-serif",
          fontSize: 15, lineHeight: 1.7, color: "#3a3a3a",
          marginBottom: 28, maxWidth: 460
        }}>
          Шесть направлений — один технологический фундамент. AI-агенты разговаривают с CRM,
          мобильное приложение тянет данные из ERP, веб-платформа интегрирована с поставками.
          Один контакт-партнёр на весь продукт.
        </p>
        <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
          {[
          { v: "6", l: "направлений" },
          { v: "1", l: "контакт-партнёр" },
          { v: "8", l: "человек команды" }].
          map((s, i) =>
          <div key={i}>
              <div style={{
              fontFamily: "Syne, sans-serif", fontSize: 30, fontWeight: 800,
              color: "#0a6ef5", letterSpacing: "-0.02em", lineHeight: 1
            }}>{s.v}</div>
              <div style={{ fontSize: 11, color: "#7a7a7a", letterSpacing: "0.06em",
              textTransform: "uppercase", marginTop: 6 }}>{s.l}</div>
            </div>
          )}
        </div>
      </div>

      {/* ============ RIGHT — 3D scene on transparent white, no frame ============ */}
      <div className="tilt-root" style={{
        position: "relative",
        minHeight: 520,
        background: "transparent",
        overflow: "visible",
        transform: "translateY(-20px)"
      }}>
        {/* radial glow behind cube */}
        <div style={{
          position: "absolute",
          top: "50%", left: "52%",
          transform: "translate(-50%, -50%)",
          width: 460, height: 460, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(10,110,245,0.18), transparent 70%)",
          filter: "blur(40px)",
          pointerEvents: "none"
        }} />
        {/* secondary teal glow for asymmetry */}
        <div style={{
          position: "absolute",
          bottom: "12%", right: "8%",
          width: 260, height: 260, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(5,184,156,0.15), transparent 70%)",
          filter: "blur(40px)",
          pointerEvents: "none"
        }} />
        {/* floating particles — denser */}
        {Array.from({ length: 22 }).map((_, i) =>
        <span key={i} aria-hidden style={{
          position: "absolute",
          left: i * 37 % 92 + 3 + "%",
          top: i * 53 % 86 + 6 + "%",
          width: 2 + i % 3,
          height: 2 + i % 3,
          borderRadius: "50%",
          background: ["#0a6ef5", "#05b89c", "#e85d00"][i % 3],
          opacity: 0.5 + i * 7 % 5 / 12,
          animation: `drift ${8 + i % 4 * 2}s ease-in-out ${i % 5 * 0.4}s infinite`,
          boxShadow: `0 0 ${4 + i % 3 * 2}px currentColor`,
          color: ["#0a6ef5", "#05b89c", "#e85d00"][i % 3],
          pointerEvents: "none"
        }} />
        )}

        {/* 3D cube — bigger, slightly off-center to the right */}
        <div style={{
          position: "absolute",
          top: "50%", left: "55%",
          transform: "translate(-50%, -50%)",
          perspective: 1100,
          width: 300, height: 300,
          pointerEvents: "none"
        }}>
          <div style={{
            width: "100%", height: "100%",
            position: "relative",
            transformStyle: "preserve-3d",
            animation: "scene-spin 22s linear infinite"
          }}>
            {[
            { c: "#0a6ef5", iconKey: "Brain" },
            { c: "#05b89c", iconKey: "Bot" },
            { c: "#0a6ef5", iconKey: "Code" },
            { c: "#e85d00", iconKey: "HomeSmart" }].
            map((p, i) => {
              const Ic = window.I[p.iconKey];
              return (
                <div key={i} style={{
                  position: "absolute",
                  inset: 0,
                  background: `linear-gradient(135deg, ${p.c}1f, ${p.c}08)`,
                  border: `1.5px solid ${p.c}80`,
                  borderRadius: 28,
                  backdropFilter: "blur(10px)",
                  WebkitBackdropFilter: "blur(10px)",
                  transform: `rotateY(${i * 90}deg) translateZ(140px)`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  boxShadow: `0 0 60px ${p.c}30, inset 0 0 30px ${p.c}0a`
                }}>
                  {Ic && <Ic size={84} color={p.c} strokeWidth={1.3} />}
                </div>);

            })}
            {/* top + bottom faces */}
            <div style={{
              position: "absolute", inset: 0,
              border: "1.5px solid rgba(10,110,245,0.4)",
              borderRadius: 28,
              transform: "rotateX(90deg) translateZ(140px)",
              background: "linear-gradient(135deg, rgba(10,110,245,0.06), transparent)"
            }} />
            <div style={{
              position: "absolute", inset: 0,
              border: "1.5px solid rgba(5,184,156,0.35)",
              borderRadius: 28,
              transform: "rotateX(-90deg) translateZ(140px)",
              background: "linear-gradient(135deg, rgba(5,184,156,0.06), transparent)"
            }} />
          </div>
        </div>

        {/* orbiting rings — two for asymmetry */}
        <div style={{
          position: "absolute",
          top: "50%", left: "55%",
          transform: "translate(-50%, -50%)",
          width: 400, height: 400, borderRadius: "50%",
          border: "1px dashed rgba(10,110,245,0.28)",
          animation: "spin-slow 30s linear infinite",
          pointerEvents: "none"
        }} />
        <div style={{
          position: "absolute",
          top: "50%", left: "55%",
          transform: "translate(-50%, -50%)",
          width: 500, height: 500, borderRadius: "50%",
          border: "1px dashed rgba(5,184,156,0.18)",
          animation: "spin-slow 50s linear infinite reverse",
          pointerEvents: "none"
        }} />

        {/* corner label — top left */}
        <div style={{
          position: "absolute", top: 28, left: 32, zIndex: 3,
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 12px", borderRadius: 100,
          background: "rgba(10,110,245,0.08)",
          border: "1px solid rgba(10,110,245,0.22)",
          backdropFilter: "blur(8px)",
          fontSize: 10, fontWeight: 700, letterSpacing: "0.14em",
          textTransform: "uppercase", color: "#0a6ef5"
        }}>
          <span className="pulse-dot" style={{ width: 5, height: 5, borderRadius: "50%", background: "#05b89c" }} />
          AI · Web · Mobile · IoT
        </div>

        {/* corner label — bottom right */}
        <div style={{
          position: "absolute", bottom: 32, right: 40, zIndex: 3,
          maxWidth: 240, textAlign: "right"
        }}>
          <div style={{
            fontFamily: "Syne, sans-serif", fontSize: 14, fontWeight: 700,
            color: "#0d0d0d", letterSpacing: "-0.01em",
            marginBottom: 4
          }}>Один технологический фундамент</div>
          <div style={{ fontSize: 11, color: "#7a7a7a", lineHeight: 1.5 }}>
            Allion Group · Bishkek, 2019
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px){
          .showcase-asym{
            grid-template-columns: 1fr !important;
            margin-right: 0 !important;
          }
          .showcase-asym > div:last-child{
            transform: none !important;
            min-height: 460px !important;
          }
        }
      `}</style>
    </div>);

}

function HomePage() {
  return (
    <>
      <HomeHero />
      <HomeServicesPreview />
      <HomeWorkPreview />
      <HomeSupplyChain />
      <HomeIndustriesPreview />
      <HomeCTA />
    </>);

}
window.HomePage = HomePage;