import React from 'react';
import { useNavigate } from 'react-router-dom';
import { 
  Check, 
  Mail, 
  MessageSquare, 
  ArrowRight, 
  Shield, 
  Zap, 
  Smartphone, 
  BarChart3,
  Globe,
  Receipt,
  Shirt,
  QrCode,
  Package,
  PieChart,
  Video,
  Play,
  CheckCircle2
} from 'lucide-react';
import Button from '../components/Button';
import { smoothScrollTo } from '../utils/smoothScroll';

const LandingPage = () => {
  const navigate = useNavigate();

  const handlePlanSelect = (plan: string) => {
    navigate(`/checkout?plan=${plan}`);
  };

  const pricingPlans = [
    {
      id: "free_trial",
      name: "Try for Free",
      price: "₹0",
      duration: "1 Month",
      description: "Experience the full power of TallyBook POS for garments with zero commitment.",
      features: [
        "Size & Color Management",
        "GST Invoicing",
        "Barcode Scanning",
        "ART Wise Tracking",
        "WhatsApp Bill Send"
      ],
      buttonText: "Try for Free",
      highlight: false,
      onClick: () => navigate('/signup')
    },
    {
      id: "1_year",
      name: "Get Started",
      price: "₹799",
      duration: "1 Year",
      description: "Advanced inventory and marketing toolkit for your store.",
      features: [
        "Everything in Free Trial",
        "WhatsApp Marketing Tools",
        "Cloud Data Backup",
        "Profit & Sales Reports",
        "Priority Support"
      ],
      buttonText: "Get Started",
      highlight: true,
      onClick: () => handlePlanSelect('1_year')
    },
    {
      id: "3_year",
      name: "Best Value",
      price: "₹1499",
      duration: "3 Years",
      description: "The complete digital transformation for footwear & garment shops.",
      features: [
        "Everything in Premium",
        "36 Months Validity",
        "VIP Onboarding",
        "Custom Bill Templates",
        "Account Manager"
      ],
      buttonText: "Best Value",
      highlight: false,
      onClick: () => handlePlanSelect('3_year')
    }
  ];

  return (
    <div className="min-h-screen bg-white dark:bg-gray-900 font-sans text-gray-900 dark:text-gray-100">
      {/* Navbar */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-100 dark:border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16 md:h-20">
            <div className="flex items-center gap-2">
              <img src="/logo.png" alt="TallyBook Logo" className="w-10 h-10 md:w-12 md:h-12" />
              <span className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent uppercase tracking-tight">
                TallyBook POS
              </span>
            </div>
            <div className="flex items-center gap-4">
              <button 
                onClick={() => navigate('/login')}
                className="hidden sm:block text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors"
              >
                Login
              </button>
              <Button 
                variant="primary" 
                className="rounded-full px-6 py-2 h-auto text-sm md:text-base"
                onClick={() => navigate('/signup')}
              >
                Create Account
              </Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 sm:pt-48 sm:pb-32 bg-gradient-to-b from-blue-50 to-white dark:from-gray-800 dark:to-gray-900 overflow-hidden">
        <div className="max-w-7xl mx-auto text-center relative">
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-blue-400/10 blur-3xl rounded-full -z-10"></div>
          
          <div className="inline-flex items-center gap-2 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-4 py-1.5 rounded-full text-sm font-bold mb-8">
            <Zap className="h-4 w-4" aria-hidden="true" />
            #1 POS for Garments & Footwear दुकानों के लिए
          </div>

          <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 flex flex-col items-center leading-[1.1]">
            <span className="block text-gray-900 dark:text-white mb-2">Run Your Garment & Footwear Business</span>
            <span className="block bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-500 bg-clip-text text-transparent italic">
              Smarter, Faster & Error-Free
            </span>
          </h1>
          <p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-10 leading-relaxed">
            Advanced POS system for modern retailers — Billing, Size-Color stock, Barcode aur WhatsApp marketing ek hi software me.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Button 
              variant="primary" 
              className="w-full sm:w-auto px-10 py-5 rounded-full text-xl shadow-2xl shadow-blue-500/30 group"
              onClick={() => navigate('/signup')}
              aria-label="Start free trial of TallyBook POS"
            >
              Start Free Trial
              <ArrowRight className="ml-2 h-6 w-6 group-hover:translate-x-1 transition-transform" aria-hidden="true" />
            </Button>
            <Button 
              variant="secondary" 
              className="w-full sm:w-auto px-10 py-5 rounded-full text-xl border-2"
              onClick={() => smoothScrollTo('pricing')}
              aria-label="View pricing plans"
            >
              View Plans
            </Button>
          </div>

          <div className="mt-16 flex flex-wrap justify-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all duration-500 overflow-hidden">
             <div className="flex items-center gap-2"><CheckCircle2 className="h-5 w-5 text-green-500" aria-hidden="true" /> GST Billing</div>
             <div className="flex items-center gap-2"><CheckCircle2 className="h-5 w-5 text-green-500" aria-hidden="true" /> Size-Color stock</div>
             <div className="flex items-center gap-2"><CheckCircle2 className="h-5 w-5 text-green-500" aria-hidden="true" /> Barcode Scan</div>
             <div className="flex items-center gap-2"><CheckCircle2 className="h-5 w-5 text-green-500" aria-hidden="true" /> WhatsApp Marketing</div>
          </div>
        </div>
      </section>

      {/* Key Features Section */}
      <section className="py-24 bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">Everything You Need to Grow</h2>
            <p className="text-gray-600 dark:text-gray-400">Specially built modules for Garment & Footwear retailers.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            <div className="p-8 rounded-[2rem] bg-blue-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-blue-100 dark:hover:border-gray-700">
              <div className="bg-blue-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-blue-500/20">
                <Receipt className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">Fast POS Billing</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Instant bill create karo aur print / WhatsApp par bhejo. GST invoices manually likhne ki zaroorat nahi.</p>
            </div>

            <div className="p-8 rounded-[2rem] bg-indigo-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-indigo-100 dark:hover:border-gray-700">
              <div className="bg-indigo-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-indigo-500/20">
                <Shirt className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">Size & Color Management</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Product ko size aur color wise manage karo (S, M, L, XL, etc.) aur dead stock se bacho.</p>
            </div>

            <div className="p-8 rounded-[2rem] bg-green-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-green-100 dark:hover:border-gray-700">
              <div className="bg-green-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-green-500/20">
                <QrCode className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">Barcode Support</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Barcode scan karke fast billing aur stock update. Human errors ko 0% pe laiye.</p>
            </div>

            <div className="p-8 rounded-[2rem] bg-purple-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-purple-100 dark:hover:border-gray-700">
              <div className="bg-purple-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-purple-500/20">
                <Package className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">ART Wise Inventory</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Har design (ART) ka alag tracking. Dekhiye kaun sa design sabse zyada bik raha hai.</p>
            </div>

            <div className="p-8 rounded-[2rem] bg-orange-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-orange-100 dark:hover:border-gray-700">
              <div className="bg-orange-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-orange-500/20">
                <PieChart className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">Smart Reports</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Color, Size, ART wise detailed reports. Data-driven faisle lijiye aur munafa badhaiye.</p>
            </div>

            <div className="p-8 rounded-[2rem] bg-pink-50/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800 hover:shadow-xl transition-all border border-transparent hover:border-pink-100 dark:hover:border-gray-700">
              <div className="bg-emerald-600 text-white w-14 h-14 rounded-2xl flex items-center justify-center mb-6 shadow-lg shadow-emerald-500/20">
                <MessageSquare className="h-8 w-8" aria-hidden="true" />
              </div>
              <h3 className="text-xl font-bold mb-3">WhatsApp Integration</h3>
              <p className="text-gray-600 dark:text-gray-400 leading-relaxed">Bill aur marketing messages direct customer ko bhejo. Customer se rishta mazboot banaiye.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Detailed Features Grid */}
      <section className="py-24 bg-gray-50 dark:bg-gray-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
              <div className="space-y-12">
                 <div>
                    <h2 className="text-2xl font-bold text-blue-600 mb-6 flex items-center gap-3">
                       <Receipt className="h-6 w-6" aria-hidden="true" /> Billing System
                    </h2>
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       {['Fast billing with barcode', 'GST ready invoice', 'Customer mobile number', 'WhatsApp Bill Send'].map(item => (
                          <li key={item} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                             <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" aria-hidden="true" /> {item}
                          </li>
                       ))}
                    </ul>
                 </div>
                 <div>
                    <h2 className="text-2xl font-bold text-indigo-600 mb-6 flex items-center gap-3">
                       <Package className="h-6 w-6" aria-hidden="true" /> Inventory Management
                    </h2>
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       {['Size wise stock', 'Color wise stock', 'ART wise tracking', 'Low stock alert'].map(item => (
                          <li key={item} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                             <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" aria-hidden="true" /> {item}
                          </li>
                       ))}
                    </ul>
                 </div>
              </div>
              
              <div className="space-y-12">
                 <div>
                    <h2 className="text-2xl font-bold text-orange-600 mb-6 flex items-center gap-3">
                       <PieChart className="h-6 w-6" aria-hidden="true" /> Reports System
                    </h2>
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       {['Item wise sales', 'ART wise report', 'Size/Color report', 'Profit analysis'].map(item => (
                          <li key={item} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                             <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" aria-hidden="true" /> {item}
                          </li>
                       ))}
                    </ul>
                 </div>
                 <div>
                    <h2 className="text-2xl font-bold text-emerald-600 mb-6 flex items-center gap-3">
                       <MessageSquare className="h-6 w-6" aria-hidden="true" /> WhatsApp Features
                    </h2>
                    <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                       {['Broadcast festivals', 'Bulk promotions', 'Supplier invoices', 'Engagement tools'].map(item => (
                          <li key={item} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
                             <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" aria-hidden="true" /> {item}
                          </li>
                       ))}
                    </ul>
                 </div>
              </div>
           </div>
        </div>
      </section>

      {/* WhatsApp Marketing Highlight */}
      <section className="py-24 bg-white dark:bg-gray-900 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-gradient-to-br from-emerald-500 to-green-600 rounded-[3rem] p-12 lg:p-20 text-white relative flex flex-col lg:flex-row items-center gap-12">
             <div className="flex-1 space-y-8 relative z-10">
                <div className="bg-white/20 w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
                   <MessageSquare className="h-10 w-10" aria-hidden="true" />
                </div>
                <h2 className="text-4xl md:text-5xl font-extrabold leading-tight">Boost Sales with WhatsApp Marketing 🚀</h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                   {[
                      'Customer ko direct offer bhejo',
                      'Festival sale broadcast karo',
                      'Repeat customers increase karo',
                      'New arrivals ka promotion karo'
                   ].map(item => (
                      <div key={item} className="flex items-center gap-3 text-lg font-medium bg-white/10 p-4 rounded-2xl backdrop-blur-sm">
                         <Zap className="h-5 w-5 text-yellow-300" aria-hidden="true" />
                         {item}
                      </div>
                   ))}
                </div>
                <div className="flex flex-wrap gap-4">
                   <Button 
                      variant="secondary" 
                      className="bg-white text-emerald-600 hover:bg-gray-100 border-none px-8 py-4 rounded-full text-lg font-bold shadow-2xl shadow-emerald-500/20"
                      onClick={() => window.open('https://shreetemplate.online/', '_blank')}
                      aria-label="Open marketing portal"
                   >
                      Marketing Portal
                   </Button>
                   <Button 
                      variant="secondary" 
                      className="bg-white/20 text-white border border-white/30 hover:bg-white/30 px-8 py-4 rounded-full text-lg font-bold backdrop-blur-sm"
                      onClick={() => window.open('https://youtu.be/tokeI4Oxgso', '_blank')}
                      aria-label="Watch marketing video tutorial"
                   >
                      <Play className="mr-2 h-5 w-5 inline" aria-hidden="true" /> Watch Video
                   </Button>
                </div>
             </div>
             <div className="flex-shrink-0 relative">
                 <div className="w-64 h-64 md:w-96 md:h-96 bg-white/10 rounded-full flex items-center justify-center animate-pulse">
                    <Smartphone className="w-32 h-32 md:w-48 md:h-48 opacity-20" aria-hidden="true" />
                 </div>
                 <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white text-emerald-600 p-6 rounded-3xl shadow-2xl animate-bounce">
                    <CheckCircle2 className="w-12 h-12" aria-hidden="true" />
                 </div>
             </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-24 bg-gray-50 dark:bg-gray-800/50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold mb-4">Simple, Transparent Pricing</h2>
            <p className="text-gray-600 dark:text-gray-400 text-lg">Invest in your store's growth today.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {pricingPlans.map((plan, idx) => (
              <div 
                key={idx}
                className={`relative bg-white dark:bg-gray-800 rounded-3xl p-8 border ${
                  plan.highlight 
                    ? 'border-blue-500 shadow-2xl shadow-blue-500/10 scale-105 z-10' 
                    : 'border-gray-200 dark:border-gray-700'
                }`}
              >
                {plan.highlight && (
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-blue-600 text-white text-sm font-bold px-4 py-1 rounded-full uppercase tracking-wider">
                    Most Popular
                  </div>
                )}
                <div className="mb-8">
                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">{plan.name}</h3>
                  <div className="flex items-baseline gap-1 mb-4">
                    <span className="text-4xl font-extrabold text-gray-900 dark:text-white">{plan.price}</span>
                    <span className="text-gray-500 font-medium">/ {plan.duration}</span>
                  </div>
                  <p className="text-gray-600 dark:text-gray-400 text-sm leading-relaxed min-h-[40px]">
                    {plan.description}
                  </p>
                </div>
                <ul className="space-y-4 mb-8">
                  {plan.features.map((feature, fIdx) => (
                    <li key={fIdx} className="flex items-start gap-3 text-gray-700 dark:text-gray-300">
                      <div className="mt-1 bg-green-100 dark:bg-green-900/40 rounded-full p-0.5">
                        <Check className="h-4 w-4 text-green-600" />
                      </div>
                      <span className="text-sm">{feature}</span>
                    </li>
                  ))}
                </ul>
                <Button 
                  variant={plan.highlight ? "primary" : "secondary"}
                  className={`w-full py-4 rounded-2xl font-bold ${plan.highlight ? 'shadow-lg shadow-blue-500/20' : ''}`}
                  onClick={plan.id === "free_trial" ? () => navigate('/signup') : plan.onClick}
                >
                  {plan.buttonText}
                </Button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Direct Payment Section */}
      <section className="py-24 bg-blue-600 overflow-hidden relative">
        <div className="absolute top-0 right-0 w-96 h-96 bg-white/10 blur-[100px] rounded-full -translate-y-1/2 translate-x-1/2"></div>
        <div className="absolute bottom-0 left-0 w-96 h-96 bg-indigo-900/40 blur-[100px] rounded-full translate-y-1/2 -translate-x-1/2"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-[3rem] p-8 md:p-16 flex flex-col lg:flex-row items-center gap-12 text-white">
            <div className="flex-1 space-y-8 text-center lg:text-left">
              <div className="inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full text-sm font-bold uppercase tracking-wider">
                <QrCode className="h-4 w-4" /> Direct Activation
              </div>
              <h2 className="text-4xl md:text-5xl font-extrabold leading-tight">Pay Directly & Get Started Instantly</h2>
              <p className="text-xl text-blue-100 leading-relaxed max-w-2xl">
                Scan the PhonePe QR to pay for your preferred plan. Once payment is done, share the screenshot on WhatsApp for instant account activation.
              </p>
              
              <div className="flex flex-col sm:flex-row items-center gap-6">
                 <div className="flex items-center gap-3 bg-white/20 p-4 rounded-2xl w-full sm:w-auto">
                    <CheckCircle2 className="h-6 w-6 text-green-300" />
                    <span className="font-bold">Safe & Verified UPI</span>
                 </div>
                 <div className="flex items-center gap-3 bg-white/20 p-4 rounded-2xl w-full sm:w-auto">
                    <CheckCircle2 className="h-6 w-6 text-green-300" />
                    <span className="font-bold">Instant Support</span>
                 </div>
              </div>
              
              <Button 
                variant="secondary" 
                className="bg-white text-blue-600 hover:bg-gray-100 border-none px-12 py-5 rounded-full text-xl font-bold shadow-2xl"
                onClick={() => window.open('https://wa.me/917386902520', '_blank')}
              >
                Chat on WhatsApp
              </Button>
            </div>

            <div className="flex-shrink-0 bg-white p-6 rounded-[2.5rem] shadow-2xl scale-110 lg:scale-125 rotate-3 hover:rotate-0 transition-transform duration-500">
               <div className="text-center mb-4">
                  <p className="text-gray-900 font-bold text-lg">PhonePe QR</p>
                  <p className="text-blue-600 text-xs font-semibold">Accepted Here</p>
               </div>
               <img 
                 src="/phonepe_qr.jpg" 
                 alt="PhonePe QR" 
                 className="w-48 h-auto rounded-xl mx-auto"
               />
               <div className="mt-4 pt-4 border-t border-gray-100 text-center">
                  <p className="text-xs text-gray-400 font-medium">UPI: najiralilalani-1@okhdfcbank</p>
                  <p className="text-sm text-gray-900 font-bold mt-1">NAJIRALI J EVA LALANI</p>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* Support / Footer Section */}
      <footer className="py-24 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
            <div className="lg:col-span-5 space-y-8">
              <div className="flex items-center gap-2">
                <img src="/logo.png" alt="TallyBook Logo" className="w-12 h-12" />
                <span className="text-2xl font-bold text-blue-600 uppercase">TallyBook POS</span>
              </div>
              <h2 className="text-3xl font-bold leading-tight">Tailor-made for Footwear & Garment Shops.</h2>
              
              <div className="flex flex-col gap-6">
                <a href="mailto:mksales7860@gmail.com" className="flex items-center gap-4 group" aria-label="Contact sales via email">
                    <div className="w-12 h-12 bg-blue-50 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-blue-600 transition-all">
                       <Mail className="h-6 w-6 text-blue-600 group-hover:text-white" aria-hidden="true" />
                    </div>
                    <div>
                       <p className="text-xs font-bold text-gray-500 uppercase tracking-widest">Sales Email</p>
                       <p className="text-lg font-medium">mksales7860@gmail.com</p>
                    </div>
                </a>
                <a href="https://wa.me/917386902520" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 group" aria-label="Contact support via WhatsApp">
                    <div className="w-12 h-12 bg-emerald-50 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-emerald-600 transition-all">
                       <MessageSquare className="h-6 w-6 text-emerald-600 group-hover:text-white" aria-hidden="true" />
                    </div>
                    <div>
                       <p className="text-xs font-bold text-gray-500 uppercase tracking-widest">WhatsApp Support</p>
                       <p className="text-lg font-medium">+91 7386902520</p>
                    </div>
                </a>
                <a href="https://youtu.be/MMiOQsZFQ38" target="_blank" rel="noopener noreferrer" className="flex items-center gap-4 group" aria-label="Watch demo video guide">
                    <div className="w-12 h-12 bg-red-50 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-red-600 transition-all">
                       <Play className="h-6 w-6 text-red-600 group-hover:text-white" aria-hidden="true" />
                    </div>
                    <div>
                       <p className="text-xs font-bold text-gray-500 uppercase tracking-widest">Demo Video</p>
                       <p className="text-lg font-medium underline underline-offset-4 decoration-red-200">Watch Video Guide</p>
                    </div>
                </a>
              </div>
            </div>

            <div className="lg:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-12">
               <div className="space-y-6">
                  <h3 className="font-bold text-lg">Product</h3>
                  <ul className="space-y-4 text-gray-600 dark:text-gray-400">
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => navigate('/signup')} aria-label="View features">Features</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => smoothScrollTo('pricing')} aria-label="View pricing plans">Pricing</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => window.open('https://shreetemplate.online/', '_blank')} aria-label="Open marketing portal">Marketing Portal</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => window.open('https://youtu.be/tokeI4Oxgso', '_blank')} aria-label="Watch marketing video">Marketing Video</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => window.open('https://youtu.be/MMiOQsZFQ38')} aria-label="Watch demo video">Demo</button></li>
                  </ul>
               </div>
               <div className="space-y-6">
                  <h3 className="font-bold text-lg">Quick Links</h3>
                  <ul className="space-y-4 text-gray-600 dark:text-gray-400">
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => navigate('/login')} aria-label="Go to login page">Login</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => navigate('/signup')} aria-label="Create new account">Signup</button></li>
                     <li><button className="hover:text-blue-600 focus:text-blue-600 focus:outline-none" onClick={() => navigate('/signup')} aria-label="Try free version">Try Free</button></li>
                  </ul>
               </div>
               <div className="col-span-2 sm:col-span-1 space-y-6">
                  <h3 className="font-bold text-lg">Join Now</h3>
                  <p className="text-gray-500 text-sm">Grow your garment business with modern tech.</p>
                  <Button variant="primary" className="w-full rounded-xl" onClick={() => navigate('/signup')} aria-label="Get started with TallyBook POS">Get Started</Button>
               </div>
            </div>
          </div>
          <div className="mt-20 pt-8 border-t border-gray-100 dark:border-gray-800 text-center text-gray-500 text-sm">
            &copy; {new Date().getFullYear()} TallyBook POS. Specially designed for Garment & Footwear Retailers.
          </div>
        </div>
      </footer>
    </div>
  );
};

export default LandingPage;