import React, { useState, useEffect } from 'react';
import {
  Calculator,
  MessageSquare,
  ShieldCheck,
  TrendingUp,
  Clock,
  Phone,
  Mail,
  Instagram,
  Facebook,
  Youtube,
  X,
  CheckCircle2,
  ChevronRight,
  Users,
  BarChart3,
  Search,
  ArrowRight,
  Menu,
  Check,
  Globe,
  Award,
  Zap,
  Plus,
  Minus,
  Star,
  Shield,
  FileText,
  Briefcase,
  PieChart,
  Linkedin,
  Github
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('home');
  const [showPopup, setShowPopup] = useState(false);
  const [popupView, setPopupView] = useState('initial'); // 'initial' or 'form'
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [quoteStep, setQuoteStep] = useState(1);
  const [isScrolled, setIsScrolled] = useState(false);
  const [activeFaq, setActiveFaq] = useState(null);

  // 10 Second Pop-up Logic
  useEffect(() => {
    const timer = setTimeout(() => {
      setShowPopup(true);
    }, 10000);
    
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    
    return () => {
      clearTimeout(timer);
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  const openWhatsApp = () => {
    const message = encodeURIComponent("Hello ApnaAccounting, I'd like to book a free consultation for my business.");
    window.open(`https://wa.me/91XXXXXXXXXX?text=${message}`, '_blank');
  };

  const faqs = [
    { q: "Why should I outsource my accounting to ApnaAccounting?", a: "Outsourcing reduces overhead costs by up to 40% and ensures that your books are managed by specialized experts using the latest software, allowing you to focus purely on business growth." },
    { q: "Do you handle GST registration and monthly filings?", a: "Yes, we provide end-to-end GST management, from initial registration and monthly filings to annual reconciliation and representation during audits." },
    { q: "How do you ensure the security of my financial data?", a: "We use bank-grade encryption and secure cloud servers. Access is strictly controlled, and we sign comprehensive non-disclosure agreements with all our clients." },
    { q: "Can you help me legally minimize my tax liability?", a: "Absolutely. Our tax planning team analyzes your business structure and expenses to identify legal tax-saving opportunities and incentives applicable to your industry." },
    { q: "What is the typical turnaround time for MIS reports?", a: "We provide real-time updates through our portal, and customized monthly MIS reports are delivered within the first week of the subsequent month." },
    { q: "Do you provide support for Income Tax audits?", a: "Yes, we specialize in audit preparation and representation. We ensure all your documentation is 'audit-ready' throughout the year." }
  ];

  // --- UI Components ---

  const Navigation = () => (
    <nav className={`fixed top-0 w-full z-[100] transition-all duration-500 ${isScrolled ? 'bg-white/80 backdrop-blur-md shadow-sm py-3' : 'bg-transparent py-6'}`}>
      <div className="max-w-7xl mx-auto px-6 md:px-12 flex justify-between items-center">
        <div className="flex items-center gap-3 cursor-pointer group" onClick={() => setActiveTab('home')}>
          <div className="relative w-12 h-12 bg-[#4B6333] rounded-xl flex items-center justify-center overflow-hidden shadow-lg shadow-[#4B6333]/20">
            <div className="absolute inset-0 bg-gradient-to-tr from-black/20 to-transparent" />
            <Calculator className="text-white relative z-10" size={26} />
          </div>
          <div>
            <h1 className="text-2xl font-black tracking-tighter text-[#4B6333] leading-none">APNA<span className="text-gray-900 font-light">ACCOUNTING</span></h1>
            <p className="text-[10px] uppercase tracking-[0.2em] text-[#7AA058] font-bold mt-1">Sai Raj Consultancy Group</p>
          </div>
        </div>

        <div className="hidden lg:flex items-center gap-10">
          {['Expertise', 'Investments', 'About', 'Contact'].map((item) => (
            <button
              key={item}
              onClick={() => {
                setActiveTab(item.toLowerCase());
                window.scrollTo({ top: 0, behavior: 'smooth' });
              }}
              className={`text-sm font-bold transition-colors relative after:content-[''] after:absolute after:bottom-[-4px] after:left-0 after:h-[2px] after:bg-[#4B6333] hover:after:w-full after:transition-all ${activeTab === item.toLowerCase() ? 'text-[#4B6333] after:w-full' : 'text-gray-800 hover:text-[#4B6333]'}`}
            >
              {item}
            </button>
          ))}
          <div className="h-6 w-[1px] bg-gray-200" />
          <button
            onClick={openWhatsApp}
            className="flex items-center gap-2 bg-[#4B6333] text-white px-7 py-3 rounded-full text-sm font-bold hover:bg-black transition-all shadow-xl shadow-[#4B6333]/20 hover:scale-105 active:scale-95"
          >
            <Clock size={16} /> Free Consultation
          </button>
        </div>

        <button className="lg:hidden text-gray-900" onClick={() => setMobileMenuOpen(true)}>
          <Menu size={32} />
        </button>
      </div>
    </nav>
  );

  const Marquee = () => (
    <div className="py-8 bg-white border-y border-gray-100 overflow-hidden select-none">
      <div className="flex animate-marquee whitespace-nowrap gap-16 items-center">
        {[...Array(2)].map((_, i) => (
          <div key={i} className="flex gap-16 items-center">
            <span className="text-gray-300 font-black text-2xl flex items-center gap-3"><Users className="text-[#4B6333]" /> 500+ CORPORATE CLIENTS</span>
            <span className="text-gray-300 font-black text-2xl flex items-center gap-3"><Award className="text-[#4B6333]" /> ISO 9001 CERTIFIED</span>
            <span className="text-gray-300 font-black text-2xl flex items-center gap-3"><Globe className="text-[#4B6333]" /> PAN INDIA PRESENCE</span>
            <span className="text-gray-300 font-black text-2xl flex items-center gap-3"><CheckCircle2 className="text-[#4B6333]" /> 12+ YEARS MASTERY</span>
            <span className="text-gray-300 font-black text-2xl flex items-center gap-3"><TrendingUp className="text-[#4B6333]" /> 40% AVG TAX SAVINGS</span>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee 30s linear infinite;
        }
      `}</style>
    </div>
  );

  const Hero = () => (
    <section className="relative pt-44 pb-32 overflow-hidden bg-[#FDFEFA]">
      <div className="absolute top-0 right-0 w-2/3 h-full overflow-hidden opacity-20 pointer-events-none">
        <img
          src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"
          alt="Premium Architecture"
          className="w-full h-full object-cover grayscale"
        />
      </div>
      <div className="max-w-7xl mx-auto px-6 md:px-12 grid lg:grid-cols-2 gap-20 items-center relative z-10">
        <div className="animate-in fade-in slide-in-from-left duration-1000">
          <div className="flex items-center gap-3 mb-8">
            <div className="h-[2px] w-12 bg-[#4B6333]" />
            <span className="text-sm font-black text-[#4B6333] tracking-[0.3em] uppercase">Premium Financial Architecture</span>
          </div>
          <h2 className="text-6xl lg:text-7xl font-black text-gray-900 leading-[1] mb-8">
            Empowering <span className="text-[#4B6333]">Mumbai's</span> Business Legacy.
          </h2>
          <p className="text-xl text-gray-600 mb-10 max-w-lg leading-relaxed font-medium">
            At ApnaAccounting, we redefine compliance as a competitive advantage. Elite taxation, audit, and outsourced accounts for visionaries.
          </p>
          <div className="flex flex-wrap gap-6">
            <button onClick={openWhatsApp} className="px-10 py-5 bg-[#4B6333] text-white rounded-2xl font-black text-lg shadow-2xl shadow-[#4B6333]/40 hover:bg-black transition-all flex items-center gap-3">
              Book VIP Consultation <ArrowRight />
            </button>
            <div className="flex items-center gap-4">
              <div className="flex -space-x-4">
                {[1,2,3,4].map(i => (
                  <img
                    key={i}
                    src={`https://i.pravatar.cc/100?img=${i+10}`}
                    className="w-12 h-12 rounded-full border-4 border-white shadow-lg"
                    alt="Client"
                  />
                ))}
              </div>
              <div>
                <p className="text-sm font-black text-gray-900">Rated 4.9/5</p>
                <p className="text-xs text-gray-500 font-bold">By 500+ Directors</p>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-[40px] shadow-2xl p-10 border border-gray-100 relative animate-in zoom-in duration-700">
          <div className="absolute -top-6 -left-6 bg-[#4B6333] text-white px-6 py-3 rounded-2xl font-black text-sm shadow-xl flex items-center gap-2 z-20">
            <Zap size={18} className="fill-current text-yellow-400" /> INSTANT QUOTE TOOL
          </div>
          
          <div className="mt-4">
            <h3 className="text-3xl font-black text-gray-900 mb-2">Custom Package</h3>
            <p className="text-gray-400 font-bold mb-8 uppercase tracking-widest text-xs">Precise pricing for your scale</p>
            
            <div className="space-y-6">
              {quoteStep === 1 && (
                <div className="grid grid-cols-1 gap-4">
                  {['Outsourced Accounts Writing', 'GST Filing & Compliance', 'Income Tax & Audit', 'Company Formation'].map(s => (
                    <button
                      key={s}
                      onClick={() => setQuoteStep(2)}
                      className="text-left p-5 border-2 border-gray-50 rounded-2xl hover:border-[#4B6333] hover:bg-[#FDFEFA] transition-all flex justify-between items-center group"
                    >
                      <span className="font-bold text-gray-700">{s}</span>
                      <ChevronRight className="text-gray-300 group-hover:text-[#4B6333] transition-colors" />
                    </button>
                  ))}
                </div>
              )}

              {quoteStep === 2 && (
                <div className="space-y-4 animate-in fade-in">
                  <div className="flex flex-col gap-3">
                    {['Up to ₹40 Lakhs', '₹40L - ₹5 Crores', '₹5 Cr - ₹50 Crores', 'Corporate 50Cr+'].map(r => (
                      <button
                        key={r}
                        onClick={() => setQuoteStep(3)}
                        className="w-full text-left p-4 border-2 border-gray-50 rounded-2xl hover:border-[#4B6333] font-bold text-gray-600 transition-all"
                      >
                        {r}
                      </button>
                    ))}
                  </div>
                  <button onClick={() => setQuoteStep(1)} className="text-gray-400 text-xs font-black uppercase tracking-widest hover:text-black">← Back to Services</button>
                </div>
              )}

              {quoteStep === 3 && (
                <div className="space-y-6 animate-in slide-in-from-bottom-5">
                  <div className="bg-green-50 p-6 rounded-3xl border border-green-100 flex items-center gap-4">
                    <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-white shrink-0">
                      <Check size={24} strokeWidth={4} />
                    </div>
                    <div>
                      <p className="font-black text-green-900 uppercase text-xs tracking-widest">Quote Generated</p>
                      <p className="text-sm text-green-700">Available for instant download.</p>
                    </div>
                  </div>
                  <input type="email" placeholder="Corporate Email Address" className="w-full p-5 bg-gray-50 rounded-2xl border-none outline-none focus:ring-2 focus:ring-[#4B6333]/30 font-bold" />
                  <button className="w-full bg-[#4B6333] text-white py-5 rounded-2xl font-black text-lg shadow-xl" onClick={() => setQuoteStep(1)}>
                    Send Proposal to Inbox
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );

  const WhyChooseUs = () => {
    const reasons = [
      {
        title: "Expertise You Can Trust",
        desc: "Seasoned accounting and tax professionals bringing years of experience across diverse industries. We stay updated with latest tax laws and regulations."
      },
      {
        title: "Tailored Solutions",
        desc: "Services customized to fit your specific needs—whether you're a startup, SME, or established enterprise."
      },
      {
        title: "End-to-End Support",
        desc: "From bookkeeping and tax filing to strategic financial planning, we provide comprehensive solutions under one roof."
      },
      {
        title: "Transparent & Ethical",
        desc: "Integrity is at our core. We ensure complete transparency in our processes with no hidden costs or surprises."
      },
      {
        title: "Technology-Driven",
        desc: "Leveraging modern accounting software and digital tools for faster, more accurate results and less paperwork."
      },
      {
        title: "Client-Centric Approach",
        desc: "Your success is our priority. We build long-term relationships through proactive advice and personalized attention."
      }
    ];

    return (
      <section className="py-32 bg-[#F9FAF5]">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="text-center mb-20">
            <span className="text-[#4B6333] font-black uppercase tracking-widest text-xs block mb-4">The APNA Advantage</span>
            <h2 className="text-5xl font-black text-gray-900">Why Partner with Us?</h2>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {reasons.map((r, i) => (
              <div key={i} className="bg-white p-10 rounded-[40px] border border-gray-100 hover:shadow-2xl transition-all group">
                <div className="w-12 h-12 bg-[#4B6333]/5 rounded-xl flex items-center justify-center text-[#4B6333] mb-6 group-hover:bg-[#4B6333] group-hover:text-white transition-all">
                  <Check size={20} />
                </div>
                <h4 className="text-xl font-black text-gray-900 mb-4">{r.title}</h4>
                <p className="text-gray-500 font-medium leading-relaxed text-sm">{r.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const VisualServices = () => {
    const services = [
      {
        title: "Outsourced Accounting",
        desc: "Bookkeeping, Payroll processing, Financial reporting, and Cash flow management.",
        img: "https://images.unsplash.com/photo-1454165833767-027ffeb99c1e?auto=format&fit=crop&w=600&q=80"
      },
      {
        title: "GST & Income Tax",
        desc: "End-to-end support for GST returns, IT filing, and audit assistance.",
        img: "https://images.unsplash.com/photo-1586282391129-76a6df230234?auto=format&fit=crop&w=600&q=80"
      },
      {
        title: "Business Registration",
        desc: "Company incorporation, MSME, IEC, and Trademark registration services.",
        img: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?auto=format&fit=crop&w=600&q=80"
      },
      {
        title: "Wealth Management",
        desc: "Professional Mutual Fund advisory for long-term growth and stability.",
        img: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=600&q=80"
      }
    ];

    return (
      <section className="py-32 bg-white">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="flex flex-col lg:flex-row justify-between items-end mb-20 gap-6">
            <div className="max-w-2xl">
              <span className="text-[#4B6333] font-black uppercase tracking-widest text-xs block mb-4">Core Competencies</span>
              <h2 className="text-5xl font-black text-gray-900">Precision in Every <br/>Decimal. Excellence in Every <span className="text-[#4B6333]">Audit.</span></h2>
            </div>
            <p className="text-gray-500 font-medium max-w-sm mb-2">We deliver premium accounting infrastructure for businesses that refuse to settle for average.</p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((s, idx) => (
              <div 
                key={idx} 
                onClick={() => {
                  setActiveTab('expertise');
                  window.scrollTo({ top: 0, behavior: 'smooth' });
                }}
                className="group relative h-[450px] overflow-hidden rounded-[32px] cursor-pointer shadow-xl transition-all duration-700 hover:-translate-y-4"
              >
                <img src={s.img} className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" alt={s.title} />
                <div className="absolute inset-0 bg-gradient-to-t from-black via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" />
                <div className="absolute bottom-0 p-8 w-full transition-all duration-500 transform group-hover:pb-12">
                  <div className="w-12 h-12 bg-white/20 backdrop-blur-md rounded-xl flex items-center justify-center mb-6 group-hover:bg-[#4B6333] transition-all">
                    <CheckCircle2 className="text-white" size={20} />
                  </div>
                  <h3 className="text-2xl font-black text-white mb-3">{s.title}</h3>
                  <p className="text-gray-300 text-sm leading-relaxed opacity-0 group-hover:opacity-100 transition-all duration-500 h-0 group-hover:h-auto overflow-hidden">
                    {s.desc}
                  </p>
                  <div className="mt-6 flex items-center gap-2 text-white text-xs font-black uppercase tracking-widest">
                    Consult Expert <ArrowRight size={14} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  };

  const ExpertiseView = () => (
    <div className="max-w-7xl mx-auto px-6 md:px-12 pt-40 pb-32">
      <div className="mb-20 text-center">
        <span className="text-[#4B6333] font-black uppercase tracking-[0.3em] text-xs block mb-6">Service Portfolio</span>
        <h2 className="text-6xl font-black text-gray-900 mb-8">Comprehensive <br/>Business Solutions.</h2>
      </div>

      <div className="space-y-12">
        {/* Outsourced Accounting */}
        <div className="bg-white border border-gray-100 rounded-[48px] p-12 shadow-sm grid lg:grid-cols-3 gap-12">
          <div className="lg:col-span-1">
            <div className="w-16 h-16 bg-[#4B6333] rounded-2xl flex items-center justify-center text-white mb-8">
              <Calculator size={32} />
            </div>
            <h3 className="text-3xl font-black text-gray-900 mb-6 uppercase tracking-tighter">Outsourced Accounting</h3>
            <p className="text-gray-500 font-medium">Expert financial management without the cost and complexity of an in-house team.</p>
          </div>
          <div className="lg:col-span-2 grid md:grid-cols-2 gap-8">
            {[
              "Bookkeeping & Financial Records",
              "Payroll Processing & Compliance",
              "Tax Preparation & Filing Support",
              "Financial Reporting & Analysis",
              "Budgeting & Cash Flow Management",
              "Accurate & Timely Data Provision"
            ].map(item => (
              <div key={item} className="flex items-center gap-4 p-6 bg-[#F9FAF5] rounded-3xl group hover:bg-[#4B6333] transition-colors">
                <Check className="text-[#4B6333] group-hover:text-white" />
                <span className="font-bold text-gray-800 group-hover:text-white transition-colors">{item}</span>
              </div>
            ))}
          </div>
        </div>

        {/* GST & Income Tax */}
        <div className="bg-white border border-gray-100 rounded-[48px] p-12 shadow-sm grid lg:grid-cols-3 gap-12">
          <div className="lg:col-span-1 lg:order-2">
            <div className="w-16 h-16 bg-[#4B6333] rounded-2xl flex items-center justify-center text-white mb-8">
              <ShieldCheck size={32} />
            </div>
            <h3 className="text-3xl font-black text-gray-900 mb-6 uppercase tracking-tighter">GST & Income Tax</h3>
            <p className="text-gray-500 font-medium">End-to-end guidance to make compliance simple, unified, and stress-free.</p>
          </div>
          <div className="lg:col-span-2 lg:order-1 grid md:grid-cols-2 gap-8">
            {[
              "GST Registration & GSTIN",
              "Monthly/Quarterly Return Filing",
              "Input Tax Credit Reconciliation",
              "Advisory on Compliance Updates",
              "Assistance with Audits & Notices",
              "Income Tax Planning & Filing"
            ].map(item => (
              <div key={item} className="flex items-center gap-4 p-6 bg-[#FDFEFA] border border-gray-100 rounded-3xl group hover:bg-[#4B6333] transition-colors">
                <div className="w-2 h-2 rounded-full bg-[#4B6333] group-hover:bg-white" />
                <span className="font-bold text-gray-800 group-hover:text-white transition-colors">{item}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Business Registration */}
        <div className="bg-[#4B6333] rounded-[48px] p-12 shadow-2xl text-white grid lg:grid-cols-3 gap-12">
          <div className="lg:col-span-1">
            <div className="w-16 h-16 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-white mb-8">
              <Globe size={32} />
            </div>
            <h3 className="text-3xl font-black mb-6 uppercase tracking-tighter">Business Setup</h3>
            <p className="text-white/70 font-medium">Navigating legal and regulatory requirements from day one.</p>
          </div>
          <div className="lg:col-span-2 grid grid-cols-2 sm:grid-cols-3 gap-4">
            {[
              "Pvt Ltd Incorporation",
              "LLP & Partnership",
              "MSME / Udyam",
              "Professional Tax",
              "Import Export Code",
              "Shop & Establishment",
              "Trademark Protection",
              "Sole Proprietorship",
              "Company Compliance"
            ].map(item => (
              <div key={item} className="p-4 bg-white/5 border border-white/10 rounded-2xl text-xs font-black uppercase tracking-widest text-center hover:bg-white hover:text-[#4B6333] transition-all cursor-default">
                {item}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );

  const InvestmentsView = () => (
    <div className="max-w-7xl mx-auto px-6 md:px-12 pt-40 pb-32">
      <div className="grid lg:grid-cols-2 gap-20 items-center">
        <div>
          <span className="text-[#4B6333] font-black uppercase tracking-[0.3em] text-xs block mb-6">Wealth Planning</span>
          <h2 className="text-6xl font-black text-gray-900 mb-8 leading-[1.1]">Mutual Funds: <br/><span className="text-[#4B6333]">Smarter Growth.</span></h2>
          <p className="text-xl text-gray-500 mb-12 leading-relaxed">
            Mutual funds pool money from many investors to buy a diversified portfolio. With thoughtful planning, they help achieve long-term goals while balancing risk and return.
          </p>
          
          <div className="grid sm:grid-cols-2 gap-8 mb-12">
            {[
              { icon: Check, title: "Diversification", desc: "Across sectors and companies." },
              { icon: Briefcase, title: "Professional Management", desc: "Managed by market experts." },
              { icon: TrendingUp, title: "Liquidity", desc: "Flexibility in entry and exit." },
              { icon: Users, title: "Accessibility", desc: "For small and large investors." }
            ].map((feature, i) => {
              const IconComp = feature.icon;
              return (
                <div key={i} className="flex gap-4">
                  <div className="shrink-0 w-10 h-10 bg-[#4B6333]/10 rounded-lg flex items-center justify-center text-[#4B6333]">
                    <IconComp size={18} />
                  </div>
                  <div>
                    <h4 className="font-black text-gray-900 text-sm mb-1">{feature.title}</h4>
                    <p className="text-xs text-gray-400 font-medium">{feature.desc}</p>
                  </div>
                </div>
              );
            })}
          </div>
          
          <button onClick={openWhatsApp} className="px-10 py-5 bg-black text-white rounded-2xl font-black shadow-xl flex items-center gap-3">
            Speak to Investment Advisor <ChevronRight />
          </button>
        </div>
        <div className="relative">
           <img 
            src="https://images.unsplash.com/photo-1611974714851-eb607737421c?auto=format&fit=crop&w=800&q=80" 
            className="rounded-[40px] shadow-2xl grayscale hover:grayscale-0 transition-all duration-1000"
            alt="Growth Chart"
          />
          <div className="absolute -bottom-10 -left-10 bg-[#4B6333] p-10 rounded-[32px] shadow-2xl text-white">
            <PieChart size={40} className="mb-4" />
            <p className="text-2xl font-black mb-1">Diversified</p>
            <p className="text-xs font-bold uppercase tracking-widest text-white/60">Portfolios</p>
          </div>
        </div>
      </div>
    </div>
  );

  const SocialMedia = () => (
    <section className="py-24 bg-white text-center">
      <h4 className="text-[#4B6333] font-black uppercase tracking-widest text-xs mb-6">Our Digital Footprint</h4>
      <h3 className="text-4xl font-black text-gray-900 mb-12">Witness our work in action.</h3>
      <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6 px-6">
        {[
          { icon: Youtube, color: "text-red-600", label: "Tax Tutorials", sub: "15k+ Views" },
          { icon: Instagram, color: "text-pink-600", label: "Inside Accounts", sub: "8k+ Followers" },
          { icon: Facebook, color: "text-blue-600", label: "Tax Updates", sub: "12k+ Community" },
          { icon: Search, color: "text-[#4B6333]", label: "Google Reviews", sub: "4.9/5 Rating" }
        ].map((social, i) => {
          const IconComp = social.icon;
          return (
            <div key={i} className="p-8 border border-gray-100 rounded-[32px] hover:shadow-2xl transition-all cursor-pointer group bg-white">
              <div className={`mb-6 flex justify-center scale-150 group-hover:scale-[1.7] transition-transform ${social.color}`}>
                <IconComp />
              </div>
              <p className="font-black text-gray-900 mb-1 text-sm">{social.label}</p>
              <p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">{social.sub}</p>
            </div>
          );
        })}
      </div>
    </section>
  );

  const HomeView = () => (
    <main>
      <Hero />
      <Marquee />
      <VisualServices />
      <WhyChooseUs />
      <section className="py-32 bg-[#F9FAF5] overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 md:px-12 grid lg:grid-cols-2 gap-20 items-center">
          <div className="relative group">
            <div className="absolute -inset-4 bg-[#4B6333]/5 rounded-[60px] blur-2xl group-hover:bg-[#4B6333]/10 transition-all duration-700" />
            <img
              src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
              className="rounded-[48px] shadow-3xl relative z-10 hover:scale-[1.02] transition-transform duration-700 grayscale hover:grayscale-0"
              alt="Corporate Boardroom"
            />
          </div>
          <div className="space-y-8">
            <div className="w-20 h-[2px] bg-[#4B6333]" />
            <h3 className="text-5xl font-black text-gray-900 leading-tight">Elite Financial Guidance for the <span className="text-[#4B6333]">Top 1%.</span></h3>
            <p className="text-lg text-gray-600 font-medium leading-relaxed">
              We don't just file taxes; we architect wealth systems. Our clients include Mumbai's most prestigious manufacturing houses and retail chains.
            </p>
            <div className="grid sm:grid-cols-2 gap-8">
              {[
                { label: "Tax Savings", value: "40%", sub: "Average Client Savings" },
                { label: "Accuracy", value: "100%", sub: "Audit Pass Rate" },
                { label: "Consultants", value: "12+", sub: "Senior Experts" },
                { label: "Uptime", value: "24/7", sub: "Support Availability" }
              ].map((stat, i) => (
                <div key={i} className="group">
                  <p className="text-5xl font-black text-[#4B6333] mb-2 group-hover:scale-110 transition-transform">{stat.value}</p>
                  <p className="text-xs font-black uppercase tracking-widest text-gray-900">{stat.label}</p>
                  <p className="text-xs text-gray-400 font-bold">{stat.sub}</p>
                </div>
              ))}
            </div>
            <button onClick={() => {setActiveTab('expertise'); window.scrollTo(0,0);}} className="pt-4 flex items-center gap-3 text-[#4B6333] font-black uppercase tracking-[0.2em] text-sm group">
              Discover Our Methodology <ArrowRight className="group-hover:translate-x-2 transition-transform" />
            </button>
          </div>
        </div>
      </section>
      
      <section className="py-32 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 md:px-12">
          <div className="text-center mb-20">
            <span className="text-[#4B6333] font-black uppercase tracking-widest text-xs block mb-4">Success Stories</span>
            <h2 className="text-5xl font-black text-gray-900">What Mumbai's Leaders Say</h2>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              { name: "Rajesh K. Singhania", role: "CEO, Singhania Textiles", text: "ApnaAccounting isn't just a service; they are our backbone. Their GST audit preparation saved us from major penalties last quarter." },
              { name: "Meera D'Souza", role: "Founder, Bloom Fashion", text: "As a fast-growing startup, we needed clarity. Their MIS reports are so detailed, I can make investment decisions in minutes." },
              { name: "Anil Ambani (SME)", role: "MD, Precision Tools India", text: "The tax optimization strategies suggested by the team helped us reinvest ₹15 Lakhs back into our machinery. Truly elite." }
            ].map((rev, i) => (
              <div key={i} className="p-10 bg-[#FDFEFA] border border-gray-100 rounded-[40px] hover:shadow-2xl transition-all group">
                <div className="flex gap-1 mb-6 text-yellow-400">
                  {[...Array(5)].map((_, j) => <Star key={j} size={16} fill="currentColor" />)}
                </div>
                <p className="text-gray-600 font-medium mb-8 leading-relaxed italic">"{rev.text}"</p>
                <div className="flex items-center gap-4">
                  <div className="w-12 h-12 bg-[#4B6333] rounded-full flex items-center justify-center text-white font-black">{rev.name[0]}</div>
                  <div>
                    <p className="font-black text-gray-900 text-sm">{rev.name}</p>
                    <p className="text-xs text-[#7AA058] font-bold uppercase">{rev.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-32 bg-[#F9FAF5]">
        <div className="max-w-4xl mx-auto px-6 md:px-12">
          <div className="text-center mb-16">
            <h2 className="text-5xl font-black text-gray-900 mb-6 uppercase tracking-tighter">Strategic FAQ</h2>
            <p className="text-gray-500 font-bold uppercase tracking-widest text-xs">Everything you need to know about our partnership</p>
          </div>
          <div className="space-y-4">
            {faqs.map((faq, i) => (
              <div key={i} className="bg-white rounded-3xl border border-gray-100 overflow-hidden transition-all duration-300">
                <button
                  onClick={() => setActiveFaq(activeFaq === i ? null : i)}
                  className="w-full p-6 text-left flex justify-between items-center group"
                >
                  <span className={`text-lg font-black transition-colors ${activeFaq === i ? 'text-[#4B6333]' : 'text-gray-800'}`}>{faq.q}</span>
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${activeFaq === i ? 'bg-[#4B6333] text-white rotate-180' : 'bg-gray-100 text-gray-400'}`}>
                    {activeFaq === i ? <Minus size={18} /> : <Plus size={18} />}
                  </div>
                </button>
                {activeFaq === i && (
                  <div className="px-6 pb-8 text-gray-500 font-medium leading-relaxed animate-in slide-in-from-top-2">
                    {faq.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
      <SocialMedia />
    </main>
  );

  const Footer = () => (
    <footer className="bg-[#0D1117] text-white pt-32 pb-12 border-t border-gray-800">
      <div className="max-w-7xl mx-auto px-6 md:px-12">
        <div className="grid lg:grid-cols-12 gap-16 mb-20">
          <div className="lg:col-span-5">
            <div className="flex items-center gap-3 mb-8">
              <div className="w-12 h-12 bg-[#4B6333] rounded-xl flex items-center justify-center">
                <Calculator className="text-white" size={26} />
              </div>
              <div>
                <h1 className="text-2xl font-black tracking-tighter leading-none">APNA<span className="text-gray-400 font-light">ACCOUNTING</span></h1>
                <p className="text-[10px] uppercase tracking-[0.2em] text-[#7AA058] font-bold mt-1">Sai Raj Consultancy</p>
              </div>
            </div>
            <p className="text-gray-500 text-lg leading-relaxed mb-10 max-w-sm font-medium">
              Helping you make smarter financial decisions that drive growth and stability.
            </p>
            <div className="flex gap-4">
              {[Instagram, Facebook, Youtube, Linkedin].map((Icon, idx) => (
                <button key={idx} className="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-[#4B6333] hover:scale-110 transition-all">
                  <Icon size={22} />
                </button>
              ))}
            </div>
          </div>

          <div className="lg:col-span-2">
            <h4 className="font-black mb-8 uppercase tracking-widest text-xs text-[#4B6333]">Services</h4>
            <ul className="space-y-4 text-gray-400 font-bold text-sm">
              <li onClick={() => setActiveTab('expertise')} className="hover:text-white cursor-pointer transition-colors">Bookkeeping</li>
              <li onClick={() => setActiveTab('expertise')} className="hover:text-white cursor-pointer transition-colors">GST Returns</li>
              <li onClick={() => setActiveTab('expertise')} className="hover:text-white cursor-pointer transition-colors">Tax Filing</li>
              <li onClick={() => setActiveTab('investments')} className="hover:text-white cursor-pointer transition-colors">Mutual Funds</li>
            </ul>
          </div>

          <div className="lg:col-span-2">
            <h4 className="font-black mb-8 uppercase tracking-widest text-xs text-[#4B6333]">About Us</h4>
            <ul className="space-y-4 text-gray-400 font-bold text-sm">
              <li onClick={() => setActiveTab('about')} className="hover:text-white cursor-pointer transition-colors">Our Firm</li>
              <li onClick={() => setActiveTab('about')} className="hover:text-white cursor-pointer transition-colors">Methodology</li>
              <li className="hover:text-white cursor-pointer transition-colors">Career</li>
              <li className="hover:text-white cursor-pointer transition-colors">Privacy</li>
            </ul>
          </div>

          <div className="lg:col-span-3">
            <div className="bg-[#4B6333]/10 p-8 rounded-[32px] border border-[#4B6333]/20">
              <h4 className="font-black mb-4">Elite Newsletter</h4>
              <p className="text-gray-500 text-xs font-bold mb-6">Receive Mumbai's high-impact tax & business updates monthly.</p>
              <div className="relative">
                <input type="text" placeholder="Your Email" className="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-4 text-sm outline-none focus:ring-1 focus:ring-[#4B6333]" />
                <button className="absolute right-2 top-2 bg-[#4B6333] p-2 rounded-lg hover:bg-white hover:text-[#4B6333] transition-all">
                  <ArrowRight size={20} />
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <div className="pt-12 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
          <p className="text-gray-600 text-xs font-black uppercase tracking-widest">© 2024 ApnaAccounting.com — PART OF SAI RAJ CONSULTANCY GROUP</p>
          <div className="flex gap-8 text-xs font-black uppercase tracking-widest text-gray-600">
            <span className="hover:text-[#4B6333] cursor-pointer">Security</span>
            <span className="hover:text-[#4B6333] cursor-pointer">Transparency</span>
          </div>
        </div>
      </div>
    </footer>
  );

  const Popup = () => {
    if (!showPopup) return null;
    return (
      <div className="fixed inset-0 z-[200] flex items-end justify-start p-6 pointer-events-none bg-black/5 backdrop-blur-sm">
        <div className="bg-white rounded-[32px] shadow-[0_50px_100px_rgba(0,0,0,0.3)] p-8 w-full max-sm:max-w-full max-w-sm pointer-events-auto animate-in slide-in-from-bottom-20 duration-500 border border-gray-100 relative overflow-hidden">
          <button onClick={() => { setShowPopup(false); setPopupView('initial'); }} className="absolute top-6 right-6 text-gray-400 hover:text-black transition-colors z-20">
            <X size={24} />
          </button>
          
          {popupView === 'initial' ? (
            <div className="animate-in fade-in duration-500">
              <div className="flex items-center gap-5 mb-8">
                <div className="relative">
                  <img
                    src="https://images.unsplash.com/photo-1558222218-b7b54eede3f3?auto=format&fit=crop&w=150&h=150&q=80"
                    alt="Accountant"
                    className="w-20 h-20 rounded-2xl object-cover shadow-lg border-2 border-[#4B6333]/10"
                  />
                  <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 border-4 border-white rounded-full" />
                </div>
                <div>
                  <p className="text-[#4B6333] font-black text-xs uppercase tracking-widest">Active Now</p>
                  <h4 className="text-xl font-black text-gray-900">Consult with Rajen</h4>
                  <p className="text-xs text-gray-500 font-bold uppercase">Principal Consultant</p>
                </div>
              </div>
              
              <h5 className="text-lg font-bold text-gray-800 mb-4 leading-tight">Need instant guidance on GST or Tax planning?</h5>
              <p className="text-gray-500 text-sm mb-8 font-medium">Get a direct perspective from our leadership team within minutes.</p>
              
              <div className="space-y-3">
                <button onClick={openWhatsApp} className="w-full bg-[#4B6333] text-white py-4 rounded-2xl font-black shadow-lg shadow-[#4B6333]/20 flex items-center justify-center gap-3">
                  <MessageSquare size={20} /> Chat on WhatsApp
                </button>
                <button
                  onClick={() => setPopupView('form')}
                  className="w-full bg-gray-50 text-gray-900 py-4 rounded-2xl font-black hover:bg-gray-100 transition-colors flex items-center justify-center gap-2"
                >
                  <Mail size={18} /> Need Quote on Email
                </button>
              </div>
            </div>
          ) : (
            <div className="animate-in slide-in-from-right duration-500">
               <h4 className="text-2xl font-black text-gray-900 mb-2">Detailed Quote</h4>
               <p className="text-xs text-gray-400 font-bold uppercase tracking-widest mb-6">Send us your business snapshot</p>
               
               <div className="space-y-3">
                 <input type="text" placeholder="Full Name" className="w-full p-4 bg-gray-50 border-none rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-[#4B6333]/20" />
                 <input type="text" placeholder="Mobile Number" className="w-full p-4 bg-gray-50 border-none rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-[#4B6333]/20" />
                 <input type="email" placeholder="Work Email" className="w-full p-4 bg-gray-50 border-none rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-[#4B6333]/20" />
                 <select className="w-full p-4 bg-gray-50 border-none rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-[#4B6333]/20 appearance-none">
                    <option>Business Type</option>
                    <option>Manufacturing</option>
                    <option>Retail/Trading</option>
                    <option>Service/IT</option>
                    <option>Real Estate</option>
                 </select>
                 <select className="w-full p-4 bg-gray-50 border-none rounded-xl text-sm font-bold outline-none focus:ring-2 focus:ring-[#4B6333]/20 appearance-none">
                    <option>Annual Turnover</option>
                    <option>Up to 1 Cr</option>
                    <option>1 Cr - 10 Cr</option>
                    <option>10 Cr - 50 Cr</option>
                    <option>50 Cr +</option>
                 </select>
                 
                 <button className="w-full bg-[#4B6333] text-white py-4 rounded-2xl font-black mt-2 shadow-xl shadow-[#4B6333]/20">
                   Generate Proposal
                 </button>
                 <button onClick={() => setPopupView('initial')} className="w-full text-xs text-gray-400 font-black uppercase pt-2">← Back</button>
               </div>
            </div>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="font-sans text-gray-900 bg-white selection:bg-[#4B6333] selection:text-white antialiased">
      <Navigation />
      
      {activeTab === 'home' && <HomeView />}
      {activeTab === 'expertise' && <ExpertiseView />}
      {activeTab === 'investments' && <InvestmentsView />}
      {(activeTab === 'about' || activeTab === 'industries' || activeTab === 'contact') && (
        <section className="pt-60 pb-40 text-center animate-in fade-in zoom-in duration-500 px-6">
          <div className="w-24 h-24 bg-[#4B6333]/5 rounded-full flex items-center justify-center mx-auto mb-10">
            <Search className="text-[#4B6333]" size={40} />
          </div>
          <h2 className="text-5xl font-black text-gray-900 mb-6 uppercase tracking-tighter">Section: {activeTab}</h2>
          <p className="text-gray-500 max-w-lg mx-auto font-medium text-lg leading-relaxed px-6">
            Our experts are refining the content for the **{activeTab}** segment to ensure it meets our Sai Raj Consultancy Group standards.
          </p>
          <button onClick={() => setActiveTab('home')} className="mt-12 px-10 py-5 bg-black text-white rounded-2xl font-black text-lg">
            Go Back Home
          </button>
        </section>
      )}

      <Footer />
      <Popup />

      {/* WhatsApp Floating Button */}
      <button
        onClick={openWhatsApp}
        className="fixed bottom-10 right-10 z-[150] w-20 h-20 bg-[#25D366] text-white rounded-[24px] flex items-center justify-center shadow-[0_20px_50px_rgba(37,211,102,0.4)] hover:scale-110 transition-all hover:-rotate-6 active:scale-95 group"
      >
        <MessageSquare size={38} className="group-hover:scale-110 transition-transform" />
        <div className="absolute -top-2 -right-2 w-6 h-6 bg-red-500 border-4 border-white rounded-full animate-ping" />
      </button>

      {/* Mobile Nav */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 z-[1000] bg-white flex flex-col p-12 animate-in slide-in-from-right duration-500">
          <div className="flex justify-between items-center mb-16">
            <h1 className="text-2xl font-black text-[#4B6333]">APNAACCOUNTING</h1>
            <button onClick={() => setMobileMenuOpen(false)} className="p-3 bg-gray-100 rounded-full"><X size={32} /></button>
          </div>
          <div className="flex flex-col gap-10">
            {['Home', 'Expertise', 'Investments', 'About', 'Contact'].map(item => (
              <button
                key={item}
                onClick={() => { setActiveTab(item.toLowerCase()); setMobileMenuOpen(false); }}
                className={`text-5xl font-black text-left tracking-tighter ${activeTab === item.toLowerCase() ? 'text-[#4B6333]' : 'text-gray-300'}`}
              >
                {item}
              </button>
            ))}
          </div>
          <button onClick={openWhatsApp} className="mt-auto w-full bg-[#4B6333] text-white py-6 rounded-3xl font-black text-2xl shadow-2xl">
            Free Consultation
          </button>
        </div>
      )}
    </div>
  );
};

export default App;