"use client";

import React, { useState, useEffect } from "react";
import {
    Code2,
    Smartphone,
    Server,
    Cloud,
    ArrowRight,
    Menu,
    X,
    CheckCircle,
    Zap,
    Layers,
    Database,
    Terminal,
    Boxes,
    LayoutTemplate,
    Workflow,
    HardDrive,
    Globe,
    Play,
    Shield,
    RefreshCw,
    Cpu,
    Sparkles,
    MousePointer2,
    Box,
    Send,
    MessageSquare
} from "lucide-react";

// --- Custom Brand Icons ---
const Icons = {
    React: ({ className }: { className?: string }) => (
        <svg viewBox="-10.5 -9.45 21 18.9" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} style={{ color: '#61DAFB' }}>
            <circle cx="0" cy="0" r="2" fill="currentColor"></circle>
            <g stroke="currentColor" strokeWidth="1" fill="none">
                <ellipse rx="10" ry="4.5"></ellipse>
                <ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse>
                <ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse>
            </g>
        </svg>
    ),
    NextJS: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
            <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="180" height="180">
                <circle cx="90" cy="90" r="90" fill="black" />
            </mask>
            <g mask="url(#mask0)">
                <circle cx="90" cy="90" r="90" fill="white" stroke="white" strokeWidth="6" />
                <path d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z" fill="black" />
                <rect x="115" y="54" width="12" height="72" fill="black" />
            </g>
        </svg>
    ),
    TypeScript: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 128 128" className={className}>
            <path fill="#007ACC" d="M2,0h124c1.1,0,2,0.9,2,2v124c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V2C0,0.9,0.9,0,2,0z" />
            <path fill="#FFF" d="M72.3,108.6c-2.3,1.3-5.2,2.3-8.6,2.3c-7.9,0-13.3-4.1-13.3-13.3V73.4H42.7v-9h7.7V48.1h10.9v16.3h10.9v9H61.4v21.8c0,3.3,0.9,4.9,3.7,4.9c1.9,0,3.4-0.3,4.6-0.8L72.3,108.6z M106.7,109.4c-3.1,1.4-7.3,2.4-11.7,2.4c-12.4,0-20.9-6.9-20.9-19.7c0-12.2,8-20.4,21.7-20.4c3.9,0,7.3,0.7,9.3,1.4l-1.6,8.4c-2.2-0.8-4.9-1.4-7.8-1.4c-7.7,0-11.1,4.7-11.1,11.2c0,7.4,4.2,11.4,11.8,11.4c2.8,0,5.4-0.6,7.7-1.5L106.7,109.4z" />
        </svg>
    ),
    Tailwind: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={{ color: '#38B2AC' }}>
            <path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624C10.337,13.382,8.976,12,6.001,12z" />
        </svg>
    ),
    Node: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 32 32" fill="currentColor" className={className} style={{ color: '#68A063' }}>
            <path d="M16 0l-14 8v16l14 8 14-8v-16zM16 28l-11-6.2v-11.6l11 6.2zM27 19.8l-11 6.2v-11.6l11-6.2z" />
        </svg>
    ),
    Python: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={{ color: '#FFD43B' }}>
            <path d="M14.25.75A11.25 11.25 0 0 0 3 12a11.25 11.25 0 0 0 11.25 11.25A11.25 11.25 0 0 0 25.5 12 11.25 11.25 0 0 0 14.25.75Zm0 19.5A8.25 8.25 0 0 1 6 12 8.25 8.25 0 0 1 14.25 3.75 8.25 8.25 0 0 1 22.5 12 8.25 8.25 0 0 1 14.25 20.25Z" fillOpacity="0" />
            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z" />
        </svg>
    ),
    AWS: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={{ color: '#FF9900' }}>
            <path d="M12.7 13.9c-.3 1-1.3 1.9-2.5 2.1-1.2.2-2.3-.2-3.1-.9l-.6.9c1 .9 2.5 1.4 4.1 1.1 1.6-.3 2.9-1.5 3.3-2.9l2.8-8.6h-1.9l-2.1 7.2z" />
            <path d="M18.6 12.3c.7-.6 1.1-1.6 1.1-2.6 0-2.3-1.8-3.5-4.2-3.5-1.9 0-3.3.8-3.8 2.3l1.7.6c.2-.7 1-1.2 2-1.2 1.3 0 2.2.6 2.2 1.8v.4c-.6-.3-1.4-.5-2.2-.5-2.2 0-3.8 1.1-3.8 3 0 1.6 1.2 2.7 3.1 2.7 1.2 0 2.2-.5 2.7-1.3v1.2h1.8v-2.9zm-4.9.4c0-.9 1-1.5 2.5-1.5.7 0 1.4.2 1.9.5v.6c0 1.2-.9 1.9-2.2 1.9-1 0-1.7-.5-1.7-1.5z" />
        </svg>
    ),
    Docker: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={{ color: '#2496ED' }}>
            <path d="M1.5 10.5h3v3h-3v-3zm4.5 0h3v3h-3v-3zm4.5 0h3v3h-3v-3zm4.5 0h3v3h-3v-3zm-13.5 4.5h3v3h-3v-3zm4.5 0h3v3h-3v-3zm4.5 0h3v3h-3v-3zm4.5 0h3v3h-3v-3zM22.5 10.5h-3v3h3c0-1.66-1.34-3-3-3z" />
        </svg>
    ),
    GraphQL: ({ className }: { className?: string }) => (
        <svg viewBox="0 0 24 24" fill="currentColor" className={className} style={{ color: '#E10098' }}>
            <path d="M12 0L2.12 5.76l3.8 19.33L12 24l9.88-5.69-3.8-19.33L12 0zm0 3.32l6.23 3.63-2.39 12.2L12 21.36 5.76 19.15l-2.39-12.2L12 3.32z" />
        </svg>
    ),
};

export default function AppDevPage() {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
    const [scrolled, setScrolled] = useState(false);
    const [videoOpen, setVideoOpen] = useState(false);
    const [contactOpen, setContactOpen] = useState(false); // State for Contact Modal

    useEffect(() => {
        const handleScroll = () => setScrolled(window.scrollY > 20);
        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    return (
        <div className="min-h-screen bg-[#0B0C10] text-slate-300 font-sans selection:bg-cyan-500/30 selection:text-cyan-100 overflow-x-hidden">

            {/* --- Contact Modal Overlay --- */}
            {contactOpen && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-in fade-in duration-300">
                    <div
                        className="absolute inset-0 bg-black/80 backdrop-blur-md"
                        onClick={() => setContactOpen(false)}
                    ></div>
                    <div className="relative w-full max-w-lg bg-[#15161c] border border-white/10 rounded-3xl p-8 shadow-2xl shadow-cyan-500/10 animate-in zoom-in-95 duration-300">
                        <button
                            onClick={() => setContactOpen(false)}
                            className="absolute top-6 right-6 p-2 bg-white/5 hover:bg-white/10 rounded-full text-zinc-400 hover:text-white transition-colors"
                        >
                            <X className="w-5 h-5" />
                        </button>

                        <div className="mb-8">
                            <div className="w-12 h-12 rounded-xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center mb-4 shadow-lg shadow-cyan-500/20">
                                <MessageSquare className="w-6 h-6 text-white" />
                            </div>
                            <h2 className="text-2xl font-bold text-white mb-2">Initialize Project</h2>
                            <p className="text-zinc-400 text-sm">Tell us about your vision. Our engineering team is ready to deploy.</p>
                        </div>

                        <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
                            <div className="space-y-2">
                                <label className="text-xs font-bold text-white uppercase tracking-wider">Coordinates (Email)</label>
                                <input
                                    type="email"
                                    placeholder="name@company.com"
                                    className="w-full bg-black/50 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-zinc-600 focus:outline-none focus:border-cyan-500/50 transition-colors"
                                />
                            </div>

                            <div className="space-y-2">
                                <label className="text-xs font-bold text-white uppercase tracking-wider">Mission Parameters</label>
                                <textarea
                                    rows={4}
                                    placeholder="Describe your project requirements..."
                                    className="w-full bg-black/50 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-zinc-600 focus:outline-none focus:border-cyan-500/50 transition-colors resize-none"
                                />
                            </div>

                            <button className="w-full h-12 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-bold rounded-xl hover:shadow-[0_0_20px_rgba(8,145,178,0.4)] transition-all flex items-center justify-center gap-2 group mt-2">
                                Transmit Request <Send className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                            </button>
                        </form>
                    </div>
                </div>
            )}

            {/* --- Ambient Background System --- */}
            <div className="fixed inset-0 pointer-events-none">
                <div className="absolute top-[-20%] left-[-10%] w-[50vw] h-[50vw] bg-violet-600/10 rounded-full blur-[120px] mix-blend-screen animate-pulse duration-1000"></div>
                <div className="absolute top-[20%] right-[-10%] w-[40vw] h-[40vw] bg-cyan-600/10 rounded-full blur-[120px] mix-blend-screen"></div>
                <div className="absolute bottom-[-10%] left-[20%] w-[60vw] h-[60vw] bg-blue-600/10 rounded-full blur-[120px] mix-blend-screen"></div>
                <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150 mix-blend-overlay"></div>
            </div>

            {/* Mobile Menu Overlay */}
            {mobileMenuOpen && (
                <div className="fixed inset-0 z-40 bg-[#0B0C10] pt-32 px-6">
                    <div className="flex flex-col gap-6">
                        {["Capabilities", "Stack", "Process", "Work"].map((link) => (
                            <a key={link} href="#" className="text-2xl font-bold text-white border-b border-white/10 pb-4">{link}</a>
                        ))}
                    </div>
                </div>
            )}

            <main className="relative">

                {/* ================= HERO SECTION ================= */}
                <section className="relative pt-40 pb-32 lg:pt-60 lg:pb-40 px-6 min-h-screen flex flex-col justify-center overflow-hidden">
                    <div className="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-16 items-center relative z-10">

                        <div>
                            <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 border border-white/10 text-cyan-300 text-xs font-bold uppercase tracking-widest rounded-full mb-8 backdrop-blur-md">
                                <Sparkles className="w-3 h-3 fill-current" />
                                Engineering The Future
                            </div>

                            <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tighter text-white mb-8 leading-[1]">
                                Build <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 animate-gradient-x">
                                    Limitless.
                                </span>
                            </h1>

                            <p className="text-lg md:text-xl text-slate-400 mb-10 leading-relaxed max-w-lg">
                                We architect high-velocity digital products. From cloud-native ecosystems to immersive mobile interfaces, we turn complex code into seamless experiences.
                            </p>

                            <div className="flex flex-wrap gap-4">
                                <button
                                    onClick={() => setContactOpen(true)}
                                    className="h-14 px-8 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-bold text-base rounded-full hover:shadow-[0_0_40px_rgba(8,145,178,0.4)] transition-all flex items-center gap-2 group"
                                >
                                    Launch Project <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                                </button>

                                <button
                                    onClick={() => setVideoOpen(true)}
                                    className="group h-14 px-8 bg-white/5 border border-white/10 text-white font-bold text-base rounded-full hover:bg-white/10 hover:border-white/20 hover:shadow-[0_0_20px_rgba(255,255,255,0.1)] transition-all backdrop-blur-md flex items-center gap-3"
                                >
                                    <div className="relative w-8 h-8 flex items-center justify-center rounded-full bg-white/10 group-hover:bg-white/20 transition-colors">
                                        <div className="absolute inset-0 bg-white/20 rounded-full animate-ping opacity-0 group-hover:opacity-100"></div>
                                        <Play className="w-3 h-3 fill-white ml-0.5" />
                                    </div>
                                    <span>Showreel</span>
                                </button>
                            </div>
                        </div>

                        {/* Abstract 3D Hero Element */}
                        <div className="relative h-[500px] w-full hidden lg:block perspective-1000">
                            <div className="absolute inset-0 bg-gradient-to-tr from-cyan-500/10 to-purple-500/10 rounded-full blur-[80px]"></div>

                            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-96 bg-gradient-to-b from-white/10 to-transparent border border-white/10 rounded-3xl backdrop-blur-xl p-6 shadow-2xl transform rotate-y-12 rotate-x-6 hover:rotate-y-0 hover:rotate-x-0 transition-transform duration-700">
                                <div className="flex justify-between items-center mb-8">
                                    <div className="w-10 h-10 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-400">
                                        <Code2 className="w-5 h-5" />
                                    </div>
                                    <div className="h-2 w-2 rounded-full bg-green-500 shadow-[0_0_10px_rgba(34,197,94,0.5)]"></div>
                                </div>
                                <div className="space-y-3">
                                    <div className="h-2 w-full bg-white/10 rounded-full"></div>
                                    <div className="h-2 w-3/4 bg-white/10 rounded-full"></div>
                                    <div className="h-32 w-full bg-white/5 rounded-xl mt-4 border border-white/5 relative overflow-hidden">
                                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-shimmer"></div>
                                    </div>
                                </div>
                            </div>

                            <div className="absolute top-20 right-10 w-48 h-16 bg-[#1a1b23] border border-white/10 rounded-xl shadow-xl flex items-center gap-3 px-4 animate-float-slow">
                                <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
                                <span className="text-xs font-mono text-cyan-300">Deploying...</span>
                            </div>

                            <div className="absolute bottom-20 left-0 w-56 h-20 bg-[#1a1b23] border border-white/10 rounded-xl shadow-xl flex items-center justify-between px-4 animate-float-delayed">
                                <div className="flex flex-col">
                                    <span className="text-[10px] text-slate-500 uppercase">Uptime</span>
                                    <span className="text-lg font-bold text-white">99.99%</span>
                                </div>
                                <CheckCircle className="w-6 h-6 text-green-500" />
                            </div>
                        </div>
                    </div>
                </section>

                {/* ================= SERVICES (Holographic Cards) ================= */}
                <section className="py-24 px-6 relative z-10" id="capabilities">
                    <div className="max-w-7xl mx-auto">
                        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                            <div>
                                <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">Engineering Capabilities</h2>
                                <p className="text-slate-400 text-lg max-w-md">End-to-end solutions designed for scale, security, and velocity.</p>
                            </div>
                            <button className="px-6 py-3 rounded-full border border-white/10 text-white text-sm font-bold hover:bg-white/5 transition-all">
                                View Full Stack
                            </button>
                        </div>

                        <div className="grid md:grid-cols-3 gap-6">
                            {[
                                {
                                    icon: Smartphone,
                                    title: "Mobile Experiences",
                                    desc: "Native and cross-platform apps that feel fluid, responsive, and alive.",
                                    color: "from-blue-500 to-cyan-500"
                                },
                                {
                                    icon: Globe,
                                    title: "Web Platforms",
                                    desc: "Next-gen web applications built on React, Next.js, and edge computing.",
                                    color: "from-purple-500 to-pink-500"
                                },
                                {
                                    icon: Cloud,
                                    title: "Cloud Infrastructure",
                                    desc: "Serverless architectures designed for infinite scale and zero downtime.",
                                    color: "from-amber-500 to-orange-500"
                                },
                                {
                                    icon: RefreshCw,
                                    title: "System Modernization",
                                    desc: "Transforming legacy monoliths into agile, microservices-based ecosystems.",
                                    color: "from-emerald-500 to-teal-500"
                                },
                                {
                                    icon: Database,
                                    title: "Data Intelligence",
                                    desc: "Turning raw data into actionable insights with robust pipelines.",
                                    color: "from-red-500 to-rose-500"
                                },
                                {
                                    icon: Shield,
                                    title: "Cybersecurity",
                                    desc: "DevSecOps integration ensuring security is baked in from line one.",
                                    color: "from-indigo-500 to-violet-500"
                                }
                            ].map((service, i) => (
                                <div key={i} className="group relative p-[1px] rounded-3xl bg-gradient-to-b from-white/10 to-transparent hover:from-white/20 transition-all duration-500">
                                    <div className="bg-[#12131a] rounded-[23px] h-full p-8 relative overflow-hidden">
                                        <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${service.color} opacity-0 group-hover:opacity-20 blur-[50px] transition-opacity duration-500`}></div>

                                        <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${service.color} flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition-transform duration-300`}>
                                            <service.icon className="w-6 h-6 text-white" />
                                        </div>

                                        <h3 className="text-xl font-bold text-white mb-3 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-white group-hover:to-slate-400 transition-all">
                                            {service.title}
                                        </h3>
                                        <p className="text-slate-400 text-sm leading-relaxed mb-6">
                                            {service.desc}
                                        </p>

                                        <div className="flex items-center gap-2 text-xs font-bold text-white uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-opacity translate-y-2 group-hover:translate-y-0">
                                            Explore <ArrowRight className="w-3 h-3" />
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ================= TECH STACK (Categorized Grid) ================= */}
                <section className="py-24 border-y border-white/5 bg-[#0e0f14]">
                    <div className="max-w-7xl mx-auto px-6">
                        <div className="text-center mb-16">
                            <span className="text-cyan-400 font-mono text-xs uppercase tracking-widest">Our Arsenal</span>
                            <h2 className="text-3xl md:text-4xl font-bold text-white mt-4">Built with Modern Standards</h2>
                        </div>

                        <div className="flex flex-wrap justify-center gap-4">
                            {[
                                { name: "React", Icon: Icons.React },
                                { name: "TypeScript", Icon: Icons.TypeScript },
                                { name: "Next.js", Icon: Icons.NextJS },
                                { name: "Node.js", Icon: Icons.Node },
                                { name: "Python", Icon: Icons.Python },
                                { name: "Go", Icon: Terminal },
                                { name: "AWS", Icon: Icons.AWS },
                                { name: "Docker", Icon: Icons.Docker },
                                { name: "Kubernetes", Icon: Boxes },
                                { name: "GraphQL", Icon: Icons.GraphQL },
                                { name: "PostgreSQL", Icon: Database },
                                { name: "Redis", Icon: HardDrive },
                                { name: "Terraform", Icon: Workflow },
                                { name: "Figma", Icon: LayoutTemplate }
                            ].map(({ name, Icon }) => (
                                <div key={name} className="px-6 py-3 rounded-xl border border-white/5 bg-white/[0.02] text-slate-400 font-medium hover:text-white hover:border-white/20 hover:bg-white/[0.05] transition-all cursor-default flex items-center gap-3">
                                    <Icon className="w-5 h-5" />
                                    <span>{name}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ================= FINAL CTA ================= */}
                <section className="py-32 px-6 relative overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-t from-cyan-900/20 to-transparent"></div>
                    <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-blue-600/20 blur-[120px] rounded-full"></div>

                    <div className="max-w-4xl mx-auto relative z-10 text-center border border-white/10 bg-white/5 backdrop-blur-xl rounded-[3rem] p-12 md:p-20">
                        <h2 className="text-4xl md:text-6xl font-bold text-white mb-8 tracking-tight">
                            Ready to build <br /> something <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">extraordinary?</span>
                        </h2>
                        <p className="text-lg text-slate-300 mb-10 max-w-xl mx-auto">
                            Let's collaborate to turn your vision into a market-leading digital product.
                        </p>

                        <div className="flex flex-col sm:flex-row justify-center gap-4">
                            <button
                                onClick={() => setContactOpen(true)}
                                className="h-14 px-10 bg-white text-black font-bold text-lg rounded-full hover:bg-cyan-50 transition-all shadow-xl"
                            >
                                Start Your Project
                            </button>
                            <button className="h-14 px-10 bg-transparent border border-white/20 text-white font-bold text-lg rounded-full hover:bg-white/10 transition-all">
                                View Pricing
                            </button>
                        </div>
                    </div>
                </section>

            </main>
        </div>
    );
}