import Image from "next/image"
import Link from "next/link"
import { ArrowRight, Check, FlaskRoundIcon as Flask, Leaf, Microscope, ShieldCheck, Star } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
          <div className="flex gap-2 items-center text-xl font-bold">
            <Flask className="h-6 w-6 text-primary" />
            <span>Nature Science Labs</span>
          </div>
          <div className="flex flex-1 items-center justify-end space-x-4">
            <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
              <Link href="#products" className="transition-colors hover:text-primary">
                Products
              </Link>
              <Link href="#benefits" className="transition-colors hover:text-primary">
                Benefits
              </Link>
              <Link href="#about" className="transition-colors hover:text-primary">
                About Us
              </Link>
              <Link href="#testimonials" className="transition-colors hover:text-primary">
                Testimonials
              </Link>
              <Link href="#contact" className="transition-colors hover:text-primary">
                Contact
              </Link>
            </nav>
            <Button>Shop Now</Button>
          </div>
        </div>
      </header>
      <main className="flex-1">
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-r from-teal-500/10 via-blue-500/10 to-green-500/10">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 xl:grid-cols-2">
              <div className="flex flex-col justify-center space-y-4">
                <div className="space-y-2">
                  <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
                    Advanced Natural Solutions for Optimal Health
                  </h1>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl">
                    Discover our scientifically formulated natural supplements designed to enhance your body's
                    performance and overall well-being.
                  </p>
                </div>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Button size="lg">
                    Explore Products <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                  <Button size="lg" variant="outline">
                    Learn More
                  </Button>
                </div>
              </div>
              <div className="flex items-center justify-center">
                <Image
                  src="/placeholder.svg?height=550&width=550"
                  width={550}
                  height={550}
                  alt="Female scientist in laboratory"
                  className="rounded-lg object-cover"
                />
              </div>
            </div>
          </div>
        </section>

        <section id="products" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <div className="inline-block rounded-lg bg-primary px-3 py-1 text-sm text-primary-foreground">
                  Our Products
                </div>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  Scientifically Formulated Natural Supplements
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Each product is carefully crafted with premium natural ingredients to target specific health needs.
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 py-12 md:grid-cols-2 lg:grid-cols-3">
              <ProductCard
                title="PrimeBiome"
                description="Advanced probiotic formula for optimal gut health and improved digestion."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="Java Burn"
                description="Natural metabolism booster that enhances energy levels and supports weight management."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="ProstaVive"
                description="Comprehensive prostate support formula with natural ingredients for men's health."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="AquaSculpt"
                description="Advanced water retention management formula for a leaner, more defined physique."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="Sumatra"
                description="Natural energy enhancer derived from premium plant extracts for sustained vitality."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="Nitric Boost"
                description="Circulation support formula that enhances blood flow and nutrient delivery."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="Mitolyn"
                description="Cellular energy optimizer that supports mitochondrial function and vitality."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="Aqua Tower"
                description="Hydration enhancer with electrolytes and minerals for optimal fluid balance."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="ProDentim"
                description="Oral health supplement that supports dental and gum health with natural probiotics."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
              <ProductCard
                title="GLuco Extend"
                description="Blood sugar support formula that helps maintain healthy glucose levels naturally."
                imageSrc="/placeholder.svg?height=300&width=300"
              />
            </div>
          </div>
        </section>

        <section
          id="benefits"
          className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-r from-blue-500/10 via-teal-500/10 to-green-500/10"
        >
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <div className="inline-block rounded-lg bg-primary px-3 py-1 text-sm text-primary-foreground">
                  Health Benefits
                </div>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
                  Enhance Your Body's Natural Potential
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Our products are designed to work with your body's natural processes to optimize health and
                  performance.
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 py-12 md:grid-cols-2 lg:grid-cols-3">
              <BenefitCard
                icon={<Leaf className="h-10 w-10 text-primary" />}
                title="100% Natural Ingredients"
                description="All our products are made with premium natural ingredients, free from harmful chemicals and additives."
              />
              <BenefitCard
                icon={<Microscope className="h-10 w-10 text-primary" />}
                title="Scientifically Formulated"
                description="Each formula is developed by experts and backed by scientific research for maximum effectiveness."
              />
              <BenefitCard
                icon={<ShieldCheck className="h-10 w-10 text-primary" />}
                title="Quality Guaranteed"
                description="Rigorous testing ensures the highest quality and purity standards for all our supplements."
              />
              <BenefitCard
                icon={<Check className="h-10 w-10 text-primary" />}
                title="Targeted Solutions"
                description="Specialized formulas address specific health concerns for personalized wellness support."
              />
              <BenefitCard
                icon={<Flask className="h-10 w-10 text-primary" />}
                title="Advanced Bioavailability"
                description="Enhanced absorption technology ensures your body utilizes more of each active ingredient."
              />
              <BenefitCard
                icon={<Check className="h-10 w-10 text-primary" />}
                title="Holistic Approach"
                description="Our products support overall wellness while targeting specific areas of health improvement."
              />
            </div>
          </div>
        </section>

        <section id="about" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12">
              <div className="flex items-center justify-center">
                <Image
                  src="/placeholder.svg?height=500&width=500"
                  width={500}
                  height={500}
                  alt="Two scientists analyzing a microscope and reviewing a report on a tablet in a laboratory"
                  className="rounded-lg object-cover"
                />
              </div>
              <div className="flex flex-col justify-center space-y-4">
                <div className="space-y-2">
                  <div className="inline-block rounded-lg bg-primary px-3 py-1 text-sm text-primary-foreground">
                    About Us
                  </div>
                  <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                    The Science Behind Nature Science Labs
                  </h2>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                    Founded by a team of scientists and health experts, Nature Science Labs bridges the gap between
                    natural remedies and scientific innovation.
                  </p>
                </div>
                <div className="space-y-4">
                  <p>
                    Our mission is to harness the power of nature's most effective ingredients and optimize them through
                    scientific research and technology. We believe that the best health solutions come from
                    understanding and enhancing the body's natural processes.
                  </p>
                  <p>
                    Every product undergoes rigorous testing and refinement in our state-of-the-art laboratory
                    facilities. We maintain the highest standards of quality control and ethical practices throughout
                    our research and manufacturing processes.
                  </p>
                  <p>
                    With a commitment to transparency and evidence-based formulation, we're dedicated to creating
                    supplements that deliver real, measurable results for our customers' health and wellbeing.
                  </p>
                </div>
                <div>
                  <Button size="lg" variant="outline">
                    Learn More About Our Process
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section
          id="testimonials"
          className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-r from-green-500/10 via-blue-500/10 to-teal-500/10"
        >
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <div className="inline-block rounded-lg bg-primary px-3 py-1 text-sm text-primary-foreground">
                  Testimonials
                </div>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">What Our Customers Say</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Real experiences from people who have transformed their health with our products.
                </p>
              </div>
            </div>
            <div className="mx-auto max-w-5xl py-12">
              <Tabs defaultValue="tab1" className="w-full">
                <TabsList className="grid w-full grid-cols-3">
                  <TabsTrigger value="tab1">Energy & Vitality</TabsTrigger>
                  <TabsTrigger value="tab2">Digestive Health</TabsTrigger>
                  <TabsTrigger value="tab3">Overall Wellness</TabsTrigger>
                </TabsList>
                <TabsContent value="tab1" className="p-4">
                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                    <TestimonialCard
                      name="Michael R."
                      testimonial="Java Burn has completely transformed my morning routine. I have sustained energy throughout the day without the crash I used to experience with coffee alone."
                      product="Java Burn"
                      rating={5}
                    />
                    <TestimonialCard
                      name="Sarah J."
                      testimonial="Nitric Boost has made a noticeable difference in my workout performance. I can train harder and recover faster than before."
                      product="Nitric Boost"
                      rating={5}
                    />
                    <TestimonialCard
                      name="David L."
                      testimonial="Mitolyn has given me back the energy I had in my 30s. At 52, I feel more vibrant and alert than I have in years."
                      product="Mitolyn"
                      rating={4}
                    />
                  </div>
                </TabsContent>
                <TabsContent value="tab2" className="p-4">
                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                    <TestimonialCard
                      name="Jennifer K."
                      testimonial="PrimeBiome has completely resolved my digestive issues. After years of discomfort, I finally feel normal again."
                      product="PrimeBiome"
                      rating={5}
                    />
                    <TestimonialCard
                      name="Robert T."
                      testimonial="The difference in my gut health since starting PrimeBiome has been remarkable. Even my doctor noticed the improvement."
                      product="PrimeBiome"
                      rating={5}
                    />
                    <TestimonialCard
                      name="Lisa M."
                      testimonial="ProDentim has not only improved my oral health but has also helped with my digestive issues. Two benefits in one!"
                      product="ProDentim"
                      rating={4}
                    />
                  </div>
                </TabsContent>
                <TabsContent value="tab3" className="p-4">
                  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                    <TestimonialCard
                      name="Thomas B."
                      testimonial="GLuco Extend has helped me maintain healthy blood sugar levels naturally. My doctor is impressed with my latest test results."
                      product="GLuco Extend"
                      rating={5}
                    />
                    <TestimonialCard
                      name="Patricia S."
                      testimonial="AquaSculpt has been a game-changer for my fitness journey. I'm seeing definition I never thought possible at my age."
                      product="AquaSculpt"
                      rating={4}
                    />
                    <TestimonialCard
                      name="William H."
                      testimonial="ProstaVive has significantly improved my quality of life. I sleep through the night now and feel much more comfortable."
                      product="ProstaVive"
                      rating={5}
                    />
                  </div>
                </TabsContent>
              </Tabs>
            </div>
          </div>
        </section>

        <section id="contact" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <div className="inline-block rounded-lg bg-primary px-3 py-1 text-sm text-primary-foreground">
                  Contact Us
                </div>
                <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">Ready to Transform Your Health?</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  Our team of experts is here to help you find the perfect solution for your health needs.
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-8 py-12 md:grid-cols-2">
              <div className="space-y-4">
                <div className="space-y-2">
                  <h3 className="text-xl font-bold">Get in Touch</h3>
                  <p className="text-muted-foreground">
                    Have questions about our products or need personalized recommendations? Our customer support team is
                    ready to assist you.
                  </p>
                </div>
                <div className="space-y-2">
                  <p className="flex items-center">
                    <span className="font-semibold mr-2">Email:</span> support@naturesciencelab.com
                  </p>
                  <p className="flex items-center">
                    <span className="font-semibold mr-2">Phone:</span> +1 (800) 555-LABS
                  </p>
                  <p className="flex items-center">
                    <span className="font-semibold mr-2">Hours:</span> Monday - Friday, 9am - 5pm EST
                  </p>
                </div>
                <div className="flex space-x-4">
                  <Button variant="outline" size="icon">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
                    </svg>
                    <span className="sr-only">Facebook</span>
                  </Button>
                  <Button variant="outline" size="icon">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" />
                    </svg>
                    <span className="sr-only">Twitter</span>
                  </Button>
                  <Button variant="outline" size="icon">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-5 w-5"
                    >
                      <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
                      <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
                    </svg>
                    <span className="sr-only">Instagram</span>
                  </Button>
                </div>
              </div>
              <div className="space-y-4">
                <div className="space-y-2">
                  <h3 className="text-xl font-bold">Subscribe to Our Newsletter</h3>
                  <p className="text-muted-foreground">
                    Stay updated with our latest products, health tips, and exclusive offers.
                  </p>
                </div>
                <div className="space-y-2">
                  <div className="grid gap-2">
                    <label htmlFor="email" className="sr-only">
                      Email
                    </label>
                    <input
                      id="email"
                      placeholder="Enter your email"
                      type="email"
                      className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                  </div>
                  <Button className="w-full">Subscribe</Button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <footer className="w-full border-t bg-background py-6 md:py-8">
        <div className="container flex flex-col items-center justify-center gap-4 px-4 md:px-6 md:flex-row md:justify-between">
          <div className="flex gap-2 items-center text-lg font-bold">
            <Flask className="h-5 w-5 text-primary" />
            <span>Nature Science Labs</span>
          </div>
          <p className="text-center text-sm text-muted-foreground md:text-left">
            © 2023 Nature Science Labs. All rights reserved.
          </p>
          <nav className="flex gap-4 sm:gap-6">
            <Link href="#" className="text-sm font-medium hover:underline underline-offset-4">
              Terms
            </Link>
            <Link href="#" className="text-sm font-medium hover:underline underline-offset-4">
              Privacy
            </Link>
            <Link href="#" className="text-sm font-medium hover:underline underline-offset-4">
              Cookies
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  )
}

function ProductCard({ title, description, imageSrc }) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-lg">
      <CardHeader className="p-0">
        <div className="aspect-square overflow-hidden">
          <Image
            src={imageSrc || "/placeholder.svg"}
            alt={title}
            width={300}
            height={300}
            className="h-full w-full object-cover transition-all hover:scale-105"
          />
        </div>
      </CardHeader>
      <CardContent className="p-4">
        <CardTitle className="text-xl">{title}</CardTitle>
        <CardDescription className="mt-2">{description}</CardDescription>
      </CardContent>
      <CardFooter className="p-4 pt-0">
        <Button variant="outline" className="w-full">
          Learn More
        </Button>
      </CardFooter>
    </Card>
  )
}

function BenefitCard({ icon, title, description }) {
  return (
    <Card className="transition-all hover:shadow-md">
      <CardHeader>
        <div className="mb-2">{icon}</div>
        <CardTitle className="text-xl">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <CardDescription>{description}</CardDescription>
      </CardContent>
    </Card>
  )
}

function TestimonialCard({ name, testimonial, product, rating }) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center gap-2">
          {Array.from({ length: rating }).map((_, i) => (
            <Star key={i} className="h-4 w-4 fill-primary text-primary" />
          ))}
          {Array.from({ length: 5 - rating }).map((_, i) => (
            <Star key={i} className="h-4 w-4 text-muted-foreground" />
          ))}
        </div>
      </CardHeader>
      <CardContent>
        <p className="mb-2 italic">"{testimonial}"</p>
        <p className="text-sm text-muted-foreground">
          <span className="font-semibold">{name}</span> - {product} user
        </p>
      </CardContent>
    </Card>
  )
}