import Link from "next/link";
import Image from "next/image";

export default function ServicesDetailHero() {
    return (
        <section className="relative bg-white pt-16 pb-20 px-4 md:px-10 lg:px-40 flex justify-center">
            <div className="max-w-[1200px] w-full grid md:grid-cols-2 gap-12 items-center">
                <div className="flex flex-col gap-6 text-left">
                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-services-primary/10 w-fit">
                        <span className="size-2 rounded-full bg-services-primary"></span>
                        <span className="text-xs font-semibold uppercase tracking-wider text-charcoal/70">Custom Development</span>
                    </div>
                    <h1 className="text-charcoal text-4xl md:text-5xl lg:text-6xl font-black leading-tight tracking-[-0.033em]">
                        Custom Software <span className="text-services-primary">Development Solutions</span>
                    </h1>
                    <p className="text-slate-custom text-lg font-normal leading-relaxed max-w-lg">
                        Tailored software strategies to accelerate your digital transformation and drive business growth with enterprise-grade precision.
                    </p>
                    <div className="flex flex-wrap gap-4 pt-4">
                        <Link href="/contact" className="flex items-center justify-center rounded-xl h-12 px-8 bg-services-primary hover:bg-primary-dark transition-colors text-charcoal text-base font-bold shadow-lg shadow-services-primary/20">
                            Schedule Consultation
                        </Link>
                        <Link href="/portfolio/case-study" className="flex items-center justify-center rounded-xl h-12 px-8 bg-white border border-neutral-light hover:border-services-primary text-charcoal text-base font-bold transition-all">
                            View Portfolio
                        </Link>
                    </div>
                </div>
                <div className="relative w-full aspect-square md:aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl bg-neutral-100 group">
                    <div className="absolute inset-0 bg-gradient-to-tr from-charcoal/40 to-transparent z-10 transition-opacity group-hover:opacity-0"></div>
                    <Image
                        src="/images/services/web-dev.png"
                        alt="Custom Software Development Illustration"
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-105"
                        sizes="(max-width: 768px) 100vw, 50vw"
                    />
                </div>
            </div>
        </section>
    );
}
