import React from 'react';
import Image from "next/image";
import {ArrowRight, Coins, Database, Diamond, FileText, Gem, MessageCircle, Network, TrendingUp} from "lucide-react";
import MainTitle from "@/components/MainTitle";
import SubTitle from "@/components/subTitle";
import {Image as AntdImage} from 'antd';
import AnimatedSection from '@/components/AnimatedSection';

function Page() {
  const cards = [
    {
      icon: Diamond,
      title: "合作方法",
      description:
        "以需求定功能、以功能定项目、以项目定模式。\n\n从商业模式、组织模式、资本模式三个层面进行统筹规划，以集中有效资源，高效快捷地实现项目目标。",
    },
    {
      icon: MessageCircle,
      title: "市场定位",
      description: "规划设计、立项审批、开发实施、验收交付。\n\n新经济时代城市智慧化治理整体方案。",
    },
    {
      icon: FileText,
      title: "主要业务",
      description: "城市物联网智能感知应用与电子信息领域全流程整体解决方案。",
    },
    {
      icon: Gem,
      title: "核心竞争力",
      description: "标准产品、商业模式、成熟案例、生态资源、开发团队。",
    },
    {
      icon: Diamond,
      title: "价值观定位",
      description: "创新、协同、共享。",
    },
  ]

  const partners = [
    {
      title: "战略合作伙伴",
      en: "STRATEGIC PARTNER",
      items: [
        "认同价值观；",
        "签署战略合作人协议；",
        "项目培训；",
        "组织公司配置市场方案前部门资源配合项目推进；",
      ],
    },
    {
      title: "项目合作伙伴",
      en: "PROJECT PARTNER",
      items: [
        "战略合作伙伴；",
        "签署项目合作协议；",
        "签署项目正式合同；",
        "成立项目部；",
        "组建项目管理团队；",
      ],
    },
    {
      title: "城市区域合作伙伴",
      en: "CITY PARTNER",
      items: [
        "项目合作伙伴；",
        "成立城市子公司；",
        "组建子公司团队；",
        "子公司运营培训；",
        "合作伙伴持股配置股份；",
      ],
    },
  ]

  const steps = [
    {
      number: "01",
      title: "项目立项",
      items: [
        "提交项目立项资料到公司市场拓展中心，依据中科盛阳市场拓展模型，经公司与合作伙伴共同评估筛选后的项目资源",
        "由市场拓展中心联合商务中心发起项目立项流程签署项目保密协议",
      ],
    },
    {
      number: "02",
      title: "签署战略框架协议",
      items: [
        "由商务中心发起协议签署流程",
        "协议签署后市场拓展中心组织公司资源配合推进项目",
        "公司项目管理中心配置售前经理",
      ],
    },
    {
      number: "03",
      title: "签署正式协议",
      items: [
        "项目落地后，由商务中心发起正式协议签署",
        "公司组织成立项目部",
        "项目管理中心组织项目实施团队，配置项目经理",
      ],
    },
    {
      number: "04",
      title: "实施交付",
      items: ["项目管理中心负责项目实施交付总协调", "商务中心负责项目验收结算协调"],
    },
  ]

  return (
    <div className="bg-[#EFF5FB]">
      <AnimatedSection effect="slide" direction="right">
        <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">
          <Image src={"/assets/business/1.png"} alt={"banner"} width={1920} height={1080}/>
        </div>
      </AnimatedSection>

      <div className="py-6 sm:py-10">
        <MainTitle title={"企业核心竞争力"} titleLetter={"CORE COMPETITIVE"}/>
      </div>

      <AnimatedSection effect="slide" direction="left">
        <div className="bg-[#EFF5FB] py-4 px-4 sm:px-6 lg:px-8">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
              {/* 全局的顶层规划能力 */}
              <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="w-16 h-16 sm:w-20 sm:h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                    <TrendingUp className="w-8 h-8 sm:w-10 sm:h-10 text-blue-500"/>
                  </div>
                  <h3 className="text-lg sm:text-xl font-semibold text-gray-900">全局的顶层规划能力</h3>
                  <p className="text-sm sm:text-base text-gray-600 leading-relaxed">
                    中科盛阳从商业模式、组织模式、资本模式三个层面进行统筹规划，以集中有效资源，高效快速地实现目标。
                  </p>
                </div>
              </div>

              {/* 完善的资源整合能力 */}
              <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="w-16 h-16 sm:w-20 sm:h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                    <Network className="w-8 h-8 sm:w-10 sm:h-10 text-blue-500"/>
                  </div>
                  <h3 className="text-lg sm:text-xl font-semibold text-gray-900">完善的资源整合能力</h3>
                  <p className="text-sm sm:text-base text-gray-600 leading-relaxed">
                    中科盛阳，聚集了多领域、多层次、多结构的丰富生态资源，能根据业主的发展战略需求和政策导向，对相关的资源进行优化配置及整合。
                  </p>
                </div>
              </div>

              {/* 优秀的运作实施能力 */}
              <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="w-16 h-16 sm:w-20 sm:h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                    <Database className="w-8 h-8 sm:w-10 sm:h-10 text-blue-500"/>
                  </div>
                  <h3 className="text-lg sm:text-xl font-semibold text-gray-900">优秀的运作实施能力</h3>
                  <p className="text-sm sm:text-base text-gray-600 leading-relaxed">
                    多年专注于物联网智能感知设备及技术研发、通信信息、电子信息项目全流程能力，涵盖包括智慧城市、智慧社区、智慧文旅、智慧文体、智能硬件等智慧生态项目，具备丰富的智慧城市精细化运作实施经验。
                  </p>
                </div>
              </div>

              {/* 精湛的技术开发能力 */}
              <div className="bg-white rounded-2xl p-6 sm:p-8 shadow-sm border border-gray-100">
                <div className="flex flex-col items-center text-center space-y-4">
                  <div className="w-16 h-16 sm:w-20 sm:h-20 bg-blue-50 rounded-2xl flex items-center justify-center">
                    <ArrowRight className="w-8 h-8 sm:w-10 sm:h-10 text-blue-500"/>
                  </div>
                  <h3 className="text-lg sm:text-xl font-semibold text-gray-900">精湛的技术开发能力</h3>
                  <p className="text-sm sm:text-base text-gray-600 leading-relaxed">
                    拥有独立的系统平台及软硬件开发能力，曾自主研发过物联网感知云平台、智慧园区电子信息平台、智慧社区服务平台等技术成果。能够满足在智慧城市的建设运营中所涉及的多领域多行业的技术需求。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AnimatedSection>

      <AnimatedSection effect="slide" direction="right">
        <div className="bg-[url('/assets/business/2.png')] bg-cover from-blue-600 via-blue-700 to-blue-800 p-4 sm:p-8">
          <div className="max-w-7xl mx-auto">
            <SubTitle title={"合作文化"} color={"#ffffff"}/>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 sm:gap-6">
              {cards.map((card, index) => {
                const IconComponent = card.icon
                return (
                  <div
                    key={index}
                    className="sm:my-6 my-2 bg-white/90 backdrop-blur-sm rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:bg-white/95 min-h-45 sm:min-h-75 flex flex-col"
                  >
                    <div className="flex items-center gap-3 mb-4 mt-4">
                      <div className="p-2 bg-blue-100 rounded-lg">
                        <IconComponent className="w-6 h-6 text-blue-600"/>
                      </div>
                      <h3 className="text-lg font-semibold text-gray-800">{card.title}</h3>
                    </div>
                    <div className="flex-1">
                      <p className="text-gray-600 text-sm leading-relaxed whitespace-pre-line">{card.description}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </AnimatedSection>
      <AnimatedSection effect="slide" direction="left">
        <div className="py-6 sm:py-10">
          <MainTitle title={"合作伙伴计划"} titleLetter={"PARTNERSHIP PLAN"}/>
        </div>
      </AnimatedSection>

      <AnimatedSection effect="slide" direction="right">
        <div className="bg-gradient-to-br from-slate-100 to-blue-50 px-4 sm:px-6">
          <div className="max-w-7xl mx-auto">

            {/* Partnership Flow */}
            <div className="py-4 px-4 sm:px-8">
              {/* 顶部介绍文字 */}
              <p className="text-center text-base sm:text-lg text-slate-700 max-w-4xl mx-auto leading-relaxed">
                以市场化为基础，提升项目拓展效率，最终形成企业内、外部的合作化机制，
                共同分担风险、创造价值、共享项目红利。最终达到企业、合作伙伴、客户共赢格局。
              </p>

              {/* 合作伙伴卡片 */}
              <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-6xl mx-auto">
                {partners.map((partner, idx) => (
                  <div
                    key={idx}
                    className="bg-white rounded-2xl shadow-md p-6 text-center flex flex-col"
                  >
                    {/* Icon */}
                    <div className="flex justify-center mb-4">
                      <Coins className="w-10 h-10 text-blue-600"/>
                    </div>

                    {/* 标题 */}
                    <h3
                      className="text-lg sm:text-xl font-bold text-white bg-blue-800 rounded-lg py-2 px-4 inline-block">
                      {partner.title}
                    </h3>
                    <p className="text-sm text-blue-900 mt-1">{partner.en}</p>

                    {/* 列表 */}
                    <ul className="text-left text-sm sm:text-base text-slate-700 mt-6 space-y-2">
                      {partner.items.map((item, i) => (
                        <li key={i} className="leading-relaxed">
                          {i + 1}. {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </AnimatedSection>

      <AnimatedSection effect="slide" direction="left">
        <div className="relative overflow-hidden">
          {/* Background Image */}
          <div
            className="absolute inset-0"
          >
            {/* Blue overlay to match the original design */}
            <div className="absolute inset-0 bg-[url('/assets/business/3.png')] bg-cover bg-center bg-no-repeat"></div>
          </div>

          {/* Content */}
          <div className="relative z-10 max-w-7xl mx-auto px-4 py-8 sm:py-16">
            <SubTitle title={"合作流程"} color={"#ffffff"}/>
            {/* Step Cards with Numbers Above */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
              {steps.map((step, index) => (
                <div key={step.number} className="flex flex-col items-center">
                  {/* Step Number Above Card */}
                  <div className="mb-4 sm:mb-6">
                    <div className="relative">
                      <div
                        className="w-16 h-16 sm:w-20 sm:h-20 bg-white flex items-center justify-center transform rotate-45 shadow-lg">
                    <span className="text-2xl sm:text-3xl font-bold text-blue-900 transform -rotate-45">
                      {step.number}
                    </span>
                      </div>
                    </div>

                    {/* Connecting Arrow for larger screens */}
                    {index < steps.length - 1 && (
                      <div
                        className="hidden lg:flex items-center justify-center mt-4 absolute translate-x-45 -translate-y-22">
                        <ArrowRight className="w-16 h-16 text-white/60"/>
                      </div>
                    )}
                  </div>

                  {/* Step Card */}
                  <div className="bg-white rounded-lg p-6 shadow-xl w-full">
                    <h3 className="text-xl sm:text-2xl font-bold text-blue-900 mb-4 text-center">{step.title}</h3>
                    <div className="space-y-4">
                      {step.items.map((item, itemIndex) => (
                        <div key={itemIndex} className="flex items-start space-x-3">
                      <span
                        className="flex-shrink-0 w-6 h-6 bg-blue-100 text-blue-900 rounded-full flex items-center justify-center text-sm font-semibold mt-0.5">
                        {itemIndex + 1}
                      </span>
                          <p className="text-gray-700 text-sm sm:text-base leading-relaxed">{item}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </AnimatedSection>

      {/*<AnimatedSection effect="slide" direction="right">*/}
      {/*  <div className="relative overflow-hidden mt-6">*/}
      {/*    <div className="max-w-7xl mx-auto p-4 sm:p-6">*/}
      {/*      <SubTitle title="市场拓展模型" color={"rgb(37,78,143)"}/>*/}
      {/*      <div className="w-full">*/}
      {/*        <div*/}
      {/*          className="hidden sm:block my-10 p-4 bg-white border border-solid border-black-200 rounded-2xl hover:shadow-md transition-shadow duration-300">*/}
      {/*          <div className="p-4">*/}
      {/*            <AntdImage className={"w-full"} preview={false} src={"/assets/business/4.png"} alt={"市场拓展模型"}/>*/}
      {/*          </div>*/}
      {/*        </div>*/}
      {/*        <div*/}
      {/*          className="sm:hidden my-10 p-4 bg-white border border-solid border-black-200 rounded-2xl hover:shadow-md transition-shadow duration-300">*/}
      {/*          <div className="p-4">*/}
      {/*            <AntdImage className={"w-full"} preview={true} src={"/assets/business/4.png"} alt={"市场拓展模型"}/>*/}
      {/*          </div>*/}
      {/*        </div>*/}
      {/*      </div>*/}
      {/*    </div>*/}
      {/*  </div>*/}
      {/*</AnimatedSection>*/}
    </div>
  );
}

export default Page;