import React from 'react';
import Link from 'next/link';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

// This would typically come from an API or database
const livestreams = [
  { id: 1, name: "Cape Coral Burrowing Owl", location: "Cape Coral, FL", status: "Live" },
  { id: 2, name: "Sanibel Island Osprey", location: "Sanibel Island, FL", status: "Live" },
  { id: 3, name: "Everglades Alligator", location: "Everglades National Park, FL", status: "Offline" },
  // ... add more livestreams as needed
];

export default function Home() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="bg-black/50 backdrop-blur-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-accent">Florida Wildlife Livestreams</h1>
        </div>
      </header>
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0 space-y-12">
          <section>
            <Card className="bg-black/30 border-accent/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-2xl text-accent">Welcome to Florida's Wild Side</CardTitle>
                <CardDescription className="text-foreground/80">
                  Explore the diverse ecosystems of Florida through our live cameras.
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-foreground/80 mb-4">
                  From the unique burrowing owls of Cape Coral to the majestic ospreys of Sanibel Island and the iconic alligators of the Everglades, witness the beauty of Florida's wildlife in real-time.
                </p>
                <p className="text-foreground/80">
                  Our livestreams offer a window into the natural world, promoting conservation awareness and providing valuable data for researchers and wildlife enthusiasts alike.
                </p>
              </CardContent>
            </Card>
          </section>
          
          <section>
            <h2 className="text-2xl font-semibold text-accent mb-4">Featured Ecosystems</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {['Cape Coral', 'Sanibel Island', 'Everglades'].map((ecosystem) => (
                <Card key={ecosystem} className="bg-black/30 border-accent/50 backdrop-blur-sm">
                  <CardHeader>
                    <CardTitle className="text-accent">{ecosystem}</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <p className="text-foreground/80">
                      {ecosystem === 'Cape Coral' && "Home to the largest population of burrowing owls in Florida, supporting these ground-dwelling birds."}
                      {ecosystem === 'Sanibel Island' && "A barrier island known for its shell beaches and wildlife refuges, crucial for ospreys and coastal birds."}
                      {ecosystem === 'Everglades' && "The largest subtropical wilderness in the US, home to diverse species including the American alligator."}
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
          
          <section>
            <h2 className="text-2xl font-semibold text-accent mb-4">Live Cameras</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {livestreams.map((stream) => (
                <Card key={stream.id} className="bg-black/30 border-accent/50 backdrop-blur-sm hover:bg-black/50 transition-colors">
                  <CardHeader>
                    <div className="flex justify-between items-center">
                      <CardTitle className="text-accent">{stream.name}</CardTitle>
                      <Badge variant={stream.status === 'Live' ? 'default' : 'secondary'}>
                        {stream.status}
                      </Badge>
                    </div>
                    <CardDescription className="text-foreground/80">{stream.location}</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Button asChild className="w-full">
                      <Link href={`/livestream/${stream.id}`}>Watch Now</Link>
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
        </div>
      </main>
    </div>
  );
}