"use client";

import { useState } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import { CheckCircle, Phone, Mail, ArrowRight, Loader2, ChevronDown, Building2, ShieldCheck, Banknote, Briefcase, TrendingUp, Clock, Users, Zap } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";

export default function FinancePage() {
  const [formData, setFormData] = useState({
    fullName: "",
    mobileNumber: "",
    email: "",
    companyName: "",
    loanType: "Business Loan",
    loanAmount: "",
    annualTurnover: "Under 1 Cr",
    purpose: "",
  });

  const [loading, setLoading] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  const [error, setError] = useState("");
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"}/finance/apply`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (response.ok) {
        setSubmitted(true);
        setFormData({
            fullName: "",
            mobileNumber: "",
            email: "",
            companyName: "",
            loanType: "Business Loan",
            loanAmount: "",
            annualTurnover: "Under 1 Cr",
            purpose: "",
        });
      } else {
        setError(data.message || "Something went wrong. Please try again.");
      }
    } catch (err) {
      console.error(err);
      setError("Failed to connect to the server. Please try again later.");
    } finally {
      setLoading(false);
    }
  };

  const loanProducts = [
    {
      product: "Business Loan",
      useful: "Working capital, marketing, inventory, salaries.",
      choose: "Day-to-day business needs.",
      eligibility: "1+ yr operations, stable banking, GST.",
      terms: "₹5L-₹5Cr • 12-60 mo",
      security: "Unsecured / Light",
      icon: <Briefcase className="w-5 h-5" />
    },
    {
      product: "Unsecured Loan",
      useful: "Collateral-free quick funding.",
      choose: "Short-term needs, inventory top-up.",
      eligibility: "Good bureau score, strong cash flow.",
      terms: "₹5L-₹2Cr • 12-48 mo",
      security: "None",
      icon: <Banknote className="w-5 h-5" />
    },
    {
      product: "Secured Loan",
      useful: "Lower cost funds against property.",
      choose: "Larger ticket / longer tenure.",
      eligibility: "Property docs, clean title.",
      terms: "₹25L-₹25Cr • 3-15 yr",
      security: "Property Collateral",
      icon: <ShieldCheck className="w-5 h-5" />
    },
    {
      product: "Corporate Loans",
      useful: "Structured financing for enterprises.",
      choose: "Capex, expansion, acquisitions.",
      eligibility: "Audited financials, board approvals.",
      terms: "₹5Cr-₹100+Cr • 1-10 yr",
      security: "Structured / Guarantees",
      icon: <Building2 className="w-5 h-5" />
    },
  ];

  const faqs = [
    {
      question: "How soon can I get a decision?",
      answer: "Loan approvals typically take 24–48 hours after submission of complete documents."
    },
    {
      question: "Do I need collateral?",
      answer: "Not always. We offer both secured and unsecured loan options depending on your eligibility."
    },
    {
      question: "What documents are required?",
      answer: "Basic KYC, business proof, financial statements, and bank statements are generally required."
    },
    {
      question: "Do you support BG/EMD for tenders?",
      answer: "Yes, we provide Bank Guarantees (BG) and Earnest Money Deposits (EMD) for tender participation."
    },
    {
      question: "What is the maximum loan amount I can get?",
      answer: "Loan amounts range from ₹5 Lakhs to ₹100 Crores depending on the loan product and eligibility."
    },
  ];

  const banks = [
    { name: "IDFC FIRST Bank", color: "text-[#9e2a2b]" },
    { name: "FEDERAL BANK", color: "text-[#004a8f]" },
    { name: "RBL BANK", color: "text-[#005fb0]" },
    { name: "BAJAJ FINSERV", color: "text-[#0074c8]" },
    { name: "TATA CAPITAL", color: "text-[#005a9c]" },
    { name: "HDFC BANK", color: "text-[#004c8f]" }, // Added more for grid completeness
  ];

  const stats = [
    { label: "Ticket Size", value: "₹5L - ₹100Cr+", icon: <TrendingUp className="w-5 h-5 text-green-400" /> },
    { label: "Decision Time", value: "48 hrs - 7 days", icon: <Clock className="w-5 h-5 text-orange-400" /> },
    { label: "Lending Partners", value: "100+ Banks", icon: <Users className="w-5 h-5 text-blue-400" /> },
    { label: "Process", value: "100% Digital", icon: <Zap className="w-5 h-5 text-yellow-400" /> },
  ];

  return (
    <div className="min-h-screen bg-white font-sans text-gray-900">
      <Header />

      {/* Hero Section */}
      <section className="relative bg-gradient-to-br from-[#0F172A] via-[#1E293B] to-[#0F172A] text-white pt-24 pb-48 lg:pt-32 lg:pb-64 overflow-hidden">
        {/* Background Elements */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
            <div className="absolute -top-[20%] -right-[10%] w-[600px] h-[600px] bg-green-500/10 rounded-full blur-3xl"></div>
            <div className="absolute top-[40%] -left-[10%] w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-3xl"></div>
            <div className="absolute inset-0 opacity-20"></div>
        </div>
        
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <motion.div 
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              className="inline-flex items-center gap-2 bg-white/5 backdrop-blur-md border border-white/10 px-4 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-8 text-green-300 shadow-lg"
            >
              <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
              Powering India&apos;s Growth Story
            </motion.div>
            
            <motion.h1 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6 tracking-tight"
            >
              Fuel Your Business with <br className="hidden md:block" />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-300">Smart Capital</span>
            </motion.h1>
            
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="text-lg md:text-xl text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed"
            >
              Access <span className="text-white font-semibold">₹5L to ₹500Cr+</span> business loans from <span className="text-white font-semibold">100+ top lenders</span>. Lowest interest rates, minimum documentation, and fastest disbursal.
            </motion.p>
            
            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto"
            >
                {stats.map((stat, idx) => (
                    <div key={idx} className="bg-white/5 backdrop-blur-md border border-white/10 p-4 rounded-2xl flex flex-col items-center hover:bg-white/10 transition-colors">
                        <div className="mb-2 p-2 bg-white/5 rounded-full">{stat.icon}</div>
                        <div className="text-gray-400 text-xs uppercase tracking-wide mb-1">{stat.label}</div>
                        <div className="font-bold text-base md:text-lg">{stat.value}</div>
                    </div>
                ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Floating Form Section */}
      <section className="relative z-20 -mt-32 px-4 pb-20" id="finance-form">
        <div className="container mx-auto max-w-5xl">
             <motion.div 
                initial={{ opacity: 0, y: 40 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.4 }}
                className="bg-white rounded-3xl shadow-2xl shadow-blue-900/10 overflow-hidden border border-gray-100"
             >
                <div className="grid md:grid-cols-5 min-h-[600px]">
                    {/* Left Panel - Info */}
                    <div className="md:col-span-2 bg-gradient-to-br from-green-50 to-emerald-50 p-8 md:p-10 flex flex-col justify-between relative overflow-hidden">
                         <div className="absolute top-0 right-0 w-64 h-64 bg-green-200/30 rounded-full blur-3xl -mr-16 -mt-16"></div>
                         
                         <div>
                             <h3 className="text-2xl font-bold text-gray-900 mb-2">Apply in Minutes</h3>
                             <p className="text-gray-600 mb-8">Get matched with the perfect lender for your business needs.</p>
                             
                             <ul className="space-y-4">
                                 {[
                                     "Best-in-class Interest Rates",
                                     "Flexible Repayment Options",
                                     "Zero Hidden Charges",
                                     "Dedicated Relationship Manager"
                                 ].map((item, i) => (
                                     <li key={i} className="flex items-start gap-3 text-sm font-medium text-gray-700">
                                         <CheckCircle className="w-5 h-5 text-green-600 shrink-0" />
                                         {item}
                                     </li>
                                 ))}
                             </ul>
                         </div>

                         <div className="mt-10">
                             <div className="bg-white/60 backdrop-blur-sm p-4 rounded-xl border border-white/40">
                                 <div className="flex -space-x-2 mb-3">
                                     {[1,2,3,4].map(i => (
                                         <div key={i} className={`w-8 h-8 rounded-full border-2 border-white flex items-center justify-center text-[10px] font-bold text-white bg-gradient-to-br ${[
                                             'from-blue-500 to-blue-600',
                                             'from-green-500 to-green-600',
                                             'from-orange-500 to-orange-600',
                                             'from-purple-500 to-purple-600'
                                         ][i-1]}`}>
                                             {['JD', 'AS', 'RK', 'MP'][i-1]}
                                         </div>
                                     ))}
                                     <div className="w-8 h-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-500">+2k</div>
                                 </div>
                                 <p className="text-xs text-gray-600 font-medium">Trusted by 2,000+ businesses this month</p>
                             </div>
                         </div>
                    </div>

                    {/* Right Panel - Form */}
                    <div className="md:col-span-3 p-8 md:p-10 bg-white">
                        {submitted ? (
                           <div className="h-full flex flex-col items-center justify-center text-center p-6">
                               <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6 animate-bounce">
                                   <CheckCircle className="w-10 h-10 text-green-600" />
                               </div>
                               <h3 className="text-2xl font-bold text-gray-900 mb-2">Application Received!</h3>
                               <p className="text-gray-500 mb-8 max-w-xs mx-auto">
                                   Our financial experts are reviewing your profile. You will receive a call within 24 hours.
                               </p>
                               <button 
                                 onClick={() => setSubmitted(false)}
                                 className="px-6 py-2 rounded-lg bg-gray-100 text-gray-700 font-medium hover:bg-gray-200 transition-colors"
                               >
                                   Start New Application
                               </button>
                           </div>
                        ) : (
                           <form onSubmit={handleSubmit} className="space-y-5">
                               {error && (
                                   <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm border border-red-100 flex items-start gap-2">
                                       <span className="font-bold">Error:</span> {error}
                                   </div>
                               )}
                               
                               <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Full Name</label>
                                       <input 
                                         type="text" name="fullName" value={formData.fullName} onChange={handleChange} required
                                         className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                         placeholder="John Doe"
                                       />
                                   </div>
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Mobile</label>
                                       <input 
                                         type="tel" name="mobileNumber" value={formData.mobileNumber} onChange={handleChange} required
                                         className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                         placeholder="+91 98765 43210"
                                       />
                                   </div>
                               </div>

                               <div className="space-y-1.5">
                                    <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Email Address</label>
                                    <input 
                                       type="email" name="email" value={formData.email} onChange={handleChange} required
                                       className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                       placeholder="john@company.com"
                                    />
                               </div>

                               <div className="space-y-1.5">
                                    <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Company Name</label>
                                    <input 
                                       type="text" name="companyName" value={formData.companyName} onChange={handleChange} required
                                       className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                       placeholder="Solar Tech Pvt Ltd"
                                    />
                               </div>

                               <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Loan Type</label>
                                       <div className="relative">
                                            <select name="loanType" value={formData.loanType} onChange={handleChange}
                                                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white appearance-none"
                                            >
                                                <option value="Business Loan">Business Loan</option>
                                                <option value="Working Capital">Working Capital</option>
                                                <option value="Project Finance">Project Finance</option>
                                                <option value="Machinery Loan">Machinery Loan</option>
                                                <option value="BG/EMD">BG/EMD</option>
                                            </select>
                                            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
                                       </div>
                                   </div>
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Amount</label>
                                       <input 
                                         type="number" name="loanAmount" value={formData.loanAmount} onChange={handleChange} required
                                         className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                         placeholder="₹ 50,00,000"
                                       />
                                   </div>
                               </div>

                               <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Turnover</label>
                                       <div className="relative">
                                            <select name="annualTurnover" value={formData.annualTurnover} onChange={handleChange}
                                                className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white appearance-none"
                                            >
                                                <option value="Under 1 Cr">Under 1 Cr</option>
                                                <option value="1 Cr - 5 Cr">1 Cr - 5 Cr</option>
                                                <option value="5 Cr - 25 Cr">5 Cr - 25 Cr</option>
                                                <option value="25 Cr - 100 Cr">25 Cr - 100 Cr</option>
                                                <option value="Above 100 Cr">Above 100 Cr</option>
                                            </select>
                                            <ChevronDown className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
                                       </div>
                                   </div>
                                   <div className="space-y-1.5">
                                       <label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Purpose</label>
                                       <input 
                                         type="text" name="purpose" value={formData.purpose} onChange={handleChange}
                                         className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-green-500/20 focus:border-green-500 outline-none transition-all bg-gray-50 focus:bg-white"
                                         placeholder="Expansion"
                                       />
                                   </div>
                               </div>

                               <button 
                                 type="submit" 
                                 disabled={loading}
                                 className="w-full bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-bold py-4 rounded-xl shadow-lg shadow-orange-500/20 transition-all transform hover:-translate-y-0.5 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed mt-4"
                               >
                                   {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Get Offers Now"} <ArrowRight className="w-5 h-5" />
                               </button>

                               <p className="text-[10px] text-center text-gray-400 mt-4 leading-relaxed px-4">
                                   By clicking &quot;Get Offers Now&quot;, you agree to authorize our partners to contact you for the loan application.
                               </p>
                           </form>
                        )}
                    </div>
                </div>
             </motion.div>
        </div>
      </section>

      {/* Trusted Partners Grid */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Trusted financing partners</h2>
            <p className="text-gray-500 max-w-2xl mx-auto">We work with India&apos;s most reputed financial institutions to bring you the best interest rates and flexible terms.</p>
          </div>
          
          <div className="flex flex-wrap justify-center gap-8 opacity-80 grayscale hover:grayscale-0 transition-all duration-500">
             {banks.map((bank, index) => (
                 <div key={index} className="bg-white px-8 py-6 rounded-2xl shadow-sm border border-gray-100 flex items-center justify-center min-w-[200px] hover:shadow-md hover:border-gray-200 transition-all cursor-default group">
                     <span className={`text-xl font-bold ${bank.color} group-hover:scale-105 transition-transform`}>{bank.name}</span>
                 </div>
             ))}
             <div className="bg-white/50 px-8 py-6 rounded-2xl border border-dashed border-gray-300 flex items-center justify-center min-w-[200px] text-gray-400 font-medium">
                 + 95 More
             </div>
          </div>
        </div>
      </section>

      {/* Loan Products Table */}
      <section className="py-24 bg-white relative">
        <div className="container mx-auto px-4">
           <div className="grid lg:grid-cols-4 gap-12">
               <div className="lg:col-span-1">
                   <h2 className="text-3xl font-bold text-gray-900 mb-6 leading-tight">Tailored financial solutions for every need</h2>
                   <p className="text-gray-500 mb-8 leading-relaxed">
                       Whether you need quick working capital or long-term project finance, we have a product designed for your specific business requirements.
                   </p>
                   <button onClick={() => document.getElementById('finance-form')?.scrollIntoView({ behavior: 'smooth' })} className="text-green-600 font-semibold flex items-center gap-2 hover:gap-3 transition-all">
                       Check your eligibility <ArrowRight className="w-4 h-4" />
                   </button>
               </div>

               <div className="lg:col-span-3">
                   <div className="bg-white rounded-2xl shadow-xl shadow-gray-100/50 overflow-hidden border border-gray-100">
                       <div className="overflow-x-auto">
                           <table className="w-full text-left border-collapse">
                               <thead>
                                   <tr className="bg-gray-50/50 border-b border-gray-100">
                                       <th className="p-5 text-xs font-bold text-gray-400 uppercase tracking-wider">Product</th>
                                       <th className="p-5 text-xs font-bold text-gray-400 uppercase tracking-wider">Best For</th>
                                       <th className="p-5 text-xs font-bold text-gray-400 uppercase tracking-wider">Terms</th>
                                       <th className="p-5 text-xs font-bold text-gray-400 uppercase tracking-wider">Collateral</th>
                                   </tr>
                               </thead>
                               <tbody className="divide-y divide-gray-50">
                                   {loanProducts.map((loan, idx) => (
                                       <tr key={idx} className="group hover:bg-gray-50/50 transition-colors">
                                           <td className="p-5">
                                               <div className="flex items-center gap-3">
                                                   <div className="w-10 h-10 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                                                       {loan.icon}
                                                   </div>
                                                   <div>
                                                       <div className="font-bold text-gray-900">{loan.product}</div>
                                                       <div className="text-xs text-gray-400 md:hidden mt-1">{loan.useful}</div>
                                                   </div>
                                               </div>
                                           </td>
                                           <td className="p-5">
                                               <p className="text-sm text-gray-600">{loan.choose}</p>
                                               <p className="text-xs text-gray-400 mt-1 hidden md:block">{loan.useful}</p>
                                           </td>
                                           <td className="p-5">
                                               <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-gray-100 text-xs font-medium text-gray-700 whitespace-nowrap">
                                                   {loan.terms}
                                               </span>
                                           </td>
                                           <td className="p-5 text-sm text-gray-600">{loan.security}</td>
                                       </tr>
                                   ))}
                               </tbody>
                           </table>
                       </div>
                   </div>
               </div>
           </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-24 bg-gray-50">
        <div className="container mx-auto px-4 max-w-3xl">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
            <p className="text-gray-500">Everything you need to know about the loan process.</p>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, index) => (
              <div 
                key={index}
                className={`bg-white rounded-2xl transition-all duration-300 ${openFaq === index ? 'shadow-lg border-green-100 ring-1 ring-green-100' : 'shadow-sm border border-gray-100 hover:border-gray-200'}`}
              >
                <button
                  onClick={() => toggleFaq(index)}
                  className="w-full flex items-center justify-between p-6 text-left"
                >
                  <span className={`font-semibold ${openFaq === index ? 'text-green-700' : 'text-gray-900'}`}>{faq.question}</span>
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${openFaq === index ? 'bg-green-100 text-green-600 rotate-180' : 'bg-gray-50 text-gray-400'}`}>
                    <ChevronDown className="w-4 h-4" />
                  </div>
                </button>
                <AnimatePresence>
                  {openFaq === index && (
                    <motion.div
                      initial={{ height: 0, opacity: 0 }}
                      animate={{ height: "auto", opacity: 1 }}
                      exit={{ height: 0, opacity: 0 }}
                      className="overflow-hidden"
                    >
                      <div className="p-6 pt-0 text-gray-600 leading-relaxed border-t border-gray-50">
                        {faq.answer}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
              <p className="text-gray-500 mb-4">Still have questions?</p>
              <div className="flex items-center justify-center gap-4">
                  <button className="flex items-center gap-2 px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-700 font-medium hover:border-green-500 hover:text-green-600 transition-all shadow-sm">
                      <Phone className="w-4 h-4" /> +91 88667 75033
                  </button>
                  <button className="flex items-center gap-2 px-6 py-3 rounded-xl bg-white border border-gray-200 text-gray-700 font-medium hover:border-blue-500 hover:text-blue-600 transition-all shadow-sm">
                      <Mail className="w-4 h-4" /> support@msbsgov.com
                  </button>
              </div>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}