"use client"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { SectionReveal } from "@/components/ui/section-reveal"
import { ArrowRight } from "lucide-react"
import { useParallax } from "@/hooks/use-parallax"
import homeData from "@/data/home.json"
import Link from "next/link"

export function ProcessSection() {
  const homeDataAny = homeData as any
  const process = homeDataAny.process ?? homeDataAny.howItWorks
  const sectionBadge = process?.sectionBadge ?? process?.sectionTag
  const steps = (Array.isArray(process?.steps) ? process.steps : []).map((step: any) => ({
    ...step,
    num: step.num ?? step.number,
  }))
  const { ref: bgRef, translateY: bgY } = useParallax(0.2)

  if (!process) {
    return null
  }

  return (
    <section
      id="process"
      className="section-panel overflow-hidden"
    >
      {/* Parallax dark background */}
      <div
        ref={bgRef}
        className="absolute inset-[-15%] will-change-transform"
        style={{ transform: `translateY(${bgY})` }}
        aria-hidden="true"
      >
        <div className="absolute inset-0 bg-surface-dark" />
        {/* Dot grid */}
        <div
          className="absolute inset-0 opacity-[0.07]"
          style={{
            backgroundImage: "radial-gradient(circle, oklch(1 0 0 / 1) 1px, transparent 1px)",
            backgroundSize: "32px 32px",
          }}
        />
        {/* Blue glow */}
        <div
          className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] opacity-20"
          style={{
            background: "radial-gradient(ellipse at center bottom, oklch(0.46 0.22 264) 0%, transparent 70%)",
          }}
        />
      </div>

      <SectionReveal className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" delay={100}>

        {/* Header */}
        <div className="text-center max-w-xl mx-auto mb-16">
          <Badge className="mb-4 bg-primary/20 text-primary border-primary/30 px-3 py-1">
            {sectionBadge}
          </Badge>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white text-balance tracking-tight">
            {process.title}
          </h2>
          <p className="text-white/65 leading-relaxed text-pretty mt-4">
            {process.subtitle}
          </p>
        </div>

        {/* Steps */}
        <div className="relative grid grid-cols-1 md:grid-cols-3 gap-8">
          {/* Connector line (desktop) */}
          <div
            className="hidden md:block absolute top-10 left-[calc(16.7%+1rem)] right-[calc(16.7%+1rem)] h-px border-t border-dashed border-white/20"
            aria-hidden="true"
          />

          {steps.map((step) => (
            <article key={step.num} className="relative flex flex-col items-center text-center gap-5">
              {/* Number circle */}
              <div className="relative z-10 w-20 h-20 rounded-full border-2 border-primary bg-surface-dark flex items-center justify-center shadow-lg shadow-primary/20">
                <span className="text-2xl font-black text-primary">{step.num}</span>
              </div>

              {/* Content card */}
              <div className="bg-white/6 backdrop-blur-sm border border-white/10 rounded-2xl p-6 w-full">
                <h3 className="text-xl font-bold text-white mb-3">{step.title}</h3>
                <p className="text-white/60 text-sm leading-relaxed">{step.description}</p>
              </div>
            </article>
          ))}
        </div>

        {/* CTA */}
        <div className="mt-14 flex justify-center">
          <Button
            asChild
            size="lg"
            className="bg-primary hover:bg-primary-dark text-white shadow-xl shadow-primary/30 px-8 h-12 text-base font-semibold group"
          >
            <Link href="#contact" className="flex items-center gap-2">
              预约方案诊断
              <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
            </Link>
          </Button>
        </div>

      </SectionReveal>
    </section>
  )
}