owl-stream/app/page.tsx

import React from 'react';
import Link from 'next/link';
import { Tv2, Heart, ChevronRight, TreePine, Calendar } from 'lucide-react';
import { api, Stream, Stat } from '@/lib/api';
import StatsBar from './components/StatsBar';
import StreamCard from './components/StreamCard';

async function getData(): Promise<{ stats: Stat | null; streams: Stream[] }> {
  try {
    const [stats, streams] = await Promise.all([api.getStats(), api.getStreams()]);
    return { stats, streams: streams.slice(0, 3) };
  } catch {
    return { stats: null, streams: [] };
  }
}

export default async function Home() {
  const { stats, streams } = await getData();

  return (
    <div>
      {/* Hero */}
      <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 bg-gradient-to-br from-deepGreen via-surfaceGreen to-deepGreen" />
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_rgba(0,130,167,0.12)_0%,_transparent_70%)]" />
        {/* Decorative circles */}
        <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-teal/5 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
        <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-gold/5 rounded-full blur-3xl translate-x-1/2 -translate-y-1/2" />

        <div className="relative z-10 max-w-5xl mx-auto px-6 text-center space-y-8">
          {/* Live badge */}
          <div className="inline-flex items-center gap-2 bg-red-500/10 border border-red-500/30 px-4 py-1.5 rounded-full text-sm text-red-400 font-bold animate-pulse">
            <span className="w-2 h-2 rounded-full bg-red-500" />
            Cameras Live Now
          </div>

          <h1 className="text-5xl md:text-7xl font-black tracking-tight text-white leading-none">
            Watch Cape Coral's<br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-teal to-gold">
              Burrowing Owls
            </span>
            <br />Live
          </h1>

          <p className="text-stone-400 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed">
            Free, 24/7 wildlife cameras brought to you by Cape Coral Friends of Wildlife. Watch, learn, and help protect Florida's native species.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
            <Link
              href="/streams"
              className="inline-flex items-center gap-2 bg-teal hover:bg-tealLight text-white font-bold px-8 py-4 rounded-xl shadow-xl shadow-teal/20 transition-all active:scale-95"
            >
              <Tv2 size={20} /> Watch Live Cams
            </Link>
            <Link
              href="/donate"
              className="inline-flex items-center gap-2 bg-gold/10 border border-gold/30 hover:bg-gold/20 text-gold font-bold px-8 py-4 rounded-xl transition-all active:scale-95"
            >
              <Heart size={18} /> Support the Mission
            </Link>
          </div>
        </div>
      </section>

      {/* Stats Bar */}
      {stats && (
        <section className="max-w-6xl mx-auto px-6 -mt-8 relative z-10">
          <StatsBar stats={stats} />
        </section>
      )}

      {/* Latest Streams */}
      {streams.length > 0 && (
        <section className="max-w-7xl mx-auto px-6 py-24 space-y-10">
          <div className="flex items-end justify-between">
            <div>
              <h2 className="text-3xl font-black text-white">Live Cameras</h2>
              <p className="text-stone-400 mt-1">Watch our wildlife cams in real time</p>
            </div>
            <Link href="/streams" className="flex items-center gap-1 text-teal text-sm font-semibold hover:gap-2 transition-all">
              View all <ChevronRight size={16} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {streams.map((s) => <StreamCard key={s.id} stream={s} />)}
          </div>
        </section>
      )}

      {/* Mission CTA grid */}
      <section className="max-w-7xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-6">
        {[
          {
            icon: TreePine,
            title: 'Wildlife Guide',
            desc: 'Learn about burrowing owls, gopher tortoises, scrub-jays, and manatees.',
            href: '/wildlife',
            cta: 'Explore Species',
            color: 'text-emerald-400',
          },
          {
            icon: Heart,
            title: 'Support CCFW',
            desc: 'Your donation funds cameras, land preservation, and volunteer programs.',
            href: '/donate',
            cta: 'Donate Now',
            color: 'text-gold',
          },
          {
            icon: Calendar,
            title: 'Upcoming Events',
            desc: 'Join cleanups, educational walks, and community conservation events.',
            href: '/events',
            cta: 'See Events',
            color: 'text-teal',
          },
        ].map(({ icon: Icon, title, desc, href, cta, color }) => (
          <div key={href} className="bg-surfaceGreen border border-white/5 rounded-2xl p-8 hover:border-white/10 transition-all group">
            <Icon size={32} className={`${color} mb-5 group-hover:scale-110 transition-transform`} />
            <h3 className="font-bold text-white text-xl mb-2">{title}</h3>
            <p className="text-stone-400 text-sm leading-relaxed mb-6">{desc}</p>
            <Link href={href} className="inline-flex items-center gap-1 text-sm font-bold text-stone-300 hover:text-white group-hover:gap-2 transition-all">
              {cta} <ChevronRight size={14} />
            </Link>
          </div>
        ))}
      </section>
    </div>
  );
}