"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { ArrowRight, Calculator, ShieldCheck } from "lucide-react";

import { Button } from "@/components/ui/button";

export function HomeHero() {
  return (
    <section className="relative min-h-[78vh] overflow-hidden">
      <div
        className="absolute inset-0 bg-cover bg-center"
        style={{
          backgroundImage:
            "url('https://images.unsplash.com/photo-1584515933487-779824d29309?auto=format&fit=crop&w=1600&q=80')",
        }}
      />
      <div className="absolute inset-0 bg-emerald-950/60" />

      <div className="relative mx-auto flex min-h-[78vh] w-full max-w-7xl flex-col justify-center px-4 py-16 sm:px-6 lg:px-8">
        <motion.p
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.35 }}
          className="inline-flex w-fit items-center gap-2 rounded-full border border-emerald-100/40 bg-emerald-950/30 px-3 py-1 text-xs text-emerald-50"
        >
          <ShieldCheck className="size-3.5" />
          Hanafi MVP
        </motion.p>
        <motion.h1
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.05 }}
          className="mt-4 max-w-3xl text-4xl font-semibold leading-tight text-white sm:text-5xl"
        >
          AlWirasah
        </motion.h1>
        <motion.p
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.12 }}
          className="mt-3 max-w-2xl text-base text-emerald-50/90 sm:text-lg"
        >
          Islamic inheritance made simple. Calculate net estate and heirs distribution in clear, auditable steps.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="mt-7 flex flex-wrap gap-3"
        >
          <Button asChild className="h-10 bg-accent text-accent-foreground hover:bg-accent/90">
            <Link href="/calculator">
              <Calculator className="size-4" />
              Start Calculator
            </Link>
          </Button>
          <Button asChild variant="outline" className="h-10 border-emerald-100/70 bg-transparent text-white hover:bg-emerald-900/40">
            <Link href="/dashboard">
              View Dashboard
              <ArrowRight className="size-4" />
            </Link>
          </Button>
        </motion.div>
      </div>
    </section>
  );
}