import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Store,
  Zap,
  Shield,
  Clock,
  RefreshCw,
  Phone,
  BarChart3,
  CheckCircle,
  ShoppingCart,
  Users,
  Package,
  ArrowRight,
  Globe,
  Smartphone
} from "lucide-react";
import { useTranslation } from "react-i18next";
import SEO from "@/components/SEO";

const ShopRenterIntegration = () => {
  const { t } = useTranslation();
  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/integrations/shoprenter';

  const features = [
    {
      icon: RefreshCw,
      title: t('integrations.shoprenter.features.dataSync.title'),
      description: t('integrations.shoprenter.features.dataSync.description')
    },
    {
      icon: Phone,
      title: t('integrations.shoprenter.features.intelligentCalls.title'),
      description: t('integrations.shoprenter.features.intelligentCalls.description')
    },
    {
      icon: Globe,
      title: t('integrations.shoprenter.features.multilingual.title'),
      description: t('integrations.shoprenter.features.multilingual.description')
    },
    {
      icon: Clock,
      title: t('integrations.shoprenter.features.availability.title'),
      description: t('integrations.shoprenter.features.availability.description')
    },
    {
      icon: ShoppingCart,
      title: t('integrations.shoprenter.features.orderManagement.title'),
      description: t('integrations.shoprenter.features.orderManagement.description')
    },
    {
      icon: Shield,
      title: t('integrations.shoprenter.features.security.title'),
      description: t('integrations.shoprenter.features.security.description')
    }
  ];

  const benefits = [
    {
      icon: Zap,
      title: t('integrations.shoprenter.benefits.quickSetup.title'),
      description: t('integrations.shoprenter.benefits.quickSetup.description')
    },
    {
      icon: Users,
      title: t('integrations.shoprenter.benefits.customerExperience.title'),
      description: t('integrations.shoprenter.benefits.customerExperience.description')
    },
    {
      icon: BarChart3,
      title: t('integrations.shoprenter.benefits.analytics.title'),
      description: t('integrations.shoprenter.benefits.analytics.description')
    },
    {
      icon: Package,
      title: t('integrations.shoprenter.benefits.productKnowledge.title'),
      description: t('integrations.shoprenter.benefits.productKnowledge.description')
    }
  ];

  const integrationSteps = [
    {
      number: "1",
      title: t('integrations.shoprenter.howItWorks.step1.title'),
      description: t('integrations.shoprenter.howItWorks.step1.description')
    },
    {
      number: "2",
      title: t('integrations.shoprenter.howItWorks.step2.title'),
      description: t('integrations.shoprenter.howItWorks.step2.description')
    },
    {
      number: "3",
      title: t('integrations.shoprenter.howItWorks.step3.title'),
      description: t('integrations.shoprenter.howItWorks.step3.description')
    },
    {
      number: "4",
      title: t('integrations.shoprenter.howItWorks.step4.title'),
      description: t('integrations.shoprenter.howItWorks.step4.description')
    }
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      <SEO
        title={t('integrations.shoprenter.seo.title')}
        description={t('integrations.shoprenter.seo.description')}
        keywords={t('integrations.shoprenter.seo.keywords')}
        ogTitle={t('integrations.shoprenter.seo.ogTitle')}
        ogDescription={t('integrations.shoprenter.seo.ogDescription')}
        ogUrl={currentUrl}
        ogType="website"
        canonicalUrl={currentUrl}
        schemaData={{
          type: 'WebPage',
          name: t('integrations.shoprenter.seo.title'),
          description: t('integrations.shoprenter.seo.description'),
          url: currentUrl
        }}
      />
      {/* Header */}
      <header className="border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-3">
              <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai Logo" className="w-8 h-8" />
              <span className="text-xl font-bold text-white">ShopCall.ai</span>
            </div>
            <div className="flex items-center gap-4">
              <Button variant="ghost" className="text-slate-300 hover:text-white hover:bg-slate-800" asChild>
                <a href="/">{t('integrations.shoprenter.navigation.home')}</a>
              </Button>
              <Button variant="outline" className="border-slate-600 text-slate-300 hover:bg-slate-800" asChild>
                <a href="/login">{t('integrations.shoprenter.navigation.login')}</a>
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-b from-slate-800/50 to-slate-900">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <Badge className="mb-6 bg-[#52b3d0]/20 text-[#52b3d0] border-[#52b3d0]/30 text-lg px-4 py-2">
            <Store className="mr-2 h-5 w-5" />
            {t('integrations.shoprenter.hero.badge')}
          </Badge>

          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-white to-slate-300 bg-clip-text text-transparent">
            {t('integrations.shoprenter.hero.title')}
            <span className="text-[#52b3d0] block mt-2">{t('integrations.shoprenter.hero.subtitle')}</span>
          </h1>

          <p className="text-xl md:text-2xl text-slate-300 mb-8 max-w-3xl mx-auto leading-relaxed">
            {t('integrations.shoprenter.hero.description')}
          </p>

          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
            <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-8 py-6 text-lg" asChild>
              <a href="/signup">
                {t('integrations.shoprenter.hero.cta.trial')}
                <ArrowRight className="ml-2 h-5 w-5" />
              </a>
            </Button>
            <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-8 py-6 text-lg" asChild>
              <a href="/login">
                {t('integrations.shoprenter.hero.cta.connect')}
                <Store className="ml-2 h-5 w-5" />
              </a>
            </Button>
          </div>

          {/* Trust Indicators */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-12 max-w-3xl mx-auto">
            <div className="text-center">
              <div className="text-3xl font-bold text-[#52b3d0] mb-1">{t('integrations.shoprenter.hero.stats.setupTime.value')}</div>
              <div className="text-sm text-slate-400">{t('integrations.shoprenter.hero.stats.setupTime.label')}</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[#52b3d0] mb-1">{t('integrations.shoprenter.hero.stats.availability.value')}</div>
              <div className="text-sm text-slate-400">{t('integrations.shoprenter.hero.stats.availability.label')}</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[#52b3d0] mb-1">{t('integrations.shoprenter.hero.stats.languages.value')}</div>
              <div className="text-sm text-slate-400">{t('integrations.shoprenter.hero.stats.languages.label')}</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[#52b3d0] mb-1">{t('integrations.shoprenter.hero.stats.security.value')}</div>
              <div className="text-sm text-slate-400">{t('integrations.shoprenter.hero.stats.security.label')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-slate-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">{t('integrations.shoprenter.features.sectionTitle')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('integrations.shoprenter.features.sectionSubtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <Card key={index} className="bg-slate-700/50 border-slate-600 hover:bg-slate-700/70 transition-all hover:scale-105">
                <CardHeader>
                  <div className="w-14 h-14 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4">
                    <feature.icon className="h-7 w-7 text-[#52b3d0]" />
                  </div>
                  <CardTitle className="text-white text-xl">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription className="text-slate-300 text-base">
                    {feature.description}
                  </CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      <section className="py-20">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">{t('integrations.shoprenter.howItWorks.sectionTitle')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('integrations.shoprenter.howItWorks.sectionSubtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-4 gap-8">
            {integrationSteps.map((step, index) => (
              <div key={index} className="relative">
                <div className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 bg-[#52b3d0] rounded-full flex items-center justify-center mb-4 text-2xl font-bold">
                    {step.number}
                  </div>
                  <h3 className="text-xl font-semibold mb-3 text-white">{step.title}</h3>
                  <p className="text-slate-300">{step.description}</p>
                </div>
                {index < integrationSteps.length - 1 && (
                  <div className="hidden md:block absolute top-8 left-[60%] w-[80%] h-0.5 bg-slate-700">
                    <ArrowRight className="absolute right-0 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-700" />
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-20 bg-slate-800/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">{t('integrations.shoprenter.benefits.sectionTitle')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('integrations.shoprenter.benefits.sectionSubtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {benefits.map((benefit, index) => (
              <Card key={index} className="bg-slate-700/50 border-slate-600 text-center hover:bg-slate-700/70 transition-all">
                <CardHeader>
                  <div className="w-12 h-12 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-4 mx-auto">
                    <benefit.icon className="h-6 w-6 text-[#52b3d0]" />
                  </div>
                  <CardTitle className="text-white text-lg">{benefit.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-slate-300">{benefit.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* What Gets Synced Section */}
      <section className="py-20">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold mb-4">{t('integrations.shoprenter.dataSync.sectionTitle')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('integrations.shoprenter.dataSync.sectionSubtitle')}
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <div className="w-12 h-12 bg-green-500/20 rounded-lg flex items-center justify-center mb-4">
                  <Package className="h-6 w-6 text-green-400" />
                </div>
                <CardTitle className="text-white">{t('integrations.shoprenter.dataSync.products.title')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    {t('integrations.shoprenter.dataSync.products.item1')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    {t('integrations.shoprenter.dataSync.products.item2')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    {t('integrations.shoprenter.dataSync.products.item3')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-green-400" />
                    {t('integrations.shoprenter.dataSync.products.item4')}
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
                  <ShoppingCart className="h-6 w-6 text-blue-400" />
                </div>
                <CardTitle className="text-white">{t('integrations.shoprenter.dataSync.orders.title')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-blue-400" />
                    {t('integrations.shoprenter.dataSync.orders.item1')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-blue-400" />
                    {t('integrations.shoprenter.dataSync.orders.item2')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-blue-400" />
                    {t('integrations.shoprenter.dataSync.orders.item3')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-blue-400" />
                    {t('integrations.shoprenter.dataSync.orders.item4')}
                  </li>
                </ul>
              </CardContent>
            </Card>

            <Card className="bg-slate-800 border-slate-700">
              <CardHeader>
                <div className="w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center mb-4">
                  <Users className="h-6 w-6 text-purple-400" />
                </div>
                <CardTitle className="text-white">{t('integrations.shoprenter.dataSync.customers.title')}</CardTitle>
              </CardHeader>
              <CardContent>
                <ul className="space-y-2 text-slate-300">
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-purple-400" />
                    {t('integrations.shoprenter.dataSync.customers.item1')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-purple-400" />
                    {t('integrations.shoprenter.dataSync.customers.item2')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-purple-400" />
                    {t('integrations.shoprenter.dataSync.customers.item3')}
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle className="h-4 w-4 text-purple-400" />
                    {t('integrations.shoprenter.dataSync.customers.item4')}
                  </li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-gradient-to-b from-slate-900 to-slate-800">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-4xl font-bold mb-6">{t('integrations.shoprenter.cta.title')}</h2>
          <p className="text-xl text-slate-300 mb-8">
            {t('integrations.shoprenter.cta.subtitle')}
          </p>

          <div className="bg-slate-700/50 rounded-2xl p-8 border border-slate-600 mb-8">
            <div className="grid md:grid-cols-3 gap-6 mb-8">
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
                <span className="text-slate-300">{t('integrations.shoprenter.cta.feature1')}</span>
              </div>
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
                <span className="text-slate-300">{t('integrations.shoprenter.cta.feature2')}</span>
              </div>
              <div className="flex items-center justify-center gap-3">
                <CheckCircle className="h-5 w-5 text-green-400 flex-shrink-0" />
                <span className="text-slate-300">{t('integrations.shoprenter.cta.feature3')}</span>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-12 py-6 text-lg" asChild>
                <a href="/signup">
                  {t('integrations.shoprenter.cta.startTrial')}
                  <Zap className="ml-2 h-5 w-5" />
                </a>
              </Button>
              <Button variant="outline" size="lg" className="border-slate-400 text-black hover:bg-slate-800 hover:text-white bg-white px-12 py-6 text-lg" asChild>
                <a href="/login">
                  {t('integrations.shoprenter.cta.connectStore')}
                  <Store className="ml-2 h-5 w-5" />
                </a>
              </Button>
            </div>
          </div>

          <p className="text-slate-400 text-sm">
            {t('integrations.shoprenter.cta.signIn')} <a href="/login" className="text-[#52b3d0] hover:underline">{t('integrations.shoprenter.cta.signInLink')}</a>
          </p>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 border-t border-slate-800 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="flex items-center justify-center gap-3 mb-4">
            <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai Logo" className="w-8 h-8" />
            <span className="text-xl font-bold text-white">ShopCall.ai</span>
          </div>
          <div className="flex justify-center items-center gap-4 text-sm text-slate-500 flex-wrap">
            <span>{t('integrations.shoprenter.footer.copyright')}</span>
            <span className="hidden sm:inline">•</span>
            <a href="/about" className="hover:text-slate-300">{t('integrations.shoprenter.footer.about')}</a>
            <span>•</span>
            <a href="/privacy" className="hover:text-slate-300">{t('integrations.shoprenter.footer.privacy')}</a>
            <span>•</span>
            <a href="/terms" className="hover:text-slate-300">{t('integrations.shoprenter.footer.terms')}</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default ShopRenterIntegration;
