import { Phone, MapPin, Clock, Package, Users, TrendingUp, ShieldCheck, ArrowRight } from 'lucide-react'
import ContactForm from '../components/ContactForm'
import ScrollReveal from '../components/ScrollReveal'
import { Link } from 'react-router-dom'

const agentBenefits = [
  { icon: Package, title: '成熟产品体系', desc: '四大产品线覆盖职业院校核心需求，经多所院校实际使用验证，功能稳定可靠。' },
  { icon: TrendingUp, title: '广阔市场空间', desc: '广西区内 80+ 所职业院校，信息化建设正加速，合作前景可观。' },
  { icon: ShieldCheck, title: '全方位赋能支持', desc: '产品培训、售前演示、方案撰写、招投标支撑，一站式协助代理商展业。' },
  { icon: Users, title: '丰厚利润回报', desc: '合理代理价格 + 完善区域保护，保障代理商长期稳定收益。' },
]

const requirements = [
  '具有广西区内教育行业资源或政府关系',
  '具备法人资格或合法经营资质',
  '认可教育信息化行业，愿与讯驰长期共同发展',
  '具备基本的技术支持和客户服务能力',
]

export default function Contact() {
  return (
    <main className="bg-white">
      {/* Hero (深色) */}
      <div className="relative -mt-[70px]">
        <section className="relative py-32 md:py-40 text-white overflow-hidden">
        {/* Background image */}
        <div className="absolute inset-0">
          <img src={new URL('../../public/huaban.jpg', import.meta.url).href} alt="" className="w-full h-full object-cover" />
        </div>
        {/* Black overlay */}
        <div className="absolute inset-0 bg-black/50" />
        <div className="relative max-w-4xl mx-auto px-6 text-center pt-32">
          <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">携手合作</h1>
            <h1 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold mb-6 md:mb-10 hero-product-title">共建智慧校园</h1>
          <p className="text-base xs:text-lg sm:text-xl md:text-2xl max-w-2xl mx-auto leading-loose hero-product-slogan">
            诚邀广西各界教育伙伴，共同为职业院校提供优质的数字化解决方案
          </p>
        </div>
      </section>
      </div>

      {/* Contact info */}
      <section className="py-24 px-6 bg-white">
        <div className="max-w-5xl mx-auto">
          <ScrollReveal className="mb-16 text-center">
            <div className="flex flex-col items-center">
              <div className="inline-flex items-center gap-3 mb-5">
                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Contact</span>
              </div>
              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                联系方式
              </h2>
            </div>
          </ScrollReveal>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
            {[
              { icon: MapPin, title: '公司地址', text: '南宁市总部路3号中国东盟科技企业孵化基地二期9号厂房二楼212房' },
              { icon: Phone, title: '联系电话', text: '0771-3864294' },
              { icon: Clock, title: '工作时间', text: '周一至周五 9:00 - 18:00' },
            ].map((item, i) => {
              const Icon = item.icon
              return (
                <ScrollReveal key={i} delay={i * 0.08}>
                  <div className="relative bg-[#fafbfc] rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/5 transition-all duration-500 group overflow-hidden">
                    <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                      style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
                    <div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />
                
                    <div className="relative z-10">
                      <div className="flex items-center gap-3 mb-4 md:mb-5">
                        <div className="w-9 h-9 sm:w-11 sm:h-11 rounded-xl flex items-center justify-center bg-[#004ec4]/[0.12] border border-[#004ec4]/20">
                          <Icon className="w-4 h-4 sm:w-5 sm:h-5 text-[#004ec4]" />
                        </div>
                        <div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 to-transparent" />
                      </div>
                      <h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
                      <p className="text-[#64748b] text-sm sm:text-base leading-relaxed">{item.text}</p>
                    </div>
                  </div>
                </ScrollReveal>
              )
            })}
          </div>
        </div>
      </section>

      {/* Agent benefits */}
      <section className="py-24 px-6 bg-[#fafbfc]">
        <div className="max-w-5xl mx-auto">
          <ScrollReveal className="mb-16 text-center">
            <div className="flex flex-col items-center">
              <div className="inline-flex items-center gap-3 mb-5">
                <span className="w-5 h-[2px] rounded-full bg-[#004ec4]" />
                <span className="text-xs font-semibold uppercase tracking-[0.25em] text-[#004ec4]">Partnership</span>
              </div>
              <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-[3.5rem] font-black text-[#0f172a] tracking-tight leading-[1.1]">
                成为代理商
              </h2>
              <p className="text-[#475569] text-sm sm:text-base md:text-lg lg:text-xl mt-4 md:mt-5 max-w-xl leading-[1.8] md:leading-[2]">
                诚邀广西各地区具有教育行业资源的合作伙伴，共享职业院校信息化发展机遇
              </p>
            </div>
          </ScrollReveal>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-10 md:mb-14 max-w-3xl mx-auto">
            {agentBenefits.map((item, i) => {
              return (
                <ScrollReveal key={i} delay={i * 0.05}>
                  <div className="relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 h-full border border-gray-100 hover:shadow-xl hover:shadow-[#004ec4]/5 transition-all duration-500 group overflow-hidden">
                    <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
                      style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
                    <div className="absolute top-0 right-0 w-24 sm:w-32 h-24 sm:h-32 bg-[#004ec4]/[0.06] rounded-bl-full" />
               
                    <div className="relative z-10">
                      <div className="flex items-center gap-3 mb-3 md:mb-4">
                        <span className="flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-md bg-[#004ec4]/[0.12] text-xs font-black text-[#004ec4]">0{i + 1}</span>
                        <div className="h-px flex-1 bg-gradient-to-r from-[#004ec4]/25 to-transparent" />
                      </div>
                      <h3 className="text-lg sm:text-xl font-bold text-[#0f172a] mb-2 md:mb-3">{item.title}</h3>
                      <p className="text-[#64748b] text-sm sm:text-base md:text-lg leading-relaxed">{item.desc}</p>
                    </div>
                  </div>
                </ScrollReveal>
              )
            })}
          </div>

          <ScrollReveal>
            <div className="max-w-3xl mx-auto">
              <div className="relative bg-white rounded-xl md:rounded-2xl p-6 sm:p-8 md:p-10 border border-gray-100 overflow-hidden">
                <div className="absolute top-0 left-0 right-0 h-[2px] opacity-100"
                  style={{ background: 'linear-gradient(90deg, transparent, #004ec4, transparent)' }} />
                <div className="absolute top-0 right-0 w-20 sm:w-28 h-20 sm:h-28 bg-[#004ec4]/[0.06] rounded-bl-full" />

                <div className="relative z-10">
                  <h3 className="text-xl sm:text-2xl md:text-3xl font-black text-[#0f172a] mb-6 md:mb-10 tracking-tight leading-[1.1]">合作基本要求</h3>
                  <div className="space-y-4 md:space-y-6">
                    {requirements.map((req, i) => (
                      <div key={i} className="flex items-center gap-4 md:gap-5">
                        <span className="flex items-center justify-center w-7 h-7 sm:w-9 sm:h-9 rounded-lg bg-[#004ec4]/[0.12] text-xs sm:text-sm font-black text-[#004ec4] shrink-0">{i + 1}</span>
                        <span className="text-[#334155] text-sm sm:text-base md:text-lg leading-relaxed">{req}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      <ContactForm />

      {/* CTA */}
      <section className="py-40 px-4 relative overflow-hidden"
        style={{ background: 'linear-gradient(135deg, #0a1628, #0f1f3a)' }}>
        <div className="absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage: 'radial-gradient(#004ec4 1px, transparent 1px)',
            backgroundSize: '24px 24px',
          }}
        />
        <div className="relative max-w-3xl mx-auto text-center">
          <ScrollReveal>
            <h2 className="text-3xl xs:text-4xl sm:text-5xl md:text-6xl font-bold text-white mb-6 md:mb-8">携手讯驰 共建智慧校园</h2>

            <p className="text-white text-sm xs:text-base sm:text-lg mb-10 md:mb-14 max-w-xl mx-auto leading-relaxed">
              获取产品演示与个性化方案，迈出数字化转型第一步
            </p>
            <div className="flex flex-col sm:flex-row gap-3 xs:gap-4 justify-center">
              <Link
                to="/"
                className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
              >
                返回首页
                <ArrowRight className="w-3.5 h-3.5 xs:w-4 xs:h-4" />
              </Link>
              <a
                href="tel:07713864294"
                className="inline-flex items-center justify-center gap-2 px-6 xs:px-8 py-2.5 xs:py-3 rounded-xl text-xs xs:text-sm font-semibold text-white border border-white hover:bg-white/10 transition-all"
              >
                致电 0771-3864294
              </a>
            </div>
          </ScrollReveal>
        </div>
      </section>
    </main>
  )
}