import React, { useEffect } from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { CheckCircle, ArrowRight, FileText, Eye } from "lucide-react";
import { useNavigate } from "react-router-dom";

// Smooth scroll to top function
const scrollToTop = () => {
  const scrollStep = -window.scrollY / (300 / 15); // Duration in ms / frame rate
  const scrollInterval = () => {
    if (window.scrollY !== 0) {
      window.scrollBy(0, scrollStep);
      window.requestAnimationFrame(scrollInterval);
    }
  };
  window.requestAnimationFrame(scrollInterval);
};

export const ThankYou = () => {
  // Scroll to top on component mount
  useEffect(() => {
    const scrollTimeout = setTimeout(() => {
      scrollToTop();
    }, 100);

    return () => clearTimeout(scrollTimeout);
  }, []);

  const navigate = useNavigate();
  
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Thank You Section */}
      <section className="relative pt-24 pb-20 bg-background overflow-hidden min-h-screen flex items-center">
        {/* Background decorative elements */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-accent/5 rounded-full blur-3xl"></div>
          <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-accent/5 rounded-full blur-3xl"></div>
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-accent/3 rounded-full blur-3xl"></div>
        </div>
        
        <div className="relative z-10 container mx-auto px-6 lg:px-8">
          <div className="max-w-4xl mx-auto text-center">
            {/* Success Icon */}
            <motion.div
              initial={{ opacity: 0, scale: 0.5 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ duration: 0.6, ease: "easeOut" }}
              className="mb-8"
            >
              <div className="inline-flex items-center justify-center w-24 h-24 bg-accent/10 rounded-full border border-accent/20 mb-6">
                <CheckCircle className="w-12 h-12 text-accent" />
              </div>
            </motion.div>

            {/* Main Content Container */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="bg-card/30 backdrop-blur-md rounded-2xl border border-white/10 p-8 lg:p-12 shadow-2xl"
            >
              {/* Headline */}
              <motion.h1
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="text-3xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight"
                style={{ fontFamily: 'Manrope, Inter, system-ui, sans-serif' }}
              >
                ✅ Thank You! We've Received Your Message.
              </motion.h1>
              
              {/* Subtext */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.6 }}
                className="space-y-4 mb-10"
              >
                <p className="text-lg lg:text-xl text-muted-foreground leading-relaxed">
                  Our team will review your request and get back to you shortly.
                </p>
                <p className="text-base lg:text-lg text-muted-foreground/80 leading-relaxed">
                  In the meantime, feel free to explore our work or check out our latest insights.
                </p>
              </motion.div>

              {/* Call-to-Action Buttons */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.8 }}
                className="flex flex-col sm:flex-row gap-4 justify-center items-center"
              >
                <Button 
                  size="lg"
                  className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-4 rounded-[10px] font-medium transition-all duration-300 hover:shadow-lg hover:shadow-accent/25 hover:-translate-y-0.5"
                  onClick={() => navigate('/')}
                >
                  <ArrowRight className="w-5 h-5 mr-2" />
                  Back to Home
                </Button>
                
                <Button 
                  size="lg"
                  variant="outline"
                  className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-[10px] font-medium transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
                  onClick={() => navigate('/case-studies')}
                >
                  <Eye className="w-5 h-5 mr-2" />
                  Explore Our Work
                </Button>
              </motion.div>
            </motion.div>

            {/* Additional Quick Links */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 1.0 }}
              className="mt-12 grid md:grid-cols-3 gap-6 max-w-3xl mx-auto"
            >
              <motion.div
                whileHover={{ y: -5 }}
                className="bg-card/20 backdrop-blur-sm rounded-xl border border-white/5 p-6 cursor-pointer transition-all duration-300 hover:border-accent/20"
                onClick={() => navigate('/case-studies')}
              >
                <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4 mx-auto">
                  <Eye className="w-6 h-6 text-accent" />
                </div>
                <h3 className="text-lg font-semibold text-foreground mb-2">Case Studies</h3>
                <p className="text-sm text-muted-foreground">Explore our successful projects and client stories</p>
              </motion.div>

              <motion.div
                whileHover={{ y: -5 }}
                className="bg-card/20 backdrop-blur-sm rounded-xl border border-white/5 p-6 cursor-pointer transition-all duration-300 hover:border-accent/20"
                onClick={() => navigate('/resources/blog')}
              >
                <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4 mx-auto">
                  <FileText className="w-6 h-6 text-accent" />
                </div>
                <h3 className="text-lg font-semibold text-foreground mb-2">Latest Insights</h3>
                <p className="text-sm text-muted-foreground">Read our latest articles and industry insights</p>
              </motion.div>

              <motion.div
                whileHover={{ y: -5 }}
                className="bg-card/20 backdrop-blur-sm rounded-xl border border-white/5 p-6 cursor-pointer transition-all duration-300 hover:border-accent/20"
                onClick={() => navigate('/services')}
              >
                <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4 mx-auto">
                  <CheckCircle className="w-6 h-6 text-accent" />
                </div>
                <h3 className="text-lg font-semibold text-foreground mb-2">Our Services</h3>
                <p className="text-sm text-muted-foreground">Discover our comprehensive range of services</p>
              </motion.div>
            </motion.div>

            {/* Footer Note */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 1.2 }}
              className="mt-16 text-center"
            >
              <p className="text-sm text-muted-foreground/70">
                Expected response time: 24-48 hours • Need immediate assistance? Contact us at{" "}
                <a 
                  href="mailto:ideas@wdipl.com" 
                  className="text-accent hover:text-accent/80 transition-colors duration-200"
                >
                  ideas@wdipl.com
                </a>
              </p>
            </motion.div>
          </div>
        </div>
      </section>

      {/* <Footer /> */}
    </div>
  );
};