import { ArrowRight, Sparkles } from "lucide-react"
import { PageShell } from "@/components/tools/PageShell"
import { PageHero } from "@/components/tools/PageHero"
import { ToolGrid } from "@/components/tools/ToolGrid"
import { CategoryCard } from "@/components/tools/CategoryCard"
import { FAQ } from "@/components/tools/FAQ"
import { Seo } from "@/i18n/Seo"
import { LocalizedLink } from "@/i18n/LocalizedLink"
import { InteractiveHoverButton } from "@/components/ui/interactive-hover-button"
import { useTools, useCategories } from "@/hooks/useTools"
import { useLocale } from "@/i18n/LocaleProvider"
import { canonicalUrl } from "@/i18n/paths"
import { HTML_LANG } from "@/i18n/locales"

const Index = () => {
  const { loc, t } = useLocale()
  const { data: tools = [] } = useTools()
  const { data: categories = [] } = useCategories()
  const featured = tools.filter((x) => x.featured)
  const latest = tools.slice(0, 6)
  const homeUrl = canonicalUrl(loc, "home")
  const toolsUrl = canonicalUrl(loc, "tools")
  const catCount = (slug: string) => tools.filter((x) => x.category === slug).length

  return (
    <PageShell>
      <Seo
        page="home"
        jsonLd={[
          { "@context": "https://schema.org", "@type": "WebSite", name: "codegic", url: homeUrl, description: t("seo.home.desc"), inLanguage: HTML_LANG[loc], potentialAction: { "@type": "SearchAction", target: `${toolsUrl}?q={search_term_string}`, "query-input": "required name=search_term_string" } },
          { "@context": "https://schema.org", "@type": "Organization", name: "Codegic", url: "https://codegic.de", logo: "https://codegic.de/icon-512x512.png" },
        ]}
      />

      <PageHero
        eyebrow={t("home.eyebrow")}
        title={<>{t("home.title.lead")} <span className="text-muted-foreground">{t("home.title.accent")}</span></>}
        description={t("home.desc", { tools: tools.length, cats: categories.length })}
      >
        <div className="flex flex-col sm:flex-row gap-3">
          <LocalizedLink page="tools" aria-label={t("home.cta.explore")}>
            <InteractiveHoverButton text={t("home.cta.explore")} className="w-full sm:w-auto" />
          </LocalizedLink>
          <LocalizedLink page="submit" aria-label={t("home.cta.submit")}>
            <InteractiveHoverButton text={t("home.cta.submit")} className="w-full sm:w-auto" />
          </LocalizedLink>
        </div>
      </PageHero>

      {featured.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14 lg:py-20">
          <div className="flex items-end justify-between mb-6 sm:mb-8 gap-4">
            <div>
              <div className="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-muted-foreground mb-2">
                <Sparkles className="h-3.5 w-3.5" aria-hidden="true" />
                {t("home.featured.eyebrow")}
              </div>
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight">{t("home.featured.title")}</h2>
            </div>
            <LocalizedLink page="tools" className="hidden sm:inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground whitespace-nowrap">
              {t("home.featured.viewAll")} <ArrowRight className="h-3.5 w-3.5" />
            </LocalizedLink>
          </div>
          <ToolGrid tools={featured} />
        </section>
      )}

      <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14 lg:py-20">
        <div className="mb-6 sm:mb-8">
          <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight mb-2">{t("home.cats.title")}</h2>
          <p className="text-muted-foreground text-sm sm:text-base">{t("home.cats.desc")}</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
          {categories.map((c) => <CategoryCard key={c.slug} category={c} count={catCount(c.slug)} />)}
        </div>
      </section>

      {latest.length > 0 && (
        <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14 lg:py-20">
          <div className="mb-6 sm:mb-8">
            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight mb-2">{t("home.latest.title")}</h2>
            <p className="text-muted-foreground text-sm sm:text-base">{t("home.latest.desc")}</p>
          </div>
          <ToolGrid tools={latest} />
          <div className="mt-8 sm:hidden">
            <LocalizedLink page="tools" className="inline-flex items-center gap-1 text-sm text-foreground">
              {t("home.latest.viewAll")} <ArrowRight className="h-3.5 w-3.5" />
            </LocalizedLink>
          </div>
        </section>
      )}

      <FAQ
        title={t("home.faq.title")}
        items={[
          { question: t("home.faq.q1"), answer: t("home.faq.a1") },
          { question: t("home.faq.q2"), answer: t("home.faq.a2") },
          { question: t("home.faq.q3"), answer: t("home.faq.a3") },
          { question: t("home.faq.q4"), answer: t("home.faq.a4") },
        ]}
      />
    </PageShell>
  )
}

export default Index