new

import React from 'react';
import { motion } from 'framer-motion';
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { ArrowRight, Github } from 'lucide-react';

const DoubleSquareLandingPage = () => {
  const handleClick = (action) => {
    console.log(`Action triggered: ${action}`);
  };

  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.5 }
  };

  return (
    <div className="min-h-screen bg-black text-white">
      <header className="container mx-auto py-6 px-4 flex justify-between items-center">
        <motion.div 
          className="font-bold text-2xl"
          initial={{ opacity: 0, x: -20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          DoubleSquare
        </motion.div>
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.5 }}
        >
          <Button variant="outline" onClick={() => handleClick('Log In')}>
            Log in
          </Button>
        </motion.div>
      </header>

      <main className="container mx-auto px-4">
        <motion.section 
          className="text-center max-w-4xl mx-auto py-20"
          {...fadeInUp}
        >
          <h1 className="text-6xl font-bold mb-6">Innovative Event Gallery</h1>
          <p className="text-xl mb-10 text-gray-400">
            Dedicated to delivering outstanding experiences for event hosts and guests
            while creating a supportive environment for photographers
          </p>
          <div className="flex justify-center space-x-4">
            <Button onClick={() => handleClick('Get Started')} className="px-8">
              Get Started <ArrowRight className="ml-2 h-4 w-4" />
            </Button>
            <Button variant="outline" onClick={() => handleClick('GitHub')}>
              <Github className="mr-2 h-4 w-4" /> GitHub
            </Button>
          </div>
        </motion.section>

        <motion.section 
          className="py-20 grid grid-cols-1 md:grid-cols-3 gap-8"
          {...fadeInUp}
          transition={{ delay: 0.2 }}
        >
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <CardTitle>Smart Design</CardTitle>
              <CardDescription>Elevate your gallery experience</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-gray-400">
                A cutting-edge interface designed to enhance your gallery creation and browsing experience.
              </p>
            </CardContent>
          </Card>
          
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <CardTitle>Face Filtering</CardTitle>
              <CardDescription>Advanced photo organization</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-gray-400">
                Utilizing advanced filtering technology for seamless photo organization, including face recognition.
              </p>
            </CardContent>
          </Card>
          
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <CardTitle>Fast & Safe Sharing</CardTitle>
              <CardDescription>Customized sharing options</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-gray-400">
                Ensure fast and full view of relevant approved photos to event guests with customized subgallery sharing.
              </p>
            </CardContent>
          </Card>
        </motion.section>

        <motion.section 
          className="py-20 text-center"
          {...fadeInUp}
          transition={{ delay: 0.4 }}
        >
          <h2 className="text-4xl font-bold mb-6">Ready to transform your event photography?</h2>
          <p className="text-xl mb-10 text-gray-400">
            Join DoubleSquare today and elevate your event gallery experience.
          </p>
          <Button onClick={() => handleClick('Start Free Trial')} size="lg" className="px-8">
            Start Free Trial
          </Button>
        </motion.section>
      </main>

      <motion.footer 
        className="border-t border-gray-800 py-10 text-center text-gray-400"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.6 }}
      >
        <p>© 2023 DoubleSquare. All rights reserved.</p>
      </motion.footer>
    </div>
  );
};

export default DoubleSquareLandingPage;