import React, { useState } from "react";
import { motion } from "framer-motion";
import { Search, ShieldCheck, MapPin, BellRing, Users, PhoneCall, Radio, FileWarning, CheckCircle2, Activity, Lock, Hospital, Building2, Smartphone, Globe2, ArrowRight, UserRoundSearch } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const alerts = [
  {
    type: "Missing Child",
    level: "Critical",
    location: "Dar es Salaam",
    time: "12 min ago",
    status: "Verified",
  },
  {
    type: "Missing Adult",
    level: "High",
    location: "Morogoro Road",
    time: "28 min ago",
    status: "Under review",
  },
  {
    type: "Elderly/Wandering Case",
    level: "High",
    location: "Kariakoo",
    time: "41 min ago",
    status: "Verified",
  },
];

const steps = [
  {
    icon: FileWarning,
    title: "Report a missing person",
    text: "Family, police, hospital, school, or verified community agent submits a structured report with last known details.",
  },
  {
    icon: ShieldCheck,
    title: "Verify before broadcast",
    text: "Trusted admins review identity, urgency, duplicates, consent, and evidence before public alert activation.",
  },
  {
    icon: BellRing,
    title: "Send emergency alerts",
    text: "Verified alerts reach communities through app push, SMS, WhatsApp, USSD, radio partners, and dashboards.",
  },
  {
    icon: UserRoundSearch,
    title: "Collect sightings safely",
    text: "Citizens submit tips, locations, and media privately while responders manage follow-up from one dashboard.",
  },
];

const channels = [
  { icon: Smartphone, label: "Mobile app" },
  { icon: PhoneCall, label: "SMS & USSD" },
  { icon: Radio, label: "Radio partners" },
  { icon: Globe2, label: "Web alerts" },
  { icon: Hospital, label: "Hospitals" },
  { icon: Building2, label: "Police & NGOs" },
];

export default function AlertUnidaInterface() {
  const [active, setActive] = useState("Public Alert");

  return (
    <div className="min-h-screen bg-[#07111f] text-white">
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-32 -left-24 h-96 w-96 rounded-full bg-red-500/20 blur-3xl" />
        <div className="absolute top-20 right-0 h-96 w-96 rounded-full bg-yellow-400/20 blur-3xl" />
        <div className="absolute bottom-0 left-1/3 h-96 w-96 rounded-full bg-cyan-400/10 blur-3xl" />
      </div>

      <header className="relative z-10 border-b border-white/10 bg-white/5 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-red-500 via-yellow-400 to-cyan-400 shadow-lg">
              <BellRing className="h-6 w-6 text-[#07111f]" />
            </div>
            <div>
              <p className="text-lg font-black tracking-tight">UNIDA Alert</p>
              <p className="text-xs text-white/60">alert.unidatechs.com</p>
            </div>
          </div>
          <nav className="hidden items-center gap-6 text-sm text-white/75 md:flex">
            <a href="#how" className="hover:text-white">How it works</a>
            <a href="#dashboard" className="hover:text-white">Dashboard</a>
            <a href="#partners" className="hover:text-white">Partners</a>
          </nav>
          <Button className="rounded-full bg-yellow-400 px-5 text-[#07111f] hover:bg-yellow-300">
            Report Now
          </Button>
        </div>
      </header>

      <main className="relative z-10">
        <section className="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 md:grid-cols-[1.05fr_.95fr] md:py-24">
          <motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm text-white/80">
              <span className="h-2 w-2 rounded-full bg-red-400 animate-pulse" />
              Missing person emergency coordination platform
            </div>
            <h1 className="max-w-4xl text-4xl font-black leading-tight tracking-tight md:text-6xl">
              Faster alerts. Trusted reports. Safer returns.
            </h1>
            <p className="mt-5 max-w-2xl text-base leading-8 text-white/70 md:text-lg">
              UNIDA Alert is a real-time missing-person response interface for children, adults, elderly people, patients, and vulnerable individuals. It connects families, citizens, police, hospitals, NGOs, transport teams, and local responders through verified alerts and secure sighting reports.
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button className="h-12 rounded-full bg-red-500 px-7 text-white hover:bg-red-600">
                Activate Emergency Alert <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
              <Button variant="outline" className="h-12 rounded-full border-white/20 bg-white/10 px-7 text-white hover:bg-white/15">
                View Partner Dashboard
              </Button>
            </div>
            <div className="mt-8 grid max-w-xl grid-cols-3 gap-3">
              {[
                ["24/7", "response flow"],
                ["SMS", "USSD ready"],
                ["AI", "match support"],
              ].map(([big, small]) => (
                <div key={big} className="rounded-2xl border border-white/10 bg-white/10 p-4">
                  <p className="text-2xl font-black text-yellow-300">{big}</p>
                  <p className="text-xs text-white/60">{small}</p>
                </div>
              ))}
            </div>
          </motion.div>

          <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.6, delay: 0.1 }}>
            <Card className="overflow-hidden rounded-[2rem] border-white/10 bg-white/10 text-white shadow-2xl backdrop-blur-xl">
              <CardContent className="p-0">
                <div className="border-b border-white/10 bg-white/10 p-5">
                  <div className="flex items-center justify-between">
                    <div>
                      <p className="text-sm text-white/60">Live Alert Center</p>
                      <h2 className="text-2xl font-black">Emergency Queue</h2>
                    </div>
                    <div className="rounded-full bg-red-500/20 px-3 py-1 text-sm font-bold text-red-200">LIVE</div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 rounded-2xl bg-[#07111f]/70 px-4 py-3 text-white/70">
                    <Search className="h-4 w-4" />
                    <span className="text-sm">Search case, location, ID, hospital, station...</span>
                  </div>
                </div>

                <div className="space-y-3 p-5">
                  {alerts.map((alert, idx) => (
                    <div key={idx} className="rounded-3xl border border-white/10 bg-[#07111f]/60 p-4">
                      <div className="flex items-start justify-between gap-3">
                        <div className="flex gap-3">
                          <div className="mt-1 flex h-11 w-11 items-center justify-center rounded-2xl bg-red-500/20">
                            <MapPin className="h-5 w-5 text-red-300" />
                          </div>
                          <div>
                            <div className="flex flex-wrap items-center gap-2">
                              <p className="font-bold">{alert.type}</p>
                              <span className="rounded-full bg-yellow-400/15 px-2 py-1 text-xs font-bold text-yellow-200">{alert.level}</span>
                            </div>
                            <p className="mt-1 text-sm text-white/60">{alert.location} • {alert.time}</p>
                          </div>
                        </div>
                        <span className="rounded-full bg-white/10 px-3 py-1 text-xs text-white/70">{alert.status}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </motion.div>
        </section>

        <section id="how" className="mx-auto max-w-7xl px-5 py-10">
          <div className="mb-8 max-w-2xl">
            <p className="font-bold text-yellow-300">Verified response workflow</p>
            <h2 className="mt-2 text-3xl font-black tracking-tight md:text-4xl">From report to safe community action</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-4">
            {steps.map((step, idx) => {
              const Icon = step.icon;
              return (
                <Card key={step.title} className="rounded-3xl border-white/10 bg-white/10 text-white">
                  <CardContent className="p-6">
                    <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-yellow-400/15">
                      <Icon className="h-6 w-6 text-yellow-300" />
                    </div>
                    <p className="text-sm font-black text-white/40">0{idx + 1}</p>
                    <h3 className="mt-2 text-lg font-black">{step.title}</h3>
                    <p className="mt-3 text-sm leading-6 text-white/60">{step.text}</p>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </section>

        <section id="dashboard" className="mx-auto grid max-w-7xl gap-6 px-5 py-14 md:grid-cols-[.9fr_1.1fr]">
          <Card className="rounded-[2rem] border-white/10 bg-white/10 text-white">
            <CardContent className="p-7">
              <p className="font-bold text-cyan-300">Command dashboard</p>
              <h2 className="mt-2 text-3xl font-black">Designed for families, responders, and institutions</h2>
              <p className="mt-4 leading-7 text-white/65">
                The dashboard gives verified partners a shared operating view: active cases, priority level, last known location, sighting timeline, responder assignments, hospital checks, and impact reporting.
              </p>
              <div className="mt-6 flex flex-wrap gap-2">
                {['Public Alert', 'Case Review', 'Sightings', 'Responder Map'].map((tab) => (
                  <button
                    key={tab}
                    onClick={() => setActive(tab)}
                    className={`rounded-full px-4 py-2 text-sm font-bold transition ${active === tab ? 'bg-yellow-400 text-[#07111f]' : 'bg-white/10 text-white/70 hover:bg-white/15'}`}
                  >
                    {tab}
                  </button>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="rounded-[2rem] border-white/10 bg-white/10 text-white">
            <CardContent className="p-6">
              <div className="rounded-[1.5rem] border border-white/10 bg-[#07111f]/75 p-5">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-white/50">Active module</p>
                    <h3 className="text-2xl font-black">{active}</h3>
                  </div>
                  <Activity className="h-6 w-6 text-cyan-300" />
                </div>
                <div className="mt-5 grid gap-3 md:grid-cols-2">
                  {[
                    [CheckCircle2, "Verified case approval"],
                    [MapPin, "Last known location map"],
                    [Users, "Responder assignment"],
                    [Lock, "Private evidence storage"],
                  ].map(([Icon, text]) => (
                    <div key={text} className="rounded-2xl bg-white/10 p-4">
                      <Icon className="mb-3 h-5 w-5 text-yellow-300" />
                      <p className="font-bold">{text}</p>
                    </div>
                  ))}
                </div>
                <div className="mt-5 h-52 rounded-[1.5rem] border border-white/10 bg-gradient-to-br from-cyan-400/15 via-yellow-400/10 to-red-500/20 p-5">
                  <div className="flex h-full items-center justify-center rounded-2xl border border-dashed border-white/20 bg-[#07111f]/40 text-center">
                    <div>
                      <MapPin className="mx-auto mb-3 h-8 w-8 text-red-300" />
                      <p className="font-black">Responder map preview</p>
                      <p className="mt-1 text-sm text-white/55">Case zones, sightings, nearby institutions, and alert radius.</p>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </section>

        <section id="partners" className="mx-auto max-w-7xl px-5 py-12">
          <div className="rounded-[2rem] border border-white/10 bg-white/10 p-7 md:p-10">
            <div className="grid gap-8 md:grid-cols-[.9fr_1.1fr] md:items-center">
              <div>
                <p className="font-bold text-yellow-300">Multi-channel emergency reach</p>
                <h2 className="mt-2 text-3xl font-black md:text-4xl">Built for African realities, not only smartphones</h2>
                <p className="mt-4 leading-7 text-white/65">
                  UNIDA Alert can support low-data access, Swahili-first content, SMS/USSD reporting, verified partner dashboards, and controlled public broadcasting.
                </p>
              </div>
              <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
                {channels.map((item) => {
                  const Icon = item.icon;
                  return (
                    <div key={item.label} className="rounded-3xl border border-white/10 bg-[#07111f]/55 p-5">
                      <Icon className="mb-3 h-6 w-6 text-cyan-300" />
                      <p className="font-bold">{item.label}</p>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-5 pb-16">
          <div className="rounded-[2rem] bg-gradient-to-r from-red-500 via-yellow-400 to-cyan-400 p-1">
            <div className="rounded-[1.8rem] bg-[#07111f] p-8 text-center md:p-12">
              <h2 className="text-3xl font-black md:text-5xl">Ready for pilot discussions</h2>
              <p className="mx-auto mt-4 max-w-2xl text-white/65">
                Start with a controlled pilot involving local authorities, hospitals, schools, NGOs, telecom channels, and trusted community responders.
              </p>
              <div className="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
                <Button className="h-12 rounded-full bg-yellow-400 px-7 text-[#07111f] hover:bg-yellow-300">Request Partnership</Button>
                <Button variant="outline" className="h-12 rounded-full border-white/20 bg-white/10 px-7 text-white hover:bg-white/15">Download Concept Brief</Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}