"use client";

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

export default function Hero() {
    return (
        <section className="pt-32 pb-0 px-6 md:px-12">
            {/* Main Headline */}
            <div className="max-w-7xl mx-auto py-16 md:py-24">
                <motion.h1 
                    initial={{ y: 40, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ duration: 1, ease: [0.16, 1, 0.3, 1] }}
                    className="editorial-headline text-4xl md:text-6xl lg:text-[5.5rem] text-black uppercase"
                >
                    Dijital Varlık ve Görsel<br />
                    Hikaye <span className="text-primary">Mimarlığı.</span>
                </motion.h1>

                <motion.p 
                    initial={{ y: 20, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ duration: 1, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
                    className="text-[11px] md:text-[13px] tracking-[0.15em] text-black/40 max-w-2xl leading-[2] mt-8"
                >
                    Profesyonel prodüksiyondan akıllı reklam yönetimine kadar markanızın tüm dijital ekosistemini estetikle şekillendiriyoruz.
                </motion.p>
            </div>

            {/* Divider */}
            <motion.div 
                initial={{ scaleX: 0 }}
                animate={{ scaleX: 1 }}
                transition={{ duration: 1.5, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
                className="section-divider origin-left" 
            />

            {/* Bottom info row */}
            <motion.div 
                initial={{ y: 20, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 1, delay: 0.8, ease: [0.16, 1, 0.3, 1] }}
                className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 py-8 gap-8"
            >
                <div className="flex items-center gap-4">
                    <span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Konum</span>
                    <span className="text-[11px] text-black/70">Muğla, Türkiye</span>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-[10px] tracking-[0.2em] uppercase text-black/40">Hizmetler</span>
                    <span className="text-[11px] text-black/70">Drone · Video · Sosyal Medya · Reklam</span>
                </div>
                <div className="flex items-center gap-4 md:justify-end">
                    <Link href="/contact" className="button-primary group">
                        Teklif Al
                        <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                    </Link>
                </div>
            </motion.div>
        </section>
    );
}