'use client'

import { useEffect } from 'react'
import { BRAND } from '@/lib/constants'
import {
  Sparkles,
  Award,
  Building2,
  Bot,
  ArrowRight,
  GraduationCap,
  BookOpen,
  Users,
  Star,
  MessageCircle,
  Search,
} from 'lucide-react'

/* ------------------------------------------------------------------ */
/* Redirect from query param to AI Coach                               */
/* ------------------------------------------------------------------ */

export default function Home() {
  useEffect(() => {
    const params = new URLSearchParams(window.location.search)
    const msg = params.get('msg')
    if (msg) {
      window.location.href = `/ai-coach?msg=${encodeURIComponent(msg)}`
    }
  }, [])

  const features = [
    {
      title: 'AI Career Coach',
      description: 'Get personalised career guidance, study tips, and bursary advice from our AI assistant powered by Granite 3.1 MoE.',
      icon: Sparkles,
      href: '/ai-coach',
      color: '#91C4D9',
      bgColor: '#f0f9ff',
    },
    {
      title: 'Bursary Explorer',
      description: 'Find bursaries and scholarships for South African students. Filter by province, field of study, and level.',
      icon: Award,
      href: '/bursary',
      color: '#27ae60',
      bgColor: '#f0fdf4',
    },
    {
      title: 'University Explorer',
      description: 'Explore SA universities, TVET colleges, and courses. Get admission requirements and fee information.',
      icon: Building2,
      href: '/universities',
      color: '#5b9ebd',
      bgColor: '#f0f9ff',
    },
  ]

  const stats = [
    { label: 'SA Provinces Covered', value: '9', icon: MapPinIcon },
    { label: 'Subjects Available', value: '20+', icon: BookOpen },
    { label: 'AI-Powered', value: '24/7', icon: Bot },
  ]

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#f5f6fa' }}>
      {/* Top nav */}
      <header
        className="sticky top-0 z-50 border-b shadow-sm"
        style={{
          background: 'linear-gradient(135deg, #91C4D9 0%, #5b9ebd 100%)',
        }}
      >
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img
              src="/images/logo.png"
              alt="Studo Guide"
              className="h-8 w-8 rounded-full object-cover bg-white"
            />
            <span className="text-white font-bold text-lg tracking-tight">
              {BRAND.name}
            </span>
          </div>
          <nav className="flex items-center gap-1">
            <a
              href="/ai-coach"
              className="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded-md transition-colors font-medium"
            >
              AI Coach
            </a>
            <a
              href="/bursary"
              className="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded-md transition-colors font-medium"
            >
              Bursaries
            </a>
            <a
              href="/universities"
              className="px-3 py-1.5 text-sm text-white/90 hover:text-white hover:bg-white/10 rounded-md transition-colors font-medium"
            >
              Universities
            </a>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 opacity-5"
          style={{
            background: 'radial-gradient(ellipse at 30% 20%, #91C4D9 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, #5b9ebd 0%, transparent 60%)',
          }}
        />
        <div className="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
          <div
            className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg"
            style={{ background: 'linear-gradient(135deg, #91C4D9 0%, #5b9ebd 100%)' }}
          >
            <GraduationCap className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4 tracking-tight">
            Your Future Career Guide
          </h1>
          <p className="text-lg text-gray-500 max-w-2xl mx-auto mb-8">
            AI-powered career guidance, bursary discovery, and university exploration built
            specifically for South African students from Grade 8 to post-matric.
          </p>
          <div className="flex flex-wrap items-center justify-center gap-4">
            <a
              href="/ai-coach"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-white font-semibold shadow-lg hover:shadow-xl transition-all"
              style={{ background: 'linear-gradient(135deg, #91C4D9 0%, #5b9ebd 100%)' }}
            >
              <MessageCircle className="w-5 h-5" />
              Chat with AI Coach
            </a>
            <a
              href="/bursary"
              className="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-gray-700 bg-white border border-gray-200 font-semibold hover:shadow-md transition-all"
            >
              <Search className="w-5 h-5" />
              Explore Bursaries
            </a>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 -mt-4 mb-12">
        <div className="grid grid-cols-3 gap-4">
          {stats.map((stat) => (
            <div
              key={stat.label}
              className="bg-white rounded-xl p-5 text-center shadow-sm border border-gray-100"
            >
              <stat.icon className="w-5 h-5 text-[#5b9ebd] mx-auto mb-2" />
              <div className="text-2xl font-bold text-gray-900">{stat.value}</div>
              <div className="text-xs text-gray-500 mt-0.5">{stat.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Feature cards */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16">
        <h2 className="text-2xl font-bold text-gray-900 text-center mb-2">
          Explore the Platform
        </h2>
        <p className="text-gray-500 text-center mb-8">
          Everything you need to plan your academic future
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {features.map((feature) => (
            <a
              key={feature.href}
              href={feature.href}
              className="group bg-white rounded-2xl p-6 border border-gray-200 hover:shadow-lg hover:border-gray-300 transition-all"
            >
              <div
                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4"
                style={{ backgroundColor: feature.bgColor }}
              >
                <feature.icon className="w-6 h-6" style={{ color: feature.color }} />
              </div>
              <h3 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-[#5b9ebd] transition-colors">
                {feature.title}
              </h3>
              <p className="text-sm text-gray-500 leading-relaxed mb-4">
                {feature.description}
              </p>
              <div className="flex items-center gap-1 text-sm font-medium" style={{ color: feature.color }}>
                Get started
                <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section className="bg-white border-t py-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-gray-900 text-center mb-2">How It Works</h2>
          <p className="text-gray-500 text-center mb-10">
            Three simple steps to kickstart your future
          </p>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
            {[
              {
                step: '1',
                title: 'Chat with AI',
                desc: 'Tell our AI coach about your interests, grades, and goals.',
                icon: MessageCircle,
              },
              {
                step: '2',
                title: 'Get Matched',
                desc: 'Receive personalised bursary, university, and career matches.',
                icon: Star,
              },
              {
                step: '3',
                title: 'Take Action',
                desc: 'Apply for bursaries and universities with AI guidance.',
                icon: ArrowRight,
              },
            ].map((item) => (
              <div key={item.step} className="text-center">
                <div
                  className="w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-lg"
                  style={{ background: 'linear-gradient(135deg, #91C4D9 0%, #5b9ebd 100%)' }}
                >
                  {item.step}
                </div>
                <h3 className="font-semibold text-gray-900 mb-1">{item.title}</h3>
                <p className="text-sm text-gray-500">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-white py-6">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-sm text-gray-500">
            &copy; {new Date().getFullYear()} {BRAND.name} &mdash; {BRAND.tagline}
          </p>
          <p className="text-xs text-gray-400 mt-1">
            Powered by AI &bull; Built for South African students
          </p>
        </div>
      </footer>
    </div>
  )
}

/* Small icon component for stats */
function MapPinIcon({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
      <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>
  )
}
