import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { Building2, TrendingUp, Quote } from "lucide-react"
import homeData from "@/data/home.json"

export function NewsSection() {
  const { cases } = homeData

  return (
    <section id="cases" className="py-20 lg:py-28 bg-neutral-50/80">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="flex flex-col items-center text-center gap-4 mb-14">
          <Badge
            variant="outline"
            className="border-primary/30 text-primary bg-primary-light px-4 py-1 text-sm font-medium"
          >
            {cases.sectionBadge}
          </Badge>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground text-balance">
            {cases.title}
          </h2>
          <p className="text-muted-foreground text-base lg:text-lg max-w-2xl text-pretty">
            {cases.subtitle}
          </p>
        </div>

        {/* Cases grid */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {cases.items.map((item, index) => (
            <Card
              key={item.brand}
              className="group border border-border bg-background hover:border-primary/35 hover:shadow-xl hover:shadow-primary/8 transition-all duration-300 overflow-hidden"
            >
              {/* Top accent bar */}
              <div className="h-1.5 bg-primary" style={{ opacity: 0.6 + index * 0.2 }} />

              <CardContent className="p-7 flex flex-col gap-5">
                {/* Brand header */}
                <div className="flex items-start gap-3">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0 text-primary">
                    <Building2 className="w-5 h-5" />
                  </div>
                  <div>
                    <p className="font-bold text-sm text-foreground leading-snug">{item.brand}</p>
                    <p className="text-xs text-muted-foreground mt-0.5">{item.scale}</p>
                  </div>
                </div>

                {/* Challenge */}
                <div className="bg-neutral-50 rounded-xl p-4 border border-border">
                  <div className="flex items-center gap-1.5 text-xs font-semibold text-muted-foreground mb-2 uppercase tracking-wide">
                    <Quote className="w-3 h-3" />
                    挑战
                  </div>
                  <p className="text-sm text-foreground leading-relaxed">{item.challenge}</p>
                </div>

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

                {/* Metrics */}
                <div className="grid grid-cols-3 gap-2 pt-2 border-t border-border">
                  {item.metrics.map((m) => (
                    <div key={m.l} className="flex flex-col items-center text-center gap-0.5">
                      <span className="text-xl font-black text-primary leading-none">{m.v}</span>
                      <span className="text-[11px] text-muted-foreground leading-tight">{m.l}</span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}