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

// This would typically come from an API or database
const livestreams = [
  {
    id: 1,
    name: "Cape Coral Burrowing Owl",
    location: "Cape Coral, FL",
    status: "Live",
    viewers: 128,
    description: "Watch these unique ground-dwelling owls at their burrows in Cape Coral. These protected birds are the official city bird of Cape Coral!"
  },
  {
    id: 2,
    name: "Burrowing Owl Habitat",
    location: "Cape Coral, FL",
    status: "Live",
    viewers: 95,
    description: "Observe burrowing owls in their natural habitat. Watch them hunt, nest, and interact with their environment."
  },
  {
    id: 3,
    name: "Owl Burrow Monitoring",
    location: "Cape Coral, FL",
    status: "Live",
    viewers: 67,
    description: "Monitor active burrowing owl burrows and learn about CCFW's conservation efforts to protect these amazing birds."
  },
];

export default function Home() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      <header className="bg-gradient-to-r from-ccfw-beige/95 via-ccfw-beige/90 to-ccfw-beige/95 backdrop-blur-md sticky top-0 z-10 border-b border-ccfw-teal/30 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            {/* Logo and Brand */}
            <div className="flex items-center space-x-3">
              <div className="relative">
                <div className="absolute inset-0 bg-ccfw-teal/20 rounded-full blur-sm"></div>
                <div className="relative bg-gradient-to-br from-ccfw-teal to-ccfw-maroon p-2 rounded-full">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                  </svg>
                </div>
              </div>
              <div>
                <h1 className="text-xl font-bold text-ccfw-teal tracking-tight">CCFW Livestreams</h1>
                <p className="text-xs text-ccfw-maroon font-semibold">Cape Coral Friends of Wildlife</p>
              </div>
            </div>

            {/* Navigation Actions */}
            <div className="flex items-center space-x-3">
              <a
                href="https://ccfriendsofwildlife.org/support/membership/"
                target="_blank"
                rel="noopener noreferrer"
                className="group relative px-4 py-2 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:scale-105"
              >
                <span className="relative z-10">Join/Renew</span>
                <div className="absolute inset-0 bg-gradient-to-r from-ccfw-maroon to-ccfw-teal rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
              </a>
              <a
                href="https://ccfriendsofwildlife.org/volunteer/"
                target="_blank"
                rel="noopener noreferrer"
                className="group relative px-4 py-2 bg-gradient-to-r from-ccfw-coral to-orange-400 text-white font-medium rounded-lg shadow-sm hover:shadow-md transition-all duration-200 transform hover:scale-105"
              >
                <span className="relative z-10">Volunteer</span>
                <div className="absolute inset-0 bg-gradient-to-r from-orange-400 to-ccfw-coral rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
              </a>
            </div>
          </div>
        </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">
          {/* Hero Section */}
          <section className="relative">
            <div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 via-transparent to-ccfw-maroon/5 rounded-3xl"></div>
            <Card className="relative border-0 bg-gradient-to-br from-ccfw-maroon/90 via-ccfw-maroon/85 to-ccfw-maroon/90 backdrop-blur-md overflow-hidden shadow-2xl">
              <div className="absolute inset-0 bg-[url('https://ccfriendsofwildlife.org/wp-content/uploads/2020/07/Featured-image-home-page-1080x675.jpg')] opacity-15 bg-center bg-cover mix-blend-overlay"></div>
              <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent"></div>

              <CardHeader className="relative z-10 pb-8">
                <div className="flex items-center space-x-3 mb-4">
                  <div className="h-1 w-12 bg-gradient-to-r from-ccfw-gold to-ccfw-coral rounded-full"></div>
                  <span className="text-white text-sm font-medium tracking-wider uppercase">Live Wildlife Streams</span>
                </div>
                <CardTitle className="text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
                  Cape Coral Friends of
                  <span className="block text-transparent bg-gradient-to-r from-ccfw-gold via-ccfw-coral to-orange-400 bg-clip-text">
                    Wildlife Livestreams
                  </span>
                </CardTitle>
                <CardDescription className="text-white/90 text-xl font-medium leading-relaxed">
                  Dedicated to Protection, Preservation and Education
                </CardDescription>
              </CardHeader>

              <CardContent className="relative z-10 space-y-6">
                <p className="text-white text-lg leading-relaxed font-medium">
                  Discover the fascinating world of <span className="text-ccfw-gold font-semibold">burrowing owls</span>, the official city bird of Cape Coral.
                  These unique ground-dwelling owls are active during the day and nest underground in burrows throughout our community.
                </p>
                <p className="text-white/90 text-lg leading-relaxed">
                  Cape Coral Friends of Wildlife is dedicated to protecting these threatened birds through habitat preservation, burrow maintenance, and community education. With over 2,500 burrows maintained by our volunteers, we ensure these amazing owls thrive in our urban environment.
                </p>

                <div className="flex flex-col sm:flex-row gap-4 pt-4">
                  <div className="flex items-center space-x-6 text-white/80">
                    <div className="flex items-center space-x-2">
                      <div className="h-2 w-2 bg-ccfw-coral rounded-full animate-pulse"></div>
                      <span className="text-sm font-medium">Live 24/7</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
                      </svg>
                      <span className="text-sm font-medium">HD Quality</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                      </svg>
                      <span className="text-sm font-medium">Cape Coral, FL</span>
                    </div>
                  </div>
                </div>
              </CardContent>

              <CardFooter className="relative z-10 pt-6">
                <a
                  href="https://ccfriendsofwildlife.org/about-us/"
                  target="_blank"
                  rel="noopener noreferrer"
                                      className="group inline-flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-ccfw-gold to-ccfw-coral text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
                >
                  <span>Learn more about CCFW</span>
                  <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                  </svg>
                </a>
              </CardFooter>
            </Card>
          </section>
          
          {/* Featured Owls Section */}
          <section className="space-y-8">
            <div className="text-center space-y-4">
              <div className="inline-flex items-center space-x-3">
                <div className="h-1 w-8 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon rounded-full"></div>
                <h2 className="text-3xl md:text-4xl font-bold text-ccfw-teal tracking-tight">Featured Owls</h2>
                <div className="h-1 w-8 bg-gradient-to-r from-ccfw-maroon to-ccfw-teal rounded-full"></div>
              </div>
              <div className="flex items-center justify-center space-x-6 text-sm text-white font-medium">
                <div className="flex items-center space-x-2">
                  <div className="h-2 w-2 bg-ccfw-teal rounded-full"></div>
                  <span>Founded in 2001</span>
                </div>
                <div className="flex items-center space-x-2">
                  <svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
                  </svg>
                  <span>500+ Members</span>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {[
                {
                  name: 'Burrowing Owl Facts',
                  icon: '🦉',
                  color: 'from-ccfw-teal to-ccfw-maroon',
                  description: "Burrowing owls are small, long-legged owls that nest underground in burrows. Unlike most owls, they are active during the day and have bright yellow eyes. The City of Cape Coral has designated the burrowing owl as its official city bird."
                },
                {
                  name: 'Owl Conservation',
                  icon: '🌱',
                  color: 'from-ccfw-maroon to-ccfw-teal',
                  description: "CCFW volunteers maintain over 2,500 burrows throughout Cape Coral. These unique birds face threats from habitat loss and development. Our conservation efforts protect these amazing ground-dwelling owls."
                },
                {
                  name: 'Owl Habitat',
                  icon: '🏞️',
                  color: 'from-ccfw-gold to-ccfw-coral',
                  description: "Burrowing owls prefer open areas with low vegetation such as prairies, grasslands, and open areas of urban development. They create burrows that provide shelter for many other wildlife species as well."
                }
              ].map((owlFeature) => (
                <Card key={owlFeature.name} className="group relative border-0 bg-gradient-to-br from-white/80 to-white/60 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden">
                  <div className={`absolute inset-0 bg-gradient-to-br ${owlFeature.color} opacity-0 group-hover:opacity-10 transition-opacity duration-300`}></div>

                  <CardHeader className="relative z-10 pb-4">
                    <div className="flex items-center space-x-3 mb-3">
                      <div className="text-3xl group-hover:scale-110 transition-transform duration-200">{owlFeature.icon}</div>
                      <div>
                        <CardTitle className="text-xl font-bold text-ccfw-teal group-hover:text-ccfw-maroon transition-colors">
                          {owlFeature.name}
                        </CardTitle>
                      </div>
                    </div>
                    <div className={`h-0.5 w-full bg-gradient-to-r ${owlFeature.color} rounded-full`}></div>
                  </CardHeader>

                  <CardContent className="relative z-10">
                    <p className="text-ccfw-maroon leading-relaxed font-medium">
                      {owlFeature.description}
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
          
          {/* Live Cameras Section */}
          <section className="space-y-8">
            <div className="text-center space-y-4">
              <div className="inline-flex items-center space-x-3">
                <div className="h-1 w-8 bg-gradient-to-r from-ccfw-coral to-ccfw-gold rounded-full"></div>
                <h2 className="text-3xl md:text-4xl font-bold text-ccfw-teal tracking-tight">Live Cameras</h2>
                <div className="h-1 w-8 bg-gradient-to-r from-ccfw-gold to-ccfw-coral rounded-full"></div>
              </div>
              <div className="flex items-center justify-center space-x-2 text-sm text-white font-medium">
                <svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm3 2l3 3-3 3V8z" clipRule="evenodd" />
                </svg>
                <span>Powered by</span>
                <span className="font-bold text-transparent bg-gradient-to-r from-ccfw-gold to-ccfw-coral bg-clip-text">
                  CCFW
                </span>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {livestreams.map((stream) => (
                <Card key={stream.id} className="group relative border-0 bg-gradient-to-br from-white/90 to-white/70 backdrop-blur-sm shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105 hover:-translate-y-2 overflow-hidden">
                  {/* Status Indicator */}
                  <div className="absolute top-4 right-4 z-20">
                    <div className={`flex items-center space-x-2 px-3 py-1.5 rounded-full backdrop-blur-sm border ${
                      stream.status === 'Live'
                        ? 'bg-emerald-500/20 border-emerald-400/30 text-emerald-700'
                        : 'bg-gray-600/20 border-gray-500/30 text-gray-700'
                    }`}>
                      <div className={`h-2 w-2 rounded-full ${
                        stream.status === 'Live' ? 'bg-emerald-500 animate-pulse' : 'bg-gray-400'
                      }`}></div>
                      <span className="text-xs font-bold tracking-wide uppercase">{stream.status}</span>
                    </div>
                  </div>

                  {/* Background Gradient Overlay */}
                  <div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 via-transparent to-ccfw-maroon/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                  {/* Camera Preview Mockup */}
                  <div className="relative h-48 bg-gradient-to-br from-ccfw-teal/10 to-ccfw-maroon/10 flex items-center justify-center overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                    <div className="relative z-10 text-center space-y-3">
                      <div className="mx-auto w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                        <svg className="h-8 w-8 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
                        </svg>
                      </div>
                      <div className="text-white/80 text-sm font-medium">HD Live Stream</div>
                    </div>

                    {/* Quality Badge */}
                    <div className="absolute top-4 left-4 bg-black/60 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
                      HD
                    </div>
                  </div>

                  <CardHeader className="relative z-10 pt-6">
                    <CardTitle className="text-xl font-bold text-ccfw-teal group-hover:text-ccfw-maroon transition-colors leading-tight">
                      {stream.name}
                    </CardTitle>
                    <CardDescription className="text-ccfw-maroon font-medium flex items-center space-x-1">
                      <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                      </svg>
                      <span>{stream.location}</span>
                    </CardDescription>
                  </CardHeader>

                  <CardContent className="relative z-10 space-y-4">
                    <p className="text-ccfw-maroon leading-relaxed font-medium text-sm">
                      {stream.description}
                    </p>

                    {/* Viewer Count & Quality */}
                    <div className="flex justify-between items-center">
                      <div className="flex items-center space-x-4 text-xs">
                        {stream.status === 'Live' && (
                          <div className="flex items-center space-x-1 text-ccfw-teal font-semibold">
                            <svg className="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
                            </svg>
                            <span>{stream.viewers} viewers</span>
                          </div>
                        )}
                      </div>
                      <div className="flex items-center space-x-1">
                        <svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
                        </svg>
                        <span className="text-xs font-semibold text-ccfw-maroon">HD</span>
                      </div>
                    </div>

                    {/* Watch Button */}
                    <Button
                      asChild
                      className={`w-full font-semibold py-3 rounded-xl shadow-md transition-all duration-200 ${
                        stream.status === 'Live'
                          ? 'bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white hover:shadow-lg hover:scale-105'
                          : 'bg-gray-300 text-gray-600 cursor-not-allowed'
                      }`}
                      disabled={stream.status !== 'Live'}
                    >
                      <Link href={`/livestream/${stream.id}`} className="flex items-center justify-center space-x-2">
                        {stream.status === 'Live' ? (
                          <>
                            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M10 12l-6-4h12l-6 4z" />
                              <path d="M10 8l6 4H4l6-4z" />
                            </svg>
                            <span>Watch Live</span>
                          </>
                        ) : (
                          <>
                            <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clipRule="evenodd" />
                            </svg>
                            <span>Offline</span>
                          </>
                        )}
                      </Link>
                    </Button>
                  </CardContent>
                </Card>
              ))}
            </div>
          </section>
          
          {/* Support Our Mission Section */}
          <section className="relative bg-gradient-to-br from-ccfw-beige/20 via-ccfw-beige/10 to-transparent p-8 rounded-3xl border border-ccfw-teal/30 shadow-lg overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 to-ccfw-maroon/5"></div>

            <div className="relative z-10 flex flex-col lg:flex-row gap-12 items-center">
              {/* Content Section */}
              <div className="lg:w-1/2 space-y-6">
                <div className="space-y-4">
                  <div className="inline-flex items-center space-x-3">
                    <div className="h-1 w-8 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon rounded-full"></div>
                    <h2 className="text-3xl md:text-4xl font-bold text-white tracking-tight">Support Our Mission</h2>
                  </div>
                  <p className="text-lg text-white leading-relaxed font-medium">
                    Cape Coral Friends of Wildlife is a volunteer organization founded in 2001. With over 500 members and an engaged group of volunteers, we work to preserve and enhance the habitats of protected wildlife.
                  </p>
                  <p className="text-lg text-white/90 leading-relaxed font-medium">
                    Your support helps us continue our conservation efforts and educational programs that benefit the unique wildlife of Southwest Florida.
                  </p>
                </div>

                {/* Action Buttons */}
                <div className="flex flex-col sm:flex-row gap-4">
                  <a
                    href="https://ccfriendsofwildlife.org/support/membership/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group relative px-6 py-3 bg-gradient-to-r from-ccfw-gold to-amber-500 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 overflow-hidden"
                  >
                    <span className="relative z-10 flex items-center justify-center space-x-2">
                      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z" />
                      </svg>
                      <span>Become a Member</span>
                    </span>
                    <div className="absolute inset-0 bg-gradient-to-r from-amber-500 to-ccfw-gold rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                  </a>

                  <a
                    href="https://ccfriendsofwildlife.org/donate-to-ccfw/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group relative px-6 py-3 bg-gradient-to-r from-ccfw-coral to-rose-500 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105 overflow-hidden"
                  >
                    <span className="relative z-10 flex items-center justify-center space-x-2">
                      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd" />
                      </svg>
                      <span>Donate Today</span>
                    </span>
                    <div className="absolute inset-0 bg-gradient-to-r from-rose-500 to-ccfw-coral rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                  </a>
                </div>
              </div>

              {/* Stats Card */}
              <div className="lg:w-1/2 flex justify-center">
                <div className="relative w-full max-w-md">
                  {/* Background Glow */}
                  <div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/20 to-ccfw-maroon/20 rounded-3xl blur-xl"></div>

                  <div className="relative bg-gradient-to-br from-white/90 to-white/70 backdrop-blur-sm p-8 rounded-3xl border border-white/30 shadow-xl">
                    {/* Header */}
                    <div className="text-center mb-8">
                      <div className="inline-flex items-center space-x-2 mb-3">
                        <svg className="h-6 w-6 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                        </svg>
                        <span className="text-sm font-bold text-white tracking-wider uppercase">Impact This Year</span>
                      </div>
                      <h3 className="text-2xl font-bold text-ccfw-teal">Volunteer Hours</h3>
                    </div>

                    {/* Main Stat */}
                    <div className="text-center mb-6">
                      <div className="relative">
                        <div className="absolute inset-0 bg-gradient-to-r from-ccfw-coral to-rose-400 rounded-full blur-2xl opacity-30"></div>
                        <div className="relative text-7xl md:text-8xl font-black text-transparent bg-gradient-to-r from-ccfw-coral to-rose-500 bg-clip-text">
                          836
                        </div>
                      </div>
                      <p className="text-white font-semibold mt-2">And counting...</p>
                    </div>

                    {/* CTA */}
                    <div className="text-center">
                      <a
                        href="https://ccfriendsofwildlife.org/volunteer/"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="inline-flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-ccfw-teal to-ccfw-maroon text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-105"
                      >
                        <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                        </svg>
                        <span>Join Our Team</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
      {/* Modern Footer */}
      <footer className="relative bg-gradient-to-br from-ccfw-beige/90 via-ccfw-beige/95 to-white/90 backdrop-blur-sm mt-20 border-t border-ccfw-teal/30">
        <div className="absolute inset-0 bg-gradient-to-br from-ccfw-teal/5 to-transparent"></div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          {/* Main Footer Content */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            {/* Organization Info */}
            <div className="md:col-span-2 space-y-6">
              <div className="flex items-center space-x-3">
                <div className="relative">
                  <div className="absolute inset-0 bg-ccfw-teal/20 rounded-full blur-sm"></div>
                  <div className="relative bg-gradient-to-br from-ccfw-teal to-ccfw-maroon p-2 rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                    </svg>
                  </div>
                </div>
                <div>
                  <h3 className="text-xl font-bold text-ccfw-teal tracking-tight">Cape Coral Friends of Wildlife</h3>
                  <p className="text-sm text-ccfw-maroon font-medium">CCFW • Est. 2001</p>
                </div>
              </div>

              <p className="text-ccfw-maroon leading-relaxed font-medium max-w-md">
                A volunteer organization dedicated to the preservation of wildlife in Cape Coral, Florida. We protect and enhance habitats for protected species through education and conservation.
              </p>

              <div className="flex items-center space-x-4">
                <div className="flex items-center space-x-2 bg-ccfw-teal/10 px-3 py-1.5 rounded-full">
                  <svg className="h-4 w-4 text-ccfw-teal" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-xs font-bold text-ccfw-teal">501(c)(3) Nonprofit</span>
                </div>
                <div className="flex items-center space-x-2 bg-ccfw-gold/20 px-3 py-1.5 rounded-full">
                  <svg className="h-4 w-4 text-ccfw-gold" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  <span className="text-xs font-bold text-white">500+ Members</span>
                </div>
              </div>
            </div>

            {/* Quick Links */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold text-ccfw-teal tracking-tight">Quick Links</h3>
              <ul className="space-y-3">
                <li>
                  <a
                    href="https://ccfriendsofwildlife.org/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
                  >
                    <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                    <span>Main Website</span>
                  </a>
                </li>
                <li>
                  <a
                    href="https://ccfriendsofwildlife.org/events-and-programs/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
                  >
                    <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                    <span>Events & Programs</span>
                  </a>
                </li>
                <li>
                  <a
                    href="https://ccfriendsofwildlife.org/burrowing-owls/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
                  >
                    <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                    <span>Burrowing Owls</span>
                  </a>
                </li>
                <li>
                  <a
                    href="https://ccfriendsofwildlife.org/about-us/"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group flex items-center space-x-2 text-ccfw-maroon hover:text-ccfw-teal transition-colors font-medium"
                  >
                    <svg className="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                    <span>About Us</span>
                  </a>
                </li>
              </ul>
            </div>

            {/* Contact & Social */}
            <div className="space-y-4">
              <h3 className="text-lg font-bold text-ccfw-teal tracking-tight">Get In Touch</h3>

              <div className="space-y-4">
                <div className="flex items-center space-x-3 p-3 bg-white/50 rounded-xl border border-ccfw-teal/20">
                  <div className="bg-gradient-to-r from-ccfw-teal to-ccfw-maroon p-2 rounded-lg">
                    <svg className="h-4 w-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                  </div>
                  <div>
                    <p className="text-xs text-ccfw-maroon font-medium">Call Us</p>
                    <a
                      href="tel:239-980-2593"
                      className="text-ccfw-maroon font-bold hover:text-ccfw-teal transition-colors"
                    >
                      (239) 980-2593
                    </a>
                  </div>
                </div>

                <div className="space-y-3">
                  <p className="text-sm font-bold text-ccfw-teal tracking-wide uppercase">Follow Us</p>
                  <div className="flex space-x-3">
                    <a
                      href="https://www.facebook.com/CCFriendsofWildlife"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group p-3 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
                      </svg>
                    </a>
                    <a
                      href="https://www.instagram.com/ccfriendsofwildlife/"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group p-3 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                      </svg>
                    </a>
                    <a
                      href="https://www.youtube.com/channel/UC-VIPk6M1K4xEA-gXv6_cZQ"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="group p-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Footer Bottom */}
          <div className="pt-8 border-t border-ccfw-teal/20">
            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
              <div className="text-center md:text-left">
                <p className="text-ccfw-maroon font-medium">
                  &copy; 2024 Cape Coral Friends of Wildlife. All rights reserved.
                </p>
                <p className="text-xs text-ccfw-maroon mt-1">
                  Made with ❤️ for Florida's wildlife
                </p>
              </div>
              <div className="flex items-center space-x-6 text-xs text-ccfw-maroon font-medium">
                <span>Privacy Policy</span>
                <span>Terms of Service</span>
                <span>Accessibility</span>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}