"use client"

import Link from "next/link"
import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useLanguage } from "@/lib/language-context"
import {
  ArrowRight,
  Ship,
  FileCheck,
  Clock,
  Users,
  CheckCircle,
  Anchor,
  MapPin,
  PhoneCall,
  Mail,
  Building,
  Globe,
} from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

// Saudi ports data
const ports = [
  {
    name: "Jeddah Islamic Port",
    location: "Jeddah",
    description: "The largest port on the Red Sea and a major hub for trade",
    image: "/assets/jeddah-1.jpg",
  },
  {
    name: "King Abdulaziz Port",
    location: "Dammam",
    description: "The largest Gulf port in Saudi Arabia",
    image: "/assets/king-1.jpg",
  },
  {
    name: "King Abdullah Port",
    location: "King Abdullah Economic City",
    description: "First privately owned and operated port in the region",
    image: "/assets/king-2.jpg",
  },
  {
    name: "Jubail Commercial Port",
    location: "Jubail",
    description: "Serves the petrochemical and industrial complexes",
    image: "/assets/jubail-1.jpg",
  },
]

// How it works steps
const steps = [
  {
    title: "Submit Request",
    description: "Fill out our easy-to-use clearance request form with your shipment details",
    icon: FileCheck,
  },
  {
    title: "Document Review",
    description: "Our experts review and verify all submitted documentation",
    icon: CheckCircle,
  },
  {
    title: "Customs Processing",
    description: "We handle all customs procedures and requirements",
    icon: Clock,
  },
  {
    title: "Clearance Complete",
    description: "Your shipment is cleared and ready for delivery",
    icon: Ship,
  },
]

// Why choose us features
const features = [
  {
    title: "Fast Processing",
    description: "Quick and efficient clearance process with minimal delays",
    icon: Clock,
  },
  {
    title: "Expert Team",
    description: "Experienced professionals with deep knowledge of customs regulations",
    icon: Users,
  },
  {
    title: "24/7 Support",
    description: "Round-the-clock assistance for all your clearance needs",
    icon: PhoneCall,
  },
  {
    title: "Digital Platform",
    description: "Modern online platform for easy tracking and management",
    icon: Building,
  },
]

export default function Home() {
  const { t, dir, language, setLanguage } = useLanguage()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  return (
    <div className={`flex min-h-screen flex-col`} dir={mounted ? dir : "ltr"}>
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center justify-between">
          <div className="flex items-center gap-2">
            <img src="/assets/logo.png" alt="I-Linker Logo" className="h-auto w-20" />
          </div>
          <nav className="hidden md:flex gap-6">
            <Link href="#features" className="text-sm font-medium hover:text-primary">
              {t("nav.features")}
            </Link>
            <Link href="#how-it-works" className="text-sm font-medium hover:text-primary">
              {t("nav.howItWorks")}
            </Link>
            <Link href="#ports" className="text-sm font-medium hover:text-primary">
              {t("nav.ports")}
            </Link>
            <Link href="#contact" className="text-sm font-medium hover:text-primary">
              {t("nav.contact")}
            </Link>
          </nav>
          <div className="flex items-center gap-4">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="relative">
                  <Globe className="h-5 w-5" />
                  <span className="sr-only">Select language</span>
                  <span className="absolute -bottom-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground">
                    {language.toUpperCase()}
                  </span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setLanguage("en")}>English</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage("ar")}>العربية</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Link href="/login">
              <Button variant="outline">{t("nav.login")}</Button>
            </Link>
            <Link href="/register">
              <Button>{t("nav.register")}</Button>
            </Link>
          </div>
        </div>
      </header>

      <main className="flex-1">
        {/* Hero Section */}
        <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-white to-blue-50">
          <div className="container">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-center">
              <div className="flex flex-col justify-center space-y-4">
                <div className="space-y-2">
                  <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
                    {t("hero.title")}
                  </h1>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl">{t("hero.subtitle")}</p>
                </div>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Link href="/register">
                    <Button size="lg" className="gap-1">
                      {t("hero.getStarted")} <ArrowRight className="h-4 w-4" />
                    </Button>
                  </Link>
                  <Link href="/login?guest=true">
                    <Button size="lg" variant="outline">
                      {t("hero.learnMore")}
                    </Button>
                  </Link>
                </div>
              </div>
              <img
                src="/assets/hero-1.jpg"
                alt="Port Clearance Operations"
                className="mx-auto aspect-video overflow-hidden rounded-xl object-cover object-center sm:w-full lg:order-last"
              />
            </div>
          </div>
        </section>

        {/* Features Section */}
        <section id="features" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">{t("features.title")}</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  {t("features.subtitle")}
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 mt-8">
              <Card>
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <FileCheck className="h-8 w-8 text-primary" />
                  <CardTitle>{t("features.documentation.title")}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{t("features.documentation.description")}</CardDescription>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <Clock className="h-8 w-8 text-primary" />
                  <CardTitle>{t("features.tracking.title")}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{t("features.tracking.description")}</CardDescription>
                </CardContent>
              </Card>
              <Card>
                <CardHeader className="flex flex-row items-center gap-4 pb-2">
                  <Users className="h-8 w-8 text-primary" />
                  <CardTitle>{t("features.security.title")}</CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>{t("features.security.description")}</CardDescription>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* How It Works Section */}
        <section id="how-it-works" className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-blue-50 to-white">
          <div className="container">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">{t("howItWorks.title")}</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  {t("howItWorks.subtitle")}
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4 mt-8">
              <div className="relative">
                <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto">
                  <span className="text-xl font-bold text-primary-foreground">1</span>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-2">{t("howItWorks.step1.title")}</h3>
                  <p className="text-muted-foreground">{t("howItWorks.step1.description")}</p>
                </div>
                <div className="hidden lg:block absolute top-8 left-[60%] w-[80%] h-[2px] bg-primary"></div>
              </div>
              <div className="relative">
                <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto">
                  <span className="text-xl font-bold text-primary-foreground">2</span>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-2">{t("howItWorks.step2.title")}</h3>
                  <p className="text-muted-foreground">{t("howItWorks.step2.description")}</p>
                </div>
                <div className="hidden lg:block absolute top-8 left-[60%] w-[80%] h-[2px] bg-primary"></div>
              </div>
              <div className="relative">
                <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto">
                  <span className="text-xl font-bold text-primary-foreground">3</span>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-2">{t("howItWorks.step3.title")}</h3>
                  <p className="text-muted-foreground">{t("howItWorks.step3.description")}</p>
                </div>
                <div className="hidden lg:block absolute top-8 left-[60%] w-[80%] h-[2px] bg-primary"></div>
              </div>
              <div>
                <div className="w-16 h-16 rounded-full bg-primary flex items-center justify-center mb-6 mx-auto">
                  <span className="text-xl font-bold text-primary-foreground">4</span>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-2">{t("howItWorks.step4.title")}</h3>
                  <p className="text-muted-foreground">{t("howItWorks.step4.description")}</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Why Choose Us Section */}
        <section id="why-choose-us" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
                  {t("whyChooseUs.title")}
                </h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  {t("whyChooseUs.subtitle")}
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 mt-8">
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <Clock className="h-6 w-6 text-primary" />
                  </div>
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2">{t("whyChooseUs.efficiency.title")}</h3>
                  <p className="text-muted-foreground">{t("whyChooseUs.efficiency.description")}</p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <CheckCircle className="h-6 w-6 text-primary" />
                  </div>
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2">{t("whyChooseUs.compliance.title")}</h3>
                  <p className="text-muted-foreground">{t("whyChooseUs.compliance.description")}</p>
                </div>
              </div>
              <div className="flex gap-4">
                <div className="flex-shrink-0">
                  <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                    <Users className="h-6 w-6 text-primary" />
                  </div>
                </div>
                <div>
                  <h3 className="text-xl font-semibold mb-2">{t("whyChooseUs.transparency.title")}</h3>
                  <p className="text-muted-foreground">{t("whyChooseUs.transparency.description")}</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Ports Section */}
        <section id="ports" className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-white to-blue-50">
          <div className="container">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">{t("ports.title")}</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                  {t("ports.subtitle")}
                </p>
              </div>
            </div>
            <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 mt-8">
              <Card className="overflow-hidden">
                <img
                  src="/assets/jeddah-1.jpg"
                  alt="Jeddah Islamic Port"
                  className="w-full h-48 object-cover"
                />
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Anchor className="h-5 w-5 text-primary" />
                    <CardTitle>{t("ports.jeddah.title")}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{t("ports.jeddah.description")}</p>
                </CardContent>
              </Card>
              <Card className="overflow-hidden">
                <img
                  src="/assets/king-1.jpg"
                  alt="King Abdulaziz Port"
                  className="w-full h-48 object-cover"
                />
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Anchor className="h-5 w-5 text-primary" />
                    <CardTitle>{t("ports.dammam.title")}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{t("ports.dammam.description")}</p>
                </CardContent>
              </Card>
              <Card className="overflow-hidden">
                <img
                  src="/assets/king-2.jpg"
                  alt="King Abdullah Port"
                  className="w-full h-48 object-cover"
                />
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Anchor className="h-5 w-5 text-primary" />
                    <CardTitle>{t("ports.yanbu.title")}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{t("ports.yanbu.description")}</p>
                </CardContent>
              </Card>
              <Card className="overflow-hidden">
                <img
                  src="/assets/jubail-1.jpg"
                  alt="Jubail Commercial Port"
                  className="w-full h-48 object-cover"
                />
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Anchor className="h-5 w-5 text-primary" />
                    <CardTitle>{t("ports.jubail.title")}</CardTitle>
                  </div>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground">{t("ports.jubail.description")}</p>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>

        {/* Contact Section */}
        <section id="contact" className="w-full py-12 md:py-24 lg:py-32">
          <div className="container">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 items-start">
              <div className="space-y-4">
                <div className="space-y-2">
                  <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">{t("contact.title")}</h2>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl">{t("contact.subtitle")}</p>
                </div>
                <div className="space-y-4 text-muted-foreground">
                  <div className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-primary" />
                    <span>King Abdullah Economic City, Saudi Arabia</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <PhoneCall className="h-5 w-5 text-primary" />
                    <span>+966 12 000 0000</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Mail className="h-5 w-5 text-primary" />
                    <span>contact@i-linker.sa</span>
                  </div>
                </div>
              </div>
              <Card>
                <CardHeader>
                  <CardTitle>{t("contact.getInTouch")}</CardTitle>
                  <CardDescription>{t("contact.form.message")}</CardDescription>
                </CardHeader>
                <CardContent>
                  <form className="grid gap-4">
                    <div className="grid gap-2">
                      <Label htmlFor="name">{t("contact.form.name")}</Label>
                      <Input id="name" placeholder={t("contact.form.namePlaceholder")} />
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="email">{t("contact.form.email")}</Label>
                      <Input id="email" placeholder={t("contact.form.emailPlaceholder")} type="email" />
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="subject">{t("contact.form.subject")}</Label>
                      <Input id="subject" placeholder={t("contact.form.subjectPlaceholder")} />
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="message">{t("contact.form.message")}</Label>
                      <Textarea
                        id="message"
                        placeholder={t("contact.form.messagePlaceholder")}
                        className="min-h-[100px]"
                      />
                    </div>
                    <Button type="submit">{t("contact.form.submit")}</Button>
                  </form>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </main>

      <footer className="w-full border-t py-6 md:py-0">
        <div className="container flex flex-col gap-6 md:h-24 md:flex-row md:items-center md:justify-between">
          <div className="flex items-center gap-2">
            <Ship className="h-5 w-5 text-primary" />
            <p className="text-sm text-muted-foreground">
              © 2025 I-Linker. {t("footer.rights")}
            </p>
          </div>
          <div className="flex flex-col gap-2 sm:flex-row">
            <Button variant="ghost" size="sm" onClick={() => setLanguage("en")}>
              English
            </Button>
            <Button variant="ghost" size="sm" onClick={() => setLanguage("ar")}>
              العربية
            </Button>
          </div>
          <nav className="flex gap-4 sm:gap-6">
            <Link href="#features" className="text-sm font-medium hover:text-primary">
              {t("nav.features")}
            </Link>
            <Link href="#how-it-works" className="text-sm font-medium hover:text-primary">
              {t("nav.howItWorks")}
            </Link>
            <Link href="#ports" className="text-sm font-medium hover:text-primary">
              {t("nav.ports")}
            </Link>
            <Link href="#contact" className="text-sm font-medium hover:text-primary">
              {t("nav.contact")}
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  )
}