"use client"

import React, { useEffect, useState } from "react";

export default function HelpClient() {

    const [helpData, setHelpData] = useState<footerSectionType | null>(null);

    const fetchHelpData = async () => {
        try {
            const res = await fetch('/api/footerSection/help', {
                cache: 'no-store',
            });

            if (!res.ok) throw new Error('Fetch failed');

            const data = await res.json();

            setHelpData(data ?? null);

        } catch (error) {
        }
    };

    useEffect(() => {
        fetchHelpData();
    }, []);
    return (
        <div className="min-h-screen flex flex-col bg-white">
            {/* Header */}
            <header className="bg-blue-600 text-white py-10 text-center">
                <h1 className="text-4xl font-bold">Help & Support</h1>
                <p className="mt-3 max-w-xl mx-auto text-lg">
                    We&apos;re here to assist you with any questions or issues.
                </p>
            </header>

            <main className="relative -mt-16 pb-20">
                <div className="max-w-6xl mx-auto px-6">
                    <div className="bg-white rounded-3xl shadow-xl p-8 md:p-12 transition-all duration-300 hover:shadow-2xl">

                        {helpData ? (
                            <div
                                className="prose prose-lg max-w-none prose-headings:text-gray-800 prose-p:text-gray-600 prose-a:text-green-600"
                                dangerouslySetInnerHTML={{
                                    __html: helpData.description,
                                }}
                            />
                        ) : (
                            <div className="space-y-4 animate-pulse">
                                <div className="h-6 bg-gray-200 rounded w-1/3" />
                                <div className="h-4 bg-gray-200 rounded w-full" />
                                <div className="h-4 bg-gray-200 rounded w-5/6" />
                                <div className="h-4 bg-gray-200 rounded w-2/3" />
                            </div>
                        )}

                    </div>
                </div>
            </main>


        </div>
    );
}