import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Bot, Globe, Shield, FileSearch, Lock, Settings } from "lucide-react";
import { useTranslation } from "react-i18next";
import SEO from "@/components/SEO";

const Crawler = () => {
  const { t } = useTranslation();

  // Get the current URL for Open Graph
  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/crawler';

  const features = [
    {
      icon: Shield,
      title: t('crawler.features.respectful.title'),
      description: t('crawler.features.respectful.description')
    },
    {
      icon: Lock,
      title: t('crawler.features.registered.title'),
      description: t('crawler.features.registered.description')
    },
    {
      icon: Settings,
      title: t('crawler.features.manageable.title'),
      description: t('crawler.features.manageable.description')
    },
    {
      icon: FileSearch,
      title: t('crawler.features.targeted.title'),
      description: t('crawler.features.targeted.description')
    }
  ];

  return (
    <div className="min-h-screen bg-slate-900 text-white">
      <SEO
        title={t('crawler.seo.title')}
        description={t('crawler.seo.description')}
        keywords={t('crawler.seo.keywords')}
        ogTitle={t('crawler.seo.ogTitle')}
        ogDescription={t('crawler.seo.ogDescription')}
        ogUrl={currentUrl}
        ogType="website"
      />
      {/* 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" className="w-8 h-8" />
              <span className="text-xl font-bold text-white">ShopCall.ai</span>
            </div>
            <Button variant="outline" className="border-slate-600 text-slate-300 hover:bg-slate-800" asChild>
              <a href="/">{t('crawler.backHome')}</a>
            </Button>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="w-16 h-16 bg-[#52b3d0]/20 rounded-lg flex items-center justify-center mb-6 mx-auto">
            <Bot className="h-8 w-8 text-[#52b3d0]" />
          </div>
          <h1 className="text-5xl font-bold mb-6">{t('crawler.title')}</h1>
          <p className="text-xl text-slate-300 mb-8 leading-relaxed">
            {t('crawler.hero.description')}
          </p>
        </div>
      </section>

      {/* User Agent Section */}
      <section className="py-12 bg-slate-800/50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold mb-6 text-center">{t('crawler.userAgent.title')}</h2>
          <Card className="bg-slate-700/50 border-slate-600">
            <CardContent className="pt-6">
              <div className="space-y-4">
                <div>
                  <h3 className="text-lg font-semibold text-[#52b3d0] mb-2">{t('crawler.userAgent.formatLabel')}</h3>
                  <code className="block bg-slate-900 p-4 rounded-lg text-slate-300 text-sm overflow-x-auto">
                    ShopCallCrawler/1.0.0+0e76ee9 (+https://shopcall.ai/crawler)
                  </code>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-[#52b3d0] mb-2">{t('crawler.userAgent.hostLabel')}</h3>
                  <code className="block bg-slate-900 p-4 rounded-lg text-slate-300 text-sm overflow-x-auto">
                    crawler-[n].shop.static.shopcall.ai
                  </code>
                  <p className="text-slate-400 text-sm mt-2">{t('crawler.userAgent.hostDescription')}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20">
        <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-6">{t('crawler.features.title')}</h2>
            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
              {t('crawler.features.subtitle')}
            </p>
          </div>

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

      {/* How It Works Section */}
      <section className="py-20 bg-slate-800/50">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-4xl font-bold mb-12 text-center">{t('crawler.howItWorks.title')}</h2>

          <div className="space-y-6">
            <Card className="bg-slate-700/50 border-slate-600">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <span className="w-8 h-8 bg-[#52b3d0] rounded-full flex items-center justify-center text-sm font-bold">1</span>
                  {t('crawler.howItWorks.step1.title')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-300">{t('crawler.howItWorks.step1.description')}</p>
              </CardContent>
            </Card>

            <Card className="bg-slate-700/50 border-slate-600">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <span className="w-8 h-8 bg-[#52b3d0] rounded-full flex items-center justify-center text-sm font-bold">2</span>
                  {t('crawler.howItWorks.step2.title')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-300">{t('crawler.howItWorks.step2.description')}</p>
              </CardContent>
            </Card>

            <Card className="bg-slate-700/50 border-slate-600">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <span className="w-8 h-8 bg-[#52b3d0] rounded-full flex items-center justify-center text-sm font-bold">3</span>
                  {t('crawler.howItWorks.step3.title')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-300">{t('crawler.howItWorks.step3.description')}</p>
                <div className="mt-4 space-y-2">
                  <div className="flex items-center gap-2 text-slate-400">
                    <span className="w-2 h-2 bg-[#52b3d0] rounded-full"></span>
                    <span>{t('crawler.howItWorks.step3.categories.faq')}</span>
                  </div>
                  <div className="flex items-center gap-2 text-slate-400">
                    <span className="w-2 h-2 bg-[#52b3d0] rounded-full"></span>
                    <span>{t('crawler.howItWorks.step3.categories.terms')}</span>
                  </div>
                  <div className="flex items-center gap-2 text-slate-400">
                    <span className="w-2 h-2 bg-[#52b3d0] rounded-full"></span>
                    <span>{t('crawler.howItWorks.step3.categories.shopping')}</span>
                  </div>
                  <div className="flex items-center gap-2 text-slate-400">
                    <span className="w-2 h-2 bg-[#52b3d0] rounded-full"></span>
                    <span>{t('crawler.howItWorks.step3.categories.contacts')}</span>
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-slate-700/50 border-slate-600">
              <CardHeader>
                <CardTitle className="text-white flex items-center gap-3">
                  <span className="w-8 h-8 bg-[#52b3d0] rounded-full flex items-center justify-center text-sm font-bold">4</span>
                  {t('crawler.howItWorks.step4.title')}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-slate-300">{t('crawler.howItWorks.step4.description')}</p>
              </CardContent>
            </Card>
          </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">
          <h2 className="text-4xl font-bold mb-6">{t('crawler.cta.title')}</h2>
          <p className="text-xl text-slate-300 mb-8">
            {t('crawler.cta.description')}
          </p>
          <Button size="lg" className="bg-[#52b3d0] hover:bg-[#4a9fbc] text-white px-8 py-4 text-lg" asChild>
            <a href="/signup">
              {t('crawler.cta.button')}
              <Globe className="ml-2 h-5 w-5" />
            </a>
          </Button>
        </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 justify-center items-center gap-4 text-sm text-slate-500">
            <span>{t('crawler.footer.copyright')}</span>
            <span>•</span>
            <a href="/privacy" className="hover:text-slate-300">{t('crawler.footer.privacy')}</a>
            <span>•</span>
            <a href="/about" className="hover:text-slate-300">{t('crawler.footer.about')}</a>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Crawler;
