import Link from 'next/link'
import { ArrowRight, Search, Zap, Target, Sparkles } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { DotPattern } from '@/components/magicui/dot-pattern'
import { HeroShader } from '@/components/hero-shader'
import { FeaturesSection } from '@/components/features-section'
import { HeroSection } from '@/components/hero-section'
import { cn } from '@/lib/utils'

export default function LandingPage() {
    return (
        <div className="relative min-h-screen bg-background overflow-hidden font-sans">
            <DotPattern
                className={cn(
                    "[mask-image:radial-gradient(1000px_circle_at_center,white,transparent)]",
                    "opacity-50"
                )}
            />

            {/* Header */}
            <header className="border-b border-border/40 backdrop-blur-md sticky top-0 z-50">
                <div className="container mx-auto max-w-7xl px-4 py-4 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                        <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                            <Search className="h-4 w-4" />
                        </div>
                        <span className="font-semibold text-foreground tracking-tight">Sanati</span>
                    </div>
                    <nav className="flex items-center gap-4">
                        <Link href="/dashboard" className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
                            Dashboard
                        </Link>
                        <Link href="/auth">
                            <Button size="sm" className="font-medium">Get Started</Button>
                        </Link>
                    </nav>
                </div>
            </header>

            {/* Hero */}
            <section className="relative w-full min-h-[75vh] overflow-hidden">
                {/* Hero */}
                <section className="relative w-full min-h-[75vh] overflow-hidden">
                    <HeroShader />
                    <HeroSection />
                </section>
            </section>

            {/* Features */}
            <FeaturesSection />

            {/* CTA */}
            <section className="container mx-auto max-w-7xl px-4 py-24 relative z-10">
                <div className="rounded-3xl border border-border bg-gradient-to-b from-muted/50 to-muted/10 p-12 text-center relative overflow-hidden">
                    <div className="relative z-10">
                        <h2 className="text-3xl font-bold text-foreground mb-4">
                            Ready to find your customers?
                        </h2>
                        <p className="text-muted-foreground mb-8 max-w-lg mx-auto">
                            Stop guessing. Start finding people who are already looking for solutions like yours.
                        </p>
                        <Link href="/auth">
                            <Button size="default" className="px-6">Get Started Free</Button>
                        </Link>
                    </div>
                    <DotPattern
                        className={cn(
                            "[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
                            "opacity-50"
                        )}
                    />
                </div>
            </section>

            {/* Footer */}
            <footer className="border-t border-border/40 backdrop-blur-sm relative z-10">
                <div className="container mx-auto max-w-7xl px-4 py-8">
                    <p className="text-center text-sm text-muted-foreground">
                        Sanati — Built for indie hackers and founders
                    </p>
                </div>
            </footer>
        </div>
    )
}