import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import { useState, useEffect } from 'react'
import { ShieldCheck, ArrowRight, TrendingUp, Target, Crosshair, Users, Landmark, Briefcase, UserCheck, PieChart } from 'lucide-react'

const PitchBackground = () => (
  <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
    <div style={{ 
      position: 'absolute', inset: 0, 
      background: 'radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%)',
    }} />
    <svg width="100%" height="100%" style={{ opacity: 0.1 }} preserveAspectRatio="xMidYMid slice" viewBox="0 0 1000 600">
      <rect width="1000" height="600" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
      <line x1="500" y1="0" x2="500" y2="600" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
      <circle cx="500" cy="300" r="90" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" />
    </svg>
  </div>
)

const AUDIENCES = [
  { icon: <Briefcase size={24} />, title: "Directors of Football", desc: "Validate transfer ceilings and protect club liquidity." },
  { icon: <Target size={24} />, title: "Head Scouts", desc: "Back the 'eye test' with unshakeable performance data." },
  { icon: <Landmark size={24} />, title: "Financial Officers", desc: "Model 5-year FFP impact before signing the contract." },
  { icon: <Users size={24} />, title: "Elite Agents", desc: "Benchmark client value against live market benchmarks." },
  { icon: <PieChart size={24} />, title: "Investment Groups", desc: "De-risk acquisitions with high-fidelity ROI projections." },
]

export default function Landing() {
  const [evalCount, setEvalCount] = useState(84);

  useEffect(() => {
    const stored = localStorage.getItem('fv_usage_count');
    const localUses = stored ? parseInt(stored, 10) : 0;
    setEvalCount(84 + localUses);
  }, []);

  const STATS = [
    { value: evalCount.toString(), label: 'Transfers Evaluated' },
    { value: '£14.2m',  label: 'Avg. Overpay Avoided' },
    { value: 'PL-Sync', label: 'Market Intelligence'  },
    { value: '100%',   label: 'PSR Compliance' },
  ]

  return (
    <div className="page" style={{ position: 'relative', overflow: 'hidden' }}>
      <PitchBackground />
      
      {/* ── Cinematic Hero ────────────────────────────────────────────────── */}
      <section className="container" style={{ position: 'relative', zIndex: 1, padding: '40px 24px 60px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '48px', alignItems: 'center' }}>
          
          <motion.div 
            initial={{ opacity: 0, x: -40 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
          >
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '24px', padding: '6px 16px', background: 'rgba(59,130,246,0.1)', border: '1px solid rgba(59,130,246,0.2)', borderRadius: '100px' }}>
              <span style={{ fontSize: '1.2rem' }}>🏆</span>
              <span style={{ fontSize: '0.8rem', fontWeight: 600, color: '#60a5fa', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
                The Gold Standard in Transfer Intelligence
              </span>
            </div>

            <h1 style={{ marginBottom: '24px', fontSize: 'clamp(2.5rem, 6vw, 4.8rem)', lineHeight: 1.05, fontWeight: 900, letterSpacing: '-0.02em' }}>
              Own the Negotiation. <br/>
              <span className="gradient-accent">Master the Market.</span>
            </h1>

            <p style={{ maxWidth: '600px', marginBottom: '40px', fontSize: '1.25rem', lineHeight: 1.6, color: 'var(--text-2)', fontWeight: 400 }}>
              Stop guessing. Start quantifying. The definitive platform for quantifying the true intrinsic value of world-class talent and eliminating overpayment risk.
            </p>

            <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
              <Link to="/estimate" className="btn btn-secondary btn-lg" style={{ padding: '18px 36px' }}>
                Launch Intelligence Engine <ArrowRight size={20} />
              </Link>
            </div>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, scale: 0.9, rotate: 2 }}
            animate={{ opacity: 1, scale: 1, rotate: 0 }}
            transition={{ duration: 1, delay: 0.2 }}
            style={{ position: 'relative' }}
          >
            <div style={{ 
              position: 'absolute', inset: -20, 
              background: 'radial-gradient(circle, rgba(59,130,246,0.2) 0%, transparent 70%)',
              filter: 'blur(40px)', zIndex: -1
            }} />
            <img 
              src="/pl_lion_valuation_hero_1777652300981.png" 
              alt="Premier League Intelligence" 
              style={{ 
                width: '100%', borderRadius: '24px', 
                border: '1px solid var(--glass-border-hi)',
                boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
                transform: 'perspective(1000px) rotateY(-5deg)'
              }} 
            />
          </motion.div>
        </div>
      </section>

      {/* ── Financial Stats ───────────────────────────────────────────────── */}
      <section style={{ position: 'relative', zIndex: 1, borderTop: '1px solid var(--glass-border)', borderBottom: '1px solid var(--glass-border)', padding: '40px 0', background: 'rgba(255,255,255,0.02)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: '24px', textAlign: 'center' }}>
            {STATS.map(({ value, label }, i) => (
              <motion.div 
                key={label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 * i }}
                viewport={{ once: true }}
              >
                <div style={{ fontSize: '2.8rem', fontWeight: 900, color: 'var(--text-1)', fontFamily: 'Outfit' }}>{value}</div>
                <div style={{ fontSize: '0.8rem', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700 }}>{label}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Target Audience ───────────────────────────────────────────────── */}
      <section className="container" style={{ position: 'relative', zIndex: 1, padding: '100px 24px' }}>
        <div style={{ textAlign: 'center', marginBottom: '64px' }}>
          <h2 style={{ marginBottom: '16px', fontSize: '2.5rem' }}>Built for the Decision Makers</h2>
          <p style={{ maxWidth: '600px', margin: '0 auto', fontSize: '1.1rem', color: 'var(--text-2)' }}>
            Empowering the most critical roles in the multi-billion pound football industry.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '20px' }}>
          {AUDIENCES.map((item, i) => (
            <motion.div 
              key={item.title}
              whileHover={{ y: -10, background: 'rgba(255,255,255,0.06)' }}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 * i }}
              viewport={{ once: true }}
              className="glass" 
              style={{ padding: '28px', textAlign: 'center', border: '1px solid var(--glass-border)' }}
            >
              <div style={{ 
                width: 50, height: 50, borderRadius: '12px', 
                background: 'rgba(59,130,246,0.1)', display: 'flex', 
                alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px',
                color: '#60a5fa'
              }}>
                {item.icon}
              </div>
              <h4 style={{ marginBottom: '12px', fontSize: '1.05rem', color: 'var(--text-1)' }}>{item.title}</h4>
              <p style={{ fontSize: '0.82rem', color: 'var(--text-3)', lineHeight: 1.5 }}>{item.desc}</p>
            </motion.div>
          ))}
        </div>
      </section>

      {/* ── Value Proposition Cards ───────────────────────────────────────── */}
      <section className="container" style={{ position: 'relative', zIndex: 1, marginBottom: '100px' }}>
        <div className="grid-3" style={{ gap: '24px' }}>
          <motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
            <Target size={32} color="#3b82f6" style={{ marginBottom: '24px' }} />
            <h3 style={{ marginBottom: '12px' }}>Intrinsic Valuation</h3>
            <p style={{ fontSize: '0.95rem' }}>Isolate pure performance metrics from market noise to identify the true ceiling price of any asset.</p>
          </motion.div>

          <motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
            <Crosshair size={32} color="#f5a623" style={{ marginBottom: '24px' }} />
            <h3 style={{ marginBottom: '12px' }}>Live Market Pulse</h3>
            <p style={{ fontSize: '0.95rem' }}>Real-time newsroom scraping for durability, form, and agent leverage to adjust valuations on the fly.</p>
          </motion.div>

          <motion.div whileHover={{ scale: 1.02 }} className="glass" style={{ padding: '32px' }}>
            <ShieldCheck size={32} color="#22c55e" style={{ marginBottom: '24px' }} />
            <h3 style={{ marginBottom: '12px' }}>Board-Ready Compliance</h3>
            <p style={{ fontSize: '0.95rem' }}>Instantly calculate amortisation hits and ensure every bid stays within PSR & FFP safety zones.</p>
          </motion.div>
        </div>
      </section>

      {/* ── Enterprise CTA ────────────────────────────────────────────────── */}
      <section className="container" style={{ position: 'relative', zIndex: 1, marginBottom: '80px' }}>
        <motion.div 
          whileInView={{ opacity: 1, y: 0 }}
          initial={{ opacity: 0, y: 40 }}
          viewport={{ once: true }}
          className="glass" 
          style={{
            padding: '60px 48px', textAlign: 'center',
            background: 'linear-gradient(135deg, rgba(34,197,94,0.08), rgba(59,130,246,0.1))',
            borderColor: 'var(--glass-border-hi)',
          }}
        >
          <h2 style={{ marginBottom: '16px', fontSize: '2.5rem' }}>Maximize your net spend.</h2>
          <p style={{ marginBottom: '40px', color: 'var(--text-2)', fontSize: '1.1rem' }}>Join the elite recruitment departments using data to win the transfer window.</p>
          <Link to="/estimate" className="btn btn-secondary btn-lg">
            Start Free Evaluation <TrendingUp size={22} style={{ marginLeft: 10 }} />
          </Link>
        </motion.div>
      </section>

    </div>
  )
}