import { useState } from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Search, Filter, Star, MapPin, Clock, Tag, Heart, Share2, ChevronDown, ChevronRight, Check, Hotel, Plane, Building2, MapPinned, Home, Gift, Percent } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import { Separator } from '../components/ui/separator';
import { Checkbox } from '../components/ui/checkbox';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { TrustSection } from '../components/TrustSection';
import { MobileAppSection } from '../components/MobileAppSection';
import { ReviewsSection } from '../components/ReviewsSection';
import { TrustedCompanies } from '../components/TrustedCompanies';
import { Layout } from '../Layout';
import { useGetSelectedCityOffersQuery } from '../Redux/services/cities.service';
import LoadingSpinner from '../components/LoadingSpinner';
import { useNavigate } from 'react-router-dom';

interface SuperSavingsPageProps {
    onBackClick: () => void;
    onHomeClick: () => void;
    onMelbourneClick: () => void;
    onPassesClick: () => void;
    onCheckoutClick: () => void;
    onSignInClick: () => void;
    onSignOutClick: () => void;
    onAttractionsClick: () => void;
    onBlogsClick: () => void;
    onHowItWorksClick: () => void;
    onFAQClick: () => void;
    onPrivacyPolicyClick: () => void;
    onAboutUsClick: () => void;
    onProfileClick: () => void;
    onCityCardsClick: () => void;
    onMagicItineraryClick: () => void;
    onPostCardsClick: () => void;
    onOffersClick: () => void;
    onSuperSavingsClick: () => void;
    onContactUsClick?: () => void;
    onEsimsClick?: () => void;
    onHotelDiscountsClick?: () => void;
    fromSource?: 'products' | 'passes';
    currentPage: string;
    user?: { email: string; name: string; } | null;
}

// Categories data for the Super Savings Categories section
const categoriesData = [
    {
        icon: Hotel,
        title: 'Luxury Hotels',
        description: 'Premium stays at unbeatable prices',
        savings: 'Up to 50% off',
        color: 'from-primary to-primary/80'
    },
    {
        icon: Plane,
        title: 'Travel Tours',
        description: 'Guided experiences worth your time',
        savings: 'Up to 45% off',
        color: 'from-primary to-primary/80'
    },
    {
        icon: MapPinned,
        title: 'Attractions',
        description: 'Must-see landmarks and experiences',
        savings: 'Up to 60% off',
        color: 'from-primary to-primary/80'
    },
    {
        icon: Building2,
        title: 'Shopping',
        description: 'Designer brands and local boutiques',
        savings: 'Up to 35% off',
        color: 'from-primary to-primary/80'
    },
    {
        icon: Gift,
        title: 'Wellness',
        description: 'Spa treatments and relaxation',
        savings: 'Up to 45% off',
        color: 'from-primary to-primary/80'
    }
];

export function SuperSavingsPage({
    onBackClick,
    onHomeClick,
    onMelbourneClick,
    onPassesClick,
    onCheckoutClick,
    onSignInClick,
    onSignOutClick,
    onAttractionsClick,
    onBlogsClick,
    onHowItWorksClick,
    onFAQClick,
    onPrivacyPolicyClick,
    onAboutUsClick,
    onProfileClick,
    onCityCardsClick,
    onMagicItineraryClick,
    onPostCardsClick,
    onOffersClick,
    onSuperSavingsClick,
    onContactUsClick,
    onEsimsClick,
    onHotelDiscountsClick,
    fromSource = 'products',
    currentPage,
    user
}: SuperSavingsPageProps) {

    const navigate = useNavigate();
    const [categoryId, setCategoryId] = useState(null)
    const [page, setPage] = useState(1)
    const [limit, setLimit] = useState(4)
    const cityId = localStorage.getItem("cityId")
    const { data, isLoading } = useGetSelectedCityOffersQuery({ cityId, categoryId, page, limit })

    // optional chaining ensures no crash if data is undefined
    const offers = data?.offers ?? [];
    const categories = data?.categories ?? [];

    const totalOffers = data?.paginationData.total ?? 0;
    const totalPages = Math.ceil(totalOffers / limit);

    const baseUrl = import.meta.env.VITE_BASE_URL;

    if (isLoading) {
        return (
            <LoadingSpinner />
        );
    }

    return (
        <Layout
            activeCity="Melbourne"
            onSignInClick={onSignInClick}
            onSignOutClick={onSignOutClick}
            user={user}
        >
            <div className="min-h-screen bg-background">

                {/* Hero Section */}
                <section className="relative pt-52 pb-20 overflow-hidden">
                    {/* Background gradient */}
                    <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-secondary/5 to-background">
                        <ImageWithFallback
                            src="https://images.unsplash.com/photo-1758787397603-bbd85bd06a2c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxNZWxib3VybmUlMjB0cmF2ZWwlMjBkZXN0aW5hdGlvbnxlbnwxfHx8fDE3NjI0MjQ3NTV8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                            alt="Melbourne Travel Destination"
                            className="w-full h-full object-cover opacity-20"
                        />
                        <div className="absolute inset-0 bg-gradient-to-b from-white/40 via-white/60 to-white/90"></div>
                    </div>

                    <div className="container mx-auto px-4 relative z-10">
                        <motion.div
                            className="max-w-4xl mx-auto text-center"
                            initial={{ opacity: 0, y: 30 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6 }}
                        >
                            <h1 className="font-poppins text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
                                <span className="font-light">Unlock</span>{' '}
                                <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                                    Super Savings
                                </span>
                            </h1>
                            <p className="font-poppins text-lg md:text-xl leading-relaxed text-gray-600 mb-8 max-w-2xl mx-auto">
                                Experience incredible discounts up to 65% off on premium experiences, luxury stays, and unforgettable attractions.
                            </p>
                            <Button
                                onClick={onSignInClick}
                                className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold"
                            >
                                Start Saving Now
                            </Button>
                        </motion.div>
                    </div>

                    {/* Decorative elements */}
                    <div className="absolute top-20 left-10 w-20 h-20 bg-primary/10 rounded-full blur-xl"></div>
                    <div className="absolute bottom-20 right-10 w-32 h-32 bg-secondary/10 rounded-full blur-xl"></div>
                </section>

                {/* Trusted By Companies Section */}
                <section className="py-12 bg-background">
                    <div className="container mx-auto px-4">
                        <div className="max-w-6xl mx-auto text-center">
                            <div className="mb-10">
                                <h2 className="font-poppins text-2xl md:text-3xl lg:text-4xl leading-tight mb-4">
                                    <span>Trusted by the </span>
                                    <span className="font-semibold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">world's best</span>
                                </h2>
                                <p className="font-poppins leading-relaxed text-muted-foreground max-w-2xl mx-auto">
                                    Join thousands of savvy travelers enjoying massive savings on premium experiences
                                </p>
                            </div>
                            <TrustedCompanies />
                        </div>
                    </div>
                </section>

                {/* Featured Super Savings Section */}
                <section className="py-20">
                    <div className="container mx-auto px-4">
                        <motion.div
                            className="text-center mb-12"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6 }}
                        >
                            <h2 className="font-poppins text-3xl md:text-4xl lg:text-5xl leading-tight mb-4">
                                <span className="font-light">Featured</span>{' '}
                                <span className="pr-2 font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                                    Super Savings
                                </span>
                            </h2>
                            <p className="font-poppins leading-relaxed text-gray-600 max-w-2xl mx-auto">
                                Check out our biggest discounts and start saving on premium experiences
                            </p>
                        </motion.div>

                        <div className="container mx-auto px-4 pt-51 pb-16">
                            <div className="flex gap-8">
                                {/* Left Sidebar - Filters */}
                                <div className="w-64 flex-shrink-0">
                                    <Card className="p-8 sticky top-48">
                                        <div className="space-y-6">
                                            {/* Search by header */}
                                            <div className="flex items-center gap-4">
                                                <div className="h-0 w-6 border-t-[3px] border-gray-800 rotate-90"></div>
                                                <h3 className="font-poppins font-medium text-gray-800">Search by</h3>
                                            </div>

                                            {/* Filter categories */}
                                            <div className="space-y-4">
                                                {categories.map((category: any) => (
                                                    <div key={category.id} className="flex items-center gap-3">
                                                        <Checkbox
                                                            id={category.id}
                                                            checked={categoryId === category.id}
                                                            onCheckedChange={(checked: boolean) => {
                                                                if (checked) {
                                                                    setCategoryId(category.id); // select this category
                                                                } else {
                                                                    setCategoryId(null); // unselect if unchecked
                                                                }
                                                            }}
                                                            className="border-gray-400"
                                                        />
                                                        <label
                                                            htmlFor={category.id}
                                                            className="font-poppins text-sm text-gray-700 cursor-pointer flex-1"
                                                        >
                                                            {category.categoryName} ({category.offerCount})
                                                        </label>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </Card>
                                </div>

                                {/* Main Content */}
                                <div className="flex-1">
                                    {/* Breadcrumb */}
                                    <div className="mb-8">
                                        <p className="font-poppins text-sm text-gray-800">
                                            {fromSource === 'passes' ? (
                                                <>
                                                    <span>My Profile{'>'}My passes{'>'}</span>
                                                    <span className="font-semibold">Super Savings</span>
                                                </>
                                            ) : (
                                                <>
                                                    <span>Our Products{'>'}</span>
                                                    <span className="font-semibold">Super Savings</span>
                                                </>
                                            )}
                                        </p>
                                    </div>

                                    {/* Header Section */}
                                    <div className="mb-8">
                                        <h1 className="font-poppins md:text-5xl font-medium text-gray-800 leading-tight text-[24px]">
                                            Super Savings
                                        </h1>
                                        <p className="font-poppins text-gray-600 mt-2">
                                            Exclusive discounts up to 65% off on premium experiences
                                        </p>
                                    </div>

                                    {/* Offers Grid */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-16">
                                        {offers.map((offer: any, index: number) => (
                                            <motion.div
                                                key={offer.id}
                                                initial={{ opacity: 0, y: 20 }}
                                                animate={{ opacity: 1, y: 0 }}
                                                transition={{ duration: 0.5, delay: index * 0.1 }}
                                            >
                                                <Card className="bg-white border border-gray-200 rounded-xl overflow-hidden h-full hover:shadow-lg transition-shadow duration-300 relative cursor-pointer"
                                                 onClick={()=> navigate(`/super-savings/${offer.id}`)}>
                                                    {/* Image */}
                                                    <div className="relative h-52 bg-gray-300">
                                                        <ImageWithFallback
                                                            src={`${baseUrl}/${offer.websiteBannerImage}`}
                                                            alt={offer.title}
                                                            className="w-full h-full object-cover"
                                                        />
                                                        {/* <Button className="absolute bottom-4 right-3 bg-white rounded-full shadow-lg w-9 h-9 p-0 hover:bg-gray-100 transition-colors">
                                                            <Heart className="w-4 h-4 text-gray-800" />
                                                        </Button> */}

                                                        {/* Discount Badge */}
                                                        <div className="absolute top-4 left-4 bg-primary text-white px-3 py-1.5 rounded-lg">
                                                            <span className="font-poppins font-semibold text-sm">{offer.offerCode}</span>
                                                        </div>
                                                    </div>

                                                    <CardContent className="space-y-4 px-4 py-4">
                                                        {/* Business Name */}
                                                        <div className="flex items-center gap-2">
                                                            <div className="w-4 h-4 bg-gray-300 rounded"></div>
                                                            <span className="font-poppins text-sm text-gray-500">{offer.partnerName}</span>
                                                        </div>

                                                        {/* Title */}
                                                        <h3 className="font-poppins font-medium text-gray-900 leading-relaxed min-h-[48px]">
                                                            {offer.description}
                                                        </h3>

                                                        {/* Saved Amount Display */}
                                                        <div className="bg-gradient-to-r from-primary/10 to-secondary/10 h-12 flex items-center justify-center rounded-lg">
                                                            <div className="flex items-center gap-2">
                                                                {/* <Percent className="w-4 h-4 text-primary" /> */}
                                                                <span className="font-poppins font-semibold text-primary">
                                                                    {offer.title}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </CardContent>
                                                </Card>
                                            </motion.div>
                                        ))}
                                    </div>

                                    {/* Minimal Pagination */}
                                    <div className="flex justify-center py-8">
                                        <div className="flex items-center gap-2">
                                            {/* Previous button */}
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                className="w-8 h-8 p-0 font-poppins"
                                                disabled={page === 1}
                                                onClick={() => setPage(prev => Math.max(prev - 1, 1))}
                                            >
                                                <ChevronRight className="w-4 h-4 rotate-180" />
                                            </Button>

                                            {/* Page numbers */}
                                            <div className="flex items-center gap-1">
                                                {Array.from({ length: totalPages }, (_, i) => i + 1).map(p => (
                                                    <Button
                                                        key={p}
                                                        variant={page === p ? "default" : "ghost"}
                                                        size="sm"
                                                        className={`w-8 h-8 p-0 font-poppins ${page === p ? 'bg-primary hover:bg-primary/90' : ''}`}
                                                        onClick={() => setPage(p)}
                                                    >
                                                        {p}
                                                    </Button>
                                                ))}
                                            </div>

                                            {/* Next button */}
                                            <Button
                                                variant="outline"
                                                size="sm"
                                                className="w-8 h-8 p-0 font-poppins"
                                                disabled={page === totalPages}
                                                onClick={() => setPage(prev => Math.min(prev + 1, totalPages))}
                                            >
                                                <ChevronRight className="w-4 h-4" />
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="text-center">
                            <Button
                                onClick={onSignInClick}
                                variant="outline"
                                className="font-poppins font-medium border-primary text-primary hover:bg-primary hover:text-white"
                            >
                                View All Super Savings
                            </Button>
                        </div>
                    </div>
                </section>

                {/* How It Works Section */}
                <section className="py-24 relative overflow-hidden bg-[#FFF5F5]/50">
                    {/* Background decorative elements */}
                    <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[100px] pointer-events-none -mr-40 -mt-40"></div>
                    <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-primary/5 rounded-full blur-[80px] pointer-events-none -ml-20 -mb-20"></div>

                    <div className="container mx-auto px-4 relative z-10">
                        <motion.div
                            className="text-center mb-20"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6 }}
                        >
                            <div className="flex items-center justify-center gap-3 mb-4">
                                <div className="h-px w-8 bg-primary"></div>
                                <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Simple Process</span>
                                <div className="h-px w-8 bg-primary"></div>
                            </div>
                            <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-6">
                                Start Saving in <span className="text-primary italic">Minutes</span>
                            </h2>
                            <p className="font-poppins text-lg text-gray-500 font-light max-w-xl mx-auto leading-relaxed">
                                Your journey to smarter travel and bigger savings begins with three simple steps.
                            </p>
                        </motion.div>

                        <div className="relative max-w-6xl mx-auto">
                            {/* Connecting line for desktop */}
                            <div className="hidden md:block absolute top-12 left-[16%] right-[16%] h-0.5 border-t-2 border-dashed border-primary/20 z-0"></div>

                            <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8">
                                {[
                                    {
                                        step: '01',
                                        title: 'Unlock Access',
                                        description: 'Get your CityCards pass to instantly activate membership perks.',
                                        icon: MapPinned
                                    },
                                    {
                                        step: '02',
                                        title: 'Discover Deals',
                                        description: 'Browse exclusive offers on hotels, flights, and experiences.',
                                        icon: Search
                                    },
                                    {
                                        step: '03',
                                        title: 'Enjoy Savings',
                                        description: 'Redeem discounts instantly and watch your travel budget grow.',
                                        icon: Percent
                                    }
                                ].map((item, index) => (
                                    <motion.div
                                        key={item.step}
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ duration: 0.5, delay: index * 0.2 }}
                                        className="relative z-10 group"
                                    >
                                        <div className="flex flex-col items-center text-center">
                                            {/* Icon Container */}
                                            <div className="relative mb-8">
                                                <div className="w-24 h-24 rounded-[2rem] bg-white flex items-center justify-center shadow-[0_8px_30px_rgb(0,0,0,0.06)] group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300 border border-primary/10 relative overflow-hidden">
                                                    <div className="absolute inset-0 bg-primary/5 group-hover:bg-primary/10 transition-colors duration-300"></div>
                                                    <item.icon className="w-10 h-10 text-primary relative z-10" />
                                                </div>
                                                <div className="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold font-poppins text-sm border-4 border-white shadow-md">
                                                    {index + 1}
                                                </div>
                                            </div>

                                            <h3 className="font-merchant text-2xl text-gray-900 mb-3 group-hover:text-primary transition-colors">
                                                {item.title}
                                            </h3>
                                            <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-xs">
                                                {item.description}
                                            </p>
                                        </div>
                                    </motion.div>
                                ))}
                            </div>
                        </div>


                    </div>
                </section>

                {/* Categories Section */}
                <section className="py-24 bg-gray-50/50 relative overflow-hidden">
                    {/* Abstract Travel Patterns */}
                    <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-gradient-to-bl from-primary/5 via-secondary/5 to-transparent rounded-full blur-3xl pointer-events-none -mr-40 -mt-40"></div>

                    <div className="container mx-auto px-4 relative z-10">
                        {/* Section Header */}
                        <div className="flex flex-col md:flex-row items-end justify-between mb-12 gap-6">
                            <motion.div
                                className="max-w-2xl"
                                initial={{ opacity: 0, x: -20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.6 }}
                            >
                                <div className="flex items-center gap-2 mb-4">
                                    <div className="h-px w-8 bg-primary"></div>
                                    <span className="text-primary font-semibold tracking-widest uppercase text-xs font-poppins">Explore Collections</span>
                                </div>
                                <h2 className="font-merchant text-4xl md:text-5xl lg:text-6xl text-gray-900 mb-4 leading-tight">
                                    Curated for the <span className="text-primary italic">Modern Traveler</span>
                                </h2>
                                <p className="font-poppins text-lg text-gray-500 font-light max-w-lg leading-relaxed">
                                    Discover exclusive savings across our most sought-after travel categories.
                                </p>
                            </motion.div>

                            <motion.div
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.6 }}
                                className="hidden md:block"
                            >
                                <Button
                                    onClick={onSignInClick}
                                    variant="ghost"
                                    className="group gap-2 text-gray-600 hover:text-primary font-poppins text-lg"
                                >
                                    View All Categories
                                    <span className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-all duration-300">
                                        <ChevronRight className="w-4 h-4" />
                                    </span>
                                </Button>
                            </motion.div>
                        </div>

                        {/* Bento Grid Layout */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                            {categoriesData.map((category, index) => (
                                <motion.div
                                    key={category.title}
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ duration: 0.4, delay: index * 0.1 }}
                                    className={`${index === 0 ? 'md:col-span-2' : ''} group`}
                                >
                                    <div
                                        onClick={onSignInClick}
                                        className={`
                      relative h-full bg-white rounded-[2rem] p-8 border border-gray-100 
                      shadow-[0_4px_20px_-4px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)] 
                      transition-all duration-500 cursor-pointer overflow-hidden flex flex-col justify-between
                      group-hover:border-primary/20
                    `}
                                    >
                                        {/* Background Gradient Hover */}
                                        <div className={`absolute inset-0 bg-gradient-to-br ${category.color} opacity-0 group-hover:opacity-[0.03] transition-opacity duration-500`}></div>

                                        {/* Large Watermark Icon for visual depth */}
                                        <category.icon className="absolute -bottom-8 -right-8 w-48 h-48 text-gray-50 group-hover:text-primary/5 transition-colors duration-500 -rotate-12" />

                                        <div className="relative z-10">
                                            <div className="flex justify-between items-start mb-6">
                                                <div className={`
                           w-14 h-14 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300
                           ${index === 0 ? 'bg-primary text-white shadow-primary/20' : 'bg-gray-50 text-gray-600 group-hover:bg-primary group-hover:text-white'}
                         `}>
                                                    <category.icon className="w-7 h-7" />
                                                </div>
                                                <Badge className="bg-emerald-50 text-emerald-600 border-emerald-100 font-poppins font-medium px-3 py-1.5">
                                                    {category.savings}
                                                </Badge>
                                            </div>

                                            <h3 className={`font-merchant text-gray-900 mb-2 group-hover:text-primary transition-colors ${index === 0 ? 'text-4xl' : 'text-2xl'}`}>
                                                {category.title}
                                            </h3>
                                            <p className="font-poppins text-gray-500 font-light leading-relaxed max-w-md">
                                                {category.description}
                                            </p>
                                        </div>

                                        <div className="relative z-10 mt-8 flex items-center gap-2 text-primary font-poppins font-medium text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
                                            <span>Explore Deals</span>
                                            <ArrowLeft className="w-4 h-4 rotate-180" />
                                        </div>
                                    </div>
                                </motion.div>
                            ))}
                        </div>

                        {/* Mobile View All Button */}
                        <div className="mt-8 md:hidden text-center">
                            <Button
                                onClick={onSignInClick}
                                className="w-full bg-primary hover:bg-primary/90 text-white font-poppins font-semibold py-6 rounded-xl shadow-lg shadow-primary/20"
                            >
                                Browse All Categories
                            </Button>
                        </div>
                    </div>
                </section>

                {/* Access Your CityCards Section */}
                <section className="py-20 bg-muted/30">
                    <MobileAppSection />
                </section>

            </div>
        </Layout>
    );


}
