import React, { useState, useEffect } from 'react';
import { 
  Home, 
  Search, 
  FileText, 
  Map, 
  Info, 
  Phone, 
  Menu, 
  X, 
  ExternalLink, 
  ArrowRight,
  ShieldCheck,
  Download,
  AlertTriangle,
  Mail,
  LocateFixed,
  History,
  UserCheck,
  CreditCard,
  Gavel,
  MessageSquare,
  Globe,
  FileSearch,
  UserPlus,
  Stamp
} from 'lucide-react';

// --- Static Data for SEO ---
const SEO_CONFIG = {
  title: "Bihar Bhumi: Land Records, Revenue Services & Online Land Information Portal",
  description: "Access Bihar Bhumi for official land records, revenue services, property mutation, LPC, Bhulekh, and government updates.",
  keywords: "Bihar Bhumi, Bihar land records, revenue services Bihar, mutation status, LPC Bihar, Bhulekh Bihar",
  canonical: "https://biharbhumijankari.biharbhumiplus.com/",
  ogImage: "https://biharbhumijankari.biharbhumiplus.com/assets/bl-eiD12-P4.png",
  adClient: "ca-pub-9334200648143795"
};

const DASHBOARD_LINKS = [
  { name: "जन शिकायत पोर्टल", url: "https://biharbhumiplus.bihar.gov.in/pg", isNew: true },
  { name: "सहायता एवं प्रश्नोत्तर", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/FAQ_Help.aspx" },
  { name: "नागरिक लॉगिन", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/UserLogin.aspx" },
  { name: "ऑनलाइन दाखिल ख़ारिज आवेदन करें", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/UserLogin.aspx" },
  { name: "दाखिल ख़ारिज आवेदन स्थिति देखें", url: "https://parimarjan.bihar.gov.in/biharBhumireport/MutationStatusNew.aspx" },
  { name: "आम सूचना", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/MutationReport.aspx" },
  { name: "ऑनलाइन एल० पी० सी० आवेदन करें", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/UserLogin.aspx" },
  { name: "एल० पी० सी० आवेदन स्थिति देखें", url: "https://parimarjan.bihar.gov.in/biharBhumireport/frm_LPC_StatusNew.aspx" },
  { name: "भू-लगान", url: "https://www.bhulagan.bihar.gov.in/" },
  { name: "जमाबंदी पंजी देखें", url: "https://parimarjan.bihar.gov.in/biharBhumireport/ViewJamabandi.aspx" },
  { name: "जमाबंदी पंजी देखें (सभी 22 भाषाओं में)", url: "https://emutation.bihar.gov.in/LRCRoRGistDemo/" },
  { name: "भू-मानचित्र", url: "http://bhuabhilekh.bihar.gov.in/" },
  { name: "निबंधन के साथ दाखिल ख़ारिज का प्रपत्र", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/SuoMotuForm.pdf" },
  { name: "भू-अभिलेख एवं परिमाप निदेशालय", url: "https://dlrs.bihar.gov.in/Default.aspx" },
  { name: "बिहार भूमि न्यायाधिकरण", url: "http://lrc.bih.nic.in/LandTribunal/Default.aspx" },
  { name: "दाखिल ख़ारिज स्थिति (वापस किया गया)", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/MutationDefectCheckList.aspx" },
  { name: "दाखिल-खारिज वाद पर आपत्ति दर्ज करें", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/UserLogin.aspx" },
  { name: "परिमार्जन प्लस स्थिति (वापस किया गया)", url: "https://parimarjanplus.bihar.gov.in/ParimarjanNew/ParimarjanDefectCheckAppDetails.aspx" },
  { name: "आधार / मोबाइल सीडिंग स्थिति", url: "https://parimarjan.bihar.gov.in/biharBhumireport/Aadhar_Mobile_Seeding_Status.aspx" },
  { name: "ई-मापी", url: "https://emapi.bihar.gov.in/" },
  { name: "भू-अभिलेख", url: "https://bhuabhilekh.bihar.gov.in/" },
  { name: "सरकारी भूमि का दाखिल ख़ारिज", url: "https://parimarjanplus.bihar.gov.in/ejamabandi/Authority/GovLandLogin.aspx", isNew: true },
  { name: "राजस्व न्यायालय प्रबंधन प्रणाली", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/RCMS/RCMSDefault.aspx", isNew: true },
  { name: "परिमार्जन", url: "#" },
  { name: "परिमार्जन प्लस", url: "https://parimarjanplus.bihar.gov.in/ParimarjanNew/userDashboard.aspx", isNew: true },
  { name: "परिमार्जन प्लस आवेदन स्थिति", url: "https://parimarjanplus.bihar.gov.in/ParimarjanNew/trackapplication.aspx", isNew: true },
  { name: "नागरिक सुविधाओं की जानकारी", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/CitizenInfo.aspx", isNew: true },
  { name: "दाखिल ख़ारिज त्रुटि जांच", url: "https://biharbhumi.bihar.gov.in/Biharbhumi/trackapplication.aspx", isNew: true },
];

const Navbar = ({ activePage, setActivePage }) => {
  const [isOpen, setIsOpen] = useState(false);
  const navLinks = [
    { id: 'home', name: 'होम', icon: <Home size={18} /> },
    { id: 'services', name: 'सेवाएं', icon: <Search size={18} /> },
    { id: 'about', name: 'हमारे बारे में', icon: <Info size={18} /> },
    { id: 'contact', name: 'संपर्क', icon: <Phone size={18} /> },
  ];

  return (
    <nav className="bg-white border-b border-green-100 sticky top-0 z-50 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex items-center space-x-2 cursor-pointer" onClick={() => setActivePage('home')}>
            <div className="bg-green-600 p-2 rounded-lg text-white shadow-md">
              <LocateFixed size={24} />
            </div>
            <div>
              <span className="text-xl font-black text-green-800 block leading-none">BIHAR BHUMI</span>
              <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Digital Land Portal</span>
            </div>
          </div>
          <div className="hidden md:flex space-x-8">
            {navLinks.map((link) => (
              <button key={link.id} onClick={() => setActivePage(link.id)} className={`flex items-center space-x-1 font-bold transition-colors ${activePage === link.id ? 'text-green-600 border-b-2 border-green-600' : 'text-gray-600 hover:text-green-500'}`}>
                {link.icon} <span>{link.name}</span>
              </button>
            ))}
          </div>
          <div className="md:hidden">
            <button onClick={() => setIsOpen(!isOpen)} className="text-gray-600 p-2">
              {isOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>
      </div>
      {isOpen && (
        <div className="md:hidden bg-white border-b border-green-50 px-4 py-4 space-y-2">
          {navLinks.map((link) => (
            <button key={link.id} onClick={() => { setActivePage(link.id); setIsOpen(false); }} className={`flex items-center space-x-3 w-full p-4 rounded-xl font-bold transition-all ${activePage === link.id ? 'bg-green-600 text-white shadow-lg' : 'text-gray-700 hover:bg-green-50'}`}>
              {link.icon} <span>{link.name}</span>
            </button>
          ))}
        </div>
      )}
    </nav>
  );
};

const DashboardGrid = () => (
  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 px-4 max-w-7xl mx-auto mb-16">
    {DASHBOARD_LINKS.map((link, idx) => (
      <a 
        key={idx} 
        href={link.url} 
        target="_blank" 
        rel="noopener noreferrer" 
        className="bg-[#005689] hover:bg-[#003d61] text-white p-4 rounded-lg flex items-center justify-center text-center font-bold text-sm min-h-[70px] shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 relative group"
      >
        {link.isNew && (
          <span className="absolute top-0 left-0 bg-red-600 text-white text-[8px] px-2 py-0.5 rounded-tl-lg rounded-br-lg font-black animate-pulse">
            NEW
          </span>
        )}
        <span className="leading-tight">{link.name}</span>
        <ExternalLink size={12} className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity" />
      </a>
    ))}
  </div>
);

// --- Full Width Blog Section ---
const BlogSection = () => (
  <section className="w-full py-16 bg-white">
    <div className="max-w-7xl mx-auto px-6 md:px-12 prose prose-green max-w-none">
      <h2 className="text-3xl md:text-6xl font-black text-green-900 mb-10 leading-tight">
        बिहार भूमि ऑनलाइन पोर्टल 2026: सभी डिजिटल सेवाओं की विस्तृत जानकारी
      </h2>
      
      <p className="text-xl text-gray-700 leading-relaxed font-medium mb-12">
        बिहार सरकार के राजस्व एवं भूमि सुधार विभाग ने राज्य के नागरिकों के लिए भूमि संबंधी सभी सेवाओं को डिजिटल बना दिया है। अब आपको अपने खेत या प्लॉट की रसीद कटवाने, जमाबंदी देखने या दाखिल-खारिज (Mutation) के लिए अंचल कार्यालय के चक्कर लगाने की आवश्यकता नहीं है।
      </p>

      <div className="grid md:grid-cols-2 gap-10 my-16">
        <div className="bg-green-50 p-8 rounded-[2.5rem] border border-green-100 shadow-sm">
          <h3 className="text-2xl font-black text-green-800 mb-4 flex items-center">
            <FileSearch className="mr-3" size={28}/> जमाबंदी पंजी क्या है?
          </h3>
          <p className="text-lg text-gray-600 leading-relaxed">
            जमाबंदी पंजी (Register II) जमीन का वह मुख्य दस्तावेज है जिसमें रैयत का नाम, खाता संख्या, खेसरा संख्या और लगान का विवरण होता है। अब बिहार के सभी 38 जिलों की जमाबंदी ऑनलाइन देखी और डाउनलोड की जा सकती है।
          </p>
        </div>
        <div className="bg-blue-50 p-8 rounded-[2.5rem] border border-blue-100 shadow-sm">
          <h3 className="text-2xl font-black text-blue-800 mb-4 flex items-center">
            <History className="mr-3" size={28}/> दाखिल-खारिज (Mutation)
          </h3>
          <p className="text-lg text-gray-600 leading-relaxed">
            जब आप कोई नई जमीन खरीदते हैं, तो सरकारी रिकॉर्ड में अपना नाम दर्ज कराने की प्रक्रिया को दाखिल-खारिज कहते हैं। आप हमारे पोर्टल पर दिए गए लिंक के माध्यम से घर बैठे आवेदन कर सकते हैं और उसकी स्थिति ट्रैक कर सकते हैं।
          </p>
        </div>
      </div>

      <h3 className="text-3xl font-black text-gray-900 mt-16 mb-8">बिहार भूमि पोर्टल पर उपलब्ध मुख्य सुविधाएं:</h3>
      <div className="grid md:grid-cols-2 gap-6">
          {[
              { title: "अपना खाता देखें", desc: "अपने जिले और अंचल का चयन करके जमीन का विवरण प्राप्त करें।" },
              { title: "ऑनलाइन लगान भुगतान", desc: "घर बैठे अपनी जमीन का टैक्स (लगान) जमा करें और रसीद डाउनलोड करें।" },
              { title: "भू-मानचित्र", desc: "अपने क्षेत्र का डिजिटल नक्शा देखें और प्लॉट की पहचान करें।" },
              { title: "परिमार्जन प्लस", desc: "अगर आपकी जमाबंदी में कोई गलती है, तो सुधार के लिए आवेदन करें।" }
          ].map((item, i) => (
            <div key={i} className="flex items-start p-4 hover:bg-gray-50 rounded-2xl transition-colors">
                <ArrowRight className="text-green-600 mr-4 mt-1 flex-shrink-0" size={24}/>
                <div>
                    <h4 className="font-black text-gray-800 text-xl">{item.title}</h4>
                    <p className="text-gray-500 font-medium">{item.desc}</p>
                </div>
            </div>
          ))}
      </div>

      <div className="bg-yellow-50 border-y-4 md:border-4 border-yellow-200 p-10 rounded-none md:rounded-[3rem] my-20">
        <h4 className="text-yellow-800 font-black mb-6 flex items-center uppercase tracking-widest">
          <AlertTriangle className="mr-3" size={28}/> महत्वपूर्ण सूचना
        </h4>
        <p className="text-xl text-yellow-900 leading-relaxed font-bold">
          बिहार भूमि पोर्टल का उपयोग करते समय हमेशा अपना 'यूजर आईडी' और 'पासवर्ड' सुरक्षित रखें। यदि आप 'परिमार्जन' या 'दाखिल-खारिज' के लिए आवेदन कर रहे हैं, तो सुनिश्चित करें कि आपके पास सभी आवश्यक दस्तावेज (जैसे केवाला, वंशावली, या लगान रसीद) PDF फॉर्मेट में उपलब्ध हों।
        </p>
      </div>

      <h3 className="text-3xl font-black text-gray-900 mt-16 mb-8">कैसे करें ऑनलाइन आवेदन?</h3>
      <p className="text-xl text-gray-700 leading-relaxed mb-10">
        सबसे पहले ऊपर दिए गए <strong>"नागरिक लॉगिन"</strong> बटन पर क्लिक करें। अपना रजिस्ट्रेशन करने के बाद आप संबंधित सेवा का चयन करें। मांगी गई सभी जानकारी जैसे जिला, अंचल, हल्का और मौजा का विवरण सही-सही भरें। आवेदन सबमिट करने के बाद आपको एक 'Case Number' मिलेगा, जिसे आप भविष्य में स्थिति जांचने के लिए सुरक्षित रखें।
      </p>

      <footer className="mt-20 pt-10 border-t border-gray-100 italic text-gray-400 text-base flex justify-between items-center">
        <span>लेख अपडेट किया गया: मार्च 2026</span>
        <span className="font-bold text-green-600">स्रोत: राजस्व विभाग</span>
      </footer>
    </div>
  </section>
);

const HomePage = () => {
  const handleSearch = () => {
    // Page reload logic as requested
    window.location.reload();
  };

  return (
    <div className="space-y-12 pb-12">
      <header className="bg-gradient-to-br from-green-700 via-green-800 to-emerald-900 text-white py-20 px-4 rounded-b-[3rem] md:rounded-b-[5rem] shadow-2xl relative overflow-hidden">
        <div className="max-w-5xl mx-auto text-center relative z-10">
          <div className="inline-block bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-6 border border-white/20">
              Official Land Information Helper
          </div>
          <h1 className="text-4xl md:text-7xl font-black mb-6 leading-tight tracking-tighter">
            बिहार भूमि <span className="text-green-300">डैशबोर्ड</span> <br/>ऑनलाइन सेवाएं 2026
          </h1>
          <p className="text-lg md:text-2xl opacity-90 mb-10 max-w-2xl mx-auto font-medium">
            दाखिल-खारिज, जमाबंदी, परिमार्जन और लगान भुगतान के सभी लिंक अब एक ही स्थान पर।
          </p>
          <div className="flex flex-wrap justify-center gap-4">
              <button onClick={handleSearch} className="bg-white text-green-900 px-8 py-4 rounded-2xl font-black shadow-xl hover:scale-105 transition-transform flex items-center">
                  <Search className="mr-2" size={20}/> रिकॉर्ड खोजें
              </button>
              <button className="bg-green-600/30 backdrop-blur-md border border-white/30 text-white px-8 py-4 rounded-2xl font-black hover:bg-green-600/50 transition-all flex items-center">
                  <Download className="mr-2" size={20}/> PWA इंस्टॉल करें
              </button>
          </div>
        </div>
      </header>

      <div className="max-w-7xl mx-auto px-4 -mt-10 mb-6 relative z-20">
          <div className="bg-white p-2 rounded-3xl shadow-2xl border border-green-100 flex flex-col md:flex-row items-center gap-2">
              <div className="flex-grow flex items-center px-6">
                  <Search className="text-green-600 mr-3" size={24}/>
                  <input type="text" placeholder="खाता, खेसरा या रैयत के नाम से खोजें..." className="w-full py-4 outline-none font-bold text-gray-700" />
              </div>
              <button onClick={handleSearch} className="w-full md:w-auto bg-green-700 text-white px-10 py-4 rounded-2xl font-black transition-all active:scale-95">सर्च</button>
          </div>
      </div>

      {/* AdSense Unit below Search Bar */}
      <div className="max-w-7xl mx-auto px-4 mb-10">
          <div className="bg-gray-50 border border-gray-200 rounded-2xl py-8 text-center overflow-hidden min-h-[100px] flex flex-col items-center justify-center">
              <p className="text-[10px] text-gray-400 font-black mb-2 tracking-[0.3em] uppercase">ADVERTISEMENT</p>
              <div className="w-full overflow-hidden flex justify-center items-center font-mono text-gray-400 text-sm">
                  {/* Google AdSense Code Placeholder */}
                  <ins className="adsbygoogle"
                       style={{ display: 'block', width: '100%' }}
                       data-ad-client={SEO_CONFIG.adClient}
                       data-ad-slot="your-ad-slot-id"
                       data-ad-format="auto"
                       data-full-width-responsive="true"></ins>
                  <p className="italic">ca-pub-9334200648143795</p>
              </div>
          </div>
      </div>

      <section>
          <div className="max-w-7xl mx-auto px-4 mb-8 text-center md:text-left">
              <h2 className="text-2xl font-black text-gray-900 flex items-center justify-center md:justify-start">
                  <Globe className="mr-2 text-green-600" /> सभी ऑनलाइन सेवाएं (Direct Links)
              </h2>
          </div>
          <DashboardGrid />
      </section>

      <BlogSection />

      <div className="max-w-7xl mx-auto px-4 mt-16">
          <div className="bg-gray-100 border-2 border-dashed border-gray-300 rounded-[3rem] py-16 text-center">
              <p className="text-gray-400 font-black text-xs uppercase tracking-widest mb-4">AdSense Footer Unit</p>
              <div className="text-gray-400 italic font-bold">ca-pub-9334200648143795</div>
          </div>
      </div>
    </div>
  );
};

const AboutPage = () => (
  <div className="max-w-5xl mx-auto px-4 py-16">
    <div className="bg-white p-8 md:p-16 rounded-[3rem] shadow-xl border border-gray-50">
      <h2 className="text-4xl font-black text-green-900 mb-8 leading-tight">हमारे बारे में</h2>
      <div className="prose prose-lg text-gray-600 max-w-none space-y-6 font-medium">
        <p className="text-xl text-gray-800 leading-relaxed font-bold">
            हम बिहार के नागरिकों को एक ही छत के नीचे सभी महत्वपूर्ण भू-अभिलेख कड़ियां (Links) और जानकारी प्रदान करते हैं।
        </p>
        <p>
            <strong>biharbhumijankari.biharbhumiplus.com</strong> एक हेल्प डेस्क पोर्टल है जो सरकारी सेवाओं को सुगम बनाने में मदद करता है।
        </p>
        <div className="bg-red-50 border-l-4 border-red-500 p-8 rounded-r-3xl mt-12">
            <div className="flex items-start space-x-4">
                <AlertTriangle className="text-red-600 flex-shrink-0" size={28}/>
                <div>
                    <h4 className="text-red-900 font-black mb-2 uppercase text-sm">महत्वपूर्ण अस्वीकरण</h4>
                    <p className="text-sm text-red-800 font-bold leading-relaxed">
                        यह पोर्टल स्वतंत्र है। आधिकारिक कार्यों के लिए हमेशा 'biharbhumi.bihar.gov.in' का उपयोग करें।
                    </p>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
);

const ContactPage = () => (
  <div className="max-w-5xl mx-auto px-4 py-16">
    <div className="bg-white p-8 md:p-16 rounded-[3rem] shadow-xl border border-gray-50 text-center">
      <div className="bg-green-600 text-white w-20 h-20 rounded-3xl flex items-center justify-center mx-auto mb-8 shadow-lg">
        <Mail size={40}/>
      </div>
      <h2 className="text-4xl font-black text-green-900 mb-4">संपर्क करें</h2>
      <p className="text-gray-500 max-w-xl mx-auto mb-12 font-bold">मदद या सुझाव के लिए हमें ईमेल भेजें।</p>
      <div className="bg-gray-50 p-6 rounded-3xl border border-gray-100 inline-block">
          <p className="text-xs font-black text-gray-400 uppercase tracking-widest mb-2">ईमेल आईडी</p>
          <a href="mailto:contact@biharbhumijankari.biharbhumiplus.com" className="text-2xl font-black text-green-700 hover:text-green-800 break-all">
            contact@biharbhumiplus.com
          </a>
      </div>
    </div>
  </div>
);

export default function App() {
  const [activePage, setActivePage] = useState('home');

  useEffect(() => {
    document.title = activePage === 'home' ? SEO_CONFIG.title : `${activePage.charAt(0).toUpperCase() + activePage.slice(1)} - Bihar Bhumi Portal`;
    
    let desc = document.querySelector('meta[name="description"]');
    if (!desc) { desc = document.createElement('meta'); desc.name = "description"; document.head.appendChild(desc); }
    desc.content = SEO_CONFIG.description;

    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [activePage]);

  return (
    <div className="min-h-screen bg-[#f8faf8] font-sans selection:bg-green-600 selection:text-white">
      <Navbar activePage={activePage} setActivePage={setActivePage} />
      <main className="animate-in fade-in slide-in-from-bottom-4 duration-700">
        {activePage === 'home' && <HomePage />}
        {activePage === 'services' && <HomePage />} 
        {activePage === 'about' && <AboutPage />}
        {activePage === 'contact' && <ContactPage />}
      </main>

      <footer className="bg-slate-900 text-slate-400 pt-24 pb-12 px-6 mt-12">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center space-x-3 mb-8">
                <div className="bg-green-600 p-2.5 rounded-2xl text-white shadow-lg"><LocateFixed size={28} /></div>
                <span className="text-3xl font-black text-white tracking-tighter uppercase">Bihar Bhumi Plus</span>
              </div>
              <p className="max-w-md text-slate-500 leading-relaxed font-medium">
                बिहार के सभी जिलों की जमीन रिकॉर्ड जानकारी हेतु विश्वसनीय और सरल माध्यम।
              </p>
            </div>
            <div>
              <h4 className="text-white font-black mb-8 uppercase tracking-widest text-xs">मुख्य कड़ियां</h4>
              <ul className="space-y-4 font-bold">
                <li><button onClick={() => setActivePage('home')} className="hover:text-green-400">होम</button></li>
                <li><button onClick={() => setActivePage('about')} className="hover:text-green-400">अबाउट</button></li>
                <li><button onClick={() => setActivePage('contact')} className="hover:text-green-400">संपर्क</button></li>
              </ul>
            </div>
            <div>
              <h4 className="text-white font-black mb-8 uppercase tracking-widest text-xs">सूचना</h4>
              <ul className="space-y-4 font-bold text-xs uppercase tracking-wider">
                <li><a href="#" className="hover:text-green-400">Privacy Policy</a></li>
                <li><a href="#" className="hover:text-green-400">Terms</a></li>
                <li><a href="#" className="hover:text-green-400">Disclaimer</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-slate-800 pt-10 text-center">
            <div className="text-[10px] font-black text-slate-600 uppercase tracking-[0.2em]">
                &copy; 2026 BIHARBHUMIJANKARI.BIHARBHUMIPLUS.COM
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}