"use client"

import { Badge } from "@/components/ui/badge"
import { SectionReveal } from "@/components/ui/section-reveal"
import {
  ArrowRight,
  Car,
  Dumbbell,
  Scissors,
  ShoppingBag,
  Store,
  Utensils,
} from "lucide-react"
import homeData from "@/data/home.json"

const iconMap: Record<string, React.ReactNode> = {
  utensils: <Utensils className="w-5 h-5" />,
  "shopping-bag": <ShoppingBag className="w-5 h-5" />,
  scissors: <Scissors className="w-5 h-5" />,
  dumbbell: <Dumbbell className="w-5 h-5" />,
  car: <Car className="w-5 h-5" />,
  store: <Store className="w-5 h-5" />,
}

// 业态主题色映射
const industryThemeMap: Record<string, {
  color: string
  bgLight: string
  glow: string
  gradient: string
}> = {
  utensils: {
    color: "oklch(0.65 0.16 35)",
    bgLight: "oklch(0.96 0.03 35)",
    glow: "oklch(0.65 0.16 35 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.96 0.03 35 / 0.5) 0%, transparent 60%)"
  },
  "shopping-bag": {
    color: "oklch(0.55 0.14 165)",
    bgLight: "oklch(0.95 0.03 165)",
    glow: "oklch(0.55 0.14 165 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.95 0.03 165 / 0.5) 0%, transparent 60%)"
  },
  store: {
    color: "oklch(0.46 0.18 264)",
    bgLight: "oklch(0.94 0.04 264)",
    glow: "oklch(0.46 0.18 264 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.94 0.04 264 / 0.5) 0%, transparent 60%)"
  },
  scissors: {
    color: "oklch(0.58 0.14 295)",
    bgLight: "oklch(0.95 0.03 295)",
    glow: "oklch(0.58 0.14 295 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.95 0.03 295 / 0.5) 0%, transparent 60%)"
  },
  dumbbell: {
    color: "oklch(0.55 0.18 20)",
    bgLight: "oklch(0.95 0.04 20)",
    glow: "oklch(0.55 0.18 20 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.95 0.04 20 / 0.5) 0%, transparent 60%)"
  },
  car: {
    color: "oklch(0.60 0.12 75)",
    bgLight: "oklch(0.96 0.03 75)",
    glow: "oklch(0.60 0.12 75 / 0.18)",
    gradient: "linear-gradient(135deg, oklch(0.96 0.03 75 / 0.5) 0%, transparent 60%)"
  },
}

export function SolutionsSection() {
  const homeDataAny = homeData as any
  const solutions = homeDataAny.solutions ?? {
    sectionBadge: "行业方案",
    title: "覆盖多业态门店场景",
    subtitle: "面向餐饮、零售与综合商业体提供可落地的一站式智能化方案。",
    featured: {
      eyebrow: "方案设计思路",
      title: "不是卖一套通用软件，而是把关键流程接顺",
      description: "先梳理门店现有收银、结算、监管链路，再按行业共性与品牌个性组合能力模块。",
      points: [],
      metrics: [],
    },
    items: (Array.isArray(homeDataAny.cases?.items) ? homeDataAny.cases.items : []).map((item: any) => ({
      name: item.industry,
      desc: item.brand,
      icon: "store",
      focus: item.challenge,
    })),
  }

  const featuredPoints = Array.isArray(solutions.featured?.points) ? solutions.featured.points : []
  const featuredMetrics = Array.isArray(solutions.featured?.metrics) ? solutions.featured.metrics : []

  return (
    <section
      id="solutions"
      className="section-panel overflow-hidden lg:[padding-block:4.75rem_2.2rem]"
      style={{ background: "linear-gradient(180deg, oklch(0.985 0.004 260) 0%, oklch(0.97 0.008 260) 100%)" }}
    >
      <div
        className="absolute inset-0 pointer-events-none opacity-55"
        aria-hidden="true"
        style={{
          background:
            "radial-gradient(circle at 10% 12%, oklch(0.78 0.08 240 / 0.16) 0%, transparent 24%), radial-gradient(circle at 88% 70%, oklch(0.62 0.14 270 / 0.10) 0%, transparent 22%)",
        }}
      />

      <SectionReveal className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" delay={80}>
        <div className="text-center max-w-4xl mx-auto mb-6 lg:mb-7">
          <Badge variant="secondary" className="mb-4 text-primary border-primary/20 bg-primary/8 px-3 py-1">
            {solutions.sectionBadge}
          </Badge>
          <h2 className="text-3xl sm:text-4xl lg:text-[2.8rem] font-extrabold text-foreground text-balance tracking-tight mb-3">
            {solutions.title}
          </h2>
          <p className="text-muted-foreground text-base lg:text-lg leading-relaxed text-pretty max-w-3xl mx-auto">
            {solutions.subtitle}
          </p>
        </div>

        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-5 lg:gap-6">
          {solutions.items.map((item: any, index: number) => {
            const theme = industryThemeMap[item.icon] ?? industryThemeMap.store
            const itemTags = Array.isArray(item.tags) ? item.tags : []
            return (
            <article
              key={item.name}
              className="group relative overflow-hidden rounded-[1.75rem] border border-border/50 bg-white/96 backdrop-blur-sm p-6 lg:p-7
                shadow-[0_1px_2px_rgba(0,0,0,0.02),0_4px_8px_rgba(0,0,0,0.02),0_16px_32px_rgba(27,92,230,0.04)]
                transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]
                hover:-translate-y-1.5
                hover:shadow-[0_2px_4px_rgba(0,0,0,0.02),0_8px_16px_rgba(0,0,0,0.04),0_24px_48px_rgba(27,92,230,0.10)]"
            >
              {/* 业态特色渐变背景 */}
              <div
                className="absolute inset-0 opacity-60 transition-opacity duration-500 group-hover:opacity-80"
                aria-hidden="true"
                style={{ background: theme.gradient }}
              />

              {/* 角落光晕装饰 */}
              <div
                className="absolute -right-8 -top-8 w-24 h-24 rounded-full opacity-30 blur-2xl transition-all duration-700 group-hover:scale-150 group-hover:opacity-50"
                aria-hidden="true"
                style={{ background: theme.glow }}
              />

              {/* 底部装饰光晕 */}
              <div
                className="absolute -bottom-6 -left-6 w-20 h-20 rounded-full opacity-20 blur-2xl transition-all duration-700 group-hover:scale-125 group-hover:opacity-35"
                aria-hidden="true"
                style={{ background: theme.glow }}
              />

              <div className="relative flex h-full flex-col">
                {/* 头部：图标 + 序号 */}
                <div className="flex items-start justify-between gap-3 mb-4">
                  <div
                    className="w-12 h-12 rounded-2xl flex items-center justify-center
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.05)]
                      transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]
                      group-hover:scale-110 group-hover:rotate-6"
                    style={{
                      backgroundColor: theme.bgLight,
                      color: theme.color,
                    }}
                  >
                    {iconMap[item.icon] ?? iconMap.store}
                  </div>
                  <span
                    className="text-[10px] font-semibold tracking-[0.24em] transition-colors duration-300"
                    style={{ color: theme.color, opacity: 0.4 }}
                  >
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>

                {/* 标题 + 一句话价值主张 */}
                <div className="mb-4">
                  <h3
                    className="text-xl font-bold mb-1.5 transition-colors duration-300"
                    style={{ color: theme.color }}
                  >
                    {item.name}
                  </h3>
                  {item.tagline && (
                    <p
                      className="text-sm font-medium leading-snug mb-3"
                      style={{ color: theme.color, opacity: 0.85 }}
                    >
                      {item.tagline}
                    </p>
                  )}
                  <p className="text-[13px] leading-relaxed text-muted-foreground">
                    {item.desc}
                  </p>
                </div>

                {/* 核心能力标签 */}
                {itemTags.length > 0 && (
                  <div className="flex flex-wrap gap-2 mb-4">
                    {itemTags.map((tag: string, tagIndex: number) => (
                      <span
                        key={tagIndex}
                        className="inline-flex items-center px-2.5 py-1 rounded-full text-[11px] font-medium
                          transition-all duration-300 group-hover:translate-y-[-2px]"
                        style={{
                          backgroundColor: `${theme.color}15`,
                          color: theme.color,
                        }}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                )}

                {/* 重点场景区块 - 虚线边框风格 */}
                <div
                  className="mt-auto rounded-xl px-4 py-3 transition-all duration-500
                    border-2 border-dashed group-hover:border-solid"
                  style={{
                    backgroundColor: `${theme.color}08`,
                    borderColor: `${theme.color}30`,
                  }}
                >
                  <div className="flex items-center justify-between gap-3 mb-1.5">
                    <p
                      className="text-[10px] font-semibold uppercase tracking-[0.14em]"
                      style={{ color: theme.color, opacity: 0.7 }}
                    >
                      重点场景
                    </p>
                    <ArrowRight
                      className="w-3 h-3 transition-all duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] group-hover:translate-x-1"
                      style={{ color: theme.color, opacity: 0.5 }}
                    />
                  </div>
                  <p className="text-[13px] leading-relaxed text-foreground/75">
                    {item.focus}
                  </p>
                </div>
              </div>
            </article>
          )})}
        </div>
      </SectionReveal>
    </section>
  )
}