import React from 'react';
import { motion } from 'motion/react';
import { ArrowLeft, Camera, Edit3, Upload, Heart, Star, Download, Share2 } from 'lucide-react';
import { Button } from '../components/ui/button';
import { Card, CardContent } from '../components/ui/card';
import { Badge } from '../components/ui/badge';
import Navbar from '../components/Navbar';
// import SubNavbar from './SubNavbar';
import { Footer } from '../components/Footer';
import { MobileAppSection } from '../components/MobileAppSection';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { CustomPostcards } from '../components/CustomPostcards';
import { HowItWorks } from '../components/HowItWorks';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { Layout } from '../Layout';
// import front from '../assets/front.jpg'


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

interface PostCardsPageProps {
  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;
}

export function PostCardsPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: PostCardsPageProps) {
  return (
    <div className="min-h-screen bg-background">
      {/* Navbar */}
      <Layout
        activeCity="Landingpage"
        onSignInClick={onSignInClick}
        onSignOutClick={onSignOutClick}
        user={user}
      >

        {/* 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"></div>

          <div className="flex mx-auto items-center px-4 relative z-10">
            <motion.div
              className="max-w-2xl mx-auto text-center"
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <h1 className="font-merchant text-4xl md:text-5xl lg:text-6xl leading-tight mb-6">
                <span className="font-light">Create Beautiful</span>{' '}
                <span className="font-bold inline-block italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent pr-2">
                  Custom Postcards
                </span>
              </h1>
              <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 mb-8 max-w-2xl mx-auto">
                Transform your travel memories into stunning, personalized postcards with authentic handwritten messages.
                Share your journey in a way that feels truly personal and meaningful.
              </p>
              {/* <Button 
              onClick={onCheckoutClick}
              className="bg-primary hover:bg-primary/90 text-white px-8 py-6 font-poppins font-semibold text-lg"
            >
              Start Creating Postcards
            </Button> */}
            </motion.div>
            {/* < img src={front} alt='Postcard image' /> */}
          </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>

        {/* How It Works Section */}
        <HowItWorks />

        {/* Reuse CustomPostcards Component */}
        <CustomPostcards />

        {/* Features Section */}


        {/* Gallery Section */}
        <section className="py-16 bg-gradient-to-br from-amber-50 to-orange-50">
          <div className="container mx-auto px-4">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-center mb-12"
            >
                <h2 className="text-4xl lg:text-5xl xl:text-6xl mb-6">
            <span className="font-light">Postcard</span>{' '}
            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic pr-2">
              Gallery
            </span>{' '}

          </h2>
              <p className="text-lg text-gray-600 font-poppins max-w-2xl mx-auto">
                Get inspired by beautiful postcards created by our community of travelers
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {[
                {
                  image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
                  title: 'Tropical Paradise',
                  message: 'Greetings from paradise! The beaches here are absolutely breathtaking...',
                  location: 'Maldives'
                },
                {
                  image: 'https://images.unsplash.com/photo-1499856871958-5b9627545d1a?w=400&h=600&fit=crop',
                  title: 'City Adventures',
                  message: 'Having the most amazing time exploring this incredible city...',
                  location: 'Paris, France'
                },
                {
                  image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
                  title: 'Mountain Views',
                  message: 'The views from up here are simply unbelievable. Wish you were here...',
                  location: 'Swiss Alps'
                },
                {
                  image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
                  title: 'Cultural Journey',
                  message: 'Immersing myself in the rich culture and history of this amazing place...',
                  location: 'Kyoto, Japan'
                },
                {
                  image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
                  title: 'Safari Adventure',
                  message: 'Just saw the most incredible wildlife! This experience is unforgettable...',
                  location: 'Kenya, Africa'
                },
                {
                  image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop',
                  title: 'Island Escape',
                  message: 'Living the island life and loving every moment of this peaceful retreat...',
                  location: 'Santorini, Greece'
                }
              ].map((postcard, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 0.3 + index * 0.1 }}
                >
                  {/* <Card className="hover:shadow-xl transition-all rounded-none duration-300 transform hover:-translate-y-2"> */}
                    {/* <CardContent className="p-0"> */}
                      <div className="relative">
                        <ImageWithFallback
                          src={postcard.image}
                          alt={postcard.title}
                          className="w-full h-78 object-cover"
                        />
                      </div>
                      <div className="p-0">
                        <Badge className="p-0 bg-inherit text-gray-700">
                          {postcard.location}
                        </Badge>
                        <h3 className="font-merchant text-left font-bold text-lg mb-2">{postcard.title}</h3>
                        <p className="font-poppins text-sm">"{postcard.message}"</p>
                      </div>
                    {/* </CardContent>
                  </Card> */}
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* Customer Reviews */}
        <EnhancedTestimonials />

        {/* Mobile App Section */}
        <MobileAppSection />

      </Layout>
    </div>
  );
}