import { ASSETS, reportItems } from '../constants';
import type { ReportData } from '../types/data';

interface CoverPageProps {
  data: ReportData;
}

export const CoverPage = ({ data }: CoverPageProps) => {
   const currentMonth = "2026Q1";

  return (
    <div 
      className="relative bg-[#FFFFFF] overflow-hidden text-black w-full print-page"
    >
      {/* Top Background Image - Width: 100%, Height: auto */}
      <div className="absolute top-0 left-0 right-0 z-0 pointer-events-none">
           <img 
             src={ASSETS.coverBg} 
             className="w-full h-auto block" 
             alt=""
             crossOrigin="anonymous"
           />
      </div>

      {/* Header Content */}
      <div className="pt-[40px] px-[60px] relative z-10">
        
        {/* Top Row: Logo & Slogan & Date Badge */}
         <div className="flex justify-between items-center mb-[60px]">
            {/* Left: Logo + Vertical Line + Slogan */}
             <div className="flex items-center h-[40px]">
                <div className="h-[40px] flex items-center mr-4">
                  <img 
                    src={ASSETS.logo} 
                    alt="Logo" 
                    className="h-full w-auto object-contain block" 
                    crossOrigin="anonymous"
                  />
                </div>
                
                <div className="w-[1px] h-[20px] bg-white opacity-40 mr-4"></div>

                <span className="text-white text-[20px] opacity-90 tracking-wider font-light">
                  让每个企业拥有数字信用
                </span>
             </div>

             {/* Right: Date Badge */}
             <div className="bg-[#1677FF] bg-opacity-80 px-6 py-2 rounded-full shadow-lg">
                <span className="text-white text-[18px] font-medium">{currentMonth}</span>
             </div>
          </div>

        {/* Titles */}
        <div className="mb-[30px]">
          <h1 className="text-[56px] font-bold text-white mb-2 tracking-tight">
            hi，{data.companyName}
          </h1>
          <h2 className="text-[56px] font-bold text-white tracking-tight leading-tight">
            您的运营报告来了
          </h2>
        </div>

        {/* Intro Text */}
        <div className="mb-[40px]">
          <p className="text-[18px] font-semibold text-white mb-3">
            感谢您选择泾渭云数据征信解决方案。
          </p>
          <p className="text-[14px] leading-[1.6] text-white max-w-[70%] text-justify opacity-80 font-light">
            泾渭云为合作金融机构、政府部门及广大中小微企业提供精准、智能、专业的企业数据征信解决方案，助力金融信贷产业数字化、场景化、智慧化转型。
          </p>
        </div>

        {/* Statistics Card */}
        <div className="relative w-full rounded-[20px] bg-white shadow-[0px_10px_40px_rgba(0,0,0,0.08)] mb-[50px] p-[32px]">
            <div className="flex items-baseline gap-4 mb-4">
               <span className="text-[#1677FF] text-[24px] font-bold">2026年一季度采集成功率</span>
               <span className="text-[#1677FF] text-[56px] font-normal font-bebas leading-none tracking-tight">{data.stats.successRate}</span>
            </div>

            <div className="text-[#333333] text-[16px] leading-[1.8]">
              <p>2026年一季度您在泾渭云累计采集了<span className="font-bold">{data.stats.collectedCount}</span>户企业：较2025年一季度增长了<span className="font-bold">{data.stats.growthRate}</span>。</p>
              <p><span className="font-bold">{data.stats.fiveMinRate}</span>的企业都在5分钟内完成，平均采集时长<span className="font-bold">{data.stats.avgDuration}</span>分钟。</p>
            </div>
        </div>

        {/* Index List */}
        <div className="px-[10px]">
           <div className="flex flex-col space-y-[12px]">
              {reportItems.map((item, idx) => (
                <div key={idx} className="flex items-end justify-between w-full">
                   <span className="text-[#999999] text-[16px] font-medium shrink-0">
                     {item.title}
                   </span>
                   
                   <div className="flex-grow mx-4 mb-[5px] border-b border-dotted border-[#CCCCCC]"></div>
                   
                   <span className="text-[#999999] text-[16px] font-medium font-sans shrink-0">
                     {item.value}
                   </span>
                </div>
              ))}
           </div>
        </div>
      </div>
    </div>
  );
};

