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

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

interface TermsConditionsData {
    id: number;
    title: string;
    shortDescription: string;
}

export default async function Page() {
    let pageData: PageData | undefined;
    let termsData: TermsConditionsData | undefined;

    try {
        const response = await fetchTermsConditionsData('3e2cb80f-0163-40b2-ba3d-affc1b165528');
        pageData = response.pagedata;
        termsData = response?.pageItemdataWithSubsection?.[0];
    } catch (error) {
        console.error('Error fetching data:', error);
    }

    if (!pageData) return null;

    // Ensure consistent string values for HTML blocks
    const bannerDescription = pageData?.description || '';
    const mainDescription = pageData?.description || '';
    const termsContent = termsData?.shortDescription || '';

    return (
        <>
            {/* Banner Section */}
            <section className="relative w-full h-[400px] md:h-[480px] lg:h-[520px] overflow-hidden">
                <Image
                    src={pageData?.cover_image_url || '/assets/images/1643718921134.jpg'}
                    alt={pageData?.title || 'Terms and Conditions Banner'}
                    fill
                    className="object-cover object-center"
                    priority
                />

                {/* Overlay */}
                <div className="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-center px-6">
                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-light text-white mb-6 drop-shadow-md">
                        {pageData?.title?.replace('.', '')}
                    </h1>

                    {/* Subtitle / Description (hydration safe) */}
                    <div
                        className="text-lg md:text-xl text-gray-200 max-w-3xl leading-relaxed drop-shadow-sm"
                        dangerouslySetInnerHTML={{ __html: bannerDescription }}
                    />
                </div>
            </section>

            {/* Main Content */}
            <section className="bg-white py-16 px-4 sm:px-6 lg:px-8">
                <div className="max-w-4xl mx-auto">
                    {/* Page Title */}
                    <div className="text-center mb-10">
                        <h2 className="text-3xl md:text-4xl font-semibold text-gray-800 mb-3">
                            {termsData?.title}
                        </h2>
                        {/* <div className="w-20 h-[2px] bg-gray-800 mx-auto"></div> */}
                    </div>

                    {/* Page Description (SSR-safe) */}
                    <div
                        className="prose prose-gray max-w-none mb-12 text-gray-700 leading-relaxed"
                        dangerouslySetInnerHTML={{ __html: mainDescription }}
                    />

                    {/* Terms Content (SSR-safe) */}
                    <div
                        className="prose prose-lg prose-gray max-w-none text-gray-800 leading-relaxed"
                        dangerouslySetInnerHTML={{ __html: termsContent }}
                    />
                </div>
            </section>
        </>
    );
}