import Link from 'next/link';
import {
  Building2,
  CreditCard,
  Wrench,
  Bell,
  ShieldCheck,
  Smartphone,
} from 'lucide-react';

export function Hero() {
  return (
    <section className="relative overflow-hidden bg-[#0a0e27]">
      {/* ===== 背景 ===== */}
      <div className="pointer-events-none absolute inset-0">
        {/* 深色渐变底 */}
        <div className="absolute inset-0 bg-gradient-to-br from-[#0a0e27] via-[#0d1130] to-[#0a0e27]" />
        {/* 网格底纹 */}
        <div
          className="absolute inset-0 opacity-[0.07]"
          style={{
            backgroundImage:
              'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
            backgroundSize: '48px 48px',
          }}
        />
        {/* 靛蓝辉光 - 左上（克制） */}
        <div className="absolute -left-20 top-0 h-80 w-80 rounded-full bg-brand-600/15 blur-[120px]" />
        {/* 靛蓝辉光 - 右下（克制） */}
        <div className="absolute -right-10 bottom-0 h-72 w-72 rounded-full bg-brand-700/15 blur-[120px]" />

        {/* === 几何图形 === */}
        {/* 大圆环 - 左上 */}
        <div className="hero-anim-spin absolute -left-20 -top-20 h-72 w-72 rounded-full border border-white/10" />
        {/* 方块 - 左下 */}
        <div className="hero-anim-float absolute bottom-16 left-[8%] h-14 w-14 rounded-lg border border-white/10 bg-white/[0.03]" />
        {/* 小菱形 - 左中 */}
        <div className="hero-anim-float-rev absolute left-[5%] top-1/2 h-8 w-8 rotate-45 rounded-sm border border-white/10 bg-white/[0.03]" />
        {/* 加号 - 左中偏上 */}
        <div className="hero-anim-float absolute left-[3%] top-[25%] text-2xl font-light text-white/15">+</div>
        {/* 小方块 - 左中偏下 */}
        <div className="hero-anim-float-rev absolute left-[12%] bottom-[22%] h-6 w-6 rounded border border-white/10 bg-white/[0.03]" style={{ animationDelay: '2s' }} />
        {/* 小圆 - 左侧 */}
        <div className="hero-anim-pulse absolute left-[18%] top-[35%] h-2.5 w-2.5 rounded-full bg-brand-400/40" style={{ animationDelay: '0.8s' }} />

        {/* === 右侧区域 === */}
        <div className="hero-anim-spin absolute right-10 top-12 h-32 w-32 rounded-full border-2 border-dashed border-white/10" style={{ animationDuration: '24s' }} />
        <div className="hero-anim-float-rev absolute right-[12%] top-1/3 h-10 w-10 rotate-45 rounded-sm border border-white/10 bg-white/[0.03]" />
        <div className="hero-anim-pulse absolute -bottom-16 right-[5%] h-48 w-48 rounded-full border border-white/8" />
        <div className="hero-anim-float absolute right-[6%] top-[28%] text-3xl font-light text-white/10">+</div>
        <div className="hero-anim-spin absolute right-[8%] bottom-[30%] h-16 w-16 rounded-full border border-white/10" style={{ animationDuration: '20s', animationDirection: 'reverse' }} />
        <div className="hero-anim-float-rev absolute right-[20%] bottom-[12%] h-0 w-0" style={{ borderLeft: '8px solid transparent', borderRight: '8px solid transparent', borderBottom: '14px solid rgba(255,255,255,0.1)' }} />

        {/* === 中间区域 === */}
        <div className="hero-anim-pulse absolute left-[35%] top-[20%] h-3 w-3 rounded-full bg-brand-400/40" />
        <div className="hero-anim-pulse absolute right-[28%] bottom-[25%] h-2 w-2 rounded-full bg-white/20" style={{ animationDelay: '1.5s' }} />
        <div className="hero-anim-pulse absolute left-[15%] bottom-[30%] h-2.5 w-2.5 rounded-full bg-brand-400/30" style={{ animationDelay: '0.8s' }} />
        <div className="hero-anim-float absolute right-[40%] top-[15%] font-mono text-2xl font-bold text-white/10">{'{ }'}</div>
        <div className="hero-anim-float-rev absolute left-[60%] bottom-[20%] font-mono text-xl font-bold text-white/8">{'</>'}</div>
        <div className="hero-anim-float absolute left-[42%] top-[55%] h-7 w-7 rotate-12 rounded-md border border-white/10 bg-white/[0.03]" />
        <div className="hero-anim-float-rev absolute left-[55%] top-[18%] h-10 w-10 rounded-full border border-dashed border-white/10" style={{ animationDelay: '1s' }} />
        <div className="hero-anim-float-rev absolute left-[38%] bottom-[18%] text-xl font-light text-white/10">+</div>
        <div className="hero-anim-spin absolute left-[48%] top-[30%] h-5 w-5 rounded border border-white/10" style={{ animationDuration: '15s' }} />
        <div className="hero-anim-pulse absolute left-[50%] top-[65%] h-2 w-2 rounded-full bg-brand-400/30" style={{ animationDelay: '2.5s' }} />
        <div className="hero-anim-float absolute left-[30%] top-[12%] h-12 w-12 rounded-full border border-white/8" />
        <div className="hero-anim-float-rev absolute left-[45%] bottom-[10%] h-px w-16 bg-gradient-to-r from-transparent via-white/15 to-transparent" />
      </div>

      {/* ===== 内容区 ===== */}
      <div className="container-page relative grid items-center gap-12 py-16 lg:grid-cols-2 lg:py-24">
        {/* 左：文案 */}
        <div className="text-center lg:text-left">
          <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-1.5 text-sm text-gray-300 backdrop-blur-sm">
            <Smartphone className="h-4 w-4 text-brand-400" />
            物业管理系统 · 小程序 · SaaS
          </span>

          <h1 className="mt-6 text-4xl font-bold leading-tight text-white sm:text-5xl">
            让物业管理
            <br />
            <span className="bg-gradient-to-r from-white to-slate-400 bg-clip-text text-transparent">
              像发微信一样简单
            </span>
          </h1>

          <p className="mt-5 text-xl font-medium text-gray-300">
            懂物业，更懂&ldquo;省&rdquo;心
          </p>
          <p className="mt-3 max-w-lg text-base leading-7 text-gray-400 lg:mx-0 mx-auto">
            一站式物业管理平台，覆盖缴费、报修、公告、巡检全流程，助力物业公司降本增效。
          </p>

          <div className="mt-8 flex flex-col gap-4 sm:flex-row lg:justify-start justify-center">
            <Link
              href="/contact"
              className="rounded-lg bg-brand-600 px-7 py-3 text-sm font-semibold text-white shadow-lg shadow-brand-900/50 transition-all hover:bg-brand-500"
            >
              预约演示
            </Link>
            <Link
              href="/manual"
              className="rounded-lg border border-white/15 bg-white/5 px-7 py-3 text-sm font-medium text-gray-200 backdrop-blur-sm transition-colors hover:bg-white/10"
            >
              使用手册
            </Link>
          </div>
        </div>

        {/* 右：配图区 */}
        <div className="relative hidden lg:block">
          <div className="hero-anim-float relative mx-auto w-full max-w-md rounded-2xl border border-white/15 bg-white p-5 shadow-2xl">
            {/* 顶部状态栏 */}
            <div className="mb-4 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <span className="flex h-7 w-7 items-center justify-center rounded-lg bg-brand-600">
                  <Building2 className="h-4 w-4 text-white" />
                </span>
                <span className="text-sm font-semibold text-gray-800">智管物业</span>
              </div>
              <span className="text-xs text-gray-400">业主端</span>
            </div>
            {/* 功能卡片 */}
            <div className="grid grid-cols-3 gap-3">
              {[
                { icon: CreditCard, label: '物业缴费' },
                { icon: Wrench, label: '在线报修' },
                { icon: Bell, label: '社区公告' },
                { icon: ShieldCheck, label: '访客邀请' },
                { icon: Building2, label: '投诉建议' },
                { icon: Smartphone, label: '社区活动' },
              ].map((item) => (
                <div
                  key={item.label}
                  className="flex flex-col items-center gap-1.5 rounded-lg border border-gray-100 bg-gray-50 p-3"
                >
                  <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50">
                    <item.icon className="h-4 w-4 text-brand-600" />
                  </span>
                  <span className="text-xs text-gray-600">{item.label}</span>
                </div>
              ))}
            </div>
            {/* 缴费条 */}
            <div className="mt-4 rounded-lg bg-gray-50 p-3">
              <div className="flex items-center justify-between">
                <span className="text-xs text-gray-500">本月物业费</span>
                <span className="text-xs font-medium text-brand-600">待缴费</span>
              </div>
              <div className="mt-1 flex items-end justify-between">
                <span className="text-lg font-bold text-gray-900">¥286.00</span>
                <span className="rounded-md bg-brand-600 px-3 py-1 text-xs font-medium text-white">
                  立即缴费
                </span>
              </div>
            </div>
          </div>

          {/* 漂浮卡片 - 报修工单 */}
          <div className="hero-anim-float-rev absolute -left-6 top-8 rounded-xl border border-gray-100 bg-white p-3 shadow-xl">
            <div className="flex items-center gap-2">
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-brand-50">
                <Wrench className="h-4 w-4 text-brand-600" />
              </span>
              <div>
                <div className="text-xs font-medium text-gray-800">报修工单</div>
                <div className="text-xs text-gray-400">已完成 · 5分钟响应</div>
              </div>
            </div>
          </div>

          {/* 漂浮卡片 - 收费率 */}
          <div className="hero-anim-float absolute -right-4 bottom-10 rounded-xl border border-gray-100 bg-white p-3 shadow-xl">
            <div className="text-xs text-gray-400">本月收费率</div>
            <div className="mt-0.5 flex items-baseline gap-1">
              <span className="text-xl font-bold text-brand-600">98.5</span>
              <span className="text-xs text-gray-400">%</span>
            </div>
            <div className="mt-1.5 h-1.5 w-20 overflow-hidden rounded-full bg-gray-100">
              <div className="h-full w-[98%] rounded-full bg-brand-500" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}