w-312356-main/src/components/Hero.tsx

import { ArrowRight, Search, Microscope, TestTube, Dna, Shield, Zap, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";

const Hero = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.15,
        duration: 0.8
      }
    }
  };

  const itemVariants = {
    hidden: { y: 30, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: { duration: 0.6, ease: "easeOut" }
    }
  };

  const floatingVariants = (duration: number, delay: number) => ({
    animate: {
      y: [-10, 10, -10],
      transition: {
        duration,
        repeat: Infinity,
        ease: "easeInOut",
        delay
      }
    }
  });

  return (
    <motion.section 
      className="section-padding section-soft-wave relative overflow-visible"
      initial="hidden"
      animate="visible"
      variants={containerVariants}
    >
      {/* Animated Grid Background (keep) */}
      <div className="absolute inset-0 w-full h-full bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:48px_48px] [mask-image:radial-gradient(ellipse_60%_60%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />

      <div className="container mx-auto px-4 sm:px-8 lg:px-16 relative z-10">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          <motion.div variants={itemVariants} className="space-y-12">
            <div className="space-y-8">
              {/* Tagline */}
              <motion.div
                variants={itemVariants}
                className="text-brand text-lg font-semibold uppercase tracking-widest mb-4"
              >
                Precision Diagnostics. Personalized Care.
              </motion.div>
              <motion.h1 
                variants={itemVariants}
                className="text-5xl sm:text-6xl md:text-7xl font-extrabold text-gray-900 leading-tight tracking-tighter mb-8"
              >
                <span className="inline-block">Your Health,</span>
                <br />
                <span className="gradient-text inline-block relative">
                  Your Data,
                </span>
                <br />
                <span className="inline-block">Your Future.</span>
              </motion.h1>
              <motion.p 
                variants={itemVariants}
                className="text-lg sm:text-xl text-gray-600 leading-relaxed max-w-xl mb-8"
              >
                Experience the future of personalized healthcare with our advanced diagnostic solutions. Precision testing tailored to your unique biology for informed health decisions.
              </motion.p>

              {/* Premium Stats */}
              <motion.div
                variants={itemVariants}
                className="flex items-center gap-8 pt-4"
              >
                <div className="flex items-center gap-2">
                  <Users className="h-5 w-5 text-[#19A1E6]" />
                  <span className="text-sm text-gray-600">10,000+ Patients</span>
                </div>
                <div className="flex items-center gap-2">
                  <Shield className="h-5 w-5 text-green-600" />
                  <span className="text-sm text-gray-600">99.9% Accuracy</span>
                </div>
                <div className="flex items-center gap-2">
                  <Zap className="h-5 w-5 text-purple-600" />
                  <span className="text-sm text-gray-600">24h Results</span>
                </div>
              </motion.div>
            </div>
            
            {/* Main CTA above the fold */}
            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-6">
              <Button className="hero-cta-primary group">
                <Microscope className="mr-3 h-6 w-6 group-hover:scale-110 transition-transform" />
                Book Your Test
                <ArrowRight className="ml-3 h-6 w-6 group-hover:translate-x-1 transition-transform" />
              </Button>
              <Button className="hero-cta-secondary group">
                <Search className="mr-3 h-6 w-6 group-hover:scale-110 transition-transform" />
                Explore Tests
              </Button>
            </motion.div>
          </motion.div>
          
          <motion.div 
            variants={itemVariants}
            className="relative"
          >
            {/* Single, high-quality hero image */}
            <div className="rounded-3xl overflow-hidden shadow-2xl relative group">
              <motion.img 
                src="/placeholder.svg" 
                alt="Healthcare professional with patient consultation"
                className="w-full h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] object-cover transition-transform duration-700"
                whileHover={{ scale: 1.05 }}
                onError={e => { e.currentTarget.onerror = null; e.currentTarget.src = '/placeholder.svg'; }}
              />
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

// Dramatic double-line wave, to be placed outside Hero in the homepage file
export const HeroWave = () => (
  <div className="absolute left-0 right-0 bottom-[-600px] z-0 pointer-events-none select-none" style={{overflow: 'visible'}} aria-hidden="true">
    <svg viewBox="0 0 1440 1000" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-screen h-[1000px] block">
      <path d="M0,300 Q360,1000 720,800 Q1080,600 1440,950" stroke="#7cc7f8" strokeWidth="10" opacity="0.85" fill="none" />
      <path d="M0,400 Q360,1100 720,900 Q1080,700 1440,1000" stroke="#b6e0fa" strokeWidth="6" opacity="0.5" fill="none" />
    </svg>
  </div>
);

export default Hero;