import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { isAuthenticated } from "@/lib/auth";
import { ExternalLink, ArrowRight, LineChart, ShieldCheck, Zap, Bold } from "lucide-react";

export function HomePage() {
  const navigate = useNavigate();
  const authenticated = isAuthenticated();

  return (
    <div className="flex flex-col gap-12">
      <section className="pt-12 pb-16 md:pt-20 md:pb-28">
        <div className="text-center space-y-6">
          <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
            IoT Plotter
            <span className="text-primary">.</span>
          </h1>
          <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto">
            Monitor, visualize, and analyze your IoT data in real-time with our easy-to-use platform
          </p>
          <div className="flex flex-wrap justify-center gap-4 pt-4">
            <Button
              size="lg"
              onClick={() => navigate(authenticated ? "/dashboard" : "/register")}
              className="h-12 px-6"
            >
              {authenticated ? "Dashboard" : "Get Started"}{" "}
              <ArrowRight className="ml-2 h-4 w-4" />
            </Button>

            {!authenticated && (
              <Button
                variant="outline"
                size="lg"
                onClick={() => navigate("/login")}
                className="h-12 px-6"
              >
                Login
              </Button>
            )}

            <Button
              variant="outline"
              size="sm"
              onClick={() => window.open("https://io-doc.monasefloadbalancer.ir", "_blank")}
              className="h-12"
            >
              <ExternalLink className="mr-2 h-6 w-6" />
              API Documentation
            </Button>
          </div>
        </div>
      </section>

      <section className="py-10">
        <div className="grid gap-8 md:grid-cols-3">
          <div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
            <LineChart className="h-12 w-12 text-primary mb-4" />
            <h3 className="text-xl font-semibold mb-2">Real-time Visualization</h3>
            <p className="text-muted-foreground">
              Monitor your IoT device data in real-time with interactive charts and customizable
              dashboards
            </p>
          </div>

          <div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
            <ShieldCheck className="h-12 w-12 text-primary mb-4" />
            <h3 className="text-xl font-semibold mb-2">Secure Communication</h3>
            <p className="text-muted-foreground">
              Industry-standard encryption and authentication for all your IoT communications
            </p>
          </div>

          <div className="flex flex-col items-center text-center p-6 rounded-lg border bg-card shadow-sm">
            <Zap className="h-12 w-12 text-primary mb-4" />
            <h3 className="text-xl font-semibold mb-2">Simple Integration</h3>
            <p className="text-muted-foreground">
              Easy-to-use API with comprehensive documentation for quick integration with any device
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}