"use client"

import { useState, useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { WelcomeScreen } from "@/components/welcome-screen"
import { useAuth } from "@/contexts/supabase-auth-context"
import {
  Cpu,
  HardDrive,
  Monitor,
  Zap,
  Users,
  BookOpen,
  Star,
  Wrench,
  LayoutGrid,
  MessageSquare,
  Quote,
  ArrowRight,
  CheckCircle2,
  Search,
  Sparkles,
} from "lucide-react"

export default function HomePage() {
  const { user, isLoading } = useAuth()
  const router = useRouter()

  // Redirect logged-in users to dashboard
  useEffect(() => {
    if (!isLoading && user) {
      router.push("/dashboard")
    }
  }, [user, isLoading, router])
  const [showWelcome, setShowWelcome] = useState(true)
  const [isFaded, setIsFaded] = useState(false)

  // Scroll fade: sections fade in when they enter viewport
  const [scrollInView, setScrollInView] = useState<Record<string, boolean>>({
    trust: false,
    how: false,
    features: false,
    services: false,
    footer: false,
  })
  const trustRef = useRef<HTMLElement>(null)
  const howRef = useRef<HTMLElement>(null)
  const featuresRef = useRef<HTMLElement>(null)
  const servicesRef = useRef<HTMLElement>(null)
  const footerRef = useRef<HTMLElement>(null)

  useEffect(() => {
    const hasSeenWelcome = typeof window !== 'undefined' && localStorage.getItem('buildmate-welcome-seen') === 'true'
    if (hasSeenWelcome) {
      setShowWelcome(false)
      setIsFaded(true)
    }
  }, [])

  useEffect(() => {
    if (!isFaded) return
    const entries = [
      { ref: trustRef, id: 'trust' },
      { ref: howRef, id: 'how' },
      { ref: featuresRef, id: 'features' },
      { ref: servicesRef, id: 'services' },
      { ref: footerRef, id: 'footer' },
    ]
    const observer = new IntersectionObserver(
      (obsEntries) => {
        obsEntries.forEach((entry) => {
          const id = entries.find(e => e.ref.current === entry.target)?.id
          if (id && entry.isIntersecting) {
            setScrollInView(prev => ({ ...prev, [id]: true }))
          }
        })
      },
      { rootMargin: '0px 0px -60px 0px', threshold: 0.08 }
    )
    entries.forEach(({ ref }) => {
      if (ref.current) observer.observe(ref.current)
    })
    return () => observer.disconnect()
  }, [isFaded])

  const handleWelcomeComplete = () => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('buildmate-welcome-seen', 'true')
    }
    setShowWelcome(false)
    setTimeout(() => setIsFaded(true), 100)
  }

  const scrollFadeClass = (id: string) =>
    `transition-all duration-700 ease-out ${scrollInView[id] ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`

  // Don't render landing page if user is logged in (will redirect)
  if (!isLoading && user) {
    return null
  }

  return (
    <>
      {showWelcome && <WelcomeScreen onComplete={handleWelcomeComplete} />}
      <div className={`min-h-screen transition-opacity duration-1000 ${isFaded ? 'opacity-100' : 'opacity-0'}`}>

        {/* Hero — style: clear hierarchy, balanced layout, generous spacing */}
        <section className={`relative min-h-[80vh] flex flex-col md:flex-row md:items-center overflow-hidden transition-opacity duration-1000 ${isFaded ? 'opacity-100 animate-fade-in-up' : 'opacity-0'}`}>
          <div className="absolute inset-0 z-0 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 dark:from-slate-950 dark:via-indigo-950/90 dark:to-slate-950" />

          <div className="relative z-10 container mx-auto px-4 py-14 md:py-20 max-w-6xl flex flex-col md:flex-row md:items-center md:gap-14 lg:gap-20">
            <div className="flex-1 text-center md:text-left">
              <p className="text-sm md:text-base font-semibold text-blue-300/95 uppercase tracking-wider mb-4">
                See why builders use BuildMate
              </p>
              <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-[2.75rem] font-bold text-white mb-4 md:mb-5 leading-tight tracking-tight">
                Unlock Your Perfect PC Build With Smart Compatibility & Expert Recommendations
              </h1>
              <p className="text-lg md:text-xl text-indigo-200/95 mb-8 max-w-xl md:max-w-none leading-relaxed">
                PC Builder & Compatibility Checker — for Gaming, Office & Academic. We check every part, suggest the best options, and guide you step-by-step.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start mb-10">
                <Button size="lg" asChild className="bg-blue-500 hover:bg-blue-600 text-white shadow-md hover:shadow-lg transition-all border-0 font-semibold text-base px-8 rounded-lg">
                  <Link href="/builder">
                    <Cpu className="mr-2 h-5 w-5" />
                    Start Building
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild className="bg-transparent border-2 border-white/40 text-white hover:bg-white/10 hover:border-white/60 rounded-lg">
                  <Link href="/builds">
                    <Users className="mr-2 h-5 w-5" />
                    Browse Builds
                  </Link>
                </Button>
              </div>
              {/* Hero stats — ConvertFlow-style */}
              <div className="flex flex-wrap gap-6 md:gap-10 text-white/90">
                <div>
                  <p className="text-2xl md:text-3xl font-bold text-white">100%</p>
                  <p className="text-xs md:text-sm text-slate-400">Compatibility checked</p>
                </div>
                <div>
                  <p className="text-2xl md:text-3xl font-bold text-white">Gaming · Office · Academic</p>
                  <p className="text-xs md:text-sm text-slate-400">Builds for every purpose</p>
                </div>
                <div>
                  <p className="text-2xl md:text-3xl font-bold text-white">Step-by-step</p>
                  <p className="text-xs md:text-sm text-slate-400">From pick parts to first boot</p>
                </div>
              </div>
            </div>

            <div className="flex-1 flex justify-center md:justify-end mt-10 md:mt-0">
              <div className="relative w-full max-w-sm">
                <div className="aspect-square max-h-[280px] rounded-xl bg-slate-800/70 border border-white/10 flex items-center justify-center p-8 shadow-xl">
                  <div className="grid grid-cols-2 gap-4 w-full h-full place-items-center">
                    <div className="flex flex-col items-center gap-1 text-emerald-400">
                      <Zap className="h-10 w-10" />
                      <span className="text-xs font-medium text-white/80">Compatibility</span>
                    </div>
                    <div className="flex flex-col items-center gap-1 text-blue-400">
                      <Cpu className="h-10 w-10" />
                      <span className="text-xs font-medium text-white/80">Components</span>
                    </div>
                    <div className="flex flex-col items-center gap-1 text-amber-400">
                      <Star className="h-10 w-10" />
                      <span className="text-xs font-medium text-white/80">Recommendations</span>
                    </div>
                    <div className="flex flex-col items-center gap-1 text-rose-400">
                      <Monitor className="h-10 w-10" />
                      <span className="text-xs font-medium text-white/80">Your Build</span>
                    </div>
                  </div>
                </div>
                <div className="absolute -bottom-2 -right-2 rounded-lg bg-emerald-500/20 border border-emerald-400/30 px-3 py-2 text-sm font-medium text-emerald-300">
                  ✓ Compatible
                </div>
                <div className="absolute -top-1 -left-1 rounded-lg bg-blue-500/20 border border-blue-400/30 px-3 py-2 text-sm font-medium text-blue-300">
                  Gaming · Office · Academic
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Trust strip — solid bar, clear copy */}
        <section
          ref={trustRef}
          className={`relative z-10 py-10 md:py-12 bg-blue-600 dark:bg-blue-700 ${scrollFadeClass('trust')}`}
        >
          <div className="container mx-auto px-4 max-w-6xl">
            <div className="flex flex-col md:flex-row flex-wrap items-center justify-center gap-10 md:gap-14">
              <div className="flex items-center gap-4 text-white">
                <div className="rounded-xl bg-white/20 p-3">
                  <Zap className="h-6 w-6 text-white" />
                </div>
                <div>
                  <p className="font-bold text-white">Smart Compatibility</p>
                  <p className="text-sm text-white/90">Every part checked before you buy</p>
                </div>
              </div>
              <div className="hidden md:block w-px h-12 bg-white/30" />
              <div className="flex items-center gap-4 text-white">
                <div className="rounded-xl bg-white/20 p-3">
                  <HardDrive className="h-6 w-6 text-white" />
                </div>
                <div>
                  <p className="font-bold text-white">Curated Components</p>
                  <p className="text-sm text-white/90">Verified database, real pricing</p>
                </div>
              </div>
              <div className="hidden md:block w-px h-12 bg-white/30" />
              <div className="flex items-center gap-4 text-white">
                <div className="rounded-xl bg-white/20 p-3">
                  <BookOpen className="h-6 w-6 text-white" />
                </div>
                <div>
                  <p className="font-bold text-white">Step-by-Step Guide</p>
                  <p className="text-sm text-white/90">From unboxing to first boot</p>
                </div>
              </div>
              <div className="hidden md:block w-px h-12 bg-white/30" />
              <div className="flex flex-col items-center md:items-start text-center md:text-left">
                <p className="text-xl font-bold text-white">Gaming · Office · Academic</p>
                <p className="text-sm text-white/90">Builds tailored to your purpose</p>
              </div>
            </div>
          </div>
        </section>

        {/* How it works — ConvertFlow-style */}
        <section
          ref={howRef}
          className={`py-16 md:py-20 bg-slate-50 dark:bg-slate-900/60 border-y border-slate-200/50 dark:border-slate-700/50 ${scrollFadeClass('how')}`}
        >
          <div className="container mx-auto px-4 max-w-6xl">
            <h2 className="text-2xl md:text-3xl font-bold text-center text-slate-900 dark:text-white mb-3">
              How it works
            </h2>
            <p className="text-center text-slate-600 dark:text-slate-400 mb-12 max-w-2xl mx-auto">
              Guide your build from idea to finished PC with focused steps—no guesswork.
            </p>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="flex flex-col items-center text-center">
                <div className="rounded-full bg-indigo-500/15 p-4 mb-4">
                  <Search className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />
                </div>
                <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Pick your parts</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">Choose CPU, GPU, RAM, and more from a curated database.</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="rounded-full bg-emerald-500/15 p-4 mb-4">
                  <Zap className="h-8 w-8 text-emerald-600 dark:text-emerald-400" />
                </div>
                <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Check compatibility</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">Algorithms verify every combination so nothing conflicts.</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="rounded-full bg-amber-500/15 p-4 mb-4">
                  <Sparkles className="h-8 w-8 text-amber-600 dark:text-amber-400" />
                </div>
                <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Get recommendations</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">CSP and graph-based suggestions for your budget and use case.</p>
              </div>
              <div className="flex flex-col items-center text-center">
                <div className="rounded-full bg-blue-500/15 p-4 mb-4">
                  <CheckCircle2 className="h-8 w-8 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 className="font-semibold text-slate-900 dark:text-white mb-2">Build with confidence</h3>
                <p className="text-sm text-slate-600 dark:text-slate-400">Follow the step-by-step guide from unboxing to first boot.</p>
              </div>
            </div>
          </div>
        </section>

      {/* Features — Drive builders from idea to finished PC */}
      <section
        ref={featuresRef}
        className={`py-20 bg-white dark:bg-slate-900/50 ${scrollFadeClass('features')}`}
      >
        <div className="container mx-auto px-4 max-w-6xl">
          <h2 className="text-2xl md:text-3xl font-bold text-center text-slate-900 dark:text-white mb-3">
            Drive your build from idea to finished PC
          </h2>
          <p className="text-center text-slate-600 dark:text-slate-400 mb-14 max-w-2xl mx-auto leading-relaxed">
            BuildMate helps you plan, check, and build your custom PC—with compatibility guaranteed and recommendations for every use case.
          </p>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Card: top image block, tag, title, description, full-width button */}
            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-400' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-blue-500/20 to-indigo-500/20 dark:from-blue-600/30 dark:to-indigo-600/30 flex items-center justify-center rounded-t-xl">
                <Zap className="h-14 w-14 text-blue-600 dark:text-blue-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Smart Compatibility</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  CSP and graph-based algorithms check component compatibility, preventing costly mistakes before you buy.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/builder">View details</Link>
                </Button>
              </div>
            </article>

            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-500' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-emerald-500/20 to-teal-500/20 dark:from-emerald-600/30 dark:to-teal-600/30 flex items-center justify-center rounded-t-xl">
                <HardDrive className="h-14 w-14 text-emerald-600 dark:text-emerald-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Curated Components</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  Extensive database of verified PC components with real-time pricing and availability from trusted retailers.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/builder">View details</Link>
                </Button>
              </div>
            </article>

            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-600' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-violet-500/20 to-purple-500/20 dark:from-violet-600/30 dark:to-purple-600/30 flex items-center justify-center rounded-t-xl">
                <Users className="h-14 w-14 text-violet-600 dark:text-violet-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Community Driven</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  Share builds, get feedback, and discover popular configurations from our community of PC enthusiasts.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/builds">View details</Link>
                </Button>
              </div>
            </article>

            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-700' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-orange-500/20 to-amber-500/20 dark:from-orange-600/30 dark:to-amber-600/30 flex items-center justify-center rounded-t-xl">
                <BookOpen className="h-14 w-14 text-orange-600 dark:text-orange-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Core feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Step-by-Step Tutorial</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  Comprehensive, beginner-friendly guide with videos, diagrams, and steps. Learn to build your PC from start to finish.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/guides/pc-assembly-guide">View details</Link>
                </Button>
              </div>
            </article>

            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-800' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-red-500/20 to-rose-500/20 dark:from-red-600/30 dark:to-rose-600/30 flex items-center justify-center rounded-t-xl">
                <Monitor className="h-14 w-14 text-red-600 dark:text-red-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Performance Insights</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  Get detailed performance predictions and benchmarks for your custom configuration.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/builder">View details</Link>
                </Button>
              </div>
            </article>

            <article className={`rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800/50 shadow-md overflow-hidden flex flex-col transition-shadow hover:shadow-lg ${isFaded ? 'opacity-100 animate-fade-in-up animation-delay-900' : 'opacity-0'}`}>
              <div className="aspect-[4/3] bg-gradient-to-br from-amber-500/20 to-yellow-500/20 dark:from-amber-600/30 dark:to-yellow-600/30 flex items-center justify-center rounded-t-xl">
                <Star className="h-14 w-14 text-amber-600 dark:text-amber-400" />
              </div>
              <div className="p-5 flex-1 flex flex-col">
                <span className="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400 mb-2">Feature</span>
                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">Expert Recommendations</h4>
                <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-5 flex-1">
                  Graph-based matching and CSP algorithms for optimal component suggestions by budget, use case, and performance.
                </p>
                <Button asChild className="w-full rounded-lg bg-blue-500 hover:bg-blue-600 text-white font-medium">
                  <Link href="/builder">View details</Link>
                </Button>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* Our Services — floating box */}
      <section
        ref={servicesRef}
        className={`relative py-16 md:py-24 ${scrollFadeClass('services')}`}
      >
        <div className="container mx-auto px-4 max-w-6xl">
          <h2 className="text-2xl md:text-3xl font-bold text-center text-slate-900 dark:text-white mb-3">
            Everything you need in one place
          </h2>
          <p className="text-center text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto">
            Plan, build, and manage your custom PC with our tools and guides.
          </p>

          <div className="relative max-w-4xl mx-auto">
            {/* Floating box — shadow + lift */}
            <div className="relative rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-xl shadow-slate-200/50 dark:shadow-slate-900/50 p-6 md:p-8 -translate-y-1 hover:shadow-2xl hover:shadow-slate-200/60 dark:hover:shadow-slate-900/60 transition-all duration-300">
              <div className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-2 rounded-full bg-amber-500/10 dark:bg-amber-500/20 border border-amber-200 dark:border-amber-800 px-4 py-1.5">
                <LayoutGrid className="h-4 w-4 text-amber-600 dark:text-amber-400" />
                <span className="text-sm font-medium text-amber-800 dark:text-amber-200">Services</span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
                <Link
                  href="/builder"
                  className="flex items-center gap-3 rounded-xl p-4 border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:border-blue-200 dark:hover:border-blue-800 transition-all group"
                >
                  <div className="rounded-lg bg-blue-500/10 p-2">
                    <Wrench className="h-5 w-5 text-blue-600 dark:text-blue-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">PC Builder</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">Build & check compatibility</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-slate-400 group-hover:translate-x-1 transition-transform shrink-0" />
                </Link>
                <Link
                  href="/builds"
                  className="flex items-center gap-3 rounded-xl p-4 border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:border-purple-200 dark:hover:border-purple-800 transition-all group"
                >
                  <div className="rounded-lg bg-purple-500/10 p-2">
                    <Users className="h-5 w-5 text-purple-600 dark:text-purple-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-slate-900 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400">Community Builds</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">Browse & share builds</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-slate-400 group-hover:translate-x-1 transition-transform shrink-0" />
                </Link>
                <Link
                  href="/guides"
                  className="flex items-center gap-3 rounded-xl p-4 border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:border-amber-200 dark:hover:border-amber-800 transition-all group"
                >
                  <div className="rounded-lg bg-amber-500/10 p-2">
                    <BookOpen className="h-5 w-5 text-amber-600 dark:text-amber-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-slate-900 dark:text-white group-hover:text-amber-600 dark:group-hover:text-amber-400">Build Guides</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">Step-by-step tutorials</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-slate-400 group-hover:translate-x-1 transition-transform shrink-0" />
                </Link>
                <Link
                  href="/support"
                  className="flex items-center gap-3 rounded-xl p-4 border border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100 dark:hover:bg-slate-800/50 hover:border-indigo-200 dark:hover:border-indigo-800 transition-all group"
                >
                  <div className="rounded-lg bg-indigo-500/10 p-2">
                    <MessageSquare className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="font-semibold text-slate-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400">Support</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">Help & tickets</p>
                  </div>
                  <ArrowRight className="h-4 w-4 text-slate-400 group-hover:translate-x-1 transition-transform shrink-0" />
                </Link>
              </div>
              <div className="mt-6 pt-6 border-t border-slate-100 dark:border-slate-800 flex flex-wrap items-center justify-center gap-4">
                <Button variant="outline" size="sm" asChild>
                  <Link href="/compare">Compare Builds</Link>
                </Button>
                <Button variant="outline" size="sm" asChild>
                  <Link href="/services">View all services →</Link>
                </Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials — social proof */}
      <section className={`py-20 bg-slate-100/80 dark:bg-slate-800/40 transition-opacity duration-1000 ${isFaded ? "opacity-100" : "opacity-0"}`}>
        <div className="container mx-auto px-4 max-w-6xl">
          <h2 className="text-2xl md:text-3xl font-bold text-center text-slate-900 dark:text-white mb-3">
            What builders say about BuildMate
          </h2>
          <p className="text-center text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto">
            Join thousands who planned their PC with BuildMate.
          </p>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                quote: "The compatibility checker saved me from buying the wrong RAM. First build and everything posted on first try.",
                name: "Alex R.",
                role: "First-time builder · Gaming",
                avatar: "A",
              },
              {
                quote: "Community builds gave me so many ideas. Ended up with a solid office setup within my budget.",
                name: "Maria S.",
                role: "Office build · Budget-conscious",
                avatar: "M",
              },
              {
                quote: "Step-by-step guide was clear and the builder kept my parts in check. Highly recommend for beginners.",
                name: "Jake T.",
                role: "Academic build · Student",
                avatar: "J",
              },
            ].map((t, i) => (
              <div
                key={i}
                className={`rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 p-6 shadow-sm hover:shadow-md transition-shadow ${isFaded ? "opacity-100 animate-fade-in-up" : "opacity-0"}`}
                style={{ animationDelay: `${400 + i * 100}ms` }}
              >
                <Quote className="h-8 w-8 text-slate-300 dark:text-slate-600 mb-4" />
                <p className="text-slate-700 dark:text-slate-300 mb-6 leading-relaxed">
                  &ldquo;{t.quote}&rdquo;
                </p>
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-blue-500/20 dark:bg-blue-500/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-semibold">
                    {t.avatar}
                  </div>
                  <div>
                    <p className="font-semibold text-slate-900 dark:text-white">{t.name}</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">{t.role}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer — style: clear CTA block, simple bar, max-width */}
      <footer
        ref={footerRef}
        className={`bg-slate-900 dark:bg-slate-950 ${scrollFadeClass('footer')}`}
      >
        <div className="container mx-auto px-4 py-16 max-w-6xl">
          <div className="text-center mb-14">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-4 tracking-tight">Ready to build your dream PC?</h2>
            <p className="text-slate-400 mb-8 max-w-lg mx-auto leading-relaxed">
              Smart compatibility, curated parts, step-by-step guidance. Join builders who trust BuildMate for Gaming, Office & Academic builds.
            </p>
            <Button size="lg" className="bg-blue-500 hover:bg-blue-600 text-white border-0 font-semibold rounded-lg shadow-md" asChild>
              <Link href="/register">Start For Free</Link>
            </Button>
          </div>
          <div className="border-t border-slate-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="flex items-center gap-2">
              <Cpu className="h-5 w-5 text-slate-400" />
              <span className="font-semibold text-white">BuildMate</span>
            </div>
            <div className="flex flex-wrap items-center justify-center gap-6 text-sm">
              <Link href="/services" className="text-slate-400 hover:text-white transition-colors">
                Our Services
              </Link>
              <Link href="/support" className="text-slate-400 hover:text-white transition-colors">
                Support
              </Link>
            </div>
            <p className="text-slate-500 text-sm">
              © 2025 BuildMate. PC Builder & Compatibility Checker — for Gaming, Office & Academic.
            </p>
          </div>
        </div>
      </footer>
      </div>
    </>
  )
}