"use client"

import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { SectionReveal } from "@/components/ui/section-reveal"
import { Phone, Mail, MapPin, Clock3, ArrowRight, CheckCircle2 } from "lucide-react"
import homeData from "@/data/home.json"

const iconMap: Record<string, React.ReactNode> = {
  phone:  <Phone className="w-5 h-5" />,
  mail:   <Mail className="w-5 h-5" />,
  mappin: <MapPin className="w-5 h-5" />,
  clock:  <Clock3 className="w-5 h-5" />,
}

export function ContactSection() {
  const { contact } = homeData
  const sectionBadge = (contact as any).sectionBadge ?? (contact as any).sectionTag
  const info = ((contact as any).info ??
    ((contact as any).infoItems ?? []).map((item: any) => ({
      ...item,
      icon: String(item.icon ?? "").toLowerCase(),
      sub: item.sub ?? "",
    }))) as Array<{ icon: string; label: string; value: string; sub?: string }>
  const submitLabel = (contact.form as any).submitLabel ?? (contact.form as any).submit
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitted(true)
  }

  return (
    <section id="contact" className="section-panel bg-background">
      <SectionReveal className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" delay={140}>

        {/* Header */}
        <div className="text-center max-w-2xl 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">
            {contact.title}
          </h2>
          <p className="text-muted-foreground text-lg leading-relaxed text-pretty">
            {contact.subtitle}
          </p>
        </div>

        <div className="grid lg:grid-cols-5 gap-10 items-start">

          {/* Left: info */}
          <div className="lg:col-span-2 flex flex-col gap-5">
            {info.map((item) => (
              <div
                key={item.label}
                className="flex items-start gap-4 p-5 bg-muted rounded-2xl border border-border hover:border-primary/30 transition-colors"
              >
                <div className="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0">
                  {iconMap[item.icon] ?? iconMap.phone}
                </div>
                <div>
                  <p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-1">{item.label}</p>
                  <p className="font-bold text-foreground text-sm">{item.value}</p>
                  <p className="text-xs text-muted-foreground mt-0.5">{item.sub}</p>
                </div>
              </div>
            ))}

            {/* Trust note */}
            <div className="bg-primary/6 border border-primary/15 rounded-2xl p-5">
              <p className="text-sm text-primary font-semibold mb-1.5">响应时效说明</p>
              <p className="text-xs text-muted-foreground leading-relaxed">
                工作时间内，专属顾问将在{" "}
                <strong className="text-foreground">2 小时内</strong>
                {" "}联系您；非工作时间提交的信息，将在次一工作日上午统一回复。
              </p>
            </div>
          </div>

          {/* Right: form */}
          <div className="lg:col-span-3 bg-white border border-border rounded-3xl p-8 shadow-lg shadow-primary/5">
            {submitted ? (
              <div className="flex flex-col items-center justify-center py-16 gap-5 text-center">
                <div className="w-16 h-16 rounded-full bg-green-50 border-2 border-green-200 flex items-center justify-center">
                  <CheckCircle2 className="w-8 h-8 text-green-500" />
                </div>
                <div>
                  <h3 className="text-xl font-bold text-foreground mb-2">信息已提交</h3>
                  <p className="text-muted-foreground text-sm">
                    工作时间内 2 小时响应，非工作时间次一工作日上午回复。
                  </p>
                </div>
                <Button variant="outline" onClick={() => setSubmitted(false)} className="mt-2">
                  重新提交
                </Button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-5" noValidate>
                <h3 className="text-lg font-bold text-foreground">留下信息，先拿一版初步建议</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-medium text-muted-foreground" htmlFor="name">姓名</label>
                    <Input id="name" placeholder={contact.form.namePlaceholder} required className="h-11" />
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-medium text-muted-foreground" htmlFor="company">公司 / 品牌</label>
                    <Input id="company" placeholder={contact.form.companyPlaceholder} required className="h-11" />
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-medium text-muted-foreground" htmlFor="phone">电话</label>
                    <Input id="phone" type="tel" placeholder={contact.form.phonePlaceholder} required className="h-11" />
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="text-xs font-medium text-muted-foreground" htmlFor="scale">门店规模</label>
                    <Input id="scale" placeholder={contact.form.scalePlaceholder} className="h-11" />
                  </div>
                </div>
                <div className="flex flex-col gap-1.5">
                  <label className="text-xs font-medium text-muted-foreground" htmlFor="message">需求描述</label>
                  <Textarea
                    id="message"
                    placeholder={contact.form.messagePlaceholder}
                    rows={4}
                    className="resize-none"
                  />
                </div>
                <Button
                  type="submit"
                  size="lg"
                  className="w-full bg-primary hover:bg-primary-dark text-white h-12 text-base font-semibold group shadow-lg shadow-primary/25"
                >
                  <span className="flex items-center gap-2">
                    {submitLabel}
                    <ArrowRight className="w-4 h-4 group-hover:translate-x-0.5 transition-transform" />
                  </span>
                </Button>
                <p className="text-xs text-muted-foreground text-center">
                  提交即视为同意{" "}
                  <span className="text-primary cursor-pointer hover:underline">隐私政策</span>
                  ，我们承诺不向第三方共享您的信息。
                </p>
              </form>
            )}
          </div>
        </div>

      </SectionReveal>
    </section>
  )
}