import React from 'react';
import { motion } from 'framer-motion';

export default function Home() {
  return (
    <div className="min-h-screen relative overflow-hidden">
      {/* Cloud Background with zoom in/out animation */}
      <motion.div 
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: 'url(https://ellingtontravel.com/images/1920/2495838/air-atmosphere-blue-314726.jpg)',
        }}
        animate={{
          scale: [1, 1.1, 1],
        }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "easeInOut"
        }}
      >
        {/* Subtle gradient overlay for depth */}
        <div className="absolute inset-0 bg-gradient-to-b from-white/20 via-transparent to-white/30" />
      </motion.div>



      {/* Main Content */}
      <div className="relative min-h-screen flex flex-col items-center justify-center px-6 py-16 md:py-24">
        
        {/* Business Cards */}
        <motion.div 
          className="relative flex flex-col md:flex-row gap-6 md:gap-8 items-center mb-8"
          initial={{ opacity: 0, y: 40, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ delay: 0.3, duration: 1, ease: "easeOut" }}
        >
          {/* Front Card */}
          <div className="relative">
            <div className="absolute -inset-4 bg-white/40 backdrop-blur-sm rounded-xl" />
            <div className="relative bg-white rounded-lg shadow-2xl overflow-hidden">
              <img 
                src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695eb8273c65180864f75485/7b81712f2_front_businesscard.png"
                alt="Ellington Travel Business Card Front"
                className="w-full max-w-sm md:max-w-md h-auto object-contain"
              />
            </div>
          </div>

          {/* Back Card */}
          <div className="relative">
            <div className="absolute -inset-4 bg-white/40 backdrop-blur-sm rounded-xl" />
            <div className="relative bg-white rounded-lg shadow-2xl overflow-hidden">
              <img 
                src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/695eb8273c65180864f75485/e98ff6e21_back_businesscard.png"
                alt="Ellington Travel Business Card Back"
                className="w-full max-w-sm md:max-w-md h-auto object-contain"
              />
            </div>
          </div>
        </motion.div>

        {/* Tagline */}
        <motion.p 
          className="text-lg sm:text-xl md:text-2xl tracking-[0.2em] uppercase text-black text-center"
          style={{ 
            fontFamily: 'Georgia, "Times New Roman", serif',
            textShadow: '0 1px 10px rgba(255,255,255,0.9)'
          }}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8, duration: 1 }}
        >
          No destination is too far away
        </motion.p>
      </div>
    </div>
  );
}