"use client";

import { motion, type Variants } from "framer-motion";
import { ArrowRight, Activity, ShieldCheck, Zap } from "lucide-react";
import GravityWave from "./components/canvas/GravityWave"; 
import Navbar from "./components/layout/Navbar";
import AIVoiceSoap from "./components/sections/AIVoiceSoap";
import AIDiagnosis from "./components/sections/AIDiagnosis";
import DeviceShowcase from "./components/sections/DeviceShowcase";
import AppEcosystem from "./components/sections/AppEcosystem";
import Footer from "./components/layout/Footer";

const fadeInUp: Variants = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { 
      duration: 0.8, 
      ease: "easeOut" as const 
    }
  }
};

const staggerContainer: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { 
      staggerChildren: 0.2, 
      delayChildren: 0.1 
    }
  }
};

export default function Home() {
  return (
    <div className="relative min-h-screen bg-gray-950 text-white selection:bg-cyan-500/30 selection:text-cyan-200 overflow-x-hidden font-sans">
      
      <div className="fixed top-0 left-0 right-0 z-50 px-4 pt-4 flex justify-center">
        <div className="w-full max-w-7xl">
          <Navbar />
        </div>
      </div>

      <main className="relative z-10 flex flex-col items-center w-full">

        <section className="relative min-h-screen w-full flex flex-col items-center justify-center pt-20 px-6 overflow-hidden">
          
          <div className="absolute inset-0 z-0">
            <div className="hidden md:block absolute inset-0">
              <GravityWave />
            </div>
            <div className="absolute inset-0 bg-gradient-to-b from-gray-950/50 via-transparent to-gray-950 pointer-events-none" />
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-900/10 via-gray-950/60 to-gray-950 pointer-events-none" />
          </div>

          <motion.div
            variants={staggerContainer}
            initial="hidden"
            animate="visible"
            className="relative z-10 w-full max-w-6xl mx-auto text-center flex flex-col items-center gap-8"
          >
            <motion.h1 variants={fadeInUp} className="max-w-5xl mx-auto">
              <span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-2">
                Skyheal redefines
              </span>
              <span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-extrabold tracking-tight bg-gradient-to-r from-cyan-200 via-cyan-400 to-emerald-400 text-transparent bg-clip-text drop-shadow-2xl">
                Healthcare
              </span>
            </motion.h1>

            <motion.p variants={fadeInUp} className="text-lg sm:text-xl md:text-2xl text-gray-300/90 max-w-3xl leading-relaxed font-light">
              Enterprise-grade AI clinical infrastructure — built for absolute{" "}
              <span className="text-white font-medium">accuracy</span>,{" "}
              <span className="text-white font-medium">security</span>, and{" "}
              <span className="text-white font-medium">human-centered care</span>.
            </motion.p>

            <motion.div variants={fadeInUp} className="flex flex-col sm:flex-row items-center gap-4 mt-4 w-full justify-center">
              <button className="group relative px-8 py-4 rounded-full bg-cyan-500 text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(20,184,166,0.5)]">
                <div className="absolute inset-0 bg-white/20 group-hover:translate-x-full transition-transform duration-500 ease-out -skew-x-12" />
                <span className="relative flex items-center gap-2">
                  Book a Demo
                  <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </span>
              </button>

              <button className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-medium text-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105">
                View Technical Deck
              </button>
            </motion.div>

            <motion.div variants={fadeInUp} className="pt-12 flex flex-wrap justify-center gap-8 md:gap-16 opacity-80">
              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
                <ShieldCheck className="w-5 h-5" /> HIPAA Compliant
              </div>
              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
                <Activity className="w-5 h-5" /> 99.9% Uptime
              </div>
              <div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
                <Zap className="w-5 h-5" /> &lt; 50ms Latency
              </div>
            </motion.div>
          </motion.div>
        </section>

        <div className="w-full relative bg-gray-950">
          
          <div className="relative z-30 space-y-32 py-24">
            
            <section className="relative w-full overflow-hidden">
              <div className="absolute inset-0 z-0">
                <img 
                  src="/neurons3.gif"
                  alt="Voice Soap Animation"
                  className="w-full h-full object-cover object-center opacity-30" 
                />
                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
              </div>
              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                 <AIVoiceSoap />
              </div>
            </section>

            <section className="relative w-full overflow-hidden">
              <div className="absolute inset-0 z-0">
                <img 
                  src="/dna.gif"
                  alt="Device Animation"
                  className="hidden md:block w-full h-full object-cover object-center opacity-70"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
              </div>
              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <DeviceShowcase />
              </div>
            </section>
            
            <section className="relative w-full overflow-hidden">
              <div className="absolute inset-0 z-0">
                <img 
                  src="/diagnosis-bg.gif"
                  alt="Diagnosis Animation"
                  className="w-full h-full object-cover object-center opacity-30"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
              </div>
              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <AIDiagnosis />
              </div>
            </section>
            
            <section className="relative w-full overflow-hidden">
              <div className="absolute inset-0 z-0">
                <img 
                  src="/ecosystem-bg.gif"
                  alt="Ecosystem Animation"
                  className="w-full h-full object-cover object-center opacity-30"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
              </div>
              <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <AppEcosystem />
              </div>
            </section>

          </div>
        </div>

        <Footer />
      </main>
    </div>
  );
}