// app/contact/page.tsx

import { FaInstagram, FaLinkedin, FaDiscord, FaEnvelope, FaMapMarkerAlt } from 'react-icons/fa';

export default function ContactPage() {
    return (
        <main className="flex flex-col flex-1 relative bg-[#0d1117] overflow-hidden">

            {/* 1. Immersive Mountain Background */}
            <img
                src="/assets/images/snowy_mountain_peaks.jpg"
                alt="Snowy Mountains"
                className="absolute inset-0 w-full h-full object-cover z-0"
            />
            {/* Dark blur overlay so the text and cards remain perfectly readable */}
            <div className="absolute inset-0 bg-[#0d1117]/85 backdrop-blur-md z-0"></div>

            <div className="h-25 shrink-0 z-10"></div>

            <section className="relative z-10 flex-1 flex flex-col justify-center items-center py-12 px-6">

                <div className="mb-12 text-center">
                    <h1 className="text-white text-[40px] md:text-[55px] uppercase font-black tracking-tighter drop-shadow-lg">
                        Find me here!
                    </h1>
                    <p className="text-[#84c0a0] font-mono font-bold tracking-widest mt-2 uppercase">
                        Transmission & Socials
                    </p>
                </div>

                <div className="w-full max-w-3xl bg-white/5 backdrop-blur-xl rounded-[32px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.5)] p-8 md:p-12">

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-12">

                        <div className="flex flex-col gap-8">
                            <h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Direct Info</h3>

                            <div className="flex items-center gap-4 group">
                                <div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30 group-hover:bg-[#84c0a0]/20 transition-all">
                                    <FaEnvelope className="text-[#84c0a0] text-xl" />
                                </div>
                                <div>
                                    <p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Email</p>
                                    <a href="mailto:support@soderberg.tech" className="text-white font-medium hover:text-[#84c0a0] transition-colors break-all">
                                        support@soderberg.tech
                                    </a>
                                </div>
                            </div>

                            <div className="flex items-center gap-4 group">
                                <div className="w-12 h-12 rounded-2xl bg-[#84c0a0]/10 flex items-center justify-center border border-[#84c0a0]/30">
                                    <FaMapMarkerAlt className="text-[#84c0a0] text-xl" />
                                </div>
                                <div>
                                    <p className="text-gray-400 text-xs uppercase font-bold tracking-widest">Location</p>
                                    <p className="text-white font-medium">Höganäs, Sweden</p>
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-col gap-4">
                            <h3 className="text-white text-xl font-bold border-b border-white/10 pb-4 uppercase tracking-wider">Networks</h3>

                            <div className="grid grid-cols-1 gap-3">
                                <a href="https://www.linkedin.com/in/william-s%C3%B6derberg-5b79bb247" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#0077b5]/50 hover:bg-[#0077b5]/10 transition-all group">
                                    <div className="flex items-center gap-3 text-white font-bold">
                                        <FaLinkedin className="text-xl text-[#0077b5]" /> LinkedIn
                                    </div>
                                    <span className="text-gray-500 group-hover:text-[#0077b5] group-hover:translate-x-1 transition-all">→</span>
                                </a>

                                <a href="https://discordapp.com/users/271290165106966528" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#5865F2]/50 hover:bg-[#5865F2]/10 transition-all group">
                                    <div className="flex items-center gap-3 text-white font-bold">
                                        <FaDiscord className="text-xl text-[#5865F2]" /> Discord
                                    </div>
                                    <span className="text-gray-500 group-hover:text-[#5865F2] group-hover:translate-x-1 transition-all">→</span>
                                </a>

                                <a href="https://www.instagram.com/will.i.am.soderberg/" target="_blank" className="flex items-center justify-between p-4 rounded-2xl bg-white/5 border border-white/5 hover:border-[#E1306C]/50 hover:bg-[#E1306C]/10 transition-all group">
                                    <div className="flex items-center gap-3 text-white font-bold">
                                        <FaInstagram className="text-xl text-[#E1306C]" /> Instagram
                                    </div>
                                    <span className="text-gray-500 group-hover:text-[#E1306C] group-hover:translate-x-1 transition-all">→</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div className="mt-12">
                        <a
                            href="mailto:support@soderberg.tech?subject=Contact%20me"
                            className="w-full flex items-center justify-center gap-3 py-5 rounded-2xl bg-[#84c0a0] text-[#0d1117] font-bold text-lg hover:scale-[1.02] active:scale-[0.98] transition-all shadow-[0_0_20px_rgba(132,192,160,0.3)]"
                        >
                            <FaEnvelope /> Send an Email
                        </a>
                    </div>
                </div>
            </section>
        </main>
    );
}