import { useState } from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Calendar, User, Clock, Share2, BookmarkPlus, ThumbsUp, MessageSquare, Tag, MapPin } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Badge } from '../components/ui/badge';
import { Card, CardContent } from '../components/ui/card';
import { Separator } from '../components/ui/separator';
import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';

interface User {
  email: string;
  name: string;
}

interface BlogDetailsPageProps {
  blogId: string;
  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;
  onContactUsClick?: () => void;
  onEsimsClick?: () => void;
  onHotelDiscountsClick?: () => void;
  currentPage: string;
  user: User | null;
}

// Mock blog data - in a real app this would come from an API
const getBlogById = (id: string) => {
  const blogs = {
    '1': {
      id: '1',
      title: 'Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour',
      content: `
        <p>The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach."</p>
        
        <p>Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.</p>

        <h2>Tour Overview</h2>
        
        <p>The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.</p>

        <h3>What's included</h3>
        
        <ul>
          <li>Beverages, drinking water, morning tea and buffet lunch</li>
          <li>Local taxes</li>
          <li>Hotel pickup and drop-off by air-conditioned minivan</li>
          <li>Insurance Transfer to a private pier</li>
          <li>Soft drinks</li>
          <li>Tour Guide</li>
        </ul>

        <h3>Location on map</h3>
        
        <p>Explore the stunning locations of the Phi Phi Islands, including Maya Bay, Bamboo Island, and Monkey Beach. Each location offers unique experiences from snorkeling to beach relaxation.</p>
      `,
      author: 'Sarah Johnson',
      date: 'Dec 15, 2024',
      readTime: '5 min read',
      category: 'Travel Guide',
      image: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080',
      gallery: [
        'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080',
        'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080',
        'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080',
        'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080'
      ],
      tags: ['Adventure', 'Islands', 'Snorkeling', 'Marine Life'],
      likes: 45,
      comments: 12
    },
    '2': {
      id: '2',
      title: '5 best cafe spots in Melbourne',
      content: `
        <p>Melbourne's coffee culture is legendary, and for good reason. The city is home to some of the world's most innovative cafes, where baristas are treated as artists and coffee is considered a craft.</p>
        
        <p>From hidden laneway gems to bustling neighborhood favorites, here are our top picks for the best cafe experiences in Melbourne.</p>

        <h2>The Coffee Scene</h2>
        
        <p>Melbourne's coffee culture began in the 1950s with Italian and Greek immigrants who brought their espresso traditions to Australia. Today, the city boasts more cafes per capita than any other city in the world.</p>

        <h3>Our Top Picks</h3>
        
        <ul>
          <li>Degraves Espresso Bar - A laneway institution</li>
          <li>Pellegrini's Espresso Bar - Old-school Italian charm</li>
          <li>Brother Baba Budan - Single origin specialists</li>
          <li>Patricia Coffee Brewers - Modern coffee artistry</li>
          <li>Axil Coffee Roasters - Local roasting expertise</li>
        </ul>

        <h3>Coffee Culture Tips</h3>
        
        <p>When visiting Melbourne's cafes, remember that coffee is taken seriously here. Don't be surprised if your barista asks detailed questions about your preferences - they're helping you find your perfect cup.</p>
      `,
      author: 'James Miller',
      date: 'Dec 12, 2024',
      readTime: '4 min read',
      category: 'Food & Drink',
      image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb2ZmZWUlMjBzaG9wJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NjEyNDA5M3ww&ixlib=rb-4.1.0&q=80&w=1080',
      gallery: [
        'https://images.unsplash.com/photo-1554118811-1e0d58224f24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb2ZmZWUlMjBzaG9wJTIwbWVsYm91cm5lfGVufDF8fHx8MTc1NjEyNDA5M3ww&ixlib=rb-4.1.0&q=80&w=1080',
        'https://images.unsplash.com/photo-1679731980101-503d93bbec27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjb2ZmZWUlMjBsYW5ld2F5c3xlbnwxfHx8fDE3NTYxMjQwNzN8MA&ixlib=rb-4.1.0&q=80&w=1080'
      ],
      tags: ['Coffee', 'Melbourne', 'Food', 'Culture'],
      likes: 32,
      comments: 8
    }
  };
  
  return blogs[id as keyof typeof blogs] || blogs['1'];
};

export function BlogDetailsPage({
  blogId,
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: BlogDetailsPageProps) {
  const [isLiked, setIsLiked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);

  const blog = getBlogById(blogId);

  return (
    <div className="min-h-screen bg-[#f8f8f8]">
      <Navbar
        activeCity="Melbourne"
        onCityChange={(city) => {
          if (city === 'Melbourne') {
            onMelbourneClick();
          }
        }}
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onHomeClick={onHomeClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        currentPage="blogs"
        isUserSignedIn={!!user}
        user={user}
      />

      <div className="container mx-auto px-4 pt-40 pb-16 max-w-6xl">
        {/* Back Button */}
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Button 
            variant="ghost" 
            onClick={onBackClick}
            className="font-poppins font-medium text-base text-gray-600 hover:text-primary transition-colors duration-200"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Blogs
          </Button>
        </motion.div>

        {/* Blog Header */}
        <motion.div 
          className="mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <div className="flex flex-wrap gap-3 mb-6">
            <Badge variant="default" className="bg-primary text-white px-4 py-2 rounded-full">
              {blog.category}
            </Badge>
            {blog.tags.map((tag, index) => (
              <Badge 
                key={index}
                variant="secondary" 
                className="bg-primary/10 text-primary border border-primary/20 px-4 py-2 rounded-full"
              >
                {tag}
              </Badge>
            ))}
          </div>
          
          <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
            <span className="font-light">Discover the</span>{' '}
            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Ultimate
            </span>{' '}
            <span className="font-normal text-[#2d3134]">{blog.title.split(' ').slice(-3).join(' ')}</span>
          </h1>

          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-6 text-gray-600">
              <div className="flex items-center gap-2">
                <User className="w-4 h-4" />
                <span className="font-poppins text-base font-normal">{blog.author}</span>
              </div>
              <div className="flex items-center gap-2">
                <Calendar className="w-4 h-4" />
                <span className="font-poppins text-base font-normal">{blog.date}</span>
              </div>
              <div className="flex items-center gap-2">
                <Clock className="w-4 h-4" />
                <span className="font-poppins text-base font-normal">{blog.readTime}</span>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setIsLiked(!isLiked)}
                className={`flex items-center gap-2 ${isLiked ? 'text-red-500' : 'text-gray-600'}`}
              >
                <ThumbsUp className={`w-4 h-4 ${isLiked ? 'fill-current' : ''}`} />
                <span>{blog.likes + (isLiked ? 1 : 0)}</span>
              </Button>
              
              <Button
                variant="ghost"
                size="sm"
                className="flex items-center gap-2 text-gray-600"
              >
                <MessageSquare className="w-4 h-4" />
                <span>{blog.comments}</span>
              </Button>

              <Button
                variant="ghost"
                size="sm"
                onClick={() => setIsBookmarked(!isBookmarked)}
                className={`${isBookmarked ? 'text-primary' : 'text-gray-600'}`}
              >
                <BookmarkPlus className={`w-4 h-4 ${isBookmarked ? 'fill-current' : ''}`} />
              </Button>

              <Button
                variant="ghost"
                size="sm"
                className="text-gray-600"
              >
                <Share2 className="w-4 h-4" />
              </Button>
            </div>
          </div>
        </motion.div>

        {/* Image Gallery - Masonry Layout */}
        <motion.div 
          className="grid grid-cols-4 grid-rows-2 gap-4 h-[500px] mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          {/* Large featured image - Left side spanning 2 rows */}
          <div className="col-span-2 row-span-2 rounded-lg overflow-hidden">
            <ImageWithFallback
              src={blog.image}
              alt="Main blog image"
              className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
            />
          </div>

          {/* Top right wide image */}
          <div className="col-span-2 row-span-1 rounded-lg overflow-hidden">
            <ImageWithFallback
              src={blog.gallery[0]}
              alt="Gallery image 1"
              className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
            />
          </div>

          {/* Bottom right - First small image */}
          <div className="col-span-1 row-span-1 rounded-lg overflow-hidden">
            <ImageWithFallback
              src={blog.gallery[1]}
              alt="Gallery image 2"
              className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
            />
          </div>

          {/* Bottom right - Second small image */}
          <div className="col-span-1 row-span-1 rounded-lg overflow-hidden">
            <ImageWithFallback
              src="https://images.unsplash.com/photo-1669131196140-49591336b13e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjYWZlJTIwaW50ZXJpb3IlMjByZXN0YXVyYW50fGVufDF8fHx8MTc1OTIzNDkwNXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
              alt="Cafe interior"
              className="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
            />
          </div>
        </motion.div>

        {/* Main Content */}
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.3 }}
        >
          {/* Tour Overview Section */}
          <div className="mb-16">
            <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-8">
              <span className="font-light">Tour</span>{' '}
              <span className="font-semibold text-[#2d3134]">Overview</span>
            </h2>
            
            {/* Tour Details Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
              <div className="bg-gray-100 p-6 rounded-lg text-center">
                <div className="w-12 h-12 bg-gray-300 rounded-lg mx-auto mb-3 flex items-center justify-center">
                  <Clock className="w-6 h-6 text-gray-600" />
                </div>
                <div className="font-poppins text-xs text-gray-500 uppercase tracking-wide mb-1 font-light">Duration</div>
                <div className="font-poppins text-base font-medium text-gray-900">8 Hours</div>
              </div>

              <div className="bg-gray-100 p-6 rounded-lg text-center">
                <div className="w-12 h-12 bg-gray-300 rounded-lg mx-auto mb-3 flex items-center justify-center">
                  <User className="w-6 h-6 text-gray-600" />
                </div>
                <div className="font-poppins text-xs text-gray-500 uppercase tracking-wide mb-1 font-light">Group Size</div>
                <div className="font-poppins text-base font-medium text-gray-900">12 People</div>
              </div>

              <div className="bg-gray-100 p-6 rounded-lg text-center">
                <div className="w-12 h-12 bg-gray-300 rounded-lg mx-auto mb-3 flex items-center justify-center">
                  <Tag className="w-6 h-6 text-gray-600" />
                </div>
                <div className="font-poppins text-xs text-gray-500 uppercase tracking-wide mb-1 font-light">Age Range</div>
                <div className="font-poppins text-base font-medium text-gray-900">5-99 yrs</div>
              </div>

              <div className="bg-gray-100 p-6 rounded-lg text-center">
                <div className="w-12 h-12 bg-gray-300 rounded-lg mx-auto mb-3 flex items-center justify-center">
                  <MapPin className="w-6 h-6 text-gray-600" />
                </div>
                <div className="font-poppins text-xs text-gray-500 uppercase tracking-wide mb-1 font-light">Languages</div>
                <div className="font-poppins text-base font-medium text-gray-900">English</div>
              </div>
            </div>

            <p className="font-poppins text-base leading-relaxed font-normal text-gray-700">
              The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.
            </p>
          </div>

          {/* Tour Highlights Section */}
          <div className="mb-16">
            <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-8">
              <span className="font-normal">Tour</span>{' '}
              <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Highlights
              </span>
            </h2>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
                <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Visit the famous Maya Bay, featured in the movie "The Beach"</span>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
                <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Snorkel in the crystal-clear waters of Bamboo Island</span>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
                <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Swim in the stunning Pileh Lagoon surrounded by limestone cliffs</span>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
                <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Observe playful monkeys at Monkey Beach</span>
              </li>
              <li className="flex items-start gap-3">
                <div className="w-2 h-2 bg-gray-400 rounded-full mt-2 flex-shrink-0"></div>
                <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Enjoy a delicious buffet lunch with sea view</span>
              </li>
            </ul>
          </div>

          {/* What's Included Section */}
          <div className="mb-16">
            <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-8 font-semibold text-[#2d3134]">
              What's Included
            </h2>
            
            <div className="grid md:grid-cols-2 gap-6">
              <div>
                <ul className="space-y-3">
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Beverages, drinking water, morning tea and buffet lunch</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Local taxes</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Hotel pickup and drop-off by air-conditioned minivan</span>
                  </li>
                </ul>
              </div>
              
              <div>
                <ul className="space-y-3">
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Insurance Transfer to a private pier</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Soft drinks</span>
                  </li>
                  <li className="flex items-center gap-3">
                    <div className="w-5 h-5 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                      <span className="font-poppins text-white text-xs font-medium">✓</span>
                    </div>
                    <span className="font-poppins text-base leading-relaxed font-normal text-gray-700">Tour Guide</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* Location on Map Section */}
          <div className="mb-16">
            <h2 className="font-merchant text-2xl md:text-3xl lg:text-4xl leading-tight mb-8">
              <span className="font-normal">Location on</span>{' '}
              <span className="font-semibold text-[#2d3134]">Map</span>
            </h2>
            <div className="h-96 rounded-lg overflow-hidden shadow-lg">
              <ImageWithFallback
                src="https://images.unsplash.com/photo-1582653402347-a59d799cbb0e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtYXAlMjBhc2lhJTIwdGhhaWxhbmQlMjBsb2NhdGlvbnxlbnwxfHx8fDE3NTg5OTY4MTN8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                alt="Location map showing Phi Phi Islands"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </motion.div>
      </div>

      <Footer
        onHomeClick={onHomeClick}
        onAboutUsClick={onAboutUsClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onBlogsClick={onBlogsClick}
        onContactUsClick={onContactUsClick}
      />
    </div>
  );
}