'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { clubs } from '@/lib/data'

const SHOP_LINKS: Record<string, string> = {
  dinamo: 'https://www.gnkdinamo.hr',
  como: 'https://www.como1907.it',
}

function JerseyCard({ club }: { club: typeof clubs[0] }) {
  const [flipped, setFlipped] = useState(false)
  const shopUrl = SHOP_LINKS[club.id]

  return (
    <div className="flex flex-col items-center gap-6">
      {/* Jersey flip card */}
      <div
        className="relative w-56 h-72 cursor-pointer select-none"
        style={{ perspective: 1000 }}
        onMouseEnter={() => setFlipped(true)}
        onMouseLeave={() => setFlipped(false)}
        onClick={() => setFlipped(!flipped)}
        role="img"
        aria-label={`${club.name} jersey #${club.jerseyNumber}`}
      >
        <motion.div
          className="absolute inset-0 w-full h-full"
          style={{ transformStyle: 'preserve-3d' }}
          animate={{ rotateY: flipped ? 180 : 0 }}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
        >
          {/* Front face */}
          <div
            className="absolute inset-0 rounded-2xl overflow-hidden flex flex-col items-center justify-center"
            style={{
              backfaceVisibility: 'hidden',
              background: `linear-gradient(160deg, ${club.primaryColor}30, ${club.primaryColor}10)`,
              border: `1px solid ${club.primaryColor}30`,
            }}
          >
            <div
              className="font-display text-8xl leading-none"
              style={{ color: club.primaryColor }}
            >
              {club.jerseyNumber}
            </div>
            <div className="font-body text-xs tracking-widest uppercase mt-2" style={{ color: 'rgba(240,240,255,0.4)' }}>
              Front
            </div>
          </div>

          {/* Back face */}
          <div
            className="absolute inset-0 rounded-2xl overflow-hidden flex flex-col items-center justify-center gap-2"
            style={{
              backfaceVisibility: 'hidden',
              transform: 'rotateY(180deg)',
              background: `linear-gradient(160deg, ${club.primaryColor}30, ${club.primaryColor}10)`,
              border: `1px solid ${club.primaryColor}30`,
            }}
          >
            <div
              className="font-display text-2xl leading-none tracking-widest"
              style={{ color: club.primaryColor }}
            >
              BATURINA
            </div>
            <div
              className="font-display text-6xl leading-none"
              style={{ color: club.primaryColor }}
            >
              {club.jerseyNumber}
            </div>
            <div className="font-body text-xs tracking-widest uppercase mt-2" style={{ color: 'rgba(240,240,255,0.4)' }}>
              Back
            </div>
          </div>
        </motion.div>
      </div>

      {/* Club info */}
      <div className="text-center">
        <h3 className="font-display text-2xl mb-1" style={{ color: 'var(--white)' }}>
          {club.name}
        </h3>
        <p className="font-body text-xs uppercase tracking-widest mb-4" style={{ color: 'rgba(240,240,255,0.4)' }}>
          {club.league} · {club.years}
        </p>
        <a
          href={shopUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center gap-2 px-6 py-3 rounded-full font-body text-sm uppercase tracking-widest transition-all duration-300"
          style={{
            background: `${club.primaryColor}20`,
            border: `1px solid ${club.primaryColor}50`,
            color: club.primaryColor,
          }}
          onMouseEnter={(e) => {
            ;(e.currentTarget as HTMLElement).style.background = club.primaryColor
            ;(e.currentTarget as HTMLElement).style.color = 'var(--white)'
          }}
          onMouseLeave={(e) => {
            ;(e.currentTarget as HTMLElement).style.background = `${club.primaryColor}20`
            ;(e.currentTarget as HTMLElement).style.color = club.primaryColor
          }}
        >
          Official Store
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>
    </div>
  )
}

export function Shop() {
  return (
    <section
      id="shop"
      className="relative w-full py-24 overflow-hidden"
      style={{ background: 'var(--bg-primary)' }}
      aria-label="Official Kits"
    >
      <div className="px-8 md:px-16 max-w-screen-xl mx-auto">
        {/* Header */}
        <div className="text-center mb-16">
          <p className="font-body text-xs tracking-[0.4em] uppercase mb-2" style={{ color: 'var(--cyan)' }}>
            Wear the Legend
          </p>
          <h2
            className="font-display leading-none mb-4"
            style={{ fontSize: 'clamp(3rem, 8vw, 8rem)', color: 'var(--white)' }}
          >
            Official Kits
          </h2>
          <p className="font-body text-sm" style={{ color: 'rgba(240,240,255,0.4)' }}>
            Hover to flip. Official kits available at club stores only.
          </p>
        </div>

        {/* Jersey cards */}
        <div className="flex flex-col sm:flex-row justify-center items-center gap-16 md:gap-24">
          {clubs.map((club) => (
            <JerseyCard key={club.id} club={club} />
          ))}
        </div>

        {/* Disclaimer */}
        <p
          className="text-center font-body text-xs mt-16 max-w-md mx-auto"
          style={{ color: 'rgba(240,240,255,0.2)' }}
        >
          This site is a fan-made experience. Official merchandise is sold exclusively through the clubs&apos; official channels. We are not affiliated with any club or retailer.
        </p>
      </div>

      {/* Bottom spacer with gradient */}
      <div
        className="absolute bottom-0 left-0 right-0 h-32 pointer-events-none"
        style={{ background: 'linear-gradient(to bottom, transparent, var(--bg-secondary))' }}
        aria-hidden="true"
      />
    </section>
  )
}