"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { motion } from "framer-motion";

export function Hero() {
  return (
    <section className="relative pt-32 pb-20 overflow-hidden">
      <Container>
        <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Heading as="h1" className="text-5xl md:text-7xl font-bold tracking-tight">
              Temukan Mentor yang Tepat untuk <span className="text-indigo-600">Kariermu</span>
            </Heading>
            <Subheading className="mt-6 text-xl text-neutral-600 max-w-2xl mx-auto">
              Akses langsung ke praktisi industri terbaik. Mulai sesi mentoring 1:1 untuk akselerasi karier dan skill kamu hari ini.
            </Subheading>
            <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
              <Button size="lg" className="bg-indigo-600 hover:bg-indigo-700 text-white px-8 h-14 text-lg rounded-full" asChild>
                <Link href="/onboarding">Temukan Mentor (2 Menit)</Link>
              </Button>
              <Button size="lg" variant="outline" className="px-8 h-14 text-lg rounded-full" asChild>
                <Link href="/mentors">Lihat Semua Mentor</Link>
              </Button>
            </div>
            <div className="mt-12 flex items-center justify-center gap-8 text-sm text-neutral-500">
              <div className="flex items-center gap-2">
                <span className="flex -space-x-2">
                  {[1, 2, 3, 4].map((i) => (
                    <div key={i} className="w-8 h-8 rounded-full border-2 border-white bg-neutral-200 overflow-hidden">
                      <img src={`https://i.pravatar.cc/100?img=${i + 10}`} alt="User" />
                    </div>
                  ))}
                </span>
                <span>500+ Mentee Terbantu</span>
              </div>
              <div className="flex items-center gap-1">
                <span className="text-yellow-400">★★★★★</span>
                <span>4.9/5 Rating</span>
              </div>
            </div>
          </motion.div>
        </div>
      </Container>
      
      {/* Background Decoration */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 opacity-10 pointer-events-none">
        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-indigo-400 rounded-full blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-green-400 rounded-full blur-[120px]" />
      </div>
    </section>
  );
}