import { Link } from "react-router-dom"
import { ArrowRight, Check } from "lucide-react"
import PublicSiteLayout, { PageSectionTabs, PublicBanner, PublicSectionTitle } from "../components/PublicSiteLayout"
import { PUBLIC_SOLUTIONS } from "../data/publicSolutions"

const PAGE_TABS = [
  { id: "featured-solutions", label: "精选方案" },
  { id: "all-solutions", label: "全部方案" },
  { id: "solution-service", label: "方案服务" },
]

export default function Solutions() {
  return (
    <PublicSiteLayout>
      <main>
        <PublicBanner
          title="全栈云解决方案"
          description="由专业架构师构建，面向网站、游戏、政企、电商、安全与全球业务提供标准化上云方案。"
          background="/theme-pages/banner-solutions.jpg"
          action={{ label: "咨询解决方案", href: "/tickets/new" }}
        />
        <PageSectionTabs tabs={PAGE_TABS} />

        <section id="featured-solutions" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <PublicSectionTitle title="服务千行百业的全栈解决方案" description="围绕业务场景组合计算、网络、安全与存储能力" />
            <div className="mt-10 grid gap-6 lg:grid-cols-3">
              {PUBLIC_SOLUTIONS.slice(0, 3).map((solution, index) => (
                <Link
                  key={solution.slug}
                  to={`/solutions/${solution.slug}`}
                  data-public-reveal
                  className="group relative min-h-[460px] overflow-hidden bg-slate-900"
                  style={{ transitionDelay: `${index * 90}ms` }}
                >
                  <div className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105" style={{ backgroundImage: `url('${solution.cover}')` }} />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-950/85 via-slate-900/20 to-transparent" />
                  <div className="absolute inset-x-0 bottom-0 p-7 text-white sm:p-8">
                    <span className="text-xs font-semibold text-blue-200">0{index + 1} · {solution.label}</span>
                    <h2 className="mt-3 text-2xl font-semibold">{solution.name}</h2>
                    <p className="mt-3 text-sm leading-7 text-slate-200">{solution.summary}</p>
                    <span className="mt-6 inline-flex items-center gap-2 text-sm font-semibold">
                      查看详情
                      <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        <section id="all-solutions" className="www-public-section scroll-mt-40 bg-[#f5f8fc]">
          <div className="www-public-container">
            <PublicSectionTitle title="探索全部解决方案" description="选择最接近当前业务的场景，查看完整架构与产品组合" />
            <div className="mt-10 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
              {PUBLIC_SOLUTIONS.map((solution, index) => {
                const Icon = solution.advantages[0]!.icon
                return (
                  <Link
                    key={solution.slug}
                    to={`/solutions/${solution.slug}`}
                    data-public-reveal
                    className="group min-h-[260px] border border-slate-200 bg-white p-7 shadow-[0_2px_7px_#f2f5f7] transition-all hover:-translate-y-1 hover:border-blue-200 hover:shadow-[0_12px_32px_rgba(16,36,94,0.14)]"
                    style={{ transitionDelay: `${(index % 3) * 80}ms` }}
                  >
                    <span className="flex h-14 w-14 items-center justify-center bg-blue-50 text-[#0868f5]">
                      <Icon className="h-7 w-7" strokeWidth={1.6} />
                    </span>
                    <h3 className="mt-6 text-xl font-semibold text-slate-900 group-hover:text-[#0868f5]">{solution.name}</h3>
                    <p className="mt-3 text-sm leading-7 text-slate-500">{solution.summary}</p>
                    <span className="mt-6 inline-flex items-center gap-2 text-sm font-medium text-slate-800 group-hover:text-[#0868f5]">
                      了解方案 <ArrowRight className="h-4 w-4" />
                    </span>
                  </Link>
                )
              })}
            </div>
          </div>
        </section>

        <section id="solution-service" className="www-public-section scroll-mt-40">
          <div className="www-public-container">
            <div data-public-reveal className="grid overflow-hidden border border-blue-100 bg-[#f3f8ff] lg:grid-cols-[1fr_420px]">
              <div className="p-8 sm:p-12">
                <p className="text-sm font-semibold text-[#0868f5]">专业方案服务</p>
                <h2 className="mt-3 text-3xl font-semibold text-slate-950">从业务评估到资源交付全程协助</h2>
                <p className="mt-4 max-w-2xl text-sm leading-7 text-slate-600">根据访问区域、业务规模、安全要求和预算，为您组合合适的云产品与部署架构。</p>
                <div className="mt-7 flex flex-wrap gap-x-8 gap-y-3">
                  {["业务需求梳理", "架构方案设计", "资源配置建议", "上线迁移协助"].map((item) => (
                    <span key={item} className="flex items-center gap-2 text-sm text-slate-700"><Check className="h-4 w-4 text-[#0868f5]" />{item}</span>
                  ))}
                </div>
              </div>
              <div className="flex items-center justify-center bg-[#0868f5] p-8 text-center text-white sm:p-12">
                <div>
                  <p className="text-lg font-semibold">需要定制解决方案？</p>
                  <p className="mt-3 text-sm leading-6 text-blue-100">提交工单后由技术人员协助评估业务需求。</p>
                  <Link to="/tickets/new" className="mt-6 inline-flex h-11 items-center gap-2 bg-white px-6 text-sm font-semibold text-[#0868f5]">
                    立即咨询 <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
    </PublicSiteLayout>
  )
}
