import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

import { ShoppingBag, ExternalLink, Package, DollarSign, Shield, Zap, Store } from 'lucide-react';
import { useTranslation } from '@/contexts/language';

export default function MarketplacePage() {
  const { t } = useTranslation();
  useSeoMeta({
    title: t('seoUi.marketplaceTitle'),
    description: t('seoUi.marketplaceDesc'),
  });

  return (
    <>
      <div className="container px-4 py-12 max-w-4xl">
        {/* Hero */}
        <div className="text-center mb-12">
          <div className="mb-6">
            <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-[#ff6600] to-[#ff0040] mb-4">
              <ShoppingBag className="h-10 w-10 text-white" />
            </div>
          </div>
          <h1 className="text-4xl md:text-6xl font-black uppercase mb-4 neon-orange" style={{
            fontFamily: 'Impact, "Arial Black", sans-serif',
            letterSpacing: '0.05em'
          }}>
            {t('marketUi.marketplace.heroTitle')}
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            {t('marketUi.marketplace.heroBefore')} <strong className="text-[#ff6600]">Plebeian Market</strong> {t('marketUi.marketplace.heroAfter')}
          </p>
        </div>

        {/* Plebeian Market Info */}
        <Card className="bg-black/90 border-2 border-[#ff6600]/50 mb-8">
          <CardContent className="p-8">
            <div className="flex items-start gap-6 mb-6">
              <div className="w-16 h-16 rounded-xl bg-[#ff6600] flex items-center justify-center flex-shrink-0">
                <Store className="h-8 w-8 text-white" />
              </div>
              <div className="flex-1">
                <h2 className="text-2xl font-black uppercase text-[#ff6600] mb-3">{t('marketUi.marketplace.whatIsTitle')}</h2>
                <p className="text-gray-300 mb-4">
                  {t('marketUi.marketplace.whatIsBody')}
                </p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
              <div className="p-4 rounded-lg bg-black/50 border border-[#ff0040]/20">
                <Shield className="h-6 w-6 text-[#ff0040] mb-2" />
                <h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.noFeesTitle')}</h3>
                <p className="text-xs text-gray-400">{t('marketUi.marketplace.noFeesBody')}</p>
              </div>
              <div className="p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
                <DollarSign className="h-6 w-6 text-[#ccff00] mb-2" />
                <h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.bitcoinTitle')}</h3>
                <p className="text-xs text-gray-400">{t('marketUi.marketplace.bitcoinBody')}</p>
              </div>
              <div className="p-4 rounded-lg bg-black/50 border border-[#ff6600]/20">
                <Package className="h-6 w-6 text-[#ff6600] mb-2" />
                <h3 className="font-bold text-white uppercase text-sm mb-1">{t('marketUi.marketplace.decentralizedTitle')}</h3>
                <p className="text-xs text-gray-400">{t('marketUi.marketplace.decentralizedBody')}</p>
              </div>
            </div>

            <div className="flex justify-center">
              <a href="https://plebeian.market" target="_blank" rel="noopener noreferrer">
                <Button size="lg" className="gap-2 bg-[#ff6600] hover:bg-[#ff6600]/90 text-white border-2 border-[#ff6600] shadow-[0_0_20px_rgba(255,102,0,0.5)] font-bold uppercase px-12 py-6 text-lg">
                  <ExternalLink className="h-6 w-6" />
                  {t('marketUi.marketplace.visit')}
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>

        {/* What You Can Buy/Sell */}
        <div className="mb-12">
          <h2 className="text-2xl font-black uppercase text-white mb-6">{t('marketUi.marketplace.buySellTitle')}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {[
              {
                title: t('marketUi.marketplace.catCompletes'),
                items: [
                  t('marketUi.marketplace.preBuilt'),
                  t('marketUi.marketplace.customSetups'),
                  t('marketUi.marketplace.beginnerBoards'),
                ],
                color: '#ff0040'
              },
              {
                title: t('marketUi.marketplace.catParts'),
                items: [
                  t('marketUi.marketplace.decks'),
                  t('marketUi.marketplace.trucks'),
                  t('marketUi.marketplace.wheels'),
                  t('marketUi.marketplace.bearings'),
                  t('marketUi.marketplace.gripTape'),
                  t('marketUi.marketplace.hardware'),
                ],
                color: '#ff6600'
              },
              {
                title: t('marketUi.marketplace.catApparel'),
                items: [
                  t('marketUi.marketplace.skateShoes'),
                  t('marketUi.marketplace.clothing'),
                  t('marketUi.marketplace.helmets'),
                  t('marketUi.marketplace.pads'),
                  t('marketUi.marketplace.backpacks'),
                ],
                color: '#ccff00'
              },
              {
                title: t('marketUi.marketplace.catAccessories'),
                items: [
                  t('marketUi.marketplace.tools'),
                  t('marketUi.marketplace.wax'),
                  t('marketUi.marketplace.rails'),
                  t('marketUi.marketplace.stickers'),
                  t('marketUi.marketplace.videos'),
                  t('marketUi.marketplace.magazines'),
                ],
                color: '#ff0040'
              },
            ].map((category, i) => (
              <Card key={i} className="bg-black/90 border-2" style={{ borderColor: `${category.color}30` }}>
                <CardContent className="p-6">
                  <h3 className="font-black uppercase mb-3" style={{ color: category.color }}>
                    {category.title}
                  </h3>
                  <ul className="space-y-1">
                    {category.items.map((item, j) => (
                      <li key={j} className="text-sm text-gray-400 flex items-center gap-2">
                        <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: category.color }} />
                        {item}
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>

        {/* How It Works */}
        <Card className="bg-black/90 border-2 border-[#ccff00]/50">
          <CardContent className="p-8">
            <h2 className="text-2xl font-black uppercase text-[#ccff00] mb-6">{t('marketUi.marketplace.howItWorks')}</h2>

            <div className="space-y-4">
              {[
                {
                  num: 1,
                  title: t('marketUi.marketplace.step1Title'),
                  desc: t('marketUi.marketplace.step1Body'),
                },
                {
                  num: 2,
                  title: t('marketUi.marketplace.step2Title'),
                  desc: t('marketUi.marketplace.step2Body'),
                },
                {
                  num: 3,
                  title: t('marketUi.marketplace.step3Title'),
                  desc: t('marketUi.marketplace.step3Body'),
                },
                {
                  num: 4,
                  title: t('marketUi.marketplace.step4Title'),
                  desc: t('marketUi.marketplace.step4Body'),
                },
              ].map((step) => (
                <div key={step.num} className="flex gap-4 p-4 rounded-lg bg-black/50 border border-[#ccff00]/20">
                  <div className="w-10 h-10 rounded-full bg-[#ccff00] flex items-center justify-center font-black text-xl text-black flex-shrink-0">
                    {step.num}
                  </div>
                  <div>
                    <h4 className="font-black uppercase text-sm mb-1 text-white">{step.title}</h4>
                    <p className="text-sm text-gray-400">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-8 p-4 rounded-lg bg-[#ff0040]/10 border border-[#ff0040]/30">
              <div className="flex items-start gap-3">
                <Zap className="h-5 w-5 text-[#ff0040] flex-shrink-0 mt-0.5" />
                <div>
                  <h4 className="font-bold text-[#ff0040] mb-1">{t('marketUi.marketplace.needBitcoinTitle')}</h4>
                  <p className="text-sm text-gray-300">
                    {t('marketUi.marketplace.needBitcoinBefore')} <Link to="/onboarding" className="text-[#ccff00] underline font-bold">{t('marketUi.marketplace.onboardingGuide')}</Link> {t('marketUi.marketplace.needBitcoinAfter')}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* For Shop Owners */}
        <Card className="bg-black/90 border-2 border-[#ff0040]/50 mt-8">
          <CardContent className="p-8 text-center">
            <Store className="h-12 w-12 mx-auto mb-4 text-[#ff0040]" />
            <h2 className="text-2xl font-black uppercase text-white mb-3">{t('marketUi.marketplace.ownShopTitle')}</h2>
            <p className="text-gray-300 mb-6 max-w-xl mx-auto">
              {t('marketUi.marketplace.ownShopBody')}
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link to="/create-shop">
                <Button className="gap-2 bg-[#ff0040] hover:bg-[#ff0040]/90 text-white border-2 border-[#ff0040] shadow-[0_0_20px_rgba(255,0,64,0.5)] font-bold uppercase px-8">
                  <Store className="h-5 w-5" />
                  {t('marketUi.marketplace.addShop')}
                </Button>
              </Link>
              <a href="https://plebeian.market/sell" target="_blank" rel="noopener noreferrer">
                <Button variant="outline" className="gap-2 border-2 border-[#ccff00]/50 hover:bg-[#ccff00]/10 text-[#ccff00] font-bold uppercase px-8">
                  <Package className="h-5 w-5" />
                  {t('marketUi.marketplace.startSelling')}
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </>
  );
}