import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { MapPin, UserPlus, Store, ArrowRight, MessageCircle, ScanQrCode } from 'lucide-react'

export default function ContactPage() {

  return (
    <div className="pt-24 pb-20 bg-white">
      {/* Header */}
      <section className="container mx-auto px-4 md:px-6 mb-16 text-center">
        <h1 className="text-4xl font-bold text-secondary mb-4">合作加盟</h1>
        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
          无论您是希望成为区域合伙人，还是商家寻求数字化转型，我们都期待与您携手共赢。
        </p>
      </section>

      <div className="container mx-auto px-4 md:px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">

          {/* Left: Partner Benefits & Info */}
          <div className="space-y-8">
            {/* Partner Benefits */}
            <Card className="border-0 shadow-lg bg-accent">
              <CardHeader>
                <CardTitle className="text-xl flex items-center gap-2">
                  <UserPlus className="w-5 h-5 text-primary" />
                  合伙人权益
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                    <Store className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold">区域独家保护</h3>
                    <p className="text-sm text-muted-foreground">享受区域内所有商家流水的分润，建立持久管道收益。</p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                    <ArrowRight className="w-5 h-5 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-semibold">全套运营支持</h3>
                    <p className="text-sm text-muted-foreground">提供技术培训、物料支持、招商会销支持，助您快速展业。</p>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Contact Info */}
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-secondary">联系我们</h2>
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
                  <MapPin className="w-5 h-5 text-primary" />
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">公司地址</p>
                  <p className="font-semibold text-lg">天津市武清区京津产业新城海达商务大厦</p>
                </div>
              </div>
            </div>
          </div>

          <div>
            <Card className="border-0 shadow-lg">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <MessageCircle className="w-5 h-5 text-primary" />
                  扫码联系客服
                </CardTitle>
              </CardHeader>
              <CardContent className="text-center">
                <div className="flex flex-col items-center space-y-6">
                  <div className="relative">
                    <img
                      src="/baima-qrcode.png"
                      alt="企业微信客服二维码"
                      className="w-64 h-64 object-contain rounded-2xl shadow-2xl border-4 border-primary/20"
                    />
                    <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-primary rounded-full flex items-center justify-center shadow-lg">
                      <ScanQrCode className="w-6 h-6 text-white" />
                    </div>
                  </div>

                  <div className="space-y-3">
                    <h3 className="text-xl font-bold text-gray-900">
                      立即扫码，一对一沟通
                    </h3>
                    <p className="text-muted-foreground max-w-md">
                      我们的专业团队将为您提供详细的产品咨询和合作方案，期待与您携手共赢。
                    </p>
                  </div>

                  <div className="flex items-center gap-2 text-sm text-primary font-medium">
                    <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
                    客服在线中，快速响应
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}