"use client";

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

export default function Hero() {
  return (
    <section className="relative pt-12 lg:pt-24 pb-16 lg:pb-24">
      <div className="max-w-5xl mx-auto px-6 lg:px-10 text-center">
        <motion.div
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full glass text-xs font-medium text-brand-200 mb-6"
        >
          <Sparkles className="w-3.5 h-3.5 text-brand-300" />
          Profesyonel Sunucu Tasarım Hizmetleri
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.05 }}
          className="text-4xl sm:text-6xl lg:text-7xl font-extrabold leading-[1.05] tracking-tight"
        >
          <span className="heading-gradient block">Source Setups</span>
          <span className="text-white/85 block mt-2 text-3xl sm:text-5xl lg:text-6xl">
            Tasarım Hizmetleri
          </span>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.15 }}
          className="mt-6 text-base sm:text-lg lg:text-xl text-brand-300 max-w-3xl mx-auto leading-relaxed"
        >
          Hızlı, Kaliteli ve Profesyonel Tasarımlar İle Sunucunuza Yön Verin.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.25 }}
          className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3"
        >
          <Link href="/portfolio" className="btn-primary">
            <ArrowRight className="w-4 h-4" />
            Portfolyoyu Görüntüle
          </Link>
          <Link href="#yorumlar" className="btn-secondary">
            <MessageSquareQuote className="w-4 h-4" />
            Müşteri Yorumları
          </Link>
        </motion.div>
      </div>
    </section>
  );
}