import Image from 'next/image'
import PicAbout from '../public/PicAbout.png'
import Link from 'next/link'
import { aboutImages } from '@/lib/localImages'

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 About({lang}) {

    const data = await getData(lang === 'fa' ? 1 : 2);
    
    // Add safety checks for data structure
    if (!data || typeof data !== 'object') {
        console.error('About: Invalid data received from API');
        return null;
    }
    
    return(
        
            <div id="about" className='grid scroll-mt-28 lg:grid-cols-3 grid-cols-1 grid-rows-3 gap-2 font-[5] my-16 mx-8 lg:mx-28'>
                <div className='flex justify-between items-center p-8'>
                    <div className='flex flex-col w-full'>
                        <span>{ data.aboutSuper?.[0]?.body || '' }</span>
                        <span className='font-[4] text-3xl lg:text-4xl pt-2'>{ data.aboutHead?.[0]?.body || '' }</span>
                    </div>
                    <svg className='' width="128" height="74" viewBox="0 0 128 74" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M80.5657 36.6117C80.5657 46.6722 83.2246 55.7663 87.5075 62.3363C91.7923 68.9091 97.6768 72.9235 104.133 72.9235C110.589 72.9235 116.473 68.9091 120.758 62.3363C125.041 55.7663 127.7 46.6722 127.7 36.6117C127.7 26.5513 125.041 17.4572 120.758 10.8872C116.473 4.31441 110.589 0.3 104.133 0.3C97.6768 0.3 91.7923 4.31441 87.5075 10.8872C83.2246 17.4572 80.5657 26.5513 80.5657 36.6117Z" stroke="url(#paint0_linear_124_2568)" stroke-width="0.6"/>
                        <path d="M53.8103 36.6117C53.8103 46.6722 56.4692 55.7663 60.7522 62.3363C65.0369 68.9091 70.9214 72.9235 77.3775 72.9235C83.8335 72.9235 89.718 68.9091 94.0028 62.3363C98.2858 55.7663 100.945 46.6722 100.945 36.6117C100.945 26.5513 98.2858 17.4572 94.0028 10.8872C89.718 4.31441 83.8335 0.3 77.3775 0.3C70.9214 0.3 65.0369 4.31441 60.7522 10.8872C56.4692 17.4572 53.8103 26.5513 53.8103 36.6117Z" stroke="url(#paint1_linear_124_2568)" stroke-width="0.6"/>
                        <path d="M27.0555 36.6117C27.0555 46.6722 29.7143 55.7663 33.9973 62.3363C38.2821 68.9091 44.1666 72.9235 50.6226 72.9235C57.0786 72.9235 62.9631 68.9091 67.2479 62.3363C71.5309 55.7663 74.1897 46.6722 74.1897 36.6117C74.1897 26.5513 71.5309 17.4572 67.2479 10.8872C62.9631 4.31441 57.0786 0.3 50.6226 0.3C44.1666 0.3 38.2821 4.31441 33.9973 10.8872C29.7143 17.4572 27.0555 26.5513 27.0555 36.6117Z" stroke="url(#paint2_linear_124_2568)" stroke-width="0.6"/>
                        <path d="M0.300079 36.6117C0.300079 46.6722 2.95895 55.7663 7.24192 62.3363C11.5267 68.9091 17.4112 72.9235 23.8672 72.9235C30.3233 72.9235 36.2078 68.9091 40.4925 62.3363C44.7755 55.7663 47.4344 46.6722 47.4344 36.6117C47.4344 26.5513 44.7755 17.4572 40.4925 10.8872C36.2078 4.31441 30.3233 0.3 23.8672 0.3C17.4112 0.3 11.5267 4.31441 7.24192 10.8872C2.95895 17.4572 0.300079 26.5513 0.300079 36.6117Z" stroke="url(#paint3_linear_124_2568)" stroke-width="0.6"/>
                        <defs>
                        <linearGradient id="paint0_linear_124_2568" x1="128" y1="36.6117" x2="86.0425" y2="36.6117" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#A1A1AA"/>
                        <stop offset="1" stop-color="#A1A1AA" stop-opacity="0"/>
                        </linearGradient>
                        <linearGradient id="paint1_linear_124_2568" x1="101.245" y1="36.6117" x2="59.2871" y2="36.6117" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#A1A1AA"/>
                        <stop offset="1" stop-color="#A1A1AA" stop-opacity="0"/>
                        </linearGradient>
                        <linearGradient id="paint2_linear_124_2568" x1="74.4897" y1="36.6117" x2="32.5322" y2="36.6117" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#A1A1AA"/>
                        <stop offset="1" stop-color="#A1A1AA" stop-opacity="0"/>
                        </linearGradient>
                        <linearGradient id="paint3_linear_124_2568" x1="47.7344" y1="36.6117" x2="5.77687" y2="36.6117" gradientUnits="userSpaceOnUse">
                        <stop stop-color="#A1A1AA"/>
                        <stop offset="1" stop-color="#A1A1AA" stop-opacity="0"/>
                        </linearGradient>
                        </defs>
                    </svg>
                </div>
                <div className='row-span-2 flex flex-col justify-between py-10 px-8 bg-zinc-100 rounded-xl h-full'>
                    <span className='font-[4] text-xl'>{ data.about1Head?.[0]?.body || '' }</span>
                    <p className='text-zinc-600 py-4'> { data.about1Desc?.[0]?.body || '' }
                    </p>
                    <Image alt="" src={PicAbout} className=''/>
                </div>
                <Image alt="" src={aboutImages.primary} width={800} height={800} className='row-span-3 h-full min-h-80 w-full object-cover rounded-xl'/>

                <div className='row-span-2 flex flex-col justify-between py-10 px-8 bg-zinc-100 rounded-xl h-full'>
                    <span className='font-[4] text-xl'>{ data.about2Head?.[0]?.body || '' }</span>
                    <p className='text-zinc-600 py-4'> { data.about2Desc?.[0]?.body || '' }                            
                    </p>
                    <Link href="#products" className='hidden lg:flex items-center bg-red-700 font-[4] w-fit p-2 '>
                        <span className='text-md text-zinc-50'> بیشتر بدانید</span>
                        <div className="p-1 rounded bg-red-500 mr-2">
                            <svg className="w-6 h-6 stroke-n-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 4.5l-15 15m0 0h11.25m-11.25 0V8.25" />
                            </svg>
                        </div>
                    </Link>
                </div>
                <Image alt="" src={aboutImages.secondary} width={800} height={800} className='max-h-56 min-h-48 object-cover rounded-xl w-full h-full'/> 
            </div>
        
    )
}