import { Hero } from "@/components/hero";
import { HowItWorks } from "@/components/how-it-works";
import { Footer } from "@/components/footer";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/badge";
import Link from "next/link";
import { Star } from "lucide-react";

const featuredMentors = [
  {
    name: "Budi Santoso",
    role: "Senior Product Manager at GoTo",
    image: "https://i.pravatar.cc/150?u=budi",
    rating: 4.9,
    sessions: 120,
    tags: ["Product Strategy", "Career Growth"],
  },
  {
    name: "Siska Putri",
    role: "Lead UX Designer at Traveloka",
    image: "https://i.pravatar.cc/150?u=siska",
    rating: 5.0,
    sessions: 85,
    tags: ["UI/UX", "Portfolio Review"],
  },
  {
    name: "Andi Wijaya",
    role: "Senior Software Engineer at Shopee",
    image: "https://i.pravatar.cc/150?u=andi",
    rating: 4.8,
    sessions: 210,
    tags: ["Backend", "System Design"],
  },
];

export default function Home() {
  return (
    <main>
      <Hero />
      
      <HowItWorks />

      <section className="py-24">
        <Container>
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div className="max-w-2xl">
              <Heading>Mentor Pilihan Untukmu</Heading>
              <Subheading>Belajar langsung dari mereka yang sudah sukses di bidangnya.</Subheading>
            </div>
            <Button variant="outline" asChild>
              <Link href="/mentors">Lihat Semua Mentor</Link>
            </Button>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredMentors.map((mentor, index) => (
              <Card key={index} className="overflow-hidden group hover:border-indigo-200 transition-colors">
                <div className="aspect-[4/3] relative overflow-hidden">
                  <img 
                    src={mentor.image} 
                    alt={mentor.name}
                    className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                  />
                </div>
                <CardContent className="p-6">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="font-bold text-xl">{mentor.name}</h3>
                    <div className="flex items-center gap-1 text-sm font-medium">
                      <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      {mentor.rating}
                    </div>
                  </div>
                  <p className="text-neutral-600 text-sm mb-4">{mentor.role}</p>
                  <div className="flex flex-wrap gap-2 mb-6">
                    {mentor.tags.map((tag) => (
                      <Badge key={tag} variant="secondary" className="bg-indigo-50 text-indigo-700 border-none">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                  <div className="flex items-center justify-between pt-4 border-t">
                    <span className="text-sm text-neutral-500">{mentor.sessions} Sesi Selesai</span>
                    <Button variant="ghost" className="text-indigo-600 hover:text-indigo-700 p-0 h-auto font-semibold" asChild>
                      <Link href={`/mentors/${index}`}>Lihat Profil →</Link>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </Container>
      </section>

      <section className="py-24 bg-indigo-600 text-white">
        <Container>
          <div className="max-w-4xl mx-auto text-center">
            <Heading className="text-white mb-6">Siap untuk Melangkah Lebih Jauh?</Heading>
            <Subheading className="text-indigo-100 mb-10">
              Jangan biarkan kariermu stagnan. Temukan mentor yang akan membantumu mencapai potensi maksimal.
            </Subheading>
            <Button size="lg" className="bg-white text-indigo-600 hover:bg-neutral-100 px-10 h-14 text-lg rounded-full" asChild>
              <Link href="/onboarding">Mulai Sekarang</Link>
            </Button>
          </div>
        </Container>
      </section>

      <Footer />
    </main>
  );
}