"use client"

import { Badge } from "@/components/ui/badge"
import { SectionReveal } from "@/components/ui/section-reveal"
import { TrendingUp, Quote } from "lucide-react"
import homeData from "@/data/home.json"

export function CasesSection() {
  const { cases } = homeData
  const sectionBadge = (cases as any).sectionBadge ?? (cases as any).sectionTag
  const caseItems = (Array.isArray((cases as any).items) ? (cases as any).items : []).map((item: any) => ({
    ...item,
    result: item.result ?? item.solution ?? "",
    metrics: Array.isArray(item.metrics)
      ? item.metrics
      : (Array.isArray(item.results) ? item.results.map((m: any) => ({ l: m.metric, v: m.value })) : []),
  }))

  return (
    <section id="cases" className="section-panel bg-background">
      <SectionReveal className="w-full max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8" delay={120}>

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

        {/* Case cards */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
          {caseItems.map((c) => (
            <article
              key={c.brand}
              className="group relative flex h-full flex-col lg:col-span-4 bg-white border border-border rounded-[2rem] p-8 hover:shadow-2xl hover:shadow-primary/10 hover:-translate-y-1 transition-all duration-300"
            >
              <div className="flex flex-col gap-6 flex-1">
                {/* Brand & scale */}
                <div className="flex items-start justify-between gap-3">
                  <div>
                    <span className="inline-flex items-center rounded-full bg-primary/8 px-3 py-1 text-xs font-semibold text-primary mb-3">
                      {c.industry}
                    </span>
                    <h3 className="font-bold text-foreground text-xl leading-tight mb-2">{c.brand}</h3>
                    <span className="inline-flex text-xs text-muted-foreground bg-muted rounded-full px-3 py-1">
                      {c.scale}
                    </span>
                  </div>
                  <TrendingUp className="w-5 h-5 text-primary shrink-0 mt-0.5" />
                </div>

                {/* Challenge */}
                <div>
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-1.5">遇到的挑战</p>
                  <p className="text-sm text-foreground leading-relaxed">{c.challenge}</p>
                </div>

                {/* Divider */}
                <div className="border-t border-border" />

                {/* Result */}
                <div className="flex gap-2">
                  <Quote className="w-4 h-4 text-primary shrink-0 mt-0.5" />
                  <p className="text-sm text-muted-foreground leading-relaxed italic">{c.result}</p>
                </div>

                {/* Metrics */}
                <div className="grid grid-cols-3 gap-4 mt-auto pt-2">
                  {c.metrics.map((m) => (
                    <div key={m.l} className="flex flex-col items-center text-center bg-primary/6 rounded-2xl py-4 px-3">
                      <span className="text-xl font-black text-primary leading-none mb-1">{m.v}</span>
                      <span className="text-[10px] text-muted-foreground leading-tight">{m.l}</span>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>

      </SectionReveal>
    </section>
  )
}