import { useEffect, useRef, useState } from "react"
import { preloadImagesWhenIdle } from "../utils/preloadImages"
import BrandLogo from "../components/BrandLogo"
import { useBranding } from "../contexts/BrandingContext"
import { Link, useNavigate } from "react-router-dom"
import {
  ArrowRight,
  BarChart3,
  Boxes,
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  Cloud,
  Database,
  Globe,
  HardDrive,
  Headphones,
  Lock,
  Mail,
  MessageCircleQuestion,
  Network,
  PenLine,
  QrCode,
  Server,
  ShieldCheck,
  Zap,
} from "lucide-react"
import { useAuth } from "../contexts/AuthContext"
import SiteHeader from "../components/SiteHeader"

const HOME_ANCHORS = [
  { href: "/", label: "首页" },
  { href: "/activities", label: "最新活动" },
  { href: "/store", label: "产品服务" },
  { href: "/solutions", label: "解决方案" },
  { href: "/cooperation", label: "生态合作" },
  { href: "/#faq", label: "支持与服务" },
  { href: "/#about", label: "了解我们" },
]

const HERO_SLIDES = [
  {
    navTitle: "香港CN2 五折独享惠",
    kicker: "五一云端特惠 启航新征程",
    title: "香港CN2 五折独享惠",
    desc: "香港云服务器，性能卓越，五折限时特惠！",
    action: "立即享受",
    href: "/activities",
    background: "/theme-home/hero-cn2.png",
  },
  {
    navTitle: "五一云端特惠 启航新征程",
    kicker: "云端钜惠",
    title: "云服务器限时特惠，助力业务轻松启航",
    desc: "精选云计算资源限时优惠，稳定性能与快速交付一步到位。",
    action: "查看活动",
    href: "/store",
    background: "/hero-new-user.jpeg",
  },
  {
    navTitle: "美国云服务年付特惠",
    kicker: "全球云服务",
    title: "美国云服务年付特惠",
    desc: "海外优质节点与精品网络组合交付，跨境业务部署更加便捷。",
    action: "立即选购",
    href: "/store",
    background: "/theme-home/hero-cloud.jpeg",
  },
  {
    navTitle: "智能云端，AI服务尽享优惠",
    kicker: "智能云计算",
    title: "智能云端，AI服务尽享优惠",
    desc: "弹性算力、自动化交付与统一控制台，让云上业务管理更简单。",
    action: "探索云产品",
    href: "/store",
    background: "/hero-cloud.jpg",
  },
]

const HERO_FEATURES = [
  {
    image: "/theme-home/feature-activity.png",
    title: "最新活动",
    desc: "产品促销，助您降本增效",
    href: "/activities",
  },
  {
    image: "/theme-home/feature-product.png",
    title: "产品特惠，轻松上云",
    desc: "香港特惠 2C2G 30/月 230/年",
    href: "/store",
  },
  {
    image: "/theme-home/feature-affiliate.png",
    title: "推广赚佣 轻松赚钱",
    desc: "每笔推荐均可赚钱（现金返佣）",
    href: "/promotion",
  },
  {
    image: "/theme-home/feature-compute.png",
    title: "弹性计算 管理简单",
    desc: "云控制台、弹性配置、灵活管理",
    href: "/dashboard",
  },
]

const PRODUCT_GROUPS = [
  {
    name: "云服务器",
    title: "弹性计算产品",
    desc: "从轻量应用到高性能业务，按实际负载选择合适的计算资源。",
    items: [
      { icon: Server, name: "弹性云服务器", desc: "通用型计算实例，支持弹性升降配置。", tags: ["按需计费", "秒级开通"] },
      { icon: Globe, name: "香港精品云", desc: "面向跨境业务优化的精品网络实例。", tags: ["低延迟", "精品线路"] },
      { icon: ShieldCheck, name: "高防云服务器", desc: "计算资源与流量清洗能力组合交付。", tags: ["安全防护", "业务稳定"] },
      { icon: Cloud, name: "轻量应用服务器", desc: "预置常用环境，适合网站和轻量应用。", tags: ["简单易用", "快速部署"] },
    ],
  },
  {
    name: "网络与安全",
    title: "网络与安全服务",
    desc: "连接云上资源与公网业务，并为实例提供基础访问控制和安全防护。",
    items: [
      { icon: Network, name: "BGP 公网带宽", desc: "多线网络接入，改善不同运营商访问体验。", tags: ["多线接入", "弹性带宽"] },
      { icon: Lock, name: "安全组", desc: "通过规则控制实例入站和出站流量。", tags: ["访问控制", "实例隔离"] },
      { icon: ShieldCheck, name: "DDoS 基础防护", desc: "提供基础攻击检测与流量清洗能力。", tags: ["自动检测", "基础清洗"] },
      { icon: Globe, name: "弹性公网 IP", desc: "独立公网地址，可灵活绑定云上资源。", tags: ["灵活绑定", "独立管理"] },
    ],
  },
  {
    name: "域名与网站",
    title: "网站基础服务",
    desc: "从域名、解析到证书和托管，覆盖网站上线所需的基础能力。",
    items: [
      { icon: Globe, name: "域名注册", desc: "覆盖常用域名后缀，统一管理注册信息。", tags: ["后缀丰富", "统一管理"] },
      { icon: ShieldCheck, name: "SSL 证书", desc: "支持常用证书类型的申请、部署和续期。", tags: ["HTTPS", "到期提醒"] },
      { icon: Network, name: "DNS 解析", desc: "稳定的域名解析与记录管理服务。", tags: ["快速生效", "记录管理"] },
      { icon: Boxes, name: "网站托管", desc: "为企业站点和个人项目提供运行环境。", tags: ["环境就绪", "便捷维护"] },
    ],
  },
  {
    name: "存储服务",
    title: "云上数据存储",
    desc: "满足系统盘、业务数据、静态文件和长期归档等不同存储场景。",
    items: [
      { icon: HardDrive, name: "云硬盘", desc: "为云服务器提供稳定的块存储能力。", tags: ["弹性扩容", "稳定读写"] },
      { icon: Database, name: "对象存储", desc: "适合图片、附件和备份文件的海量存储。", tags: ["按量计费", "高可用"] },
      { icon: Boxes, name: "快照备份", desc: "快速创建数据副本，便于恢复和迁移。", tags: ["一键创建", "快速恢复"] },
      { icon: Cloud, name: "归档存储", desc: "面向低频访问数据的长期低成本保存。", tags: ["低成本", "长期保存"] },
    ],
  },
]

const SOLUTIONS = [
  {
    name: "网站解决方案",
    href: "/solutions/web",
    title: "网站解决方案",
    desc: "基于优质基础资源，提供网站建设的一站式服务，涵盖 PC 站、手机站、H5 站、公众号等多种类型，通过私密独立系统满足各行业客户网站建设需求，助力政企客户信息化转型。",
    background: "/solution-website.jpg",
    features: [
      { title: "灵活配置", desc: "资源灵活调整、业务分离、可动态扩展" },
      { title: "数据备份", desc: "控制台一键备份，方便快捷" },
      { title: "标准化整合对接", desc: "标准化 API 接口及配套服务，统一的管控界面" },
    ],
  },
  {
    name: "游戏解决方案",
    href: "/solutions/game",
    title: "游戏解决方案",
    desc: "为游戏开发者提供强大的解决方案，让您的游戏运行更流畅，玩家体验更出色。",
    background: "/solution-game.png",
    features: [
      { title: "高效运维", desc: "提供专业环境搭建、系统搭建、主动监控与实时服务" },
      { title: "弹性扩展", desc: "秒级扩展 IT 资源，轻松应对业务激增并帮助企业节约成本" },
      { title: "安全防护", desc: "优质高防多线路，降低延迟并保障游戏服务稳定" },
    ],
  },
  {
    name: "政企解决方案",
    href: "/solutions/government",
    title: "政企解决方案",
    desc: "凭借丰富的政企云建设经验，打造多种政务云建设模式，为政府部门实现资源集约化建设与业务协同提供支撑，推进互联网政务发展。",
    background: "/solution-enterprise.jpg",
    features: [
      { title: "提升电子政务效率", desc: "整合服务资源、优化服务品质，提高政府服务效能" },
      { title: "建立全方位安全体系", desc: "采用可控安全防护体系，满足法规及行业监管要求" },
      { title: "提高服务供给质量", desc: "推进云计算、大数据与人工智能在社会服务领域的应用" },
    ],
  },
]

const ADDITIONAL_SOLUTIONS = [
  {
    label: "网络安全",
    href: "/solutions/safety",
    labelClass: "bg-emerald-400/20 text-emerald-700",
    title: "安全解决方案",
    desc: "我们提供专业的安全解决方案，保护您的数据免受攻击，让业务运行更加顺畅。",
  },
  {
    label: "电商云",
    href: "/solutions/ecommerce",
    labelClass: "bg-blue-300/30 text-blue-700",
    title: "电商云解决方案",
    desc: "高效、安全、可扩展的电商云解决方案，帮助企业提升销售能力与用户购物体验。",
  },
  {
    label: "云上出海",
    href: "/solutions/global",
    labelClass: "bg-violet-400/20 text-violet-700",
    title: "出海解决方案",
    desc: "为您提供一站式服务，轻松跨越国际化门槛，实现全球业务的稳定连接。",
  },
]

const FAQ_ITEMS = [
  {
    question: "购买云服务器后多久可以使用？",
    answer: "订单支付完成后，系统会自动调度并开通资源。具体时间取决于产品和上游节点状态，通常无需人工审核。",
  },
  {
    question: "云服务器支持调整配置吗？",
    answer: "支持的配置项以产品页面为准。可调整的实例能够在控制台修改 CPU、内存、存储或带宽，变更前会展示对应费用。",
  },
  {
    question: "云产品采用什么计费方式？",
    answer: "不同产品可以按购买周期或实际配置计费。下单前会明确展示价格、购买期限和续费信息，不设置隐藏费用。",
  },
  {
    question: "如何选择合适的网络线路？",
    answer: "主要根据用户所在地区和业务访问方向选择。国内业务可优先考虑多线网络，跨境业务可选择针对目标地区优化的精品线路。",
  },
  {
    question: "平台提供哪些基础安全能力？",
    answer: "平台提供安全组、网络隔离和基础流量防护。对安全要求更高的业务，建议结合独立备份、最小权限和专用安全产品。",
  },
  {
    question: "使用过程中遇到问题怎么办？",
    answer: "登录控制台后可以提交技术工单，并附上实例、订单和问题现象。支持人员会根据工单内容协助定位和处理。",
  },
]

export default function Home() {
  const { hero_video_url, hero_title, hero_description, hero_slides } = useBranding()
  const heroSlides = hero_slides.length ? hero_slides.map((slide) => ({ navTitle: slide.nav_title, kicker: slide.kicker, title: slide.title, desc: slide.description, action: slide.action, href: slide.href, background: slide.background })) : HERO_SLIDES
  const { user } = useAuth()
  const navigate = useNavigate()
  const pageRef = useRef<HTMLDivElement>(null)
  const [navProgress, setNavProgress] = useState(0)
  const [currentHero, setCurrentHero] = useState(0)
  const [currentProductGroup, setCurrentProductGroup] = useState(0)
  const [currentSolution, setCurrentSolution] = useState(0)
  const [openFaq, setOpenFaq] = useState(0)

  const activeHero = heroSlides[currentHero]!
  const activeProductGroup = PRODUCT_GROUPS[currentProductGroup]!
  const activeSolution = SOLUTIONS[currentSolution]!

  useEffect(() => {
    let raf = 0
    const update = () => {
      raf = 0
      setNavProgress(Math.min(1, Math.max(0, window.scrollY / 80)))
    }
    const onScroll = () => {
      if (raf) return
      raf = requestAnimationFrame(update)
    }
    update()
    window.addEventListener("scroll", onScroll, { passive: true })
    return () => {
      if (raf) cancelAnimationFrame(raf)
      window.removeEventListener("scroll", onScroll)
    }
  }, [])

  useEffect(() => {
    const timer = window.setTimeout(() => {
      setCurrentHero((current) => (current + 1) % heroSlides.length)
    }, 6000)
    return () => window.clearTimeout(timer)
  }, [currentHero])

  // 首屏渲染完成后，在浏览器空闲时段预热其余轮播图和解决方案背景图
  useEffect(() => {
    preloadImagesWhenIdle([
      // Hero 轮播 2-4（第一张已在 index.html 中 preload）
      "/theme-home/hero-cloud.jpeg",
      "/hero-cloud.jpg",
      // 解决方案背景图
      "/solution-website.jpg",
      "/solution-game.png",
      "/solution-enterprise.jpg",
    ])
  }, [])

  useEffect(() => {
    const root = pageRef.current
    if (!root) return

    const targets = Array.from(root.querySelectorAll<HTMLElement>("[data-home-reveal]"))
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      targets.forEach((target) => target.classList.add("is-visible"))
      return
    }

    root.classList.add("home-motion-ready")
    const delayCleanupTimers: number[] = []
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          const target = entry.target as HTMLElement
          target.classList.add("is-visible")
          observer.unobserve(target)
          const delay = Number.parseFloat(target.style.transitionDelay) || 0
          delayCleanupTimers.push(window.setTimeout(() => {
            target.style.transitionDelay = ""
          }, 800 + delay))
        })
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" },
    )

    targets.forEach((target) => observer.observe(target))
    return () => {
      observer.disconnect()
      delayCleanupTimers.forEach((timer) => window.clearTimeout(timer))
    }
  }, [])

  const showPreviousHero = () => {
    setCurrentHero((current) => (current - 1 + heroSlides.length) % heroSlides.length)
  }

  const showNextHero = () => {
    setCurrentHero((current) => (current + 1) % heroSlides.length)
  }

  return (
    <div ref={pageRef} className="bg-white text-slate-900">
      <SiteHeader variant="home" scrollProgress={navProgress} anchorLinks={HOME_ANCHORS} />

      <section
        id="hero"
        className="relative min-h-[1080px] overflow-hidden bg-[#e8f3ff] lg:mb-16 lg:h-[820px] lg:min-h-0 lg:overflow-visible"
        style={{ paddingTop: "var(--home-header-height, 112px)" }}
      >
        <div
          className="absolute inset-x-0 bottom-0 overflow-hidden bg-[#e8f3ff]"
          style={{ top: "var(--home-header-height, 112px)" }}
        >
          {hero_video_url ? <video autoPlay loop muted playsInline className="absolute inset-0 h-full w-full object-cover"><source src={hero_video_url} /></video> : null}
          {heroSlides.map((slide, index) => (
            <div
              key={slide.navTitle}
              className={`absolute inset-0 bg-cover bg-center transition-opacity duration-700 ${index === currentHero ? "opacity-100" : "opacity-0"}`}
              style={{ backgroundImage: `url('${slide.background}')` }}
            />
          ))}
          <div className="absolute inset-0 bg-gradient-to-r from-white/70 via-white/18 to-sky-100/5 lg:from-white/25 lg:via-transparent" />
        </div>

        <button
          type="button"
          onClick={showPreviousHero}
          className="absolute left-4 top-[48%] z-20 hidden h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full bg-white text-slate-500 shadow-[0_6px_24px_rgba(15,54,104,0.14)] transition-all hover:text-[#0868f5] hover:shadow-[0_8px_28px_rgba(15,54,104,0.2)] sm:flex"
          aria-label="上一张"
        >
          <ChevronLeft className="h-7 w-7" strokeWidth={1.6} />
        </button>
        <button
          type="button"
          onClick={showNextHero}
          className="absolute right-24 top-[48%] z-20 hidden h-14 w-14 -translate-y-1/2 items-center justify-center rounded-full bg-white text-slate-500 shadow-[0_6px_24px_rgba(15,54,104,0.14)] transition-all hover:text-[#0868f5] hover:shadow-[0_8px_28px_rgba(15,54,104,0.2)] xl:flex"
          aria-label="下一张"
        >
          <ChevronRight className="h-7 w-7" strokeWidth={1.6} />
        </button>

        <div className="relative mx-auto flex h-full max-w-[1740px] flex-col px-5 sm:px-12 lg:px-20 xl:px-24">
          <div className="flex min-h-0 flex-1 flex-col lg:grid lg:grid-cols-[390px_minmax(0,1fr)] xl:grid-cols-[430px_minmax(0,1fr)]">
            <div className="flex items-end overflow-x-auto pb-3 pt-7 lg:items-center lg:justify-end lg:overflow-visible lg:pb-28 lg:pt-0">
              <div className="flex min-w-max border-b border-white/75 lg:block lg:w-[310px] lg:min-w-0 lg:border-b-0 lg:border-r-2 lg:border-white/80">
                 {heroSlides.map((slide, index) => (
                  <button
                    key={slide.navTitle}
                    type="button"
                    onClick={() => setCurrentHero(index)}
                    className={`relative min-w-[220px] px-5 py-4 text-left text-sm transition-colors lg:block lg:h-[86px] lg:w-full lg:min-w-0 lg:px-8 lg:py-0 lg:text-right lg:text-[17px] ${
                      index === currentHero ? "font-semibold text-[#0868f5]" : "font-medium text-slate-700 hover:text-[#0868f5]"
                    }`}
                  >
                    {index === currentHero && (
                      <>
                        <span className="absolute inset-0 bg-gradient-to-r from-transparent to-blue-500/15" />
                        <span className="absolute bottom-0 left-4 right-4 h-1 bg-[#0868f5] lg:-right-1 lg:left-auto lg:top-0 lg:h-full lg:w-1.5" />
                      </>
                    )}
                    <span className="relative">{slide.navTitle}</span>
                  </button>
                ))}
              </div>
            </div>

            <div className="flex items-center pb-6 pt-7 sm:pt-12 lg:pb-28 lg:pl-16 lg:pt-0 xl:pl-20">
              <div key={currentHero} className="theme-home-hero-copy max-w-[700px]">
                <p className="text-lg font-medium text-slate-800 sm:text-xl">{activeHero.kicker}</p>
                <h1 className="mt-5 text-[38px] font-semibold leading-[1.16] text-[#111] sm:text-[52px] lg:text-[56px]">
                  {hero_title || activeHero.title}
                </h1>
                <p className="mt-6 text-base leading-7 text-slate-700 sm:text-lg">{hero_description || activeHero.desc}</p>

                <Link
                  to={activeHero.href}
                  className="mt-8 inline-flex h-14 min-w-[168px] items-center justify-center bg-[#0868f5] px-8 text-base font-semibold text-white shadow-[0_8px_24px_rgba(8,104,245,0.24)] transition-all hover:bg-[#0059df] hover:shadow-[0_10px_30px_rgba(8,104,245,0.32)]"
                >
                  {activeHero.action}
                </Link>

                <div className="mt-10 flex items-center gap-3">
                  {heroSlides.map((slide, index) => (
                    <button
                      key={`${slide.navTitle}-progress`}
                      type="button"
                      onClick={() => setCurrentHero(index)}
                      className="relative h-1.5 w-12 overflow-hidden bg-white/70 shadow-inner"
                      aria-label={`切换到${slide.navTitle}`}
                    >
                      {index === currentHero && <span key={currentHero} className="theme-home-progress absolute inset-y-0 left-0 bg-[#0868f5]" />}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="mb-7 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:absolute lg:inset-x-20 lg:-bottom-14 lg:mb-0 lg:grid-cols-4 lg:gap-6 xl:inset-x-24">
            {HERO_FEATURES.map((feature, index) => (
              <Link
                key={feature.title}
                to={feature.href}
                className="theme-home-feature-enter group flex min-h-[118px] items-center gap-5 bg-white px-6 py-5 shadow-[0_10px_34px_rgba(47,96,160,0.13)] transition-all hover:-translate-y-1 hover:shadow-[0_16px_38px_rgba(47,96,160,0.2)]"
                style={{ animationDelay: `${120 + index * 90}ms` }}
              >
                <span
                  className="theme-home-feature-icon h-16 w-16 shrink-0 bg-no-repeat"
                  style={{ backgroundImage: `url('${feature.image}')` }}
                />
                <span className="min-w-0">
                  <span className="block text-[17px] font-medium text-slate-900 transition-colors group-hover:text-[#0868f5]">{feature.title}</span>
                  <span className="mt-2 block truncate text-sm text-slate-500">{feature.desc}</span>
                </span>
              </Link>
            ))}
          </div>
        </div>

        <aside className="fixed right-3 top-1/2 z-30 hidden -translate-y-1/2 flex-col items-center shadow-[0_8px_28px_rgba(15,23,42,0.16)] xl:flex">
          <button
            type="button"
            onClick={() => navigate(user ? "/tickets" : "/login")}
            className="flex w-[66px] flex-col items-center bg-[#0868f5] pb-3 text-white"
          >
            <span className="-mt-8 mb-1 flex h-14 w-14 items-center justify-center rounded-full border-4 border-white bg-sky-100 text-[#0868f5] shadow-md">
              <Headphones className="h-7 w-7" />
            </span>
            <span className="text-sm font-semibold leading-5">在线<br />咨询</span>
          </button>
          {[
            { icon: MessageCircleQuestion, label: "工单支持", action: () => navigate(user ? "/tickets" : "/login") },
            { icon: PenLine, label: "意见反馈", action: () => navigate(user ? "/tickets/new" : "/login") },
            { icon: QrCode, label: "关注我们", action: () => navigate("/register") },
          ].map(({ icon: Icon, label, action }) => (
            <button
              key={label}
              type="button"
              onClick={action}
              title={label}
              className="flex h-[62px] w-[66px] items-center justify-center border-b border-slate-200 bg-white text-slate-700 transition-colors last:border-b-0 hover:text-[#0868f5]"
            >
              <Icon className="h-6 w-6" strokeWidth={1.7} />
            </button>
          ))}
        </aside>
      </section>

      <section id="products" className="scroll-mt-20 pb-20 pt-20 lg:pb-24 lg:pt-36">
        <div className="mx-auto max-w-7xl px-5 sm:px-6">
          <div data-home-reveal className="text-center">
            <h2 className="text-3xl font-semibold text-slate-900">丰富可靠的云产品</h2>
            <p className="mt-3 text-base text-slate-500">从计算、网络到安全与存储，按业务需要组合云上基础资源</p>
          </div>

          <div data-home-reveal className="mt-10 grid grid-cols-2 overflow-hidden rounded-[4px] bg-[#f5f7fa] p-1 sm:grid-cols-4">
            {PRODUCT_GROUPS.map((group, index) => (
              <button
                key={group.name}
                type="button"
                onClick={() => setCurrentProductGroup(index)}
                className={`h-12 text-sm font-medium transition-colors ${
                  index === currentProductGroup
                    ? "bg-white text-[#1677ff] shadow-sm"
                    : "text-slate-600 hover:bg-white/70 hover:text-slate-900"
                }`}
              >
                {group.name}
              </button>
            ))}
          </div>

          <div key={currentProductGroup} className="theme-home-panel-enter mt-5 grid border border-slate-200 lg:grid-cols-[300px_1fr]">
            <div className="relative min-h-[360px] overflow-hidden bg-[#1269e8] px-8 py-9 text-white">
              <div className="relative">
                <span className="flex h-11 w-11 items-center justify-center bg-white/15">
                  <Cloud className="h-6 w-6" />
                </span>
                <h3 className="mt-7 text-2xl font-semibold">{activeProductGroup.title}</h3>
                <p className="mt-4 text-sm leading-7 text-blue-100">{activeProductGroup.desc}</p>
                <Link to="/store" className="mt-8 inline-flex items-center gap-2 text-sm font-medium text-white hover:text-blue-100">
                  查看全部产品
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            </div>

            <div className="grid sm:grid-cols-2">
              {activeProductGroup.items.map(({ icon: Icon, name, desc, tags }, index) => (
                <Link
                  key={name}
                  to="/store"
                  className={`theme-home-product-item-enter group min-h-[180px] px-7 py-7 transition-colors hover:bg-sky-50/50 ${
                    index % 2 === 1 ? "sm:border-l sm:border-slate-200" : ""
                  } ${index >= 2 ? "border-t border-slate-200" : index === 1 ? "border-t border-slate-200 sm:border-t-0" : ""}`}
                  style={{ animationDelay: `${80 + index * 70}ms` }}
                >
                  <div className="flex items-start justify-between gap-4">
                    <span className="flex h-10 w-10 items-center justify-center bg-sky-50 text-[#1677ff]">
                      <Icon className="h-5 w-5" strokeWidth={1.8} />
                    </span>
                    <ArrowRight className="h-4 w-4 text-slate-300 transition-transform group-hover:translate-x-1 group-hover:text-[#1677ff]" />
                  </div>
                  <h3 className="mt-5 text-base font-semibold text-slate-900 group-hover:text-[#1677ff]">{name}</h3>
                  <p className="mt-2 text-sm leading-6 text-slate-500">{desc}</p>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {tags.map((tag) => (
                      <span key={tag} className="bg-slate-100 px-2 py-1 text-xs text-slate-500">{tag}</span>
                    ))}
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section id="solutions" className="scroll-mt-20 bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-[1440px] px-5 sm:px-6">
          <div data-home-reveal className="text-center">
            <h2 className="text-3xl font-semibold text-slate-900">服务千行百业的全栈解决方案</h2>
            <p className="mt-3 text-base text-slate-500">由专业架构师构建，面向各行业 ICT 上云业务的解决方案</p>
          </div>

          <div data-home-reveal className="relative mt-10 min-h-[680px] overflow-hidden bg-slate-900">
            {SOLUTIONS.map((solution, index) => (
              <div
                key={`${solution.name}-background`}
                className={`absolute inset-0 bg-cover bg-center transition-opacity duration-500 ${index === currentSolution ? "opacity-100" : "opacity-0"}`}
                style={{ backgroundImage: `url('${solution.background}')` }}
              />
            ))}
            <div className="absolute inset-0 bg-gradient-to-r from-slate-950/35 via-slate-900/5 to-slate-950/20" />

            <div className="absolute left-1/2 top-7 z-10 flex w-[calc(100%-32px)] -translate-x-1/2 overflow-x-auto rounded-[10px] border border-white/40 bg-white/30 p-1.5 shadow-[0_8px_32px_rgba(15,23,42,0.12)] backdrop-blur-lg sm:w-auto">
              {SOLUTIONS.map((solution, index) => (
                <button
                  key={solution.name}
                  type="button"
                  onClick={() => setCurrentSolution(index)}
                  className={`relative min-w-[150px] whitespace-nowrap rounded-[8px] px-6 py-3 text-sm font-medium transition-all ${
                    index === currentSolution
                      ? "bg-white text-[#0868f5] shadow-[0_4px_18px_rgba(15,23,42,0.12)]"
                      : "text-slate-700 hover:bg-white/45 hover:text-slate-950"
                  }`}
                >
                  <span className="mr-2 text-xs opacity-55">0{index + 1}</span>
                  {solution.name}
                </button>
              ))}
            </div>

            <div className="relative z-[1] flex min-h-[680px] items-end px-4 pb-6 pt-28 sm:px-8 sm:pb-9 lg:px-12 lg:pb-12">
              <div className="w-full max-w-[880px] rounded-[10px] border border-white/45 bg-white/30 p-2 shadow-[0_18px_54px_rgba(15,23,42,0.2)] backdrop-blur-xl">
                <div key={currentSolution} className="theme-home-solution-enter rounded-[8px] bg-white/38 p-6 backdrop-blur-xl sm:p-8 lg:p-10">
                  <h3 className="text-3xl font-semibold text-slate-950">{activeSolution.title}</h3>
                  <p className="mt-4 max-w-[760px] text-sm leading-7 text-slate-800 sm:text-base">{activeSolution.desc}</p>

                  <ul className="mt-7 grid gap-4 md:grid-cols-3">
                    {activeSolution.features.map((feature, index) => (
                      <li
                        key={feature.title}
                        className="theme-home-solution-feature-enter border-l-2 border-[#0868f5] bg-white/35 px-4 py-3 backdrop-blur-sm"
                        style={{ animationDelay: `${100 + index * 80}ms` }}
                      >
                        <span className="block text-sm font-semibold text-slate-950">{feature.title}</span>
                        <span className="mt-2 block text-xs leading-5 text-slate-700">{feature.desc}</span>
                      </li>
                    ))}
                  </ul>

                  <Link
                    to={activeSolution.href}
                    className="mt-8 inline-flex h-11 items-center gap-2 bg-[#0868f5] px-7 text-sm font-semibold text-white transition-colors hover:bg-[#0059df]"
                  >
                    了解详情
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-7 grid gap-5 md:grid-cols-3">
            {ADDITIONAL_SOLUTIONS.map((solution, index) => (
              <Link
                key={solution.title}
                to={solution.href}
                data-home-reveal
                className="group min-h-[250px] border border-slate-200 bg-white p-7 transition-all hover:-translate-y-1 hover:border-slate-300 hover:shadow-[0_16px_42px_rgba(15,23,42,0.1)] sm:p-8"
                style={{ transitionDelay: `${index * 90}ms` }}
              >
                <span className={`inline-flex px-3 py-1 text-xs font-medium ${solution.labelClass}`}>{solution.label}</span>
                <h3 className="mt-6 text-xl font-semibold text-slate-900">{solution.title}</h3>
                <p className="mt-4 text-sm leading-7 text-slate-500">{solution.desc}</p>
                <span className="mt-7 inline-flex items-center gap-2 text-sm font-medium text-slate-800 transition-colors group-hover:text-[#0868f5]">
                  查看详情
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </span>
              </Link>
            ))}
          </div>

          <div data-home-reveal className="mt-9 text-center">
            <Link to="/solutions" className="inline-flex items-center gap-2 text-sm font-semibold text-[#0868f5] hover:text-[#0059df]">
              探索更多解决方案
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      <section id="faq" className="scroll-mt-20 bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-5xl px-5 sm:px-6">
          <div data-home-reveal className="text-center">
            <h2 className="text-3xl font-semibold text-slate-900">常见问题</h2>
            <p className="mt-3 text-base text-slate-500">关于产品购买、计费、网络与技术支持的常见说明</p>
          </div>

          <div className="mt-10 border-t border-slate-200">
            {FAQ_ITEMS.map((item, index) => {
              const open = index === openFaq
              return (
                <div
                  key={item.question}
                  data-home-reveal
                  className="border-b border-slate-200"
                  style={{ transitionDelay: `${Math.min(index * 55, 220)}ms` }}
                >
                  <button
                    type="button"
                    onClick={() => setOpenFaq(open ? -1 : index)}
                    className="flex w-full items-center justify-between gap-6 py-6 text-left"
                    aria-expanded={open}
                  >
                    <span className={`text-base font-medium ${open ? "text-[#1677ff]" : "text-slate-900"}`}>
                      <span className="mr-4 text-sm font-normal text-slate-400">0{index + 1}</span>
                      {item.question}
                    </span>
                    <ChevronDown className={`h-5 w-5 shrink-0 text-slate-400 transition-transform ${open ? "rotate-180 text-[#1677ff]" : ""}`} />
                  </button>
                  <div
                    className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${
                      open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                    }`}
                  >
                    <div className="overflow-hidden">
                      <p className="max-w-3xl pb-6 pl-9 text-sm leading-7 text-slate-600">{item.answer}</p>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      <section id="pricing" className="scroll-mt-20 bg-[#1269e8] py-16 text-white">
        <div className="mx-auto grid max-w-7xl items-center gap-10 px-5 sm:px-6 lg:grid-cols-[1fr_420px]">
          <div data-home-reveal>
            <p className="text-sm font-medium text-blue-100">清晰计费，按需使用</p>
            <h2 className="mt-3 text-3xl font-semibold">从一台云服务器开始部署业务</h2>
            <p className="mt-4 max-w-2xl text-base leading-7 text-blue-100">
              无最低消费和复杂套餐绑定，按实际购买的资源和周期结算。配置可以随业务变化调整，费用与订单统一管理。
            </p>
            <div className="mt-7 flex flex-wrap gap-x-8 gap-y-3 text-sm text-blue-50">
              {["资源价格清晰", "订单统一管理", "支持弹性调整"].map((item) => (
                <span key={item} className="flex items-center gap-2">
                  <Check className="h-4 w-4" />
                  {item}
                </span>
              ))}
            </div>
          </div>

          <div data-home-reveal className="bg-white p-7 text-slate-900 shadow-[0_16px_45px_rgba(8,44,112,0.22)]" style={{ transitionDelay: "120ms" }}>
            <p className="text-sm text-slate-500">云服务器</p>
            <div className="mt-3 flex items-end gap-2">
              <span className="text-4xl font-semibold text-[#1677ff]">按需</span>
              <span className="pb-1 text-sm text-slate-500">选择配置与购买周期</span>
            </div>
            <Link to="/store" className="mt-7 flex h-11 w-full items-center justify-center gap-2 rounded-[4px] bg-[#1677ff] text-sm font-medium text-white hover:bg-[#0868e8]">
              查看产品价格
              <ArrowRight className="h-4 w-4" />
            </Link>
          </div>
        </div>
      </section>

      <footer id="about" className="border-t border-slate-200 bg-white text-slate-600">
        <div id="partners" className="scroll-mt-24 border-b border-slate-200">
          <div className="mx-auto grid max-w-7xl grid-cols-2 px-5 sm:px-6 lg:grid-cols-4">
            {[
              { icon: ShieldCheck, title: "稳定服务", desc: "基础安全与资源隔离" },
              { icon: Zap, title: "快速交付", desc: "自动开通云上资源" },
              { icon: BarChart3, title: "透明计费", desc: "订单与费用清晰可查" },
              { icon: Headphones, title: "技术支持", desc: "工单协助处理问题" },
            ].map(({ icon: Icon, title, desc }, index) => (
              <div
                key={title}
                data-home-reveal
                className={`flex min-h-[112px] items-center gap-4 py-6 ${index % 2 === 1 ? "border-l border-slate-200 pl-5" : ""} ${
                  index > 0 ? "lg:border-l lg:border-slate-200 lg:pl-7" : ""
                }`}
                style={{ transitionDelay: `${index * 70}ms` }}
              >
                <Icon className="h-7 w-7 shrink-0 text-[#1677ff]" strokeWidth={1.6} />
                <div>
                  <p className="text-sm font-medium text-slate-900">{title}</p>
                  <p className="mt-1 text-xs text-slate-500">{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:px-6 md:grid-cols-[1.4fr_repeat(3,1fr)]">
          <div data-home-reveal>
            <BrandLogo className="h-10 w-auto object-contain" />
            <p className="mt-5 max-w-sm text-sm leading-7 text-slate-500">
              为开发者和企业提供云服务器、网络、安全与存储等基础云服务，让资源购买和日常管理更简单。
            </p>
            <a href="mailto:hello@qingyun.example" className="mt-5 inline-flex items-center gap-2 text-sm text-slate-600 hover:text-[#1677ff]">
              <Mail className="h-4 w-4 text-[#1677ff]" />
              联系我们
            </a>
          </div>

          {[
            {
              title: "产品服务",
              links: [
                { label: "云服务器", href: "/store" },
                { label: "网络与安全", href: "/store" },
                { label: "域名与网站", href: "/store" },
                { label: "存储服务", href: "/store" },
              ],
            },
            {
              title: "帮助支持",
              links: [
                { label: "工单支持", href: "/tickets" },
                { label: "账户设置", href: "/settings" },
                { label: "订单管理", href: "/orders" },
                { label: "消息通知", href: "/notifications" },
              ],
            },
            {
              title: "快捷入口",
              links: [
                { label: "网站首页", href: "/" },
                { label: "产品中心", href: "/store" },
                { label: "用户控制台", href: "/dashboard" },
                { label: "联系我们", href: "mailto:hello@qingyun.example" },
              ],
            },
          ].map((column, index) => (
            <div key={column.title} data-home-reveal style={{ transitionDelay: `${80 + index * 70}ms` }}>
              <p className="text-sm font-medium text-slate-900">{column.title}</p>
              <ul className="mt-5 space-y-3">
                {column.links.map((link) => (
                  <li key={link.label}>
                    {link.href.startsWith("mailto:") ? (
                      <a href={link.href} className="text-sm text-slate-500 hover:text-[#1677ff]">{link.label}</a>
                    ) : (
                      <Link to={link.href} className="text-sm text-slate-500 hover:text-[#1677ff]">{link.label}</Link>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="border-t border-slate-200 py-6">
          <div className="mx-auto flex max-w-7xl flex-col gap-2 px-5 text-xs text-slate-400 sm:px-6 md:flex-row md:items-center md:justify-between">
            <span>© {new Date().getFullYear()} All rights reserved.</span>
            <span>云计算基础服务平台</span>
          </div>
        </div>
      </footer>
    </div>
  )
}
