import { useSeoMeta } from '@unhead/react';
import { Layout } from '@/components/Layout';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

import { ShoppingBag, ExternalLink, Package, DollarSign, Shield, Zap, Store } from 'lucide-react';

export default function MarketplacePage() {
  useSeoMeta({
    title: 'Marketplace - SkateSpots',
    description: 'Buy and sell skateboarding gear on the decentralized Plebeian Market.',
  });

  return (
    <Layout>
      <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'
          }}>
            Shops & Marketplace
          </h1>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Our marketplace is powered by <strong className="text-[#ff6600]">Plebeian Market</strong> - a decentralized marketplace on Nostr.
            Skate shops can list their products, and you can buy/sell used gear directly with Bitcoin.
          </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">What is Plebeian Market?</h2>
                <p className="text-gray-300 mb-4">
                  Plebeian Market is a decentralized marketplace built on Nostr. Buy and sell skateboarding gear
                  directly with other skaters using Bitcoin. No middlemen, no fees, total freedom.
                </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">No Fees</h3>
                <p className="text-xs text-gray-400">No platform taking 30%. Direct peer-to-peer sales.</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">Bitcoin Payments</h3>
                <p className="text-xs text-gray-400">Pay with Bitcoin. Fast, secure, global.</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">Decentralized</h3>
                <p className="text-xs text-gray-400">Built on Nostr. No company controls it.</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" />
                  Visit Plebeian Market
                </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">What You Can Buy & Sell</h2>
          <div className="grid md:grid-cols-2 gap-6">
            {[
              {
                title: 'Complete Decks',
                items: ['Pre-built completes', 'Custom setups', 'Beginner boards'],
                color: '#ff0040'
              },
              {
                title: 'Deck Parts',
                items: ['Decks', 'Trucks', 'Wheels', 'Bearings', 'Grip tape', 'Hardware'],
                color: '#ff6600'
              },
              {
                title: 'Apparel & Protection',
                items: ['Skate shoes', 'Clothing', 'Helmets', 'Pads', 'Backpacks'],
                color: '#ccff00'
              },
              {
                title: 'Accessories',
                items: ['Tools', 'Wax', 'Rails', 'Stickers', 'Videos', '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">How It Works</h2>

            <div className="space-y-4">
              {[
                {
                  num: 1,
                  title: 'Browse Products',
                  desc: 'Visit Plebeian Market and browse skateboarding gear from shops and individuals worldwide.',
                },
                {
                  num: 2,
                  title: 'Contact Sellers',
                  desc: 'Message sellers directly via Nostr. Negotiate prices, ask questions, arrange shipping.',
                },
                {
                  num: 3,
                  title: 'Pay with Bitcoin',
                  desc: 'Complete your purchase using Bitcoin Lightning for instant, low-fee payments.',
                },
                {
                  num: 4,
                  title: 'Leave Feedback',
                  desc: 'Rate your experience and build seller reputation on Nostr. Your reviews help the community.',
                },
              ].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">Need Bitcoin?</h4>
                  <p className="text-sm text-gray-300">
                    You'll need a Lightning wallet with some sats to make purchases.
                    Check out the <a href="/onboarding" className="text-[#ccff00] underline font-bold">onboarding guide</a> for wallet recommendations.
                  </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">Own a Skate Shop?</h2>
            <p className="text-gray-300 mb-6 max-w-xl mx-auto">
              List your shop on SkateSpots and sell your products on Plebeian Market.
              Reach customers worldwide with zero platform fees.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a href="/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" />
                  Add Your Shop
                </Button>
              </a>
              <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" />
                  Start Selling
                </Button>
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </Layout>
  );
}