"use client";

import { motion } from "framer-motion";
import { ArrowRight, PlayCircle, ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Container } from "@/components/container";
import { DashboardPreview } from "@/components/dashboard-preview";
import { useLanguage } from "@/lib/i18n/context";

export function Hero() {
  const { t } = useLanguage();

  return (
    <section
      id="top"
      className="relative overflow-hidden bg-radial-spotlight pt-16 pb-20 sm:pt-24 sm:pb-28"
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-grid [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,black_10%,transparent_75%)]"
      />

      <Container className="relative flex flex-col items-center gap-14">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: "easeOut" }}
          className="flex max-w-3xl flex-col items-center gap-6 text-center"
        >
          <span className="inline-flex items-center gap-2 rounded-full border border-border bg-secondary/60 px-3.5 py-1.5 text-xs font-medium text-muted-foreground">
            <span className="size-1.5 rounded-full bg-brand-cyan" />
            {t.hero.badge}
          </span>

          <h1 className="text-balance text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl">
            {t.hero.headline1} {t.hero.headline2}{" "}
            <span className="text-gradient-brand">{t.hero.headlineGradient}</span>
          </h1>

          <p className="text-balance max-w-2xl text-lg text-muted-foreground">
            {t.hero.subtitle}
          </p>

          <div className="flex flex-col items-center gap-4 sm:flex-row">
            <Button size="lg" className="group" asChild>
              <a href="/register">
                {t.hero.startFree}
                <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
              </a>
            </Button>
            <Button size="lg" variant="outline" asChild>
              <a href="#product-intelligence">
                <PlayCircle className="size-4" />
                {t.hero.viewDemo}
              </a>
            </Button>
          </div>

          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
            <ShieldCheck className="size-3.5" />
            {t.hero.noCreditCard}
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 32 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.15, ease: "easeOut" }}
          className="w-full max-w-5xl"
        >
          <DashboardPreview />
        </motion.div>
      </Container>
    </section>
  );
}