"use client";

import React from "react";
import Link from "next/link";
import { Phone, ArrowRight } from "lucide-react";

export default function FindUs() {
    return (
        <section className="py-16 bg-zinc-50 border-t border-zinc-100 relative overflow-hidden">
            {/* Premium decorative ambient glows */}
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-brand-accent/20 rounded-full blur-3xl pointer-events-none -mr-48 -mb-48" />
            <div className="absolute bottom-0 left-0 w-96 h-96 bg-brand-accent/20 rounded-full blur-3xl pointer-events-none -ml-48 -mb-48" />

            <div className="max-w-[1200px] mx-auto px-6 sm:px-12 lg:px-16 relative z-10">
                <div className="flex flex-col xl:flex-row items-center justify-between gap-8 xl:gap-12">

                    {/* Supporting Text Block */}
                    <div className="max-w-2xl text-center xl:text-left">
                        <div className="flex items-center justify-center xl:justify-start gap-4 mb-4">
                            <span className="w-8 h-[2px] bg-brand-accent rounded-full"></span>
                            <span className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-accent">Get in Touch</span>
                        </div>
                        <h2 className="text-3xl md:text-4xl font-heading font-black text-brand-dark uppercase tracking-tight leading-[1.1] mb-4">
                            Ready to Elevate <br className="hidden sm:inline" /> Your Roofing Project?
                        </h2>
                        <p className="text-xs md:text-sm text-zinc-500 font-sans leading-relaxed max-w-xl">
                            Request a custom quote or contact our technical team directly. We are here to bring high-performance, durable roofing solutions to your architecture.
                        </p>
                    </div>

                    {/* CTA Buttons Container */}
                    <div className="flex flex-col sm:flex-row items-center gap-4 w-full sm:w-auto">
                        <Link
                            href="/contact#quotation"
                            className="w-full sm:w-auto inline-flex items-center justify-center bg-brand-accent hover:bg-brand-dark text-white px-8 py-4 rounded-xl text-[11px] font-semibold uppercase tracking-[0.2em] transition-all duration-300 hover:scale-105 active:scale-95 shadow-[0_10px_20px_-5px_rgba(177,32,40,0.4)] group cursor-pointer"
                        >
                            Get a Quote
                            <ArrowRight className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                        </Link>
                        
                        <a
                            href="tel:+94762200200"
                            className="w-full sm:w-auto inline-flex items-center justify-center bg-white border border-zinc-200 text-brand-dark hover:border-brand-dark hover:bg-zinc-50 px-8 py-4 rounded-xl text-[12px] font-bold uppercase tracking-[0.2em] transition-all duration-300 hover:scale-105 active:scale-95 group cursor-pointer"
                        >
                            <Phone className="w-4 h-4 mr-2 text-brand-accent group-hover:scale-110 transition-transform duration-300 t" />
                            +94 76 2200 200
                        </a>
                    </div>

                </div>
            </div>
        </section>
    );
}