"use client";

import Image from "next/image";
import { Shield, Lock, Radar, Fingerprint } from "lucide-react";

export default function SecurityPage() {
    return (
        <div className="bg-black text-white">

            {/* ================= WHITE HERO ================= */}
            <section className="relative py-28 px-6 bg-white overflow-hidden border-b border-gray-200">

                {/* Soft Background Accent */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-blue-100 blur-[150px] rounded-full" />

                <div className="relative max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">

                    {/* Left Content */}
                    <div>
                        <h1 className="text-5xl md:text-6xl font-semibold tracking-tight leading-tight text-gray-900">
                            Enterprise Security
                            <span className="block text-gray-400">
                                Built for Modern Infrastructure
                            </span>
                        </h1>

                        <p className="mt-6 text-lg text-gray-600 max-w-xl">
                            We safeguard your applications, data, and infrastructure with
                            enterprise-grade architecture, encryption, and real-time threat monitoring.
                        </p>

                        <div className="mt-8 flex gap-4">
                            <button className="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition">
                                View Compliance
                            </button>

                            <button className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:border-gray-500 transition">
                                Security Docs
                            </button>
                        </div>
                    </div>

                    {/* Right Image */}
                    <div className="relative">
                        <div className="absolute inset-0 bg-gradient-to-tr from-blue-200/40 to-transparent rounded-3xl blur-2xl" />

                        <Image
                            src="/security-dashboard.png"
                            alt="Security Dashboard"
                            width={600}
                            height={500}
                            className="relative rounded-3xl border border-gray-200 shadow-xl"
                            priority
                        />
                    </div>

                </div>
            </section>


            {/* ================= FEATURES ================= */}
            <section className="py-28 px-6">
                <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12">

                    <Feature
                        icon={<Shield size={22} />}
                        title="Infrastructure Protection"
                        desc="Zero-trust architecture with hardened cloud environments and network isolation."
                    />

                    <Feature
                        icon={<Lock size={22} />}
                        title="End-to-End Encryption"
                        desc="AES-256 encryption at rest and TLS 1.3 in transit across all services."
                    />

                    <Feature
                        icon={<Radar size={22} />}
                        title="24/7 Threat Monitoring"
                        desc="Continuous anomaly detection with automated response systems."
                    />

                    <Feature
                        icon={<Fingerprint size={22} />}
                        title="Identity Management"
                        desc="Granular role-based permissions with enforced multi-factor authentication."
                    />

                </div>
            </section>


            {/* ================= ENTERPRISE PANEL CTA ================= */}
            <section className="py-28 px-6 bg-slate-950">
                <div className="max-w-6xl mx-auto">

                    <div className="bg-slate-900 border border-white/10 rounded-3xl p-12 md:p-16 flex flex-col md:flex-row items-center justify-between gap-10">

                        {/* Left Content */}
                        <div className="max-w-xl">
                            <h2 className="text-3xl md:text-4xl font-semibold tracking-tight leading-snug">
                                Protect What Matters Most
                            </h2>

                            <p className="mt-6 text-white/60 text-lg leading-relaxed">
                                Strengthen your organization’s security posture with
                                proactive monitoring, compliance-ready infrastructure,
                                and enterprise-grade protection engineered for scale.
                            </p>
                        </div>

                        {/* Right Actions */}
                        <div className="flex flex-col sm:flex-row gap-4">
                            <button className="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
                                Schedule Consultation
                            </button>

                            <button className="px-8 py-3 border border-white/20 hover:border-white/40 rounded-lg transition">
                                View Compliance Docs
                            </button>
                        </div>

                    </div>

                </div>
            </section>

        </div>
    );
}


/* ================= FEATURE COMPONENT ================= */

function Feature({
    icon,
    title,
    desc,
}: {
    icon: React.ReactNode;
    title: string;
    desc: string;
}) {
    return (
        <div className="group border border-white/10 rounded-2xl p-10 hover:border-white/30 transition duration-300">
            <div className="mb-6 text-white/70 group-hover:text-white transition">
                {icon}
            </div>

            <h3 className="text-2xl font-semibold tracking-tight mb-4">
                {title}
            </h3>

            <p className="text-white/60 leading-relaxed">
                {desc}
            </p>
        </div>
    );
}