import { ArrowRight, CheckCircle, Users, TrendingUp, Building2, Shield, RotateCcw, Target, Zap, Award } from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import FAQSection from '@/components/FAQSection';
import { useLanguage } from '@/contexts/LanguageContext';
import { useEffect } from 'react';
import useSEO from '@/hooks/useSEO';
import { buildCanonicalUrl } from '@/lib/seo';

const Services = () => {
  const { t } = useLanguage();
  const location = useLocation();
  const canonical = buildCanonicalUrl(location.pathname);
  useSEO({ canonical });

  useEffect(() => {
    document.title = 'Hotel Advisory Services | Signa Hotel Advisors';
    const metaDescription = document.querySelector('meta[name="description"]');
    if (metaDescription) {
      metaDescription.setAttribute('content', 'Comprehensive hotel advisory services including operator selection, feasibility studies and asset management across Southeast Asia.');
    }
    
    // Add Service schema markup
    const serviceSchema = {
      "@context": "https://schema.org",
      "@type": "Service",
      "name": "Hotel Advisory Services",
      "description": "Comprehensive hotel advisory and asset management services",
      "provider": {
        "@type": "Organization",
        "name": "Signa Hotel Advisors",
        "url": "https://signahoteladvisors.com"
      },
      "serviceType": "Hotel Advisory and Asset Management",
      "areaServed": [
        {
          "@type": "Country",
          "name": "Thailand"
        },
        {
          "@type": "Country", 
          "name": "Laos"
        },
        {
          "@type": "Country",
          "name": "Myanmar"
        },
        {
          "@type": "Country",
          "name": "Cambodia"
        },
        {
          "@type": "Country",
          "name": "Vietnam"
        },
        {
          "@type": "Country",
          "name": "Philippines"  
        }
      ],
      "hasOfferCatalog": {
        "@type": "OfferCatalog",
        "name": "Hotel Advisory Services",
        "itemListElement": [
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Hotel Operator Selection",
              "description": "Expert hotel operator selection and evaluation services"
            }
          },
          {
            "@type": "Offer", 
            "itemOffered": {
              "@type": "Service",
              "name": "Hotel Feasibility Studies",
              "description": "Comprehensive market analysis and financial projections"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service", 
              "name": "Hotel Pre-Opening Supervision",
              "description": "Professional pre-opening supervision and quality control"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Hotel Asset Management", 
              "description": "Post-opening performance monitoring and optimization"
            }
          },
          {
            "@type": "Offer",
            "itemOffered": {
              "@type": "Service",
              "name": "Hotel Repositioning",
              "description": "Strategic repositioning for underperforming properties"
            }
          }
        ]
      }
    };
    
    const existingSchema = document.querySelector('script[type="application/ld+json"][data-page="services"]');
    if (existingSchema) {
      existingSchema.remove();
    }
    
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.setAttribute('data-page', 'services');
    script.textContent = JSON.stringify(serviceSchema);
    document.head.appendChild(script);
  }, []);

  const services = [
    {
      icon: Users,
      title: t('services.operator.title'),
      description: t('services.operator.desc'),
      features: [
        t('services.operator.feature1'),
        t('services.operator.feature2'),
        t('services.operator.feature3'),
        t('services.operator.feature4')
      ]
    },
    {
      icon: TrendingUp,
      title: t('services.feasibility.title'),
      description: t('services.feasibility.desc'),
      features: [
        t('services.feasibility.feature1'),
        t('services.feasibility.feature2'),
        t('services.feasibility.feature3'),
        t('services.feasibility.feature4')
      ]
    },
    {
      icon: Building2,
      title: t('services.preopening.title'),
      description: t('services.preopening.desc'),
      features: [
        t('services.preopening.feature1'),
        t('services.preopening.feature2'),
        t('services.preopening.feature3'),
        t('services.preopening.feature4')
      ]
    },
    {
      icon: Shield,
      title: t('services.management.title'),
      description: t('services.management.desc'),
      features: [
        t('services.management.feature1'),
        t('services.management.feature2'),
        t('services.management.feature3'),
        t('services.management.feature4')
      ]
    },
    {
      icon: RotateCcw,
      title: t('services.repositioning.title'),
      description: t('services.repositioning.desc'),
      features: [
        t('services.repositioning.feature1'),
        t('services.repositioning.feature2'),
        t('services.repositioning.feature3'),
        t('services.repositioning.feature4')
      ]
    }
  ];

  const approachSteps = [
    {
      icon: Target,
      step: "01",
      title: t('services.approach.step1.title'),
      description: t('services.approach.step1.desc')
    },
    {
      icon: Zap,
      step: "02", 
      title: t('services.approach.step2.title'),
      description: t('services.approach.step2.desc')
    },
    {
      icon: Award,
      step: "03",
      title: t('services.approach.step3.title'),
      description: t('services.approach.step3.desc')
    }
  ];

  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      
      {/* Hero Section */}
      <section className="py-16 bg-primary text-primary-foreground">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">{t('services.hero.title')}</h1>
            <p className="text-xl max-w-3xl mx-auto">
              {t('services.hero.subtitle')}
            </p>
          </div>
        </div>
      </section>

      {/* Services Overview */}
      <section className="py-16 bg-muted">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              {t('services.overview.title')}
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              {t('services.overview.subtitle')}
            </p>
          </div>
          
          <div className="flex flex-wrap justify-center gap-8">
            {services.map((service, index) => (
              <Card key={index} className="hover:shadow-lg transition-shadow flex flex-col w-full max-w-sm lg:w-80 h-[520px]">
                <CardHeader className="text-center pb-4">
                  <service.icon className="h-12 w-12 text-primary mx-auto mb-4" />
                  <CardTitle className="text-xl mb-2">{service.title}</CardTitle>
                  <CardDescription className="text-base">
                    {service.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="flex-1 overflow-hidden">
                  <ul className="space-y-2">
                    {service.features.map((feature, featureIndex) => (
                      <li key={featureIndex} className="flex items-start">
                        <CheckCircle className="h-5 w-5 text-primary mr-2 mt-0.5 flex-shrink-0" />
                        <span className="text-sm text-muted-foreground">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Approach Section */}
      <section className="py-16 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
              {t('services.approach.title')}
            </h2>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              {t('services.approach.subtitle')}
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {approachSteps.map((step, index) => (
              <Card key={index} className="text-center hover:shadow-lg transition-shadow">
                <CardHeader className="pb-4">
                  <div className="flex justify-center items-center mb-4">
                    <div className="relative">
                      <step.icon className="h-12 w-12 text-primary" />
                      <div className="absolute -bottom-2 -right-2 bg-primary text-primary-foreground text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
                        {step.step}
                      </div>
                    </div>
                  </div>
                  <CardTitle className="text-xl mb-2">{step.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-base">
                    {step.description}
                  </CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>


      {/* FAQ Section */}
      <FAQSection 
        faqs={[
          {
            question: t('faq.q1'),
            answer: t('faq.a1')
          },
          {
            question: t('faq.q2'),
            answer: t('faq.a2')
          },
          {
            question: t('faq.q3'),
            answer: t('faq.a3')
          },
          {
            question: t('faq.q4'),
            answer: t('faq.a4')
          },
          {
            question: t('faq.q5'),
            answer: t('faq.a5')
          }
        ]}
      />

      {/* Call to Action */}
      <section className="py-16 bg-primary text-primary-foreground">
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            {t('cta.ready.title')}
          </h2>
          <p className="text-xl mb-8">
            {t('cta.ready.subtitle')}
          </p>
          <Button asChild size="lg" className="bg-primary-foreground text-primary hover:bg-primary-foreground/90">
            <Link to="/contact">
              {t('cta.ready.button')} <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
          </Button>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Services;