import React from 'react';
import dynamic from 'next/dynamic';
import { Map } from 'lucide-react';

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Burrow Map',
  description: 'Interactive map of burrowing owl burrows in Cape Coral, Florida.',
};

const BurrowMap = dynamic(() => import('./BurrowMap'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center text-stone-500">
      <div className="animate-spin w-8 h-8 border-2 border-teal border-t-transparent rounded-full" />
    </div>
  ),
});

export default function MapPage() {
  return (
    <div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
      <header className="space-y-4">
        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
          <Map size={16} /> Burrow Map
        </div>
        <h1 className="text-4xl font-black text-white">Burrowing Owl Locations</h1>
        <p className="text-stone-400 text-lg max-w-2xl leading-relaxed">
          An interactive map of active burrowing owl burrows monitored by CCFW volunteers across Cape Coral.
        </p>
      </header>

      {/* Interactive Leaflet Map */}
      <div className="relative rounded-3xl overflow-hidden bg-surfaceGreen border border-white/5 shadow-2xl" style={{ height: 600 }}>
        <BurrowMap />
      </div>

      {/* Legend */}
      <div className="flex flex-wrap gap-6 px-4 text-sm text-stone-400">
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-teal shadow-[0_0_8px_rgba(0,130,167,0.8)]" />
          Active burrow
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-stone-600" />
          Inactive burrow
        </div>
        <div className="flex items-center gap-2">
          <div className="w-3 h-3 rounded-full bg-gold" />
          Camera location
        </div>
      </div>
    </div>
  );
}