"use client"

import Link from "next/link"
import { useState } from "react"
import { ArrowRight } from "lucide-react"
import { useTranslation, type Language } from "@/lib/i18n"

export function Footer() {
  const [currentLang, setCurrentLang] = useState<Language>("en")
  const t = useTranslation(currentLang)

  return (
    <footer className="bg-muted/30 border-t border-border/40">
      <div className="container mx-auto px-6 py-16 max-w-7xl">
        <div className="grid gap-12 md:grid-cols-3">
          {/* Bio Section */}
          <div>
            <div className="flex items-center space-x-3 mb-6">
              <div className="h-10 w-10 rounded-full bg-gradient-to-br from-primary to-primary/80"></div>
              <span className="text-2xl font-bold text-foreground">Nhi Vo</span>
            </div>
            <p className="text-sm font-medium text-muted-foreground mb-4">{t.t("businessStrategist")}</p>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Strategic business partner enabling meaningful change through clear insight, system redesign, and stakeholder-centered solutions across hospitality, creative, and consulting sectors.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h3 className="font-semibold text-foreground mb-4">{t.t("quickLinks")}</h3>
            <ul className="space-y-3">
              <li>
                <Link href="/" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("home")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
              <li>
                <Link href="/about" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("about")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
              <li>
                <Link href="/portfolio" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("portfolio")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
              <li>
                <Link href="/projects" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("projects")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
              <li>
                <Link href="/blog" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("blog")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
              <li>
                <Link href="/contact" className="text-sm text-muted-foreground hover:text-primary transition-colors flex items-center">
                  {t.t("contact")} <ArrowRight className="ml-2 h-3 w-3" />
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact Section */}
          <div>
            <h3 className="font-semibold text-foreground mb-4">{t.t("connect")}</h3>
            <div className="space-y-3">
              <div className="flex items-center space-x-3">
                <div className="h-4 w-4 rounded-full bg-primary/20 flex items-center justify-center">
                  <div className="h-2 w-2 rounded-full bg-primary"></div>
                </div>
                <a 
                  href="mailto:nhivo2504@gmail.com" 
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  nhivo2504@gmail.com
                </a>
              </div>
              <div className="flex items-center space-x-3">
                <div className="h-4 w-4 rounded-full bg-primary/20 flex items-center justify-center">
                  <div className="h-2 w-2 rounded-full bg-primary"></div>
                </div>
                <a 
                  href="https://linkedin.com/in/nhiivo" 
                  target="_blank" 
                  rel="noopener noreferrer"
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  linkedin.com/in/nhivo
                </a>
              </div>
              <div className="flex items-center space-x-3">
                <div className="h-4 w-4 rounded-full bg-primary/20 flex items-center justify-center">
                  <div className="h-2 w-2 rounded-full bg-primary"></div>
                </div>
                <a 
                  href="tel:+84908372168" 
                  className="text-sm text-muted-foreground hover:text-primary transition-colors"
                >
                  +84 908 372 168
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="border-t border-border/40 mt-12 pt-8">
          <p className="text-sm text-muted-foreground text-center">© 2024 Nhi Vo. {t.t("allRightsReserved")}</p>
        </div>
      </div>
    </footer>
  )
}