"use client"
import { Navigation } from "@/components/navigation"
import { Footer } from "@/components/footer"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, Calendar, Clock } from "lucide-react"
import { useLanguage } from "@/components/language-context"
import { useTranslation } from "@/lib/i18n"
import { blogPosts } from "@/lib/content"

export default function HomePage() {
  const { currentLang } = useLanguage()
  const { t } = useTranslation(currentLang)
  const featuredPost = blogPosts[0]
  const recentPosts = blogPosts.slice(1, 3)

  return (
    <div className="min-h-screen bg-background">
      <Navigation />

      <main>
        <section className="relative bg-gradient-to-br from-background via-background to-muted/20 py-24 lg:py-32">
          <div className="container mx-auto px-6 max-w-7xl">
            <div className="text-center max-w-5xl mx-auto">
              <h1 className="mb-8 text-5xl md:text-7xl lg:text-8xl font-black text-foreground text-balance leading-[0.9] tracking-tight">
                {t("heroTitle")}
                <span className="text-primary block mt-2">{t("heroTitleAccent")}</span>
              </h1>
              <p className="text-xl md:text-2xl text-muted-foreground text-pretty leading-relaxed mb-12 max-w-4xl mx-auto font-light">
                {t("heroDescription")}
              </p>
              <div className="flex flex-col sm:flex-row gap-6 justify-center">
                <Button
                  size="lg"
                  asChild
                  className="text-lg px-10 py-4 h-auto rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  <Link href="/portfolio">
                    {t("viewPortfolio")} <ArrowRight className="ml-3 h-5 w-5" />
                  </Link>
                </Button>
                <Button
                  variant="outline"
                  size="lg"
                  asChild
                  className="text-lg px-10 py-4 h-auto rounded-xl border-2 hover:bg-muted/50 transition-all duration-300 bg-transparent"
                >
                  <Link href="/projects">{t("exploreProjects")}</Link>
                </Button>
              </div>
            </div>
          </div>
        </section>

        <div className="container mx-auto px-6 py-16 max-w-7xl">
          {featuredPost && (
            <section className="mb-24">
              <div className="flex items-center justify-between mb-12">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">
                  {t("featuredArticle")}
                </h2>
                <Badge variant="secondary" className="text-sm px-4 py-2 rounded-full bg-slate-700 text-white border-0">
                  {t("latest")}
                </Badge>
              </div>

              <Card className="overflow-hidden hover:shadow-2xl transition-all duration-500 border-0 shadow-lg bg-card/50 backdrop-blur-sm">
                <div className="lg:flex">
                  <div className="lg:w-1/2">
                    <Image
                      src={featuredPost.image || "/placeholder.svg"}
                      alt={featuredPost.title}
                      width={800}
                      height={400}
                      className="h-80 lg:h-full w-full object-cover"
                    />
                  </div>
                  <div className="p-10 lg:w-1/2 flex flex-col justify-center">
                    <Badge
                      variant="outline"
                      className="mb-6 w-fit rounded-full px-4 py-2 bg-slate-700 text-white border-0"
                    >
                      {featuredPost.category}
                    </Badge>
                    <CardHeader className="p-0">
                      <CardTitle className="mb-6 text-3xl lg:text-4xl leading-tight font-bold tracking-tight">
                        <Link
                          href={`/blog/${featuredPost.slug}`}
                          className="hover:text-primary transition-colors duration-200"
                        >
                          {featuredPost.title}
                        </Link>
                      </CardTitle>
                      <CardDescription className="text-lg leading-relaxed text-muted-foreground">
                        {featuredPost.excerpt}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="p-0 pt-8">
                      <div className="flex items-center gap-6 text-muted-foreground mb-6">
                        <div className="flex items-center gap-2">
                          <Calendar className="h-4 w-4" />
                          <span className="text-sm">{featuredPost.date}</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock className="h-4 w-4" />
                          <span className="text-sm">{featuredPost.readTime}</span>
                        </div>
                      </div>
                      <div className="flex flex-wrap gap-3 mb-8">
                        {featuredPost.tags.map((tag) => (
                          <Badge
                            key={tag}
                            variant="secondary"
                            className="text-xs px-3 py-1 rounded-full bg-slate-700 text-white border-0"
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                      <Button
                        asChild
                        className="rounded-xl px-6 py-3 shadow-md hover:shadow-lg transition-all duration-300"
                      >
                        <Link href={`/blog/${featuredPost.slug}`}>
                          {t("readArticle")} <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </CardContent>
                  </div>
                </div>
              </Card>
            </section>
          )}

          {recentPosts.length > 0 && (
            <section className="mb-24">
              <div className="flex items-center justify-between mb-12">
                <h2 className="text-4xl md:text-5xl font-bold text-foreground tracking-tight">{t("recentArticles")}</h2>
                <Button
                  variant="ghost"
                  asChild
                  className="text-primary hover:text-primary/80 hover:bg-primary/5 rounded-xl px-6 py-3"
                >
                  <Link href="/blog">
                    {t("viewAllArticles")} <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </div>

              <div className="grid gap-10 md:grid-cols-2">
                {recentPosts.map((post) => (
                  <Card
                    key={post.slug}
                    className="overflow-hidden hover:shadow-xl transition-all duration-500 group border-0 shadow-md bg-card/50 backdrop-blur-sm hover:-translate-y-1"
                  >
                    <div className="relative overflow-hidden">
                      <Image
                        src={post.image || "/placeholder.svg"}
                        alt={post.title}
                        width={600}
                        height={300}
                        className="h-64 w-full object-cover group-hover:scale-105 transition-transform duration-500"
                      />
                      <Badge
                        variant="outline"
                        className="absolute top-6 left-6 bg-slate-700 text-white border-0 shadow-md rounded-full px-4 py-2"
                      >
                        {post.category}
                      </Badge>
                    </div>
                    <CardHeader className="pb-4 p-8">
                      <CardTitle className="text-2xl leading-tight font-bold tracking-tight">
                        <Link href={`/blog/${post.slug}`} className="hover:text-primary transition-colors duration-200">
                          {post.title}
                        </Link>
                      </CardTitle>
                      <CardDescription className="leading-relaxed text-muted-foreground mt-3">
                        {post.excerpt}
                      </CardDescription>
                    </CardHeader>
                    <CardContent className="px-8 pb-8">
                      <div className="flex items-center gap-4 text-sm text-muted-foreground mb-6">
                        <div className="flex items-center gap-1">
                          <Calendar className="h-4 w-4" />
                          <span>{post.date}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="h-4 w-4" />
                          <span>{post.readTime}</span>
                        </div>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        {post.tags.map((tag) => (
                          <Badge
                            key={tag}
                            variant="secondary"
                            className="text-xs px-3 py-1 rounded-full bg-slate-700 text-white border-0"
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </section>
          )}
        </div>

        <section className="bg-gradient-to-br from-primary/5 via-primary/10 to-muted/20 py-20">
          <div className="container mx-auto px-6 max-w-4xl text-center">
            <h2 className="mb-6 text-4xl md:text-5xl font-bold text-foreground tracking-tight">{t("stayConnected")}</h2>
            <p className="mb-10 text-xl text-muted-foreground leading-relaxed max-w-3xl mx-auto">
              {t("newsletterDescription")}
            </p>
            <Button
              size="lg"
              className="bg-primary text-primary-foreground hover:bg-primary/90 text-lg px-10 py-4 h-auto rounded-xl shadow-lg hover:shadow-xl transition-all duration-300"
            >
              {t("subscribeUpdates")}
            </Button>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  )
}