import React from 'react';
import { Lock, Users, ClipboardList } from 'lucide-react';
import Link from 'next/link';

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Volunteer',
  description: 'Join the CCFW volunteer team for owl surveys and habitat restoration.',
};



export default function VolunteerPage() {
  return (
    <div className="max-w-5xl mx-auto px-6 py-16 space-y-12">
      <header className="space-y-4 max-w-3xl">
        <div className="flex items-center gap-2 text-teal text-sm font-bold uppercase tracking-widest">
          <Users size={16} /> Volunteer Portal
        </div>
        <h1 className="text-4xl font-black text-white">Join the CCFW Team</h1>
        <p className="text-stone-400 text-lg leading-relaxed">
          Our volunteers are the backbone of everything we do. From burrow surveys to habitat restoration, there's a role for everyone.
        </p>
      </header>

      {/* Login gate notice */}
      <div className="bg-surfaceGreen border border-teal/20 rounded-2xl p-8 flex items-start gap-5">
        <div className="w-12 h-12 rounded-xl bg-teal/10 flex items-center justify-center shrink-0">
          <Lock size={22} className="text-teal" />
        </div>
        <div className="space-y-2">
          <h3 className="font-bold text-white text-lg">Volunteer Dashboard</h3>
          <p className="text-stone-400 text-sm leading-relaxed">
            The full volunteer dashboard (task assignments, hour logging, equipment checkout, and leaderboard) requires a CCFW volunteer account. Log in or register to access.
          </p>
          <div className="flex gap-3 pt-2">
            <Link href="/login" className="px-5 py-2 rounded-lg bg-teal text-white font-bold text-sm hover:bg-tealLight transition-all">
              Log In
            </Link>
            <a href="mailto:info@ccfriendsofwildlife.org" className="px-5 py-2 rounded-lg border border-white/10 text-stone-300 font-bold text-sm hover:bg-white/5 transition-all">
              Request Access
            </a>
          </div>
        </div>
      </div>

      {/* Volunteer roles */}
      <div className="space-y-6">
        <h2 className="text-2xl font-black text-white">Volunteer Opportunities</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {[
            {
              icon: '🦉',
              title: 'Owl Surveyor',
              desc: 'Walk designated survey routes and record burrow activity on a monthly basis.',
              commitment: '2–4 hrs/month',
            },
            {
              icon: '🌿',
              title: 'Habitat Restorer',
              desc: 'Plant native vegetation, remove invasives, and restore critical burrowing owl habitat.',
              commitment: '4 hrs/quarter',
            },
            {
              icon: '📸',
              title: 'Camera Monitor',
              desc: 'Review footage from wildlife cameras, flag notable events, and maintain equipment.',
              commitment: 'Remote, flexible',
            },
          ].map(({ icon, title, desc, commitment }) => (
            <div key={title} className="bg-surfaceGreen border border-white/5 rounded-2xl p-6 space-y-3">
              <div className="text-4xl">{icon}</div>
              <h3 className="font-bold text-white text-lg">{title}</h3>
              <p className="text-stone-400 text-sm leading-relaxed">{desc}</p>
              <div className="flex items-center gap-2">
                <ClipboardList size={12} className="text-teal" />
                <span className="text-xs text-stone-500 font-semibold">{commitment}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}