import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { ArrowRight, Search, Zap, Target, Sparkles } from 'lucide-react'

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b border-border">
        <div className="container mx-auto max-w-6xl 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">Sanati</span>
          </div>
          <nav className="flex items-center gap-4">
            <Link href="/dashboard" className="text-sm text-muted-foreground hover:text-foreground">
              Dashboard
            </Link>
            <Link href="/auth">
              <Button size="sm">Get Started</Button>
            </Link>
          </nav>
        </div>
      </header>

      {/* Hero */}
      <section className="container mx-auto max-w-6xl px-4 py-24 lg:py-32">
        <div className="flex flex-col items-center text-center space-y-8">
          <Badge variant="secondary" className="px-4 py-1.5">
            <Sparkles className="mr-1 h-3 w-3" />
            AI-Powered Research
          </Badge>

          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground">
            Find Your Next Customers
            <br />
            <span className="text-muted-foreground">Before They Know They Need You</span>
          </h1>

          <p className="max-w-2xl text-lg text-muted-foreground">
            Sanati analyzes your product and finds people on Reddit, Hacker News, and forums
            who are actively expressing needs that your solution solves.
          </p>

          <div className="flex flex-col sm:flex-row gap-4">
            <Link href="/auth">
              <Button size="lg" className="gap-2">
                Start Finding Opportunities
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="border-t border-border bg-muted/50">
        <div className="container mx-auto max-w-6xl px-4 py-24">
          <div className="grid md:grid-cols-3 gap-8">
            <div className="space-y-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <Zap className="h-5 w-5 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground">AI Analysis</h3>
              <p className="text-muted-foreground">
                We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <Search className="h-5 w-5 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground">Smart Dorking</h3>
              <p className="text-muted-foreground">
                Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.
              </p>
            </div>

            <div className="space-y-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <Target className="h-5 w-5 text-primary" />
              </div>
              <h3 className="text-lg font-semibold text-foreground">Scored Leads</h3>
              <p className="text-muted-foreground">
                Each opportunity is scored by relevance and comes with suggested engagement approaches.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container mx-auto max-w-6xl px-4 py-24">
        <div className="rounded-2xl border border-border bg-muted/50 p-12 text-center">
          <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="lg">Get Started Free</Button>
          </Link>
        </div>
      </section>

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