import { Link } from 'react-router-dom'
import { Header } from '@/components/layout/Header'
import { Button } from '@/components/common/Button'
import { HelpCircle, ArrowRight, Shield, Users, Zap, DollarSign } from 'lucide-react'

export const HowItWorks = () => {
  const steps = [
    {
      number: '01',
      title: 'Create or Find a Bet',
      description: 'Browse available spreads on upcoming games or create your own line.',
      icon: Zap,
    },
    {
      number: '02',
      title: 'Match with Another User',
      description: 'Take the opposite side of an existing bet or wait for someone to take yours.',
      icon: Users,
    },
    {
      number: '03',
      title: 'Funds Held in Escrow',
      description: 'Both sides stake is securely locked until the game is settled.',
      icon: Shield,
    },
    {
      number: '04',
      title: 'Winner Takes the Pot',
      description: 'After the game, the winner receives 90% of the total pot (10% platform fee).',
      icon: DollarSign,
    },
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      <Header />

      {/* Hero */}
      <div className="bg-gradient-to-r from-gray-900 to-gray-800 text-white py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <HelpCircle className="w-16 h-16 mx-auto mb-4 text-primary" />
          <h1 className="text-4xl md:text-5xl font-bold mb-4">How It Works</h1>
          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
            Peer-to-peer sports betting made simple. No bookies, no house edge on odds - just you vs another bettor.
          </p>
        </div>
      </div>

      {/* Steps */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {steps.map((step) => (
            <div key={step.number} className="relative">
              <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm h-full">
                <div className="text-5xl font-bold text-gray-100 mb-4">{step.number}</div>
                <step.icon className="w-10 h-10 text-primary mb-4" />
                <h3 className="text-xl font-bold text-gray-900 mb-2">{step.title}</h3>
                <p className="text-gray-600">{step.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* FAQ */}
      <div className="bg-white py-16">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-gray-900 text-center mb-12">Common Questions</h2>

          <div className="space-y-6">
            <div className="border-b pb-6">
              <h3 className="font-bold text-lg text-gray-900 mb-2">What is spread betting?</h3>
              <p className="text-gray-600">
                Spread betting involves wagering on the margin of victory. If the spread is -7, the favorite must win by more than 7 points for bets on them to pay out.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="font-bold text-lg text-gray-900 mb-2">How is my money protected?</h3>
              <p className="text-gray-600">
                All funds are held in secure escrow when a bet is matched. Neither party can access the funds until the game is settled.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="font-bold text-lg text-gray-900 mb-2">What are the fees?</h3>
              <p className="text-gray-600">
                We charge a 10% commission on winning bets only. If you lose, you pay nothing beyond your stake.
              </p>
            </div>

            <div className="border-b pb-6">
              <h3 className="font-bold text-lg text-gray-900 mb-2">Can I cancel a bet?</h3>
              <p className="text-gray-600">
                You can cancel open bets that haven't been matched yet. Once matched, bets cannot be cancelled.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="bg-gradient-to-r from-primary to-blue-600 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-bold text-white mb-4">Ready to start betting?</h2>
          <p className="text-blue-100 mb-8 text-lg">Join thousands of users betting against each other</p>
          <div className="flex gap-4 justify-center">
            <Link to="/register">
              <Button size="lg" className="bg-white text-primary hover:bg-gray-100">
                Create Account 
              </Button>
            </Link>
            <Link to="/">
              <Button size="lg" variant="secondary" className="border-white text-white hover:bg-white/10">
                Browse Events
              </Button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
