import { fetchDownloadBrochuresData } from '@/services/footer.service';
import Image from 'next/image';
import Link from 'next/link';
import React from 'react';

interface PageData {
    id: number;
    uuid: string;
    title: string;
    description: string;
    cover_image_url?: string;
    slug: string;
}

export default async function Page() {
    let brochuresData: PageData | undefined;

    try {
        const response = await fetchDownloadBrochuresData(
            'e6a17bca-84f2-47a6-9139-80243348d876'
        );
        brochuresData = response?.pagedata;
    } catch (error) {
        console.error('Error fetching brochure data:', error);
    }

    if (!brochuresData) return null;


    const brochureLink =
        '/assets/images/THE-CRESCENT-GROUP.pdf';

    return (
        <>
            <div className="relative w-full h-[350px] md:h-[450px] lg:h-[480px] bg-gray-900 overflow-hidden">
                <Image
                    src={brochuresData?.cover_image_url || '/assets/images/crescent.webp'}
                    alt={brochuresData?.title || 'Banner'}
                    fill
                    className="object-cover opacity-80"
                    priority
                />
                <div className="absolute inset-0 bg-black/40 z-10 flex items-center justify-center">
                    <h1 className="text-white text-4xl md:text-5xl font-semibold tracking-wide text-center">
                        {brochuresData.title}.
                    </h1>
                </div>
            </div>


            <section className="bg-white py-16">
                <div className="max-w-3xl mx-auto px-6 text-center">

                    <Link
                        href={brochureLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-green-600 text-lg md:text-xl font-medium hover:text-[#F6A623] transition-colors duration-300"
                    >
                        Crescent Organics Pvt. Ltd.
                    </Link>

                </div>
            </section>
        </>
    );
}