import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";

export function Landing() {
  const navigate = useNavigate();

  // YouTube video configuration - update this when your video is ready
  const youtubeVideoId = "VJBMRebMHtI"; // EdgeLLM Demo Video
  const videoTitle = "EdgeLLM Demo - Offline AI in Action";

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center">
              <img
                src="/assets/logo.png"
                alt="EdgeLLM Logo"
                className="h-20 w-20"
                onError={(e) => {
                  console.error("Logo failed to load");
                  e.currentTarget.style.display = "none";
                }}
              />
            </div>

            {/* Navigation Links */}
            <div className="hidden md:flex items-center space-x-8">
              <span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
                Home
              </span>
              <button
                onClick={() => navigate("/technology")}
                className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
              >
                Technology
              </button>
              <button
                onClick={() => navigate("/usecases")}
                className="text-gray-700 hover:text-purple-600 font-medium transition-colors"
              >
                Use Cases
              </button>
              <Button
                variant="outline"
                onClick={() => navigate("/mydevice")}
                className="border-purple-600 text-purple-600 hover:bg-purple-50"
              >
                My Device
              </Button>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden">
              <Button variant="ghost" size="sm">
                <Menu className="h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <div className="relative py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          {/* Main Headline */}
          <div className="relative mb-6">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold text-black leading-tight">
              Offline AI that
              <br />
              works where the
              <br />
              cloud cannot
            </h1>
          </div>

          {/* Subtitle */}
          <p className="text-lg md:text-xl text-purple-700 font-semibold mb-8 max-w-3xl mx-auto">
            AI that stays reliable, private, and resilient in any environment
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-3 justify-center items-center mb-8">
            <Button
              size="lg"
              className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 text-lg font-medium"
              onClick={() => navigate("/usecases")}
            >
              Learn More
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-purple-600 text-purple-600 hover:bg-purple-50 px-8 py-3 text-lg font-medium"
              onClick={() => navigate("/mydevice")}
            >
              I already have a device
            </Button>
          </div>
        </div>
      </div>

      {/* Features Section */}
      <div className="py-12 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {/* Always Available & Reliable */}
            <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
              <div className="mb-6">
                <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <img
                    src="/assets/24h.png"
                    alt="Always Available & Reliable"
                    className="h-10 w-10"
                    onError={(e) => {
                      console.error("24h icon failed to load");
                      e.currentTarget.style.display = "none";
                    }}
                  />
                </div>
                <h3 className="text-lg font-bold text-black mb-3">
                  Always Available & Reliable
                </h3>
              </div>
              <p className="text-gray-600 text-sm leading-relaxed">
                Cloud AI fails without internet and latency can cost lives. Our
                offline AI runs instantly on-device, ready anywhere from remote
                locations to safety-critical moments.
              </p>
            </div>

            {/* Privacy & Security */}
            <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
              <div className="mb-6">
                <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <img
                    src="/assets/privacy.png"
                    alt="Privacy & Security"
                    className="h-10 w-10"
                    onError={(e) => {
                      console.error("Privacy icon failed to load");
                      e.currentTarget.style.display = "none";
                    }}
                  />
                </div>
                <h3 className="text-lg font-bold text-black mb-3">
                  Privacy & Security
                </h3>
              </div>
              <p className="text-gray-600 text-sm leading-relaxed">
                Cloud AI requires uploading sensitive data. Offline AI keeps all
                processing local, protecting personal privacy and enterprise
                security.
              </p>
            </div>

            {/* Affordable & Powerful */}
            <div className="bg-white rounded-2xl p-6 shadow-lg border border-gray-200 text-center">
              <div className="mb-6">
                <div className="w-16 h-16 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                  <img
                    src="/assets/reliablity.png"
                    alt="Affordable & Powerful"
                    className="h-10 w-10"
                    onError={(e) => {
                      console.error("Affordable icon failed to load");
                      e.currentTarget.style.display = "none";
                    }}
                  />
                </div>
                <h3 className="text-lg font-bold text-black mb-3">
                  Affordable & Powerful
                </h3>
              </div>
              <p className="text-gray-600 text-sm leading-relaxed">
                Cloud AI charges expensive per-token fees that scale with usage.
                Offline AI provides unlimited conversations with premium
                performance without recurring costs.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Video Section */}
      <div className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-black mb-4">
            See EdgeLLM in Action
          </h2>
          <p className="text-lg text-gray-600 mb-8">
            Watch how our offline AI delivers instant responses without internet
            connection
          </p>

          {/* YouTube Video Container */}
          <div className="relative rounded-2xl overflow-hidden shadow-2xl">
            <div className="aspect-video">
              <iframe
                className="w-full h-full"
                src={`https://www.youtube.com/embed/${youtubeVideoId}?rel=0&modestbranding=1&showinfo=0`}
                title={videoTitle}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            </div>
          </div>

          {/* Video Caption */}
          <p className="text-sm text-gray-500 mt-4">
            Demo: Offline AI responding instantly in remote locations without
            internet
          </p>
        </div>
      </div>

      {/* Footer */}
      <footer className="bg-white text-gray-600 py-8 px-4 sm:px-6 lg:px-8 border-t border-gray-200">
        <div className="max-w-6xl mx-auto text-center">
          <div className="flex items-center justify-center mb-4">
            <img
              src="/assets/logo.png"
              alt="EdgeLLM Logo"
              className="h-12 w-12"
              onError={(e) => {
                console.error("Footer logo failed to load");
                e.currentTarget.style.display = "none";
              }}
            />
          </div>
          <p className="text-gray-600 mb-6">
            Need help? Contact us to get customized device and services
          </p>
          <div className="flex justify-center space-x-6">
            <a href="#" className="text-gray-500 hover:text-gray-700">
              Privacy Policy
            </a>
            <a href="#" className="text-gray-500 hover:text-gray-700">
              Terms of Service
            </a>
            <a href="#" className="text-gray-500 hover:text-gray-700">
              Support
            </a>
          </div>
        </div>
      </footer>
    </div>
  );
}