import React from 'react';
import Link from 'next/link';
import { Eye, Mail, Users, Heart, ExternalLink } from 'lucide-react';

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About CCFW',
  description: 'Learn about Cape Coral Friends of Wildlife and our mission to protect Florida wildlife.',
};



export default function AboutPage() {
  return (
    <div className="max-w-5xl mx-auto px-6 py-16 space-y-20">
      {/* Mission */}
      <section className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div className="space-y-6">
          <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
            <Eye size={16} /> About CCFW
          </div>
          <h1 className="text-4xl font-black text-white leading-tight">Cape Coral Friends of Wildlife</h1>
          <p className="text-stone-400 text-lg leading-relaxed">
            Cape Coral Friends of Wildlife (CCFW) is a nonprofit organization dedicated to protecting, monitoring, and advocating for native wildlife in Cape Coral and Southwest Florida.
          </p>
          <p className="text-stone-400 leading-relaxed">
            Founded by passionate local residents, we've grown into a community of hundreds of volunteers who monitor owl burrows, restore habitat, educate the public, and run the wildlife cameras you're watching right now.
          </p>
          <div className="flex gap-4 pt-2 flex-wrap">
            <a
              href="https://ccfriendsofwildlife.org"
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-teal text-white font-bold text-sm hover:bg-tealLight transition-all"
            >
              <ExternalLink size={16} /> Visit Main Website
            </a>
            <Link
              href="/donate"
              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-gold/10 border border-gold/30 text-gold font-bold text-sm hover:bg-gold/20 transition-all"
            >
              <Heart size={16} /> Support Us
            </Link>
          </div>
        </div>

        <div className="bg-surfaceGreen border border-white/5 rounded-3xl p-10 space-y-8">
          {[
            { icon: Users, value: '500+', label: 'Active Volunteers' },
            { icon: Eye, value: '2,000+', label: 'Burrows Monitored' },
            { icon: Heart, value: '25+', label: 'Years of Conservation' },
          ].map(({ icon: Icon, value, label }) => (
            <div key={label} className="flex items-center gap-6">
              <div className="w-14 h-14 rounded-2xl bg-teal/10 flex items-center justify-center shrink-0">
                <Icon size={26} className="text-teal" />
              </div>
              <div>
                <div className="text-3xl font-black text-gold">{value}</div>
                <div className="text-sm text-stone-400 font-semibold mt-0.5">{label}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Mission panels */}
      <section className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {[
          {
            title: 'Monitor',
            desc: 'Our volunteers walk hundreds of miles each year counting and mapping active burrowing owl burrows across Cape Coral.',
          },
          {
            title: 'Educate',
            desc: 'We visit schools, community events, and host public walks to help residents understand and appreciate their wild neighbors.',
          },
          {
            title: 'Protect',
            desc: 'We advocate for wildlife-friendly development policies, acquire land for habitat, and work with the city on conservation ordinances.',
          },
        ].map(({ title, desc }) => (
          <div key={title} className="bg-surfaceGreen border border-white/5 rounded-2xl p-8 space-y-3">
            <div className="w-2 h-8 bg-gradient-to-b from-teal to-gold rounded-full" />
            <h3 className="text-xl font-bold text-white">{title}</h3>
            <p className="text-stone-400 text-sm leading-relaxed">{desc}</p>
          </div>
        ))}
      </section>

      {/* Contact */}
      <section className="bg-surfaceGreen border border-white/5 rounded-3xl p-10 space-y-6">
        <h2 className="text-2xl font-black text-white">Get in Touch</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-4">
            <a
              href="mailto:info@ccfriendsofwildlife.org"
              className="flex items-center gap-3 text-stone-300 hover:text-teal transition-colors"
            >
              <div className="w-10 h-10 rounded-xl bg-teal/10 flex items-center justify-center">
                <Mail size={18} className="text-teal" />
              </div>
              <div>
                <p className="text-xs text-stone-500 font-semibold uppercase tracking-wider">Email</p>
                <p className="font-semibold text-sm">info@ccfriendsofwildlife.org</p>
              </div>
            </a>
          </div>
          <div>
            <p className="text-stone-400 text-sm leading-relaxed">
              Whether you want to volunteer, report an injured owl, ask about conservation programs, or partner with us — we'd love to hear from you.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}