import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Navbar } from "./navbar";
import {
  ChartColumn,
  Zap,
  Crosshair,
  Brain,
  Database,
  Shield,
  ArrowRight,
} from "lucide-react";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-background text-foreground">
      {/* Navbar */}
      <Navbar />

      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-primary/5 to-transparent pointer-events-none" />
        <div className="max-w-4xl mx-auto px-6 py-24 text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-secondary/50 text-xs font-mono text-muted-foreground mb-6">
            <Zap className="w-3 h-3 text-primary" />
            Built for quants &amp; ML engineers
          </div>
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-4">
            Annotate OHLC Charts.
            <br />
            <span className="text-primary">Train Smarter Models.</span>
          </h1>
          <p className="text-muted-foreground max-w-2xl mx-auto mb-8 leading-relaxed">
            A precision tool for labeling candlestick patterns, building
            training datasets, and running ML predictions — all in a fast,
            keyboard-driven workspace.
          </p>
          <div className="flex items-center justify-center gap-3">
            <Button size="lg" className="font-mono text-sm gap-2" asChild>
              <Link href="/register">
                Start Annotating <ArrowRight className="w-4 h-4" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="font-mono text-sm"
              asChild
            >
              <Link href="/app">Try Demo</Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="max-w-5xl mx-auto px-6 py-20">
        <div className="text-center mb-12">
          <h2 className="text-2xl font-bold tracking-tight mb-2">
            Everything you need
          </h2>
          <p className="text-muted-foreground text-sm">
            From annotation to model training, in one interface.
          </p>
        </div>
        <div className="grid md:grid-cols-3 gap-6">
          {/* Card 1 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <Crosshair className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">Precision Annotation</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Draw rectangles, spans, and lines directly on OHLC candlestick
              charts with pixel-perfect accuracy.
            </p>
          </div>
          {/* Card 2 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <Brain className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">ML Training Pipeline</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Export annotated datasets in structured formats ready for model
              training and backtesting.
            </p>
          </div>
          {/* Card 3 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <ChartColumn className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">Real-Time Predictions</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Run trained models against visible candles and visualize
              predictions with confidence overlays.
            </p>
          </div>
          {/* Card 4 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <Database className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">Multi-Chart Workspace</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Load multiple CSV datasets, switch between charts, and manage
              annotations per session.
            </p>
          </div>
          {/* Card 5 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <Zap className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">Keyboard-First Workflow</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Shortcuts for every tool — R, S, L, D, T, B — designed for speed
              and flow.
            </p>
          </div>
          {/* Card 6 */}
          <div className="group p-5 rounded-lg border border-border bg-card hover:border-primary/30 hover:shadow-md transition-all duration-200">
            <div className="w-9 h-9 rounded-md bg-primary/10 flex items-center justify-center mb-3 group-hover:bg-primary/20 transition-colors">
              <Shield className="w-4 h-4 text-primary" />
            </div>
            <h3 className="font-semibold text-sm mb-1">Export &amp; Persist</h3>
            <p className="text-xs text-muted-foreground leading-relaxed">
              Export annotations as JSON. Your data, your format, your models.
            </p>
          </div>
        </div>
      </section>

      {/* Stats Bar */}
      <section className="border-y border-border bg-card/30">
        <div className="max-w-4xl mx-auto px-6 py-12 grid grid-cols-3 gap-6 text-center">
          <div>
            <div className="text-2xl font-mono font-bold text-primary">50ms</div>
            <div className="text-xs text-muted-foreground mt-1">
              Render latency
            </div>
          </div>
          <div>
            <div className="text-2xl font-mono font-bold text-primary">6</div>
            <div className="text-xs text-muted-foreground mt-1">
              Shortcut keys
            </div>
          </div>
          <div>
            <div className="text-2xl font-mono font-bold text-primary">JSON</div>
            <div className="text-xs text-muted-foreground mt-1">
              Export format
            </div>
          </div>
        </div>
      </section>

      {/* Footer CTA */}
      <section className="max-w-3xl mx-auto px-6 py-20 text-center">
        <h2 className="text-2xl font-bold mb-3">Ready to label?</h2>
        <p className="text-muted-foreground text-sm mb-6">
          No credit card required. Start annotating charts in seconds.
        </p>
        <Button size="lg" className="font-mono text-sm gap-2" asChild>
          <Link href="/register">
            Create Free Account <ArrowRight className="w-4 h-4" />
          </Link>
        </Button>
      </section>

      {/* Footer */}
      <footer className="border-t border-border py-6">
        <div className="max-w-6xl mx-auto px-6 flex items-center justify-between text-xs text-muted-foreground font-mono">
          <div className="flex items-center gap-2">
            <ChartColumn className="w-3.5 h-3.5" />
            <span>CandleAnnotator</span>
          </div>
          <span>© 2026</span>
        </div>
      </footer>
    </div>
  );
}