export default function SteliroLanding() {
  return (
    <div className="min-h-screen overflow-hidden bg-[#0B1020] text-white relative">
      {/* Aurora Background */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-[-20%] left-[-10%] h-[500px] w-[500px] rounded-full bg-cyan-400/20 blur-3xl" />
        <div className="absolute top-[20%] right-[-10%] h-[600px] w-[600px] rounded-full bg-blue-500/20 blur-3xl" />
        <div className="absolute bottom-[-10%] left-[20%] h-[500px] w-[500px] rounded-full bg-indigo-500/20 blur-3xl" />
      </div>

      {/* Noise */}
      <div className="absolute inset-0 opacity-[0.03] bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:20px_20px]" />

      {/* Header */}
      <header className="relative z-10 px-8 md:px-16 py-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="h-10 w-10 rounded-2xl bg-white/10 backdrop-blur-xl border border-white/10 flex items-center justify-center shadow-2xl">
            <div className="h-5 w-5 rounded-full bg-gradient-to-br from-cyan-300 to-blue-500" />
          </div>
          <div>
            <div className="text-xl font-semibold tracking-wide">Steliro</div>
            <div className="text-xs text-white/40 tracking-[0.25em] uppercase">星枢</div>
          </div>
        </div>

        <div className="flex items-center gap-3">
          <button className="px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-xl text-sm hover:bg-white/10 transition-all duration-300">
            中文
          </button>
          <button className="px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-xl text-sm hover:bg-white/10 transition-all duration-300">
            EN
          </button>
        </div>
      </header>

      {/* Hero */}
      <section className="relative z-10 px-8 md:px-16 pt-12 md:pt-20 pb-24">
        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
          {/* Left */}
          <div>
            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-xl px-4 py-2 text-sm text-white/70 mb-8 shadow-xl">
              <div className="h-2 w-2 rounded-full bg-cyan-300 animate-pulse" />
              HyperOS Inspired Interface
            </div>

            <h1 className="text-5xl md:text-7xl font-semibold leading-[1.05] tracking-tight">
              连接设备与未来的
              <span className="block mt-3 bg-gradient-to-r from-cyan-300 via-blue-400 to-indigo-400 bg-clip-text text-transparent">
                智能中枢
              </span>
            </h1>

            <p className="mt-8 text-lg text-white/60 leading-8 max-w-2xl">
              Steliro（星枢）是一个现代化 IoT 平台与智能连接入口，
              以极简、流动、柔和光影为核心设计语言，打造更沉浸、更优雅的设备交互体验。
            </p>

            <div className="mt-10 flex flex-wrap gap-4">
              <button className="px-7 py-4 rounded-2xl bg-gradient-to-r from-cyan-400 to-blue-500 text-black font-medium shadow-2xl shadow-cyan-500/30 hover:scale-[1.03] transition-all duration-300">
                开始探索
              </button>

              <button className="px-7 py-4 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-xl hover:bg-white/10 transition-all duration-300">
                查看文档
              </button>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-3 gap-4 mt-14 max-w-xl">
              {[
                ['99.99%', '稳定运行'],
                ['MQTT', '实时连接'],
                ['K8s', '云原生架构'],
              ].map(([v, t]) => (
                <div
                  key={t}
                  className="rounded-3xl border border-white/10 bg-white/[0.04] backdrop-blur-2xl p-5 shadow-2xl"
                >
                  <div className="text-2xl font-semibold">{v}</div>
                  <div className="mt-2 text-sm text-white/50">{t}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right Visual */}
          <div className="relative flex items-center justify-center">
            <div className="absolute h-[580px] w-[580px] rounded-full bg-cyan-400/10 blur-3xl" />

            <div className="relative w-full max-w-[560px] aspect-square rounded-[40px] border border-white/10 bg-white/[0.05] backdrop-blur-3xl shadow-[0_20px_80px_rgba(0,0,0,0.45)] overflow-hidden">
              {/* top glow */}
              <div className="absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-cyan-300/20 to-transparent" />

              {/* Floating cards */}
              <div className="absolute top-10 left-10 right-10 flex items-center justify-between">
                <div className="rounded-2xl border border-white/10 bg-white/[0.06] backdrop-blur-2xl px-5 py-4 shadow-xl">
                  <div className="text-xs text-white/50">Online Devices</div>
                  <div className="mt-2 text-3xl font-semibold">1,248</div>
                </div>

                <div className="rounded-2xl border border-white/10 bg-white/[0.06] backdrop-blur-2xl px-5 py-4 shadow-xl">
                  <div className="text-xs text-white/50">Latency</div>
                  <div className="mt-2 text-3xl font-semibold">12ms</div>
                </div>
              </div>

              {/* Central Orb */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="relative h-64 w-64 rounded-full bg-gradient-to-br from-cyan-300/40 via-blue-500/30 to-indigo-500/40 blur-[2px] flex items-center justify-center shadow-[0_0_120px_rgba(34,211,238,0.25)]">
                  <div className="absolute inset-6 rounded-full border border-white/20" />
                  <div className="absolute inset-12 rounded-full border border-white/10" />
                  <div className="h-28 w-28 rounded-full bg-white/10 backdrop-blur-3xl border border-white/20 flex items-center justify-center text-center">
                    <div>
                      <div className="text-sm text-white/50">Core</div>
                      <div className="mt-1 text-2xl font-semibold">星枢</div>
                    </div>
                  </div>
                </div>
              </div>

              {/* Bottom panel */}
              <div className="absolute bottom-8 left-8 right-8 rounded-3xl border border-white/10 bg-black/20 backdrop-blur-2xl p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-sm text-white/50">Infrastructure</div>
                    <div className="mt-2 text-xl font-semibold">Cloud Native IoT Platform</div>
                  </div>

                  <div className="flex gap-3">
                    <div className="h-12 w-12 rounded-2xl bg-white/10 border border-white/10" />
                    <div className="h-12 w-12 rounded-2xl bg-white/10 border border-white/10" />
                    <div className="h-12 w-12 rounded-2xl bg-white/10 border border-white/10" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="relative z-10 px-8 md:px-16 pb-28">
        <div className="max-w-7xl mx-auto">
          <div className="mb-12">
            <div className="text-sm uppercase tracking-[0.3em] text-white/40 mb-4">
              Features
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight">
              为现代 IoT 构建
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                title: '云原生架构',
                desc: '基于 Kubernetes 与现代微服务架构设计，支持弹性扩展与高可用部署。',
              },
              {
                title: '实时设备连接',
                desc: '支持 MQTT / WebSocket / HTTP 等多协议接入，实现毫秒级实时通信。',
              },
              {
                title: '现代视觉体验',
                desc: '融合 HyperOS 风格的柔和光影与液态玻璃设计语言，兼顾科技感与克制感。',
              },
            ].map((item) => (
              <div
                key={item.title}
                className="rounded-[32px] border border-white/10 bg-white/[0.05] backdrop-blur-3xl p-8 shadow-2xl hover:-translate-y-1 transition-all duration-500"
              >
                <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-cyan-300/30 to-blue-500/30 border border-white/10 mb-6" />
                <div className="text-2xl font-semibold">{item.title}</div>
                <div className="mt-4 text-white/60 leading-8">{item.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 border-t border-white/10 px-8 md:px-16 py-8 flex flex-col md:flex-row items-center justify-between gap-4 text-white/40 text-sm">
        <div>© 2026 Steliro · 星枢</div>
        <div className="flex items-center gap-6">
          <span>Cloud Native</span>
          <span>MQTT</span>
          <span>HyperOS Inspired</span>
        </div>
      </footer>
    </div>
  )
}