import React from 'react';
import { TreePine } from 'lucide-react';
import { api, Wildlife } from '@/lib/api';
import WildlifeCard from '../components/WildlifeCard';

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Wildlife Guide',
  description: 'Discover Cape Coral wildlife including burrowing owls and gopher tortoises.',
};



// Fallback data when API unavailable
const FALLBACK: Wildlife[] = [
  {
    id: '1', name: 'Burrowing Owl', scientificName: 'Athene cunicularia',
    status: 'Threatened',
    description: 'Cape Coral\'s official city bird. These small ground-dwelling owls nest in burrows, are active during the day, and are a Species of Special Concern in Florida. CCFW monitors thousands of active burrow sites.',
    habitat: 'Open grasslands, vacant lots, golf courses',
  },
  {
    id: '2', name: 'Gopher Tortoise', scientificName: 'Gopherus polyphemus',
    status: 'Threatened',
    description: 'A keystone species whose burrows shelter over 350 other animal species. Their habitat is disappearing rapidly due to development. Florida law protects gopher tortoises and their burrows.',
    habitat: 'Dry upland habitats, scrub, longleaf pine',
  },
  {
    id: '3', name: 'Florida Scrub-Jay', scientificName: 'Aphelocoma coerulescens',
    status: 'Threatened',
    description: 'Florida\'s only endemic bird species, found nowhere else on Earth. These intelligent, cooperative-breeding birds require open, scrubby habitat that has declined by 90% over the past century.',
    habitat: 'Florida scrub habitat',
  },
  {
    id: '4', name: 'Florida Manatee', scientificName: 'Trichechus manatus latirostris',
    status: 'Threatened',
    description: 'Gentle marine mammals that frequent Southwest Florida\'s warm waters. Threats include boat strikes, cold stress, and habitat loss. Cape Coral\'s canals serve as critical manatee habitat.',
    habitat: 'Coastal waterways, canals, springs',
  },
];

async function getWildlife(): Promise<Wildlife[]> {
  try { return await api.getWildlife(); }
  catch { return FALLBACK; }
}

export default async function WildlifePage() {
  const species = await getWildlife();

  return (
    <div className="max-w-7xl mx-auto px-6 py-16 space-y-14">
      <header className="space-y-4 max-w-3xl">
        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
          <TreePine size={16} /> Native Species
        </div>
        <h1 className="text-4xl font-black text-white">Southwest Florida Wildlife</h1>
        <p className="text-stone-400 text-lg leading-relaxed">
          Cape Coral and Southwest Florida are home to remarkable native species. CCFW works to protect, monitor, and educate the community about these irreplaceable animals.
        </p>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {species.map((s) => <WildlifeCard key={s.id} species={s} />)}
      </div>

      {/* Conservation info panel */}
      <div className="bg-surfaceGreen border border-white/5 rounded-3xl p-10 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="md:col-span-2 space-y-4">
          <h3 className="text-2xl font-black text-white">Why It Matters</h3>
          <p className="text-stone-400 leading-relaxed">
            Southwest Florida's rapid growth has put enormous pressure on wildlife habitat. Cape Coral, despite being one of the most densely populated cities in Florida, still harbors significant populations of protected species — but only because of active conservation efforts.
          </p>
          <p className="text-stone-400 leading-relaxed">
            CCFW's work includes burrow monitoring, community education, habitat restoration, and advocacy to ensure these species have a future in Cape Coral.
          </p>
        </div>
        <div className="flex flex-col justify-center gap-6">
          {[
            { num: '2,000+', label: 'Owl burrows monitored' },
            { num: '25+', label: 'Years of conservation' },
            { num: '100%', label: 'Volunteer powered' },
          ].map(({ num, label }) => (
            <div key={label} className="text-center">
              <div className="text-3xl font-black text-gold">{num}</div>
              <div className="text-xs text-stone-500 font-semibold uppercase tracking-wider mt-1">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}