
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 FAQSection from '../components/home/FAQSection';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Home, Download } 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>

            {/* Right-side actions */}
            <div className="flex items-center space-x-4">
              {!user && (
                <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>
              )}

              <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 h-11"
              >
                <Download className="h-4 w-4" />
                <span className="text-sm">Get the APK</span>
              </a>

              {!user && (
                <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 />

          {/* FAQ Section */}
          <FAQSection />

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

export default HomePage;
