import React from "react";
import { motion, useInView } from "framer-motion";
import { Star, Users, BookOpenCheck, ShieldCheck, ArrowDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

/**
 * One‑page interactive presentation for the civic initiative “Për Prishtinën”.
 * — TailwindCSS for styling
 * — Framer Motion for scroll / hover animations
 * — Lucide icons for simple visuals
 */
export default function PerPrishtinenOnePager() {
  const categories = [
    { label: "Aktivistë rinorë", count: 15, icon: Users },
    { label: "Urbanistë & inxhinierë", count: 10, icon: BookOpenCheck },
    { label: "Arsim & kulturë", count: 8, icon: BookOpenCheck },
    { label: "Shëndetësi & sociale", count: 6, icon: ShieldCheck },
    { label: "Tek & start‑up", count: 5, icon: Star },
    { label: "Biznese të vogla", count: 5, icon: Users },
    { label: "Komunitete pakicë", count: 4, icon: Users },
    { label: "Aftësi të kufizuara", count: 3, icon: ShieldCheck },
  ];

  return (
    <div className="font-sans scroll-smooth bg-white text-gray-800">
      {/* HERO */}
      <section className="relative h-screen flex flex-col justify-center items-center text-center bg-gradient-to-br from-[#0057B7] to-[#00449e] text-white p-6">
        <motion.h1
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-5xl sm:text-7xl font-extrabold tracking-tight drop-shadow-xl mb-4"
        >
          Për Prishtinën
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1, delay: 0.3 }}
          className="text-lg sm:text-2xl max-w-2xl leading-snug"
        >
          "Prishtina punon për ne" — Nisma qytetare për zgjedhjet komunale të 12 tetorit 2025.
        </motion.p>
        <motion.div
          className="mt-8"
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <Button size="lg" className="text-lg bg-[#FFD700] hover:bg-[#e6c200] text-[#0057B7] font-bold rounded-2xl shadow-lg px-8 py-4">
            Bashkohu
          </Button>
        </motion.div>
        <motion.div
          className="absolute bottom-10 flex justify-center w-full"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 2 }}
        >
          <ArrowDown className="animate-bounce w-8 h-8" />
        </motion.div>
      </section>

      {/* ABOUT FEHMI */}
      <InViewSection>
        <div className="container mx-auto px-4 py-20 grid md:grid-cols-2 gap-10 items-center">
          <motion.img
            src="https://images.unsplash.com/photo-1603570418155-5c4d287ea4cb?auto=format&fit=crop&w=600&q=60"
            alt="Fehmi Kupina"
            className="w-full rounded-2xl shadow-xl object-cover max-h-[450px]"
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8 }}
          />
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-6"
          >
            <h2 className="text-3xl sm:text-4xl font-bold text-[#0057B7]">Fehmi Kupina</h2>
            <p className="text-lg leading-relaxed">
              Kryekandidati ynë ka drejtuar Kuvendin Komunal të Prishtinës, ka hapur seancat “live” dhe ka nisur buxhetimin pjesëmarrës. Motoja e tij: <span className="font-semibold italic">“Institucioni është i qytetarëve, jo i partive.”</span>
            </p>
            <ul className="list-disc pl-5 space-y-2 text-base">
              <li>Transparencë radikale & kontrata të hapura</li>
              <li>Buxhetim pjesëmarrës — €300K pilot (2023)</li>
              <li>Konsensus për limitimin e tarifave të deponisë</li>
            </ul>
            <Button className="bg-[#0057B7] hover:bg-[#00449e] text-white rounded-xl px-6 py-3 shadow">
              Lexo më shumë
            </Button>
          </motion.div>
        </div>
      </InViewSection>

      {/* CANDIDATE GROUPS */}
      <InViewSection className="bg-gray-50 py-20">
        <div className="container mx-auto px-4 text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-[#0057B7] mb-4">56 kandidatë – një Prishtinë</h2>
          <p className="text-lg max-w-2xl mx-auto">
            Një ekip i larmishëm nga çdo lagje dhe fushë profesioniste. Ja si shpërndahen ata:
          </p>
        </div>
        <div className="container mx-auto px-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {categories.map(({ label, count, icon: Icon }, idx) => (
            <motion.div
              key={label}
              className="flex justify-center"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: idx * 0.05 }}
              viewport={{ once: true }}
            >
              <Card className="w-full rounded-2xl shadow-md hover:shadow-xl transition-shadow">
                <CardContent className="p-6 flex flex-col items-center text-center space-y-4">
                  <Icon className="w-10 h-10 text-[#FFD700]" />
                  <span className="text-5xl font-extrabold text-[#0057B7]">{count}</span>
                  <p className="text-base font-medium">{label}</p>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </InViewSection>

      {/* PRINCIPLES */}
      <InViewSection>
        <div className="container mx-auto px-4 py-20 text-center space-y-8">
          <h2 className="text-3xl sm:text-4xl font-bold text-[#0057B7]">Parimet tona të forta</h2>
          <div className="grid md:grid-cols-3 gap-8 text-left">
            {[
              {
                title: "Barazi gjinore",
                text: "Të paktën 50% gra, me renditje alternuese në listë."
              },
              {
                title: "Zëri i të rinjve",
                text: "Minimumi 20% e listës nën moshën 30 vjeç."
              },
              {
                title: "Balancë lagjesh",
                text: "Asnjë lagje më shumë se 10% e vendeve."
              }
            ].map(({ title, text }, i) => (
              <motion.div
                key={title}
                className="p-6 rounded-2xl border border-gray-200 shadow-sm bg-white"
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.6, delay: i * 0.1 }}
                viewport={{ once: true }}
              >
                <h3 className="text-xl font-semibold mb-2 text-[#FFD700]">{title}</h3>
                <p className="text-base leading-relaxed">{text}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </InViewSection>

      {/* FOOTER */}
      <footer className="bg-[#0057B7] text-white py-10 text-center">
        <p className="text-lg">Kontakto: <a href="mailto:media@perprishtinen.org" className="underline font-medium">media@perprishtinen.org</a></p>
        <p className="mt-2 text-sm opacity-75">© 2025 Për Prishtinën. Të gjitha të drejtat e rezervuara.</p>
      </footer>
    </div>
  );
}

/**
 * Helper component to wrap sections with Framer Motion viewport detection.
 */
function InViewSection({ children, className = "" }) {
  return (
    <motion.section
      className={className}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.2 }}
      variants={{ hidden: {}, visible: {} }}
    >
      {children}
    </motion.section>
  );
}