"use client";

import Link from "next/link";
import { BookOpen, ArrowRight } from "lucide-react";
import { useTranslation } from "@/lib/hooks/use-translation";

export function HeroSection() {
  const { t } = useTranslation("LANDING");

  return (
    <section className="relative min-h-[500px] bg-gradient-to-b from-indigo-50 to-white">
      {/* Decorative background circles */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -right-20 -top-20 h-72 w-72 rounded-full bg-indigo-100/50 blur-3xl" />
        <div className="absolute -left-10 bottom-10 h-56 w-56 rounded-full bg-indigo-100/40 blur-3xl" />
      </div>

      <div className="relative mx-auto flex max-w-7xl flex-col items-center justify-center px-4 py-24 text-center sm:px-6 sm:py-32 lg:px-8">
        <div className="mb-6 flex items-center gap-2 rounded-full bg-indigo-100 px-4 py-2">
          <BookOpen className="h-5 w-5 text-indigo-600" />
          <span className="text-sm font-medium text-indigo-700">
            {t("hero.badge_text", "Paper Submission, Review & Publishing Platform")}
          </span>
        </div>

        <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
          <span className="block text-indigo-600">
            {t("hero.brand_name", "शोध संचयन")}
          </span>
          <span className="mt-2 block text-2xl font-semibold text-gray-600 sm:text-3xl">
            {t("hero.subtitle", "Academic Paper Publishing Platform")}
          </span>
        </h1>

        <p className="mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
          {t("hero.description", "Shodh Sanchayan is a dedicated platform where researchers can submit their papers in both Hindi and English.")}
        </p>

        <div className="mt-10 flex flex-col gap-4 sm:flex-row">
          <Link
            href="/submit"
            className="inline-flex items-center justify-center gap-2 rounded-lg bg-indigo-600 px-6 py-3 text-base font-semibold text-white shadow-md hover:bg-indigo-700 transition-colors"
          >
            {t("hero.cta_submit", "Submit Paper")}
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link
            href="/journals"
            className="inline-flex items-center justify-center gap-2 rounded-lg border border-indigo-200 bg-white px-6 py-3 text-base font-semibold text-indigo-600 shadow-sm hover:bg-indigo-50 transition-colors"
          >
            {t("hero.cta_browse", "Browse Journals")}
          </Link>
        </div>
      </div>
    </section>
  );
}