import React, { useState, useEffect, useRef } from "react";
import {
  Users,
  Bug,
  BarChart,
  MessageCircle,
  Mic,
  Video,
  Building2,
  Landmark,
  ChevronDown,
  Facebook,
  Instagram,
  Twitter,
  Phone,
  Mail,
} from "lucide-react";
import { Link } from "react-router-dom";
import firstSlide from "../assets/firstSlide.jpg";
import Footer from "../components/Footer";
import FloatingChatButton from "../components/FloatingChatButton";
// Always at least two images for swipe effect, even if identical
const heroImages = [firstSlide, firstSlide];

const ministries = [
  "Ministry of Agriculture, Animal Industry and Fisheries",
  "Ministry of Defence and Veteran Affairs",
  "Ministry of Education and Sports",
  "Ministry of Energy and Mineral Development",
  "Ministry of Finance, Planning and Economic Development",
  "Ministry of Foreign Affairs",
  "Ministry of Gender, Labour and Social Development",
  "Ministry of Health",
  "Ministry of Information and Communications Technology",
  "Ministry of Internal Affairs",
  "Ministry of Justice and Constitutional Affairs",
  "Ministry of Lands, Housing and Urban Development",
  "Ministry of Local Government",
  "Ministry of Public Service",
  "Ministry of Tourism, Wildlife and Antiquities",
  "Ministry of Trade, Industry and Cooperatives",
  "Ministry of Transport and Works",
  "Ministry of Water and Environment",
];

const organizations = [
  "National Social Security Fund (NSSF)",
  "Uganda Electricity Distribution Company Limited (UEDCL)",
  "Uganda National Roads Authority (UNRA)",
  "Uganda Revenue Authority (URA)",
  "National Identification and Registration Authority (NIRA)",
  "Uganda Communications Commission (UCC)",
  "National Water and Sewerage Corporation (NWSC)",
  "Uganda Development Bank Limited (UDBL)",
];

const agencies = [
  "Electoral Commission",
  "Inspectorate of Government",
  "National Environment Management Authority (NEMA)",
  "Uganda Human Rights Commission",
  "Equal Opportunities Commission",
  "Public Procurement and Disposal of Public Assets Authority",
];

export default function CitizenHomePage() {
  // Carousel state
  const [current, setCurrent] = useState(0);
  const timeoutRef = useRef(null);
  const images = heroImages;
  const duration = 3500; // ms, shorter for a snappier swipe

  useEffect(() => {
    timeoutRef.current = setTimeout(() => {
      setCurrent((prev) => (prev + 1) % images.length);
    }, duration);
    return () => clearTimeout(timeoutRef.current);
  }, [current, images.length]);
  // State for mobile menu, modals, etc. (implement as needed)
  // ...

  return (
  <div className="w-full bg-gray-50 min-h-screen flex flex-col font-sans">
      {/* Hero Section */}
      <section className="w-full relative flex items-center min-h-[320px] md:min-h-[420px] lg:min-h-[520px] py-10 md:py-16 px-4 md:px-12 overflow-hidden">
        {/* Carousel Images */}
  <div className="absolute inset-0 w-full h-full flex transition-transform duration-500" style={{ transform: `translateX(-${current * 100}%)` }}>
          {images.map((img, idx) => (
            <div
              key={idx}
              className="w-full h-full flex-shrink-0 bg-cover bg-center"
              style={{ backgroundImage: `url(${img})` }}
            />
          ))}
        </div>
        {/* Overlay for content */}
        <div className="relative flex-1 max-w-xl z-10 text-left p-6">
          <h1 className="text-2xl md:text-4xl font-extrabold text-blue-900 mb-4 leading-snug font-poppins tracking-tight drop-shadow-sm">
            Welcome to <span className="text-blue-700">Government Citizen Interaction Centre</span>
          </h1>
          <p className="text-base md:text-lg text-blue-800 mb-6 font-medium font-inter leading-normal">
            The Citizen Portal connects you with public services for <span className="font-semibold text-blue-900">active civic engagement</span>, offering tools to participate in polls, submit complaints, and get help from government departments.
          </p>
          <Link
            to="/#services"
            className="inline-block bg-blue-700 text-white font-semibold rounded-xl px-6 py-2.5 shadow-lg hover:bg-blue-800 transition text-base font-poppins tracking-wide"
          >
            Explore Services Now
          </Link>
        </div>
        {/* Carousel Dots (optional, for multiple images) */}
        {images.length > 1 && (
          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-20">
            {images.map((_, idx) => (
              <button
                key={idx}
                className={`w-3 h-3 rounded-full ${current === idx ? 'bg-blue-700' : 'bg-white/70'} border border-blue-700`}
                onClick={() => setCurrent(idx)}
                aria-label={`Go to slide ${idx + 1}`}
              />
            ))}
          </div>
        )}
      </section>
 {/* About the App Section */}
      <section className="w-full flex flex-col items-center justify-center mt-8 mb-12 px-4">
        <h2
          className="text-2xl md:text-3xl font-extrabold font-poppins text-center mb-6 text-blue-700 tracking-tight drop-shadow-sm"
        >
          Discover Your Voice in Governance
        </h2>
      </section>

      {/* Enhanced Hero Welcome Section */}
      <section
        className="w-full flex flex-col items-center justify-center bg-blue-600 rounded-sm px-4 py-8 md:py-12 mb-12 mx-auto relative overflow-hidden"
        style={{ maxWidth: '1100px' }}
      >
        <p
          className="text-base md:text-lg font-inter text-center text-white font-normal leading-relaxed opacity-95 max-w-4xl mx-auto mb-0"
        >
          Your gateway to engaging with government, voicing your concerns, and shaping the future of our community. This comprehensive platform provides direct access to a wide range of government services and empowers you to make a difference. Participate in active polls and surveys to influence public policy, lodge inquiries and complaints for quick resolution, and get real-time answers through our interactive chatbot. For more complex matters, connect with live agents from various ministries and departments to receive personalized support.
        </p>
      </section>
      {/* Feature Cards (Responsive for all devices including thin mobiles) */}
  <section id="services" className="w-full max-w-7xl mx-auto py-6 px-2 sm:px-4 md:py-10">
        <div className="flex flex-col sm:flex-row justify-center items-stretch gap-3 sm:gap-4 md:gap-6 lg:gap-8">
        {/* Card 1 */}
        <div className="group perspective flex-1 min-w-0 max-w-full sm:max-w-xs flex justify-center items-stretch">
          <div className="relative w-full h-[380px] sm:h-[400px] md:h-[420px] transition-transform duration-700 [transform-style:preserve-3d] group-hover:rotate-y-180">
            {/* Front Side */}
            <div className="absolute w-full h-full bg-white shadow-lg border border-blue-100 flex flex-col items-center p-4 sm:p-6 md:p-7 justify-between [backface-visibility:hidden]">
              <div className="flex items-center justify-center bg-blue-100 rounded-full w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mb-3 sm:mb-4">
                <Bug className="text-blue-700 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
              </div>
              <div className="flex-1 flex flex-col justify-center">
                <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl text-blue-900 mb-2 font-poppins tracking-tight text-center">File Complaints to Ministries</h3>
                <p className="text-gray-700 text-center mb-4 font-inter text-xs sm:text-sm md:text-base leading-normal">
                  Directly submit detailed complaints to various government ministries and departments. Track progress in real-time and receive updates on resolutions.
                </p>
              </div>
              <Link 
                to="/complaints" 
                className="bg-blue-700 text-white px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-800 transition text-xs sm:text-sm font-poppins shadow inline-block text-center w-full"
              >
                File Complaint
              </Link>
            </div>
            {/* Back Side */}
            <div className="absolute w-full h-full bg-blue-700 text-white flex flex-col items-center justify-center p-4 sm:p-6 md:p-7 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl mb-2 font-poppins tracking-tight text-center">More About Complaints</h3>
              <p className="text-center font-inter text-xs sm:text-sm md:text-base mb-4">Attach files, track status, and get notified instantly. Your voice matters in every ministry.</p>
              <Link 
                to="/complaints" 
                className="bg-white text-blue-700 px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-100 transition text-xs sm:text-sm font-poppins shadow mt-2 inline-block text-center w-full"
              >
                Start Now
              </Link>
            </div>
          </div>
        </div>
        {/* Card 2 */}
        <div className="group perspective flex-1 min-w-0 max-w-full sm:max-w-xs flex justify-center items-stretch">
          <div className="relative w-full h-[380px] sm:h-[400px] md:h-[420px] transition-transform duration-700 [transform-style:preserve-3d] group-hover:rotate-y-180">
            {/* Front Side */}
            <div className="absolute w-full h-full bg-white shadow-lg border border-blue-100 flex flex-col items-center p-4 sm:p-6 md:p-7 justify-between [backface-visibility:hidden]">
              <div className="flex items-center justify-center bg-blue-100 rounded-full w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mb-3 sm:mb-4">
                <BarChart className="text-blue-700 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
              </div>
              <div className="flex-1 flex flex-col justify-center">
                <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl text-blue-900 mb-2 font-poppins tracking-tight text-center">Participate in Polls & Surveys</h3>
                <p className="text-gray-700 text-center mb-4 font-inter text-xs sm:text-sm md:text-base leading-normal">
                  Engage with official polls and surveys to influence policy-making and community development. Your responses help shape government decisions.
                </p>
              </div>
              <Link 
                to="/polls-surveys" 
                className="bg-blue-700 text-white px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-800 transition text-xs sm:text-sm font-poppins shadow inline-block text-center w-full"
              >
                View Surveys
              </Link>
            </div>
            {/* Back Side */}
            <div className="absolute w-full h-full bg-blue-700 text-white flex flex-col items-center justify-center p-4 sm:p-6 md:p-7 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl mb-2 font-poppins tracking-tight text-center">More About Surveys</h3>
              <p className="text-center font-inter text-xs sm:text-sm md:text-base mb-4">Shape policy, see results, and make your opinion count. All responses are confidential.</p>
              <Link 
                to="/polls-surveys" 
                className="bg-white text-blue-700 px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-100 transition text-xs sm:text-sm font-poppins shadow mt-2 inline-block text-center w-full"
              >
                Participate
              </Link>
            </div>
          </div>
        </div>
        {/* Card 3 */}
        <div className="group perspective flex-1 min-w-0 max-w-full sm:max-w-xs flex justify-center items-stretch">
          <div className="relative w-full h-[380px] sm:h-[400px] md:h-[420px] transition-transform duration-700 [transform-style:preserve-3d] group-hover:rotate-y-180">
            {/* Front Side */}
            <div className="absolute w-full h-full bg-white shadow-lg border border-blue-100 flex flex-col items-center p-4 sm:p-6 md:p-7 justify-between [backface-visibility:hidden]">
              <div className="flex items-center justify-center bg-blue-100 rounded-full w-12 h-12 sm:w-14 sm:h-14 md:w-16 md:h-16 mb-3 sm:mb-4">
                <MessageCircle className="text-blue-700 w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8" />
              </div>
              <div className="flex-1 flex flex-col justify-center">
                <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl text-blue-900 mb-2 font-poppins tracking-tight text-center">Intelligent Chatbot Support</h3>
                <p className="text-gray-700 text-center mb-4 font-inter text-xs sm:text-sm md:text-base leading-normal">
                  Interact with our AI-powered chatbot and department agents for instant information and personalized assistance on complex queries or urgent matters.
                </p>
              </div>
              <Link 
                to="/chatbot" 
                className="bg-blue-700 text-white px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-800 transition text-xs sm:text-sm font-poppins shadow inline-block text-center w-full"
              >
                Chat Now
              </Link>
            </div>
            {/* Back Side */}
            <div className="absolute w-full h-full bg-blue-700 text-white flex flex-col items-center justify-center p-4 sm:p-6 md:p-7 [transform:rotateY(180deg)] [backface-visibility:hidden]">
              <h3 className="font-extrabold text-sm sm:text-base md:text-lg lg:text-xl mb-2 font-poppins tracking-tight text-center">More About Chatbot</h3>
              <p className="text-center font-inter text-xs sm:text-sm md:text-base mb-4">Get instant answers, escalate to agents, and access 24/7 support for all your needs.</p>
              <Link 
                to="/chatbot" 
                className="bg-white text-blue-700 px-3 sm:px-4 md:px-5 py-2 font-semibold hover:bg-blue-100 transition text-xs sm:text-sm font-poppins shadow mt-2 inline-block text-center w-full"
              >
                Start Chat
              </Link>
            </div>
          </div>
        </div>
        </div>
      </section>

      {/* Featured Polls & Surveys Section - Fully Responsive */}
      <section className="w-full flex flex-col items-center justify-center mb-8 sm:mb-12 py-8 sm:py-12 px-2 sm:px-4 relative overflow-hidden" style={{minHeight:'300px'}}>
        {/* Background image with dark overlay */}
        <div
          className="absolute inset-0 w-full h-full z-0"
          style={{
            backgroundImage: `linear-gradient(rgba(20,30,60,0.85), rgba(20,30,60,0.85)), url(${firstSlide})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            filter: 'brightness(0.8)'
          }}
          aria-hidden="true"
        />
        <div className="w-full max-w-6xl mx-auto z-10 relative px-2 sm:px-4 py-6 sm:py-10">
          <h2 className="text-xl sm:text-2xl md:text-3xl font-extrabold font-poppins text-center mb-4 sm:mb-6 text-white tracking-tight drop-shadow">Featured Polls & Surveys</h2>
          {/* Responsive Carousel */}
          {(() => {
            const polls = [
              {
                id: 1,
                title: 'National Health Policy Survey',
                description: 'Share your views on the new health policy and help shape the future of healthcare.',
              },
              {
                id: 2,
                title: 'Youth Employment Poll',
                description: 'Participate in our poll to improve youth employment programs nationwide.',
              },
              {
                id: 3,
                title: 'Digital Services Feedback',
                description: 'Tell us how digital government services can be improved for you.',
              },
              {
                id: 4,
                title: 'Public Transport Satisfaction',
                description: 'Rate your experience with public transport and suggest improvements.',
              },
              {
                id: 5,
                title: 'Education Policy Review',
                description: 'Contribute your thoughts on the new education policy draft.',
              },
              {
                id: 6,
                title: 'Environmental Awareness Poll',
                description: 'Share your views on environmental protection initiatives.',
              },
            ];
            // Responsive visible count with better thin mobile support
            const getVisibleCount = () => {
              if (typeof window === 'undefined') return 1;
              if (window.innerWidth >= 1280) return 4;
              if (window.innerWidth >= 1024) return 3;
              if (window.innerWidth >= 640) return 2;
              return 1;
            };
            const [carouselIndex, setCarouselIndex] = React.useState(0);
            const [visibleCount, setVisibleCount] = React.useState(1);
            React.useEffect(() => {
              setVisibleCount(getVisibleCount());
              const handleResize = () => setVisibleCount(getVisibleCount());
              window.addEventListener('resize', handleResize);
              return () => window.removeEventListener('resize', handleResize);
            }, []);
            React.useEffect(() => {
              const interval = setInterval(() => {
                setCarouselIndex((prev) => (prev + 1) % polls.length);
              }, 3500);
              return () => clearInterval(interval);
            }, [polls.length]);
            // For sliding effect, duplicate polls array for seamless wrap
            const extendedPolls = [...polls, ...polls.slice(0, visibleCount)];
            const totalSlides = polls.length;
            
            // Responsive slide width and gap for very thin devices
            const getSlideWidth = () => {
              if (typeof window === 'undefined') return 280;
              if (window.innerWidth < 380) return Math.max(250, window.innerWidth - 40); // Very thin devices
              if (visibleCount === 1) return Math.min(320, window.innerWidth - 40);
              if (visibleCount === 2) return 280;
              if (visibleCount === 3) return 260;
              return 240;
            };
            const slideWidth = getSlideWidth();
            const gap = window.innerWidth < 640 ? 12 : 16; // Smaller gap on mobile
            
            return (
              <div className="w-full overflow-hidden">
                <div className="w-full overflow-x-auto scrollbar-hide">
                  <div
                    className="flex transition-transform duration-700"
                    style={{
                      gap: `${gap}px`,
                      minWidth: `${(visibleCount + totalSlides) * (slideWidth + gap)}px`,
                      transform: `translateX(-${carouselIndex * (slideWidth + gap)}px)`
                    }}
                  >
                    {extendedPolls.slice(0, totalSlides + visibleCount).map((poll, idx) => (
                      <div 
                        key={idx + '-' + poll.id} 
                        className="flex-shrink-0 bg-white/85 backdrop-blur-md border border-blue-100 shadow-2xl p-3 sm:p-4 md:p-6 flex flex-col justify-between items-start hover:scale-[1.02] transition-transform duration-300" 
                        style={{width: `${slideWidth}px`, minHeight: '200px'}}
                      >
                        <h3 className="text-sm sm:text-base md:text-lg lg:text-xl font-bold text-blue-900 mb-2 font-poppins tracking-tight line-clamp-2">{poll.title}</h3>
                        <p className="text-gray-700 mb-3 sm:mb-4 font-inter text-xs sm:text-sm md:text-base leading-normal flex-grow line-clamp-3">{poll.description}</p>
                        <Link 
                          to="/polls-surveys" 
                          className="w-full block bg-blue-700 text-white py-1.5 sm:py-2 font-semibold shadow hover:bg-blue-800 transition text-xs sm:text-sm font-poppins text-center" 
                          style={{borderRadius:0}}
                        >
                          Participate
                        </Link>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })()}
          <div className="flex justify-center mt-4 sm:mt-6 px-2">
            <Link 
              to="/polls-surveys" 
              className="inline-block w-full max-w-md bg-white/20 text-white font-semibold px-4 sm:px-6 py-2 sm:py-2.5 shadow hover:bg-white/40 transition text-sm sm:text-base font-poppins tracking-wide border border-blue-200 text-center" 
              style={{borderRadius:0}}
            >
              See All Polls & Surveys
            </Link>
          </div>
        </div>
      </section>

      {/* Why Choose Section */}
      {/* <section className="w-full bg-blue-50 py-10 px-4">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-extrabold text-blue-900 mb-7 font-poppins tracking-tight drop-shadow-sm">
            Why use the Citizen Portal?
          </h2>
          <div className="flex flex-col md:flex-row gap-7 justify-center">
            <div className="flex-1 bg-white rounded-2xl p-6 shadow hover:shadow-xl transition flex flex-col items-center border border-blue-100">
              <Video className="text-blue-700 w-9 h-9 mb-2" />
              <h4 className="font-bold text-blue-900 mb-1 font-poppins text-base">Multimedia Complaints</h4>
              <p className="text-gray-700 text-sm font-inter">Attach videos and audio to provide comprehensive details.</p>
            </div>
            <div className="flex-1 bg-white rounded-2xl p-6 shadow hover:shadow-xl transition flex flex-col items-center border border-blue-100">
              <Mic className="text-blue-700 w-9 h-9 mb-2" />
              <h4 className="font-bold text-blue-900 mb-1 font-poppins text-base">Voice Your Opinion</h4>
              <p className="text-gray-700 text-sm font-inter">Polls and surveys designed for easy, impactful participation.</p>
            </div>
            <div className="flex-1 bg-white rounded-2xl p-6 shadow hover:shadow-xl transition flex flex-col items-center border border-blue-100">
              <MessageCircle className="text-blue-700 w-9 h-9 mb-2" />
              <h4 className="font-bold text-blue-900 mb-1 font-poppins text-base">24/7 Chat Support</h4>
              <p className="text-gray-700 text-sm font-inter">Get answers from AI or escalate to human experts instantly.</p>
            </div>
          </div>
        </div>
      </section> */}


      {/* Footer */}
  <Footer />
  <FloatingChatButton />
    </div>
  );
}
