import { useState } from "react";
import { Search, ChevronDown, HelpCircle } from "lucide-react";
import { Input } from "@/components/ui/input";

const faqItems = [
  {
    q: "Apa itu Transparansi Dana MBG?",
    a: "Transparansi Dana MBG adalah platform digital yang menyediakan akses terbuka terhadap data pengelolaan dana Makan Bergizi Gratis. Platform ini memungkinkan masyarakat untuk memantau distribusi dana, pengeluaran, dan kualitas layanan MBG di seluruh Indonesia.",
  },
  {
    q: "Bagaimana cara memeriksa data dana SPPG?",
    a: "Anda dapat mengakses halaman 'Daftar SPPG' untuk melihat semua data SPPG. Gunakan fitur filter untuk mencari berdasarkan provinsi, kabupaten, atau status. Klik 'Detail' pada setiap SPPG untuk melihat rincian dana, transaksi, dan menu harian.",
  },
  {
    q: "Bagaimana sistem menghitung dana per omprengan?",
    a: "Dana per omprengan dihitung berdasarkan total dana yang dialokasikan dibagi dengan jumlah omprengan yang harus dilayani. Rincian alokasi mencakup bahan pokok, lauk pauk, sayuran, buah, dan biaya operasional.",
  },
  {
    q: "Bagaimana cara melaporkan dugaan penyimpangan dana?",
    a: "Anda dapat menggunakan fitur 'Pengaduan' di halaman Pengaduan Masyarakat. Isi formulir dengan informasi lengkap termasuk kategori, judul, dan deskripsi pengaduan. Semua laporan akan diproses secara rahasia.",
  },
  {
    q: "Siapa yang bisa mengakses data dan laporan pada website ini?",
    a: "Website ini terbuka untuk seluruh masyarakat Indonesia. Semua data statistik, laporan distribusi, dan informasi SPPG dapat diakses secara bebas tanpa memerlukan login khusus.",
  },
  {
    q: "Seberapa aman data saya saat menggunakan website ini?",
    a: "Kami menggunakan enkripsi data dan protokol keamanan standar industri untuk melindungi semua informasi. Data pengaduan dijaga kerahasiaannya dan hanya dapat diakses oleh petugas berwenang.",
  },
];

export default function FAQ() {
  const [search, setSearch] = useState("");
  const [openIdx, setOpenIdx] = useState(null);

  const filtered = faqItems.filter(
    (f) =>
      f.q.toLowerCase().includes(search.toLowerCase()) ||
      f.a.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
      <div className="mb-10">
        <div className="relative overflow-hidden rounded-[2.25rem] border border-white/10 bg-gradient-to-br from-[#23486b] via-[#2450d3] to-[#1b8d93] text-white shadow-[0_20px_70px_rgba(2,8,23,0.22)]">
          <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[size:70px_70px] opacity-45" />
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.16),transparent_28%),radial-gradient(circle_at_top_right,rgba(96,165,250,0.18),transparent_24%),radial-gradient(circle_at_bottom_right,rgba(45,212,191,0.16),transparent_28%)]" />

          <div className="relative z-10 px-5 py-10 text-center sm:px-8 sm:py-12 lg:px-12 lg:py-16">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-5 py-2 text-sm font-bold uppercase tracking-[0.18em] text-blue-50 shadow-lg backdrop-blur-md">
              <HelpCircle className="h-4 w-4 text-cyan-200" />
              Pusat Bantuan
            </div>

            <h1 className="mx-auto mt-6 max-w-full whitespace-nowrap text-3xl font-black leading-[1.05] tracking-tight text-white drop-shadow-[0_4px_16px_rgba(0,0,0,0.25)] sm:text-4xl lg:text-5xl xl:text-6xl">
              <span className="text-white">FAQ </span>
              <span className="bg-gradient-to-r from-cyan-200 via-sky-100 to-teal-200 bg-clip-text text-transparent">
                OPEN PLATE
              </span>
            </h1>

            <p className="mt-3 text-sm font-bold uppercase tracking-[0.22em] text-cyan-100 sm:text-base">
              Frequently Asked Questions
            </p>

            <p className="mx-auto mt-5 max-w-4xl text-base leading-relaxed text-blue-50/90 sm:text-lg lg:text-xl">
              Temukan jawaban atas pertanyaan umum mengenai transparansi dana MBG, data SPPG, pengaduan, dan keamanan informasi publik.
            </p>

            <div className="relative mx-auto mt-8 max-w-2xl">
              <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-blue-100" />
              <Input
                placeholder="Cari pertanyaan..."
                className="h-14 rounded-full border-white/20 bg-white/15 pl-12 pr-5 text-base font-medium text-white placeholder:text-blue-100 shadow-lg backdrop-blur-md focus-visible:ring-white/30"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="mx-auto max-w-4xl space-y-4">
        {filtered.map((item, idx) => (
          <div
            key={idx}
            className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm shadow-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-200/80"
          >
            <button
              className="flex w-full items-center justify-between gap-4 p-5 text-left sm:p-6"
              onClick={() => setOpenIdx(openIdx === idx ? null : idx)}
            >
              <span className="text-sm font-bold leading-relaxed text-slate-900 sm:text-base">
                {item.q}
              </span>

              <span className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-50 text-blue-700">
                <ChevronDown
                  className={`h-5 w-5 transition-transform ${
                    openIdx === idx ? "rotate-180" : ""
                  }`}
                />
              </span>
            </button>

            {openIdx === idx && (
              <div className="px-5 pb-5 sm:px-6 sm:pb-6">
                <div className="rounded-2xl border border-blue-100 bg-gradient-to-br from-blue-50 to-cyan-50 p-5 text-sm leading-relaxed text-slate-600">
                  {item.a}
                </div>
              </div>
            )}
          </div>
        ))}

        {filtered.length === 0 && (
          <div className="rounded-2xl border border-slate-200 bg-white py-14 text-center text-sm font-medium text-slate-500 shadow-sm">
            Tidak ada pertanyaan yang cocok.
          </div>
        )}
      </div>
    </div>
  );
}
