import { useState, useEffect } from 'react';
import { motion, useScroll, useTransform } from 'motion/react';
import { ArrowLeft } from 'lucide-react';
import Navbar from '../components/Navbar';
// import { CitySubmenu } from './CitySubmenu';
import { Footer } from '../components/Footer';
import { MobileAppSection } from '../components/MobileAppSection';
import { WhyChooseCityCards } from '../components/WhyChooseCityCards';
import { EnhancedTestimonials } from '../components/EnhancedTestimonials';
import { ReviewsSection } from '../components/ReviewsSection';

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

interface PrivacyPolicyPageProps {
  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 PrivacyPolicyPage({
  onBackClick,
  onHomeClick,
  onMelbourneClick,
  onPassesClick,
  onCheckoutClick,
  onSignInClick,
  onSignOutClick,
  onAttractionsClick,
  onBlogsClick,
  onHowItWorksClick,
  onFAQClick,
  onPrivacyPolicyClick,
  onAboutUsClick,
  onProfileClick,
  onCityCardsClick,
  onMagicItineraryClick,
  onPostCardsClick,
  onOffersClick,
  onContactUsClick,
  onEsimsClick,
  onHotelDiscountsClick,
  currentPage,
  user
}: PrivacyPolicyPageProps) {
  const { scrollY } = useScroll();
  const headerOpacity = useTransform(scrollY, [0, 200], [1, 0.3]);
  const headerY = useTransform(scrollY, [0, 200], [0, -50]);

  return (
    <div className="min-h-screen bg-background">
      {/* Navigation */}
      <Navbar 
        activeCity="Melbourne"
        onCityChange={() => {}}
        onHomeClick={onHomeClick}
        onSignInClick={onSignInClick}
        onPassesClick={onPassesClick}
        onCheckoutClick={onCheckoutClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onAboutUsClick={onAboutUsClick}
        onProfileClick={onProfileClick}
        onCityCardsClick={onCityCardsClick}
        onMagicItineraryClick={onMagicItineraryClick}
        onPostCardsClick={onPostCardsClick}
        onOffersClick={onOffersClick}
        currentPage={currentPage}
        isUserSignedIn={!!user}
        user={user}
      />
      
      {/* <CitySubmenu 
        currentPage={currentPage}
        onClose={() => {}}
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onAttractionsClick={onAttractionsClick}
        onPassesClick={onPassesClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
      /> */}

      <div className="container mx-auto px-4 pt-52 pb-12 relative z-10">
        {/* Page Header */}
        <motion.div 
          className="text-center mb-16"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="font-merchant font-light text-4xl md:text-5xl lg:text-6xl mb-4">
            Privacy{' '}
            <span className="font-bold italic bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              Policy
            </span>
          </h1>
          <p className="font-poppins text-xl leading-relaxed font-normal text-gray-600 max-w-3xl mx-auto">
            Learn how we collect, use, and protect your personal information
          </p>
        </motion.div>

        {/* Privacy Policy Content */}
        <div className="max-w-6xl mx-auto space-y-16">
            
            {/* Section 1: Data Protection */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                1. DATA PROTECTION, CONTROLLER AND DATA PRIVACY OFFICER
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <p className="text-muted-foreground leading-relaxed">
                  We would like to inform you about how we collect personal data when you use our website.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  Personal data is any data which relates to you personally, such as your name, address, e-mail 
                  addresses, and user behavior.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  The controller responsible for processing your personal data through this website is
                </p>
                
                <div className="text-muted-foreground space-y-1">
                  <p>CityCards Australia Pty Ltd</p>
                  <p>Level 15, 333 Collins Street</p>
                  <p>Melbourne VIC 3000</p>
                  <p>Australia</p>
                  <p className="text-primary">hello@citycards.com.au</p>
                  <p>e-mail: <span className="text-primary">privacy@citycards.com.au</span></p>
                </div>
                
                <p className="text-muted-foreground leading-relaxed">
                  You can contact our data privacy officer using the email address{' '}
                  <span className="text-primary">privacy@citycards.com.au</span> or our postal address, 
                  with the addition of "The Data Privacy Officer".
                </p>
              </div>
            </motion.section>

            {/* Section 2: Cookies */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.1 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                2. COOKIES
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <div className="bg-primary/5 rounded-xl p-6 border border-primary/10">
                  <h4 className="text-lg font-medium text-foreground mb-4">Change cookie settings</h4>
                  <p className="text-muted-foreground text-sm">
                    You can manage your cookie preferences at any time through your browser settings.
                  </p>
                </div>
                
                <p className="text-muted-foreground leading-relaxed">
                  To make our website easier to use, we use functional cookies, in which we e.g. store your language 
                  settings. Using functional cookies represents a legitimate interest on our part. The legal basis of this 
                  is also Art. 6, Par. 1 lit. f GDPR.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  Cookies are small text files which are copied onto your hard drive and deleted again automatically 
                  according to the settings in your browser or after a defined period. Cookies cannot execute any 
                  programs or place viruses on your computer. They serve to make the website more user-friendly and 
                  effective as a whole.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  You can set your browser at any time to permit or exclude the use of cookies, or to ask for your 
                  confirmation before using them, and to delete them automatically after each session. If you do 
                  not allow cookies, it may be that not all the functions of our website are available to you.
                </p>
              </div>
            </motion.section>

            {/* Section 3: Data Transfer */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                3. INFORMATION ON DATA TRANSFER TO THE USA AND OTHER NON-EU COUNTRIES
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <p className="text-muted-foreground leading-relaxed">
                  Among other things, we use tools of companies domiciled in the United States or other from a data 
                  protection perspective non-secure non-EU countries.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  If these tools are active, your personal data may potentially be transferred to these non-EU countries 
                  and may be processed there. We must point out that in these countries, a data protection level that is 
                  comparable to that in the EU cannot be guaranteed. For instance, U.S. enterprises are under a mandate 
                  to release personal data to the security agencies and you as the data subject do not have any litigation 
                  options to defend yourself in court. Hence, it cannot be ruled out that U.S. agencies (e.g., the Secret 
                  Service) may process, analyze, and permanently archive your personal data for surveillance purposes. 
                  We have no control over these processing activities.
                </p>
              </div>
            </motion.section>

            {/* Section 4: Data Collection */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.3 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                4. DATA COLLECTION ON OUR WEBSITE
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <p className="text-muted-foreground leading-relaxed">
                  When you visit our website, we collect certain information automatically as part of the website's 
                  basic functionality. This includes your IP address, browser type, operating system, referring website, 
                  and the date and time of your visit.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  We also collect information that you provide to us directly, such as when you create an account, 
                  make a purchase, or contact us with questions or feedback. This may include your name, email 
                  address, phone number, payment information, and any other information you choose to provide.
                </p>
              </div>
            </motion.section>

            {/* Section 5: Your Rights */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.4 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                5. YOUR RIGHTS
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <p className="text-muted-foreground leading-relaxed">
                  Under data protection law, you have the following rights in relation to your personal data:
                </p>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
                  <div className="bg-muted/30 rounded-lg p-4">
                    <h4 className="font-medium text-foreground mb-2">Right of Access</h4>
                    <p className="text-sm text-muted-foreground">
                      You can request information about the personal data we hold about you.
                    </p>
                  </div>
                  
                  <div className="bg-muted/30 rounded-lg p-4">
                    <h4 className="font-medium text-foreground mb-2">Right to Rectification</h4>
                    <p className="text-sm text-muted-foreground">
                      You can request that we correct any inaccurate personal data.
                    </p>
                  </div>
                  
                  <div className="bg-muted/30 rounded-lg p-4">
                    <h4 className="font-medium text-foreground mb-2">Right to Erasure</h4>
                    <p className="text-sm text-muted-foreground">
                      You can request that we delete your personal data in certain circumstances.
                    </p>
                  </div>
                  
                  <div className="bg-muted/30 rounded-lg p-4">
                    <h4 className="font-medium text-foreground mb-2">Right to Portability</h4>
                    <p className="text-sm text-muted-foreground">
                      You can request a copy of your personal data in a structured format.
                    </p>
                  </div>
                </div>
              </div>
            </motion.section>

            {/* Section 6: Updates */}
            <motion.section
              className="space-y-8"
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.5 }}
            >
              <h3 className="text-2xl md:text-3xl font-semibold text-foreground">
                6. UPDATES TO THIS PRIVACY POLICY
              </h3>
              
              <div className="max-w-3xl space-y-6 text-left">
                <p className="text-muted-foreground leading-relaxed">
                  We may update this privacy policy from time to time to reflect changes in our practices or 
                  applicable laws. When we make changes, we will update the "Last Updated" date at the bottom 
                  of this policy and notify you through our website or other appropriate means.
                </p>
                
                <p className="text-muted-foreground leading-relaxed">
                  We encourage you to review this privacy policy periodically to stay informed about how we 
                  collect, use, and protect your information.
                </p>
              </div>
            </motion.section>

            {/* Last Updated */}
            <motion.div
              className="text-center pt-8 border-t border-border/20"
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.6 }}
            >
              <p className="text-sm text-muted-foreground">
                Last updated: December 2024
              </p>
            </motion.div>
          </div>
        </div>

        {/* Additional Sections from Homepage */}
        
        {/* Mobile App Section - "Access all your city cards" */}
        <motion.section
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <MobileAppSection />
        </motion.section>

        {/* Why Choose Us Section */}
        <motion.section
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
        >
          <WhyChooseCityCards />
        </motion.section>

        {/* Enhanced Testimonials Section */}
        <motion.section
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
        >
          <EnhancedTestimonials />
        </motion.section>

        {/* Customer Reviews Section */}
        <motion.section
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: "easeOut", delay: 0.4 }}
        >
          <ReviewsSection />
        </motion.section>

      {/* Footer */}
      <Footer 
        onHomeClick={onHomeClick}
        onMelbourneClick={onMelbourneClick}
        onPassesClick={onPassesClick}
        onSignInClick={onSignInClick}
        onAttractionsClick={onAttractionsClick}
        onBlogsClick={onBlogsClick}
        onHowItWorksClick={onHowItWorksClick}
        onFAQClick={onFAQClick}
        onPrivacyPolicyClick={onPrivacyPolicyClick}
        onContactUsClick={onContactUsClick}
        currentPage={currentPage}
      />
    </div>
  );
}