'use client';

import React, { useState } from 'react';
import { Breadcrumb } from '@/src/utils/helpers/breadcrumb';
import { WarrantyHero, WarrantyTiers, WarrantyCheck, WarrantyFAQ, WarrantyContact, WarrantySkeleton } from '@/src/components/warranty';

export default function WarrantyPage() {
    const [isLoading, setIsLoading] = useState(true);

    React.useEffect(() => {
        const t = setTimeout(() => setIsLoading(false), 300);
        return () => clearTimeout(t);
    }, []);

    if (isLoading) return <WarrantySkeleton />;

    return (
        <div className="min-h-screen bg-white dark:bg-[#0a0a0a] overflow-x-hidden">
            <div className="max-w-[1800px] mx-auto px-4 sm:px-6 pt-4">
                <Breadcrumb items={[{ title: 'گارانتی' }]} className="mb-2" />
            </div>
            <WarrantyHero />
            <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent" />
            <WarrantyTiers />
            <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent" />
            <WarrantyCheck />
            <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent" />
            <WarrantyFAQ />
            <div className="w-full h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent" />
            <WarrantyContact />
        </div>
    );
}