import React from 'react';
import { motion } from 'framer-motion';
import { Cpu, Shield, Zap } from 'lucide-react';

const FeatureCard = ({ icon: Icon, title, description }) => (
  <motion.div 
    className="bg-white bg-opacity-10 backdrop-blur-lg rounded-lg p-6 flex flex-col items-center text-center"
    whileHover={{ scale: 1.05 }}
    transition={{ type: "spring", stiffness: 300 }}
  >
    <Icon className="w-12 h-12 mb-4" />
    <h3 className="text-xl font-semibold mb-2">{title}</h3>
    <p className="text-sm">{description}</p>
  </motion.div>
);

const DemoSite = () => {
  const features = [
    {
      icon: Cpu,
      title: "AI-Powered Solutions",
      description: "Harness the power of artificial intelligence to optimize your workflows."
    },
    {
      icon: Shield,
      title: "Enhanced Security",
      description: "State-of-the-art security measures to keep your data safe and secure."
    },
    {
      icon: Zap,
      title: "Lightning Fast",
      description: "Blazing fast performance that keeps up with your business needs."
    }
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white font-inter">
      <header className="container mx-auto px-4 py-8">
        <motion.h1 
          className="text-4xl font-bold"
          initial={{ opacity: 0, y: -50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
        >
          InnovateTech
        </motion.h1>
      </header>
      
      <main className="container mx-auto px-4 py-16">
        <motion.div 
          className="max-w-2xl mx-auto text-center mb-16"
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
        >
          <h2 className="text-3xl font-semibold mb-4">Welcome to the Future of Technology</h2>
          <p className="text-xl mb-8">We're revolutionizing the way you interact with the digital world.</p>
          <motion.button 
            className="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-blue-100 transition duration-300"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
          >
            Get Started
          </motion.button>
        </motion.div>

        <section className="mb-16">
          <h2 className="text-2xl font-semibold text-center mb-8">Our Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 50 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
              >
                <FeatureCard {...feature} />
              </motion.div>
            ))}
          </div>
        </section>
      </main>
      
      <footer className="container mx-auto px-4 py-8 text-center">
        <p>&copy; 2023 InnovateTech. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default DemoSite;