// src/app/page.tsx
'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/Button'
import { Navbar } from '@/components/layout/Navbar'
import { Footer } from '@/components/layout/Footer'

export default function HomePage() {
  const router = useRouter()
  const [location, setLocation] = useState('')
  const [jobType, setJobType] = useState('')
  const [industry, setIndustry] = useState('')

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    const params = new URLSearchParams()
    if (location) params.set('location', location)
    if (jobType) params.set('jobType', jobType)
    if (industry) params.set('search', industry)
    router.push(`/jobs?${params.toString()}`)
  }

  return (
    <div className="flex flex-col min-h-screen bg-[#032A1A] text-white">
      <Navbar />
      <main className="flex-1">
        {/* Hero */}
        <section className="relative overflow-hidden pt-20 pb-28 md:pt-28 md:pb-36">
          <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid md:grid-cols-12 gap-8 items-center">
              {/* Hero Text */}
              <div className="md:col-span-7 space-y-6">
                <div className="inline-flex items-center gap-2 bg-[#164B35] border border-[rgba(215,227,220,0.15)] rounded-full px-4 py-1.5 text-xs text-[#D7E3DC]">
                  <span className="h-2 w-2 bg-[#FF7628] rounded-full animate-pulse" />
                  THE INSIDER'S GUIDE TO LOCAL OPPORTUNITIES
                </div>
                <h1 className="text-4xl sm:text-5xl lg:text-7xl font-extrabold tracking-tight uppercase leading-none" style={{ fontFamily: 'var(--font-heading)' }}>
                  DISCOVER WORK WITH <span className="text-[#FF7628]">REAL PURPOSE</span>
                </h1>
                <p className="text-sm sm:text-base text-[#D7E3DC] max-w-xl leading-relaxed">
                  Find local jobs, build standout resumes, and connect with opportunities that match your skill, story, and ambition.
                </p>
                <div className="flex flex-wrap gap-4 pt-2">
                  <Link href="/register">
                    <Button size="lg" className="bg-[#FF7628] text-white hover:bg-[#e55a13] font-bold shadow-lg shadow-[#FF7628]/15 hover:shadow-xl hover:shadow-[#FF7628]/25 transition-all">
                      Get Started / Register
                    </Button>
                  </Link>
                  <Link href="/jobs">
                    <Button size="lg" variant="ghost" className="border border-[rgba(215,227,220,0.3)] text-white hover:bg-white/10 font-bold">
                      Browse Jobs
                    </Button>
                  </Link>
                </div>
              </div>

              {/* Hero Visual Masked Graphic Style */}
              <div className="md:col-span-5 flex justify-center relative">
                <div className="relative w-72 h-72 sm:w-80 sm:h-80 md:w-96 md:h-96 bg-[#164B35] rounded-full border-4 border-[#063B25] overflow-hidden flex items-end shadow-2xl">
                  {/* Subtle internal abstract overlay */}
                  <div className="absolute inset-0 bg-[#063B25]/20 mix-blend-overlay" />
                  {/* Human image placeholder / avatar silhouette or graphic */}
                  <div className="absolute inset-0 flex flex-col justify-center items-center p-6 text-center z-10">
                    <div className="h-24 w-24 rounded-full bg-[#FF7628] flex items-center justify-center text-4xl shadow-lg mb-4">🇿🇦</div>
                    <span className="font-extrabold tracking-wide uppercase text-sm" style={{ fontFamily: 'var(--font-heading)' }}>Curated Talent Hub</span>
                    <span className="text-xs text-[#D7E3DC] mt-1">Connecting SA Ambition</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Search Box Filters */}
            <form onSubmit={handleSearch} className="mt-16 bg-[#164B35] border border-[rgba(215,227,220,0.15)] rounded-2xl p-6 shadow-2xl max-w-4xl">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 items-end">
                <div className="space-y-1.5">
                  <label htmlFor="search-location" className="block text-[11px] font-bold uppercase tracking-wider text-[#8EA398]">Location</label>
                  <select
                    id="search-location"
                    value={location}
                    onChange={(e) => setLocation(e.target.value)}
                    className="w-full bg-[#032A1A] border border-[rgba(215,227,220,0.15)] rounded-xl p-2.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#FF7628]"
                  >
                    <option value="">Any Region</option>
                    <option value="Johannesburg">Johannesburg, GP</option>
                    <option value="Cape Town">Cape Town, WC</option>
                    <option value="Durban">Durban, KZN</option>
                    <option value="Pretoria">Pretoria, GP</option>
                  </select>
                </div>

                <div className="space-y-1.5">
                  <label htmlFor="search-type" className="block text-[11px] font-bold uppercase tracking-wider text-[#8EA398]">Job Type</label>
                  <select
                    id="search-type"
                    value={jobType}
                    onChange={(e) => setJobType(e.target.value)}
                    className="w-full bg-[#032A1A] border border-[rgba(215,227,220,0.15)] rounded-xl p-2.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#FF7628]"
                  >
                    <option value="">All Types</option>
                    <option value="FULL_TIME">Full-time</option>
                    <option value="PART_TIME">Part-time</option>
                    <option value="CONTRACT">Contract</option>
                    <option value="FREELANCE">Freelance</option>
                  </select>
                </div>

                <div className="space-y-1.5">
                  <label htmlFor="search-industry" className="block text-[11px] font-bold uppercase tracking-wider text-[#8EA398]">Industry / Search</label>
                  <input
                    type="text"
                    id="search-industry"
                    value={industry}
                    onChange={(e) => setIndustry(e.target.value)}
                    placeholder="e.g. Design, Developer"
                    className="w-full bg-[#032A1A] border border-[rgba(215,227,220,0.15)] rounded-xl p-2 text-xs text-white placeholder-[#8EA398] focus:outline-none focus:ring-1 focus:ring-[#FF7628]"
                  />
                </div>
              </div>
              <div className="mt-4 flex justify-end">
                <Button type="submit" className="bg-[#FF7628] hover:bg-[#e55a13] text-white font-bold w-full sm:w-auto px-8">
                  Search Opportunities
                </Button>
              </div>
            </form>
          </div>
        </section>

        {/* Stats bar */}
        <section className="bg-[#063B25] border-y border-[rgba(215,227,220,0.1)]">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              {[
                { label: 'Active Jobs', value: '200+' },
                { label: 'Service Listings', value: '150+' },
                { label: 'Registered Users', value: '1,200+' },
                { label: 'Successful Hires', value: '80+' },
              ].map((stat) => (
                <div key={stat.label}>
                  <p className="text-3xl font-extrabold text-[#FF7628]" style={{ fontFamily: 'var(--font-heading)' }}>
                    {stat.value}
                  </p>
                  <p className="text-xs text-[#D7E3DC] mt-1">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Feature cards */}
        <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="text-center mb-14">
            <h2 className="text-3xl sm:text-4xl font-extrabold text-white mb-3" style={{ fontFamily: 'var(--font-heading)' }}>EVERYTHING YOU NEED</h2>
            <p className="text-[#D7E3DC] text-sm max-w-xl mx-auto">
              One platform for your entire professional journey — from building your resume to landing the job.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                icon: (
                  <svg className="h-6 w-6 text-[#FF7628]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                      d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                ),
                title: 'Job Board',
                description: 'Browse hundreds of local job listings from verified employers. Filter by type, location, and salary range.',
                href: '/jobs',
                cta: 'Find Jobs',
              },
              {
                icon: (
                  <svg className="h-6 w-6 text-[#FF7628]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                  </svg>
                ),
                title: 'Service Marketplace',
                description: 'Hire freelancers and service providers for web dev, design, marketing, photography, and more.',
                href: '/services',
                cta: 'Browse Services',
              },
              {
                icon: (
                  <svg className="h-6 w-6 text-[#FF7628]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                ),
                title: 'Resume Builder',
                description: 'Build a beautiful professional resume with 6 original templates and real-time preview. Export as PDF.',
                href: '/resume/builder',
                cta: 'Build Resume',
              },
            ].map((feature) => (
              <div key={feature.title} className="card p-8 flex flex-col hover:shadow-card-hover transition-all duration-200">
                <div className="h-12 w-12 rounded-xl bg-[#063B25] flex items-center justify-center mb-6 border border-[rgba(215,227,220,0.1)]">
                  {feature.icon}
                </div>
                <h3 className="text-xl font-bold text-white mb-3" style={{ fontFamily: 'var(--font-heading)' }}>{feature.title}</h3>
                <p className="text-[#D7E3DC] text-xs leading-relaxed flex-1">{feature.description}</p>
                <Link href={feature.href} className="mt-6">
                  <Button className="w-full bg-[#164B35] hover:bg-[#FF7628] hover:text-white border border-[rgba(215,227,220,0.2)] text-white font-bold transition-all">
                    {feature.cta} →
                  </Button>
                </Link>
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="bg-[#063B25] border-t border-[rgba(215,227,220,0.1)]">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center space-y-6">
            <h2 className="text-3xl font-extrabold uppercase" style={{ fontFamily: 'var(--font-heading)' }}>Ready to get started?</h2>
            <p className="text-[#D7E3DC] text-sm max-w-lg mx-auto">
              Join thousands of job seekers, employers, and service providers on Motif today.
            </p>
            <div className="flex flex-wrap gap-4 justify-center pt-2">
              <Link href="/register">
                <Button size="lg" className="bg-[#FF7628] hover:bg-[#e55a13] text-white font-bold">
                  Create Free Account
                </Button>
              </Link>
              <Link href="/jobs">
                <Button size="lg" variant="ghost" className="border border-[rgba(215,227,220,0.3)] text-white hover:bg-white/10 font-bold">
                  Browse Jobs First
                </Button>
              </Link>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}