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>
  );
};

export default SupplyChainModel;