import React from 'react';

interface SupplyChainModelProps {
  // 可以添加props如果需要
}

const SupplyChainModel: React.FC<SupplyChainModelProps> = () => {
  return (
    <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]">
      {/* 合作主体描述 */}
      <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0">
        <div className="flex flex-col font-normal justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-[rgba(255,255,255,0.5)] whitespace-nowrap">
          <p className="leading-[32px]">省粮油集团+区域公司+新型农业经营主体</p>
        </div>
      </div>

      {/* 1+1+N 标题 */}
      <div className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full">
        <div
          className="bg-clip-text bg-gradient-to-b flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[80px] text-right whitespace-nowrap"
          style={{
            backgroundImage: 'linear-gradient(to bottom, #ffffff, #40deff)',
            WebkitTextFillColor: 'transparent'
          }}
        >
          <p className="leading-[50px]">1+1+N</p>
        </div>
      </div>

      {/* 合作模式标题 */}
      <div className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0">
        <div className="flex flex-col font-bold justify-center leading-[0] not-italic relative shrink-0 text-[50px] text-[cyan] text-right whitespace-nowrap">
          <p className="leading-[50px]">供应链合作模式</p>
        </div>
      </div>

      {/* 合作模式详情 */}
      <div className="mt-8 bg-[rgba(255,255,255,0.05)] rounded-lg p-6 border border-[rgba(255,255,255,0.1)]">
        <div className="grid grid-cols-3 gap-6">
          {/* 省粮油集团 */}
          <div className="text-center">
            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-3">
              <span className="text-white text-xl font-bold">1</span>
            </div>
            <h4 className="text-white font-bold text-lg mb-2">省粮油集团</h4>
            <p className="text-[rgba(255,255,255,0.7)] text-sm">
              核心龙头企业
              资源整合平台
              标准制定者
            </p>
          </div>

          {/* 区域公司 */}
          <div className="text-center">
            <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-3">
              <span className="text-white text-xl font-bold">1</span>
            </div>
            <h4 className="text-white font-bold text-lg mb-2">区域公司</h4>
            <p className="text-[rgba(255,255,255,0.7)] text-sm">
              区域运营中心
              服务支撑平台
              市场对接桥梁
            </p>
          </div>

          {/* 新型农业经营主体 */}
          <div className="text-center">
            <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-3">
              <span className="text-white text-xl font-bold">N</span>
            </div>
            <h4 className="text-white font-bold text-lg mb-2">新型农业经营主体</h4>
            <p className="text-[rgba(255,255,255,0.7)] text-sm">
              家庭农场
              合作社
              农业企业
            </p>
          </div>
        </div>

        {/* 合作流程 */}
        <div className="mt-6 pt-6 border-t border-[rgba(255,255,255,0.1)]">
          <h5 className="text-white font-bold text-lg mb-4 text-center">合作流程</h5>
          <div className="flex justify-between items-center">
            <div className="text-center">
              <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-white text-sm">①</span>
              </div>
              <p className="text-[rgba(255,255,255,0.8)] text-xs">资源整合</p>
            </div>
            <div className="flex-1 h-0.5 bg-gradient-to-r from-blue-500 to-green-500 mx-2"></div>
            <div className="text-center">
              <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-white text-sm">②</span>
              </div>
              <p className="text-[rgba(255,255,255,0.8)] text-xs">区域运营</p>
            </div>
            <div className="flex-1 h-0.5 bg-gradient-to-r from-green-500 to-purple-500 mx-2"></div>
            <div className="text-center">
              <div className="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-2">
                <span className="text-white text-sm">③</span>
              </div>
              <p className="text-[rgba(255,255,255,0.8)] text-xs">产业协同</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SupplyChainModel;