import Image from 'next/image'

import CategoryImage from '../public/img.png'

async function getData(id) {
  const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/public/content/index/${id}`)
 
  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}

export default async function Production({ lang }){

    const data = await getData(lang === 'fa' ? 1 : 2);    
    
    // Add safety checks for data structure
    if (!data || typeof data !== 'object') {
        console.error('Production: Invalid data received from API');
        return null;
    }
    
    return(
        <div className=" flex flex-col h-fit py-16">
            <div className='flex flex-col lg:flex-row items-center justify-between font-[5] lg:mx-28 pb-12 lg:py-20 px-4'>
                <div className='flex flex-col'>
                    <span className=''>{ data.equipmentSuper?.[0]?.body || '' }</span>
                    <span className='font-[4] text-3xl lg:text-4xl pt-4'>{ data.equipmentHead?.[0]?.body || '' }</span>
                </div>
                <svg className='mt-6 mx-6' width="73" height="38" viewBox="0 0 73 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M36.5786 18.8969C36.5786 24.0903 35.206 28.7852 32.9948 32.1772C30.7827 35.5705 27.7441 37.6438 24.4097 37.6438C21.0753 37.6438 18.0367 35.5705 15.8246 32.1772C13.6134 28.7852 12.2408 24.0903 12.2408 18.8969C12.2408 13.7035 13.6134 9.00865 15.8246 5.6167C18.0367 2.22336 21.0753 0.15 24.4097 0.15C27.7441 0.15 30.7827 2.22336 32.9948 5.6167C35.206 9.00865 36.5786 13.7035 36.5786 18.8969Z" stroke="url(#paint0_linear_124_2450)" stroke-width="0.3"/>
                    <path d="M48.6689 18.8969C48.6689 24.0903 47.2964 28.7852 45.0851 32.1772C42.873 35.5705 39.8345 37.6438 36.5 37.6438C33.1656 37.6438 30.127 35.5705 27.9149 32.1772C25.7037 28.7852 24.3312 24.0903 24.3312 18.8969C24.3312 13.7035 25.7037 9.00865 27.9149 5.6167C30.127 2.22336 33.1656 0.15 36.5 0.15C39.8345 0.15 42.873 2.22336 45.0851 5.6167C47.2964 9.00865 48.6689 13.7035 48.6689 18.8969Z" stroke="url(#paint1_linear_124_2450)" stroke-width="0.3"/>
                    <path d="M60.7592 18.8969C60.7592 24.0903 59.3867 28.7852 57.1755 32.1772C54.9634 35.5705 51.9248 37.6438 48.5904 37.6438C45.2559 37.6438 42.2174 35.5705 40.0053 32.1772C37.794 28.7852 36.4215 24.0903 36.4215 18.8969C36.4215 13.7035 37.794 9.00865 40.0053 5.6167C42.2174 2.22336 45.2559 0.15 48.5904 0.15C51.9248 0.15 54.9634 2.22336 57.1755 5.6167C59.3867 9.00865 60.7592 13.7035 60.7592 18.8969Z" stroke="url(#paint2_linear_124_2450)" stroke-width="0.3"/>
                    <path d="M72.8501 18.8969C72.8501 24.0903 71.4775 28.7852 69.2663 32.1772C67.0542 35.5705 64.0156 37.6438 60.6812 37.6438C57.3468 37.6438 54.3082 35.5705 52.0961 32.1772C49.8849 28.7852 48.5123 24.0903 48.5123 18.8969C48.5123 13.7035 49.8849 9.00865 52.0961 5.6167C54.3082 2.22336 57.3468 0.15 60.6812 0.15C64.0156 0.15 67.0542 2.22336 69.2663 5.6167C71.4775 9.00865 72.8501 13.7035 72.8501 18.8969Z" stroke="url(#paint3_linear_124_2450)" stroke-width="0.3"/>
                    <path d="M24.4878 18.8969C24.4878 24.0903 23.1152 28.7852 20.904 32.1772C18.6919 35.5705 15.6533 37.6438 12.3189 37.6438C8.98446 37.6438 5.94588 35.5705 3.73377 32.1772C1.52256 28.7852 0.15 24.0903 0.15 18.8969C0.15 13.7035 1.52256 9.00865 3.73377 5.6167C5.94588 2.22336 8.98446 0.15 12.3189 0.15C15.6533 0.15 18.6919 2.22336 20.904 5.6167C23.1152 9.00865 24.4878 13.7035 24.4878 18.8969Z" stroke="url(#paint4_linear_124_2450)" stroke-width="0.3"/>
                    <defs>
                    <linearGradient id="paint0_linear_124_2450" x1="12.0908" y1="18.8969" x2="33.7469" y2="18.8969" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A5A5A5"/>
                    <stop offset="1" stop-color="#878787" stop-opacity="0"/>
                    </linearGradient>
                    <linearGradient id="paint1_linear_124_2450" x1="24.1812" y1="18.8969" x2="45.8373" y2="18.8969" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A5A5A5"/>
                    <stop offset="1" stop-color="#878787" stop-opacity="0"/>
                    </linearGradient>
                    <linearGradient id="paint2_linear_124_2450" x1="36.2715" y1="18.8969" x2="57.9276" y2="18.8969" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A5A5A5"/>
                    <stop offset="1" stop-color="#878787" stop-opacity="0"/>
                    </linearGradient>
                    <linearGradient id="paint3_linear_124_2450" x1="48.3623" y1="18.8969" x2="70.0184" y2="18.8969" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A5A5A5"/>
                    <stop offset="1" stop-color="#878787" stop-opacity="0"/>
                    </linearGradient>
                    <linearGradient id="paint4_linear_124_2450" x1="3.67131e-07" y1="18.8969" x2="21.6561" y2="18.8969" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#A5A5A5"/>
                    <stop offset="1" stop-color="#878787" stop-opacity="0"/>
                    </linearGradient>
                    </defs>
                </svg>
                <p className='text-black-1 max-w-4xl '>
                    { data.equipmentDesc?.[0]?.body || '' }
                </p>
            </div>
            <div className="grid grid-cols-1 lg:grid-cols-2 grid-rows-2 bg-zinc-100 font-[5]">
                <div className="flex w-full">
                    <Image alt="" src={ data.equipment3Image?.[0]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
                    <div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
                        <span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[0]?.body || '' }</span>
                        <p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[0]?.body || '' }</p>             
                    </div>
                </div>
                <div className="flex w-full flex-row-reverse lg:flex-row">
                    <Image alt="" src={ data.equipment3Image?.[1]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
                    <div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
                        <span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[1]?.body || '' }</span>
                        <p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[1]?.body || '' }</p>             
                    </div> 
                </div>
                <div className="flex w-full flex-row-reverse lg:flex-row">
                    <div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
                        <span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[2]?.body || '' }</span>
                        <p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[2]?.body || '' }</p>             
                    </div>
                    <Image alt="" src={ data.equipment3Image?.[2]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>     
                </div>
                <div className="flex w-full">
                    <div className="flex flex-col justify-center lg:p-10 sm:p-4 md:p-8 p-2 text-sm sm:text-base">
                        <span classname="font-[4] text-black-1 text-2xl pb-8"> { data.equipment3Title?.[3]?.body || '' }</span>
                        <p classname="font-[5] text- text-black-1">{ data.equipment3Desc?.[3]?.body || '' }</p>             
                    </div>
                    <Image alt="" src={ data.equipment3Image?.[3]?.body || '' } width={500} height={500} className="object-cover aspect-square w-1/2"/>
                </div>
            </div>
          
        </div>
    )
}