import { useAuth } from '../contexts/AuthContext';
import Layout from '../components/Layout';
import HeroSection from '../components/home/HeroSection';
import UserProfileCard from '../components/home/UserProfileCard';
import FeatureGrid from '../components/home/FeatureGrid';
import ProfileCompletionCard from '../components/home/ProfileCompletionCard';
import InfoSection from '../components/home/InfoSection';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Home } from 'lucide-react';

const HomePage = () => {
  const { user, profile } = useAuth();

  return (
    <Layout showNavigation={!!user}>
      <div className="min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-purple-50 relative overflow-hidden">
        {/* Decorative background elements */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-pink-300/30 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-tr from-purple-200/30 to-rose-300/30 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-gradient-to-r from-pink-200/20 to-rose-200/20 rounded-full blur-3xl"></div>
        </div>

        {/* Header Navigation Bar */}
<header className="relative z-20 w-full bg-gradient-to-br from-rose-100/80 via-pink-100/80 to-purple-100/80 backdrop-blur-md border-b border-rose-200/30 shadow-sm">
          <div className="container mx-auto px-4 py-6 flex items-center justify-between">
            {/* Logo */}
            <div className="bg-white/90 backdrop-blur-sm rounded-xl p-3 shadow-md border border-white/30">
              <img 
                src="/lovable-uploads/f93175ee-8fe1-4775-b546-43b425b10d2d.png" 
                alt="Periodicity Logo" 
                className="h-10 w-auto"
              />
            </div>

            {/* APK Download Link */}
            <a 
              href="/Periaaodicity.apk" 
              download
              className="flex items-center gap-2 bg-gradient-to-r from-rose-500 to-pink-500 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg hover:from-rose-600 hover:to-pink-600 transition-all duration-300 font-medium"
            >
              <span className="text-sm">Click here to download the APK for android</span>
            </a>

            {/* Navigation Buttons */}
            {!user && (
              <div className="flex items-center space-x-4">
                <Link to="/">
                  <Button 
                    variant="outline" 
                    className="flex items-center bg-white/90 backdrop-blur-sm border-rose-300/50 hover:bg-rose-50/80 hover:border-rose-400 transition-all duration-300 shadow-md h-11 px-6"
                  >
                    <Home className="mr-2 h-4 w-4 text-rose-600" />
                    <span className="text-rose-700 font-medium">Home</span>
                  </Button>
                </Link>
                <Link to="/help">
                  <Button 
                    variant="outline"
                    className="bg-white/90 backdrop-blur-sm border-rose-300/50 hover:bg-rose-50/80 hover:border-rose-400 transition-all duration-300 shadow-md text-rose-700 hover:text-rose-800 font-medium h-11 px-6"
                  >
                    Contact Us
                  </Button>
                </Link>
              </div>
            )}
          </div>
        </header>

        {/* Main Content Area */}
        <div className="bg-gradient-to-b from-white/20 to-transparent pt-8">
          <div className="container mx-auto px-4 pb-8 max-w-6xl relative z-10">

          {/* Hero Section */}
          <HeroSection user={user} />

          {/* User Profile Information */}
          {user && profile && <UserProfileCard profile={profile} />}

          {/* Features Grid */}
          <FeatureGrid />

          {/* Welcome Message for Logged In Users without profile info */}
          {user && (!profile || (!profile.name && !profile.age)) && <ProfileCompletionCard />}

          {/* Info Section */}
          {!user && <InfoSection />}
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default HomePage;