"use client";

import Link from "next/link";
import { ArrowRight, Shield, Globe, Zap, LineChart, LogIn } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function Home() {
  return (
    <div className="flex flex-col min-h-screen">
      {/* Header Navigation */}
      <header className="py-4 px-6 md:px-10 flex items-center justify-between border-b">
        <div className="flex items-center gap-2">
          <span className="font-bold text-2xl">Ember</span>
        </div>
        <nav className="hidden md:flex gap-6 items-center">
          <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
            Features
          </Link>
          <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
            Benefits
          </Link>
          <Link href="/auth/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
            <Button variant="ghost">
              <LogIn className="h-4 w-4 mr-2" />
              Log In
            </Button>
          </Link>
          <Link href="/auth/login">
            <Button>Get Started</Button>
          </Link>
        </nav>
        <div className="md:hidden">
          <Button variant="ghost" size="icon">
            <span className="sr-only">Toggle menu</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <line x1="4" x2="20" y1="12" y2="12" />
              <line x1="4" x2="20" y1="6" y2="6" />
              <line x1="4" x2="20" y1="18" y2="18" />
            </svg>
          </Button>
        </div>
      </header>

      {/* Hero Section */}
      <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10">
        <div className="space-y-4 max-w-3xl">
          <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
            Streamlined E-commerce <span className="text-orange-500">Management</span>
          </h1>
          <p className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto">
            Ember provides everything you need to manage your e-commerce business efficiently in one place.
          </p>
        </div>
        <div className="flex flex-col sm:flex-row gap-4">
          <Link href="/dashboard">
            <Button size="lg" className="gap-2">
              Go to Dashboard
              <ArrowRight className="h-4 w-4" />
            </Button>
          </Link>
          <Link href="/auth/register">
            <Button size="lg" variant="outline">
              Create Account
            </Button>
          </Link>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-6 md:px-10 bg-muted/40">
        <div className="max-w-6xl mx-auto space-y-10">
          <div className="text-center space-y-4">
            <h2 className="text-3xl md:text-4xl font-bold">Powerful Features</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Everything you need to manage orders, track metrics, and grow your business.
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            <Card>
              <CardHeader>
                <div className="p-2 w-fit rounded-md bg-primary/10">
                  <Shield className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Secure Transactions</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Process payments securely with built-in encryption and fraud detection measures to protect your business and customers.
                </CardDescription>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <div className="p-2 w-fit rounded-md bg-primary/10">
                  <LineChart className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Order Tracking</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Manage and track orders from receipt to delivery with our intuitive order management system.
                </CardDescription>
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <div className="p-2 w-fit rounded-md bg-primary/10">
                  <Zap className="h-6 w-6 text-primary" />
                </div>
                <CardTitle className="mt-4">Fast Performance</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section id="benefits" className="py-20 px-6 md:px-10">
        <div className="max-w-6xl mx-auto space-y-10">
          <div className="text-center space-y-4">
            <h2 className="text-3xl md:text-4xl font-bold">Why Choose Ember</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">
              Our platform is designed to make e-commerce management simple and efficient.
            </p>
          </div>
          <div className="grid md:grid-cols-2 gap-10">
            <div className="space-y-4">
              <h3 className="text-xl font-semibold">Centralized Management</h3>
              <p className="text-muted-foreground">
                Manage all aspects of your e-commerce business from a single dashboard.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-xl font-semibold">Advanced Analytics</h3>
              <p className="text-muted-foreground">
                Gain insights into your business with detailed analytics and reporting tools.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-xl font-semibold">Customer Management</h3>
              <p className="text-muted-foreground">
                Keep track of customer information and purchase history to provide better service.
              </p>
            </div>
            <div className="space-y-4">
              <h3 className="text-xl font-semibold">Inventory Control</h3>
              <p className="text-muted-foreground">
                Manage your inventory with precision to avoid stock-outs and overstocking.
              </p>
            </div>
          </div>
          <div className="flex justify-center mt-10">
            <Link href="/dashboard">
              <Button size="lg">Start Now</Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-10 px-6 md:px-10 border-t">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
          <div className="space-y-4">
            <h3 className="font-bold text-lg">Ember</h3>
            <p className="text-sm text-muted-foreground">
              The complete e-commerce management solution for modern businesses.
            </p>
          </div>
          <div className="space-y-4">
            <h3 className="font-bold text-lg">Navigation</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Home
                </Link>
              </li>
              <li>
                <Link href="#features" className="text-sm text-muted-foreground hover:text-foreground">
                  Features
                </Link>
              </li>
              <li>
                <Link href="#benefits" className="text-sm text-muted-foreground hover:text-foreground">
                  Benefits
                </Link>
              </li>
            </ul>
          </div>
          <div className="space-y-4">
            <h3 className="font-bold text-lg">Resources</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Documentation
                </Link>
              </li>
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  API
                </Link>
              </li>
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Support
                </Link>
              </li>
            </ul>
          </div>
          <div className="space-y-4">
            <h3 className="font-bold text-lg">Legal</h3>
            <ul className="space-y-2">
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Terms
                </Link>
              </li>
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Privacy
                </Link>
              </li>
              <li>
                <Link href="#" className="text-sm text-muted-foreground hover:text-foreground">
                  Cookies
                </Link>
              </li>
            </ul>
          </div>
        </div>
        <div className="mt-10 text-center text-sm text-muted-foreground">
          <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}