import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { Heart, Users, Calendar, Trophy, Star, Target, TrendingUp, Award, Flag, Building2, Laptop, Map, UserPlus, ShoppingBag, Store, Gift, Music, PartyPopper, MapPin, Briefcase, Lightbulb, Camera, X, ChevronLeft, ChevronRight } from 'lucide-react';
import ParticlesBackground from '../components/ParticlesBackground';
import { Helmet } from "react-helmet";

const stats = [
  {
    icon: <Users className="w-8 h-8 text-primary" />,
    value: '80K+',
    label: 'Happy Guests',
    description: 'Delighted attendees at our events',
  },
  {
    icon: <Star className="w-8 h-8 text-primary" />,
    value: '98%',
    label: 'Client Satisfaction',
    description: 'Consistently exceeding expectations',
  },
  {
    icon: <UserPlus className="w-8 h-8 text-primary" />, // Changed from Store to UserPlus
    value: '50+',
    label: 'Vendors',
    description: 'Trusted partners for quality services',
  },
  {
    icon: <Building2 className="w-8 h-8 text-primary" />, // Changed from Star to Building2
    value: '40+',
    label: 'Venue Partners',
    description: 'Build with trusted partners',
  },
];

const expertise = [
  {
    title: 'Wedding Planning',
    percentage: 98,
    color: 'bg-secondary',
  },
  {
    title: 'Corporate Events',
    percentage: 98,
    color: 'bg-primary',
  },
  {
    title: 'Social Gatherings',
    percentage: 98,
    color: 'bg-accent',
  },
  {
    title: 'Destination Events',
    percentage: 70,
    color: 'bg-purple-500',
  },
  {
    title: 'Festive Events',
    percentage: 98,
    color: 'bg-sky-500',
  },
  {
    title: 'Artist Management',
    percentage: 90,
    color: 'bg-gray-600',
  },
];

const milestones = [
  {
    year: 2020,
    title: 'Company Founded',
    description: 'Started with a vision to transform event experiences',
    icon: <Flag className="w-6 h-6" />, // Changed from Target to Flag
  },
  {
    year: 2021,
    title: 'Quality Team',
    description: 'Hired top talent to deliver exceptional events',
    icon: <Users className="w-6 h-6" />, // Changed from TrendingUp to Users
  },
  {
    year: 2022,
    title: 'Expanded Services',
    description: 'Hotel & Venues Partnerships',
    icon: <Building2 className="w-6 h-6" />, // Changed from Award to Building2
  },
  {
    year: 2023,
    title: 'Industry Recognition',
    description: 'Received multiple recognitions',
    icon: <Trophy className="w-6 h-6" />, // Kept Trophy
  },
  {
    year: 2024,
    title: 'Technology Integration',
    description: 'Implemented cutting-edge event tech solutions',
    icon: <Laptop className="w-6 h-6" />, // Changed from Star to Laptop
  },
  {
    year: 2025,
    title: 'Regional Expansion',
    description: 'Expanded operations',
    icon: <Map className="w-6 h-6" />, // Changed from Star to Map
  },
];

const About = () => {
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  const [journeyRef, journeyInView] = useInView({
    triggerOnce: false, // Allow animation to restart if scrolled out and back in
    threshold: 0.2,    // Trigger when 20% is visible
  });

  // Background sketch elements configuration - Expanded list
  const sketchIcons = [
    { icon: Users, size: 'w-16 h-16', top: '15%', left: '10%', rotate: -15 },
    { icon: Calendar, size: 'w-12 h-12', top: '30%', right: '12%', rotate: 20 },
    { icon: Trophy, size: 'w-20 h-20', top: '75%', left: '18%', rotate: 5 },
    { icon: Gift, size: 'w-14 h-14', top: '50%', left: '40%', rotate: -10 },
    { icon: Music, size: 'w-10 h-10', top: '88%', right: '15%', rotate: 18 },
    { icon: PartyPopper, size: 'w-16 h-16', top: '8%', right: '25%', rotate: -5 },
    { icon: Star, size: 'w-12 h-12', top: '60%', right: '30%', rotate: 12 },
    { icon: MapPin, size: 'w-14 h-14', top: '25%', left: '30%', rotate: 10 },
    { icon: Briefcase, size: 'w-16 h-16', top: '40%', right: '20%', rotate: -8 },
    { icon: Lightbulb, size: 'w-12 h-12', top: '65%', left: '5%', rotate: 15 },
    { icon: TrendingUp, size: 'w-18 h-18', top: '80%', left: '45%', rotate: -3 },
    { icon: Award, size: 'w-14 h-14', top: '10%', left: '50%', rotate: 25 },
    { icon: Camera, size: 'w-12 h-12', top: '90%', left: '30%', rotate: -12 },
    { icon: Flag, size: 'w-16 h-16', top: '5%', left: '5%', rotate: 8 },
    { icon: Laptop, size: 'w-14 h-14', top: '55%', right: '5%', rotate: -18 },
  ];

  return (
    <div>
      <Helmet>
        <title>About Us | Amoeba Productions - Event Management Company Patna</title>
        <meta name="description" content="Learn about Amoeba Productions, Patna's leading event management company. Discover our story, vision, and the team behind top events in Bihar, Delhi, and Ranchi." />
        <meta name="keywords" content="About Amoeba Productions, Event Management Patna, Our Team, Event Planners Bihar, Company Story, Event Experts, Patna, Bihar, Delhi, Ranchi" />
        <link rel="canonical" href="https://www.amoebaproductions.com/about" />
        <meta property="og:title" content="About Us | Amoeba Productions - Event Management Company Patna" />
        <meta property="og:description" content="Meet the team and discover the story behind Amoeba Productions, the best event management company in Patna and Bihar." />
        <meta property="og:image" content="https://www.amoebaproductions.com/images/logo.png" />
        <meta property="og:url" content="https://www.amoebaproductions.com/about" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="About Us | Amoeba Productions - Event Management Company Patna" />
        <meta name="twitter:description" content="Learn about Amoeba Productions, our vision, and our expert event team in Patna, Bihar, and beyond." />
        <meta name="twitter:image" content="https://www.amoebaproductions.com/images/logo.png" />
      </Helmet>
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <div className="absolute inset-0">
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{
              backgroundImage: "url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&q=80&w=2000')",
            }}
          >
            <div className="absolute inset-0 bg-black bg-opacity-60" />
            <ParticlesBackground />
          </div>
        </div>
        <div className="relative z-10 text-center text-white px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <h1 className="text-5xl md:text-7xl font-playfair font-bold mb-6">
              About Us
            </h1>
            <p className="text-xl md:text-2xl text-gray-200 max-w-3xl mx-auto">
              Crafting Unforgettable Moments Since 2020
            </p>
          </motion.div>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              animate={inView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.6 }}
            >
              <h2 className="text-4xl font-playfair font-bold mb-6">Our Story</h2>
              <p className="text-gray-600 mb-6">
                Founded in 2020, Amoeba Productions has grown from a small team of passionate event planners to one of Patna's leading event management companies. Our journey has been marked by innovation, dedication, and a relentless pursuit of excellence.
              </p>
              <p className="text-gray-600 mb-6">
                We believe in creating not just events, but experiences that leave lasting impressions. Our approach combines creativity with meticulous planning, ensuring every detail contributes to the overall success of your event.
              </p>
              <div className="flex items-center gap-8">
                <div>
                  <p className="text-3xl font-bold text-primary">6+</p>
                  <p className="text-gray-600">Years Experience</p>
                </div>
                <div>
                  <p className="text-3xl font-bold text-primary">125+</p>
                  <p className="text-gray-600">Events Completed</p>
                </div>
                <div>
                  <p className="text-3xl font-bold text-primary">98%</p>
                  <p className="text-gray-600">Client Satisfaction</p>
                </div>
              </div>
            </motion.div>
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              animate={inView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.6 }}
              className="relative"
            >
              <img
                src="https://ik.imagekit.io/PROIMG92/2022-09-27.jpg?updatedAt=1745785132151"
                alt="Team planning session"
                className="rounded-lg shadow-xl"
              />
              <div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg">
                <Heart className="w-8 h-8 text-primary" />
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Statistics Section */}
      <section className="py-20 bg-gray-50" ref={ref}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Our Impact</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat, idx) => (
              <motion.div
                key={idx}
                initial={{ opacity: 0, y: 20 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.5, delay: idx * 0.1 }}
                className="bg-white p-6 rounded-xl shadow-lg text-center"
              >
                <div className="flex justify-center mb-4">{stat.icon}</div>
                <p className="text-3xl font-bold text-primary mb-2">{stat.value}</p>
                <p className="font-semibold mb-2">{stat.label}</p>
                <p className="text-sm text-gray-600">{stat.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Experience Graph Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">6 Years of Growth</h2>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Events Growth Chart */}
            <div className="bg-white p-6 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold mb-6">Growth Trajectory</h3>
              <div className="relative h-72"> {/* Increased height for better visibility */}
                <svg className="w-full h-full" viewBox="0 0 300 120"> {/* Adjusted viewBox */}
                  {/* Grid lines with labels */}
                  {[0, 1, 2, 3, 4].map((i) => (
                    <g key={`grid-${i}`}>
                      <line
                        x1="30"
                        y1={90 - (i * 70) / 4}
                        x2="270"
                        y2={90 - (i * 70) / 4}
                        stroke="#e5e7eb"
                        strokeWidth="1"
                      />
                    </g>
                  ))}

                  {/* Smooth rising growth curve */}
                  <motion.path
                    initial={{ pathLength: 0 }}
                    animate={inView ? { pathLength: 1 } : {}}
                    transition={{ duration: 2, ease: "easeOut" }}
                    d="M 30,90 C 90,80 150,60 210,30 S 250,10 270,10"
                    fill="none"
                    stroke="#4f46e5"
                    strokeWidth="3"
                    strokeLinecap="round"
                    filter="drop-shadow(0px 2px 2px rgba(0,0,0,0.1))"
                  />

                  {/* Data points */}
                  {['2020', '2021', '2022', '2023', '2024', '2025'].map((year, i) => (
                    <g key={year}>
                      <motion.circle
                        initial={{ opacity: 0, scale: 0 }}
                        animate={inView ? { opacity: 1, scale: 1 } : {}}
                        transition={{ duration: 0.5, delay: 0.5 + i * 0.1 }}
                        cx={30 + i * 48}
                        cy={90 - (i * 16)}
                        r="4"
                        fill="#4f46e5"
                        className="drop-shadow-md"
                      />
                      <text
                        x={30 + i * 48}
                        y="110"
                        textAnchor="middle"
                        className="text-sm font-medium"
                        fill="#4B5563"
                      >
                        {year}
                      </text>
                    </g>
                  ))}
                </svg>
              </div>
            </div>

            {/* Expertise Levels */}
            <div className="bg-white p-6 rounded-xl shadow-lg">
              <h3 className="text-2xl font-bold mb-6">Areas of Expertise</h3>
              <div className="space-y-6">
                {expertise.map((skill, idx) => (
                  <div key={idx}>
                    <div className="flex justify-between mb-2">
                      <span className="font-medium">{skill.title}</span>
                      <span className="text-primary">{skill.percentage}%</span>
                    </div>
                    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                      <motion.div
                        initial={{ width: 0 }}
                        animate={inView ? { width: `${skill.percentage}%` } : {}}
                        transition={{ duration: 1, delay: idx * 0.2 }}
                        className={`h-full ${skill.color} rounded-full`}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Milestones Section with Animated Background */}
      <section ref={journeyRef} className="py-20 bg-gray-50 relative overflow-hidden">
        {/* Animated Background Elements */}
        <div className="absolute inset-0 z-0">
          {sketchIcons.map((item, idx) => (
            <motion.div
              key={idx}
              className={`absolute text-gray-400 ${item.size}`}
              style={{ top: item.top, left: item.left, right: item.right, rotate: `${item.rotate}deg` }}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={journeyInView ? { 
                opacity: [0, 0.35, 0.35, 0],
                scale: 1,
                x: Math.random() * 30 - 15,
                y: Math.random() * 30 - 15,
              } : { opacity: 0, scale: 0.8 }}
              transition={{
                duration: 10 + Math.random() * 5, 
                delay: Math.random() * 4, // Increased delay variance slightly
                repeat: Infinity,
                repeatType: "loop",
                ease: "linear",
              }}
            >
              <item.icon strokeWidth={1.5} />
            </motion.div>
          ))}
        </div>

        {/* Main Content */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <h2 className="text-4xl font-playfair font-bold text-center mb-16">Our Journey</h2>
          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-primary opacity-50" />
            
            <div className="space-y-12">
              {milestones.map((milestone, idx) => (
                <motion.div
                  key={idx}
                  initial={{ opacity: 0, x: idx % 2 === 0 ? -50 : 50 }}
                  animate={inView ? { opacity: 1, x: 0 } : {}}
                  transition={{ duration: 0.6, delay: idx * 0.2 }}
                  className={`flex ${idx % 2 === 0 ? 'justify-start' : 'justify-end'} relative`}
                >
                  <div className="w-1/2 relative">
                    {/* Content card */}
                    <div className="bg-white p-6 rounded-xl shadow-lg backdrop-blur-sm bg-opacity-90">
                      <div className={`${idx % 2 === 0 ? 'ml-8' : 'mr-8'} text-left ${idx % 2 !== 0 ? 'md:text-right' : ''}`}>
                        <p className="text-primary font-bold">{milestone.year}</p>
                        <h3 className="text-xl font-bold mb-2">{milestone.title}</h3>
                        <p className="text-gray-600">{milestone.description}</p>
                      </div>
                    </div>
                    
                    {/* Icon circle */}
                    <div 
                      className={`absolute top-1/2 transform -translate-y-1/2 ${idx % 2 === 0 ? '-right-4' : '-left-4'} z-20`}
                    >
                      <motion.div 
                        className="bg-primary rounded-full p-2 shadow-lg"
                        whileHover={{ scale: 1.1 }}
                      >
                        {React.cloneElement(milestone.icon, {
                          className: 'w-6 h-6 text-white'
                        })}
                      </motion.div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default About;