import React from 'react';
import { Helmet } from 'react-helmet-async';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import {
  Building2,
  Mail,
  Phone,
  MapPin,
  Shield,
  Clock,
  CheckCircle,
  ArrowRight,
  Star,
  Users,
  Globe
} from 'lucide-react';
import { Button } from '@/components/ui/button';

const LandingPage = () => {
  const features = [
    {
      icon: Building2,
      title: 'Premium Dubai Address',
      description: 'Get a prestigious business address in Dubai\'s prime locations for your company registration and correspondence.'
    },
    {
      icon: Mail,
      title: 'Mail Forwarding',
      description: 'Receive, scan, and forward your mail digitally. Never miss important documents with our secure mail handling service.'
    },
    {
      icon: Phone,
      title: 'Local Phone Number',
      description: 'Get a Dubai phone number with voicemail, call forwarding, and professional call handling services.'
    },
    {
      icon: Shield,
      title: 'Legal Compliance',
      description: 'Fully compliant with UAE regulations. Perfect for business setup, bank account opening, and visa applications.'
    },
    {
      icon: Clock,
      title: 'Instant Setup',
      description: 'Get your virtual office activated within 24 hours. Complete KYC verification and start using services immediately.'
    },
    {
      icon: Globe,
      title: 'Global Access',
      description: 'Manage your Dubai office from anywhere in the world with our comprehensive online dashboard.'
    }
  ];

  const testimonials = [
    {
      name: 'Sarah Johnson',
      company: 'Tech Innovations LLC',
      content: 'Virtual Office Dubai made our UAE expansion seamless. The premium address and professional services exceeded our expectations.',
      rating: 5
    },
    {
      name: 'Ahmed Al-Rashid',
      company: 'Global Trading Co.',
      content: 'Excellent service and support. The mail forwarding and phone services are exactly what we needed for our Dubai operations.',
      rating: 5
    },
    {
      name: 'Maria Rodriguez',
      company: 'Consulting Partners',
      content: 'Professional, reliable, and cost-effective. Highly recommend for any business looking to establish presence in Dubai.',
      rating: 5
    }
  ];

  const stats = [
    { number: '500+', label: 'Happy Clients' },
    { number: '99.9%', label: 'Uptime' },
    { number: '24/7', label: 'Support' },
    { number: '5★', label: 'Rating' }
  ];

  const siteUrl = "https://virtualofficesdubai.ae";
  const title = "Virtual Office Dubai";
  const description = "Virtual Office Dubai provides compliant business addresses with AI phone assistants and local office numbers, based in Dubai, UAE. Establish your presence today!";
  const ogImageUrl = 'https://horizons-cdn.hostinger.com/b1db84ec-6e36-4e1a-8c05-742d1acfcdca/b1716431fa6c4c2d76549173e74e5352.jpg';


  return (
    <>
      <Helmet>
        <title>{title}</title>
        <meta name="description" content={description} />
        <link rel="canonical" href={siteUrl} />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:url" content={siteUrl} />
        <meta property="og:image" content={ogImageUrl} />
        <meta property="og:image:secure_url" content={ogImageUrl} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={title} />
        <meta name="twitter:description" content={description} />
        <meta name="twitter:image" content={ogImageUrl} />
        <script type="application/ld+json">
          {`
            {
              "@context": "https://schema.org",
              "@type": "LocalBusiness",
              "name": "Virtual Office Dubai",
              "image": "${ogImageUrl}",
              "@id": "${siteUrl}",
              "url": "${siteUrl}",
              "telephone": "+971 4 123 4567",
              "priceRange": "$$",
              "address": {
                "@type": "PostalAddress",
                "streetAddress": "Business Bay Tower, Office 1205",
                "addressLocality": "Dubai",
                "addressCountry": "AE"
              },
              "description": "${description}",
              "openingHoursSpecification": {
                "@type": "OpeningHoursSpecification",
                "dayOfWeek": [
                  "Monday",
                  "Tuesday",
                  "Wednesday",
                  "Thursday",
                  "Friday",
                  "Saturday"
                ],
                "opens": "08:00",
                "closes": "18:00"
              },
              "sameAs": []
            }
          `}
        </script>
      </Helmet>

      <div className="min-h-screen">
        {/* Hero Section */}
        <section className="hero-gradient py-8 lg:py-20">
          <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-12 items-center">
              <motion.div
                initial={{ opacity: 0, x: -50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8 }}
                className="space-y-8"
              >
                <div className="space-y-4">
                  <h1 className="text-4xl lg:text-6xl font-bold leading-tight text-gray-900">
                    Virtual Office Dubai
                    <span className="gradient-text block">
                      Virtual Office Address
                    </span>
                  </h1>
                  <p className="text-xl text-gray-700 leading-relaxed">
                    Establish your business presence in Dubai with Virtual Office Dubai. Get a virtual office address, local phone number, phone answering & mail forwarding.
                  </p>
                </div>

                <div className="flex flex-col sm:flex-row gap-4">
                  <Link to="/signup">
                    <Button size="lg" className="btn-primary text-lg px-8 py-4">
                      Get Started Today
                      <ArrowRight className="ml-2 w-5 h-5" />
                    </Button>
                  </Link>
                  <Link to="/pricing">
                    <Button size="lg" variant="outline" className="btn-secondary text-lg px-8 py-4">
                      View Pricing
                    </Button>
                  </Link>
                </div>

                <div className="flex items-center space-x-8 pt-4">
                  {stats.map((stat, index) => (
                    <div key={index} className="text-center">
                      <div className="text-2xl font-bold gradient-text">{stat.number}</div>
                      <div className="text-sm text-gray-600">{stat.label}</div>
                    </div>
                  ))}
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, x: 50 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ duration: 0.8, delay: 0.2 }}
                className="relative"
              >
                <div className="glass-card p-8 rounded-2xl pulse-glow">
                  <img  
                    alt="Aerial view of Dubai's modern skyline featuring prominent skyscrapers at dusk, representing a prime business location."
                    className="w-full h-64 object-cover rounded-lg mb-6"
                    src="https://images.unsplash.com/photo-1637739256584-43c96dac387f?w=750&q=60&auto=format&fit=crop"
                    srcSet="https://images.unsplash.com/photo-1637739256584-43c96dac387f?w=350&q=60&auto=format&fit=crop 350w, https://images.unsplash.com/photo-1637739256584-43c96dac387f?w=750&q=60&auto=format&fit=crop 750w"
                    sizes="(max-width: 640px) 350px, 750px"
                    loading="lazy"
                  />
                  <div className="space-y-4">
                    <div className="flex items-center space-x-3">
                      <MapPin className="w-5 h-5 text-red-600" />
                      <span className="text-gray-900">Dubai, UAE</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <CheckCircle className="w-5 h-5 text-green-600" />
                      <span className="text-gray-900">Instant Activation</span>
                    </div>
                    <div className="flex items-center space-x-3">
                      <Shield className="w-5 h-5 text-red-600" />
                      <span className="text-gray-900">Fully Compliant</span>
                    </div>
                  </div>
                </div>
              </motion.div>
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section className="py-20">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="text-3xl lg:text-5xl font-bold mb-6 text-gray-900">
                Everything You Need for
                <span className="gradient-text"> Business Success</span>
              </h2>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                Our comprehensive virtual office solutions provide all the tools and services 
                you need to establish and grow your business in Dubai.
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {features.map((feature, index) => {
                const Icon = feature.icon;
                return (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 50 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: index * 0.1 }}
                    className="glass-card p-8 rounded-xl hover:scale-105 transition-transform duration-300"
                  >
                    <div className="feature-icon w-12 h-12 mb-6">
                      <Icon className="w-6 h-6 text-white" />
                    </div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-4">
                      {feature.title}
                    </h3>
                    <p className="text-gray-700 leading-relaxed">
                      {feature.description}
                    </p>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Testimonials Section */}
        <section className="py-20 glass-card">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-center mb-16"
            >
              <h2 className="text-3xl lg:text-5xl font-bold mb-6 text-gray-900">
                Trusted by
                <span className="gradient-text"> Businesses Worldwide</span>
              </h2>
              <p className="text-xl text-gray-600">
                See what our clients say about our services
              </p>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {testimonials.map((testimonial, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 50 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.8, delay: index * 0.1 }}
                  className="glass-card p-8 rounded-xl"
                >
                  <div className="flex items-center mb-4">
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} className="w-5 h-5 text-yellow-500 fill-current" />
                    ))}
                  </div>
                  <p className="text-gray-700 mb-6 italic">
                    "{testimonial.content}"
                  </p>
                  <div>
                    <p className="text-gray-900 font-semibold">{testimonial.name}</p>
                    <p className="text-gray-600 text-sm">{testimonial.company}</p>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <motion.div
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="glass-card p-12 rounded-2xl"
            >
              <h2 className="text-3xl lg:text-5xl font-bold mb-6 text-gray-900">
                Ready to Establish Your
                <span className="gradient-text"> Dubai Presence?</span>
              </h2>
              <p className="text-xl text-gray-600 mb-8">
                Join hundreds of successful businesses. Get started with your virtual office today.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link to="/signup">
                  <Button size="lg" className="btn-primary text-lg px-8 py-4">
                    Start Your Free Trial
                    <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                </Link>
                <Link to="/contact">
                  <Button size="lg" variant="outline" className="btn-secondary text-lg px-8 py-4">
                    Talk to Expert
                  </Button>
                </Link>
              </div>
            </motion.div>
          </div>
        </section>
      </div>
    </>
  );
};

export default LandingPage;