"use client";
import Badge from "@/utils/badge";
import Stat from "@/utils/statCard";

import { ShieldCheck, KeyRound, FileText } from "lucide-react";

export default function LeftPanel() {
  return (
   
     <div className="relative overflow-hidden border-r border-slate-800 bg-[#091523] hidden lg:block">
      {/* Grid Background overlay */}
      <div
        className="absolute inset-0 opacity-10 pointer-events-none"
        style={{
          backgroundImage: `
            linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)
          `,
          backgroundSize: "44px 44px",
        }}
      />

      <div className="relative flex h-full flex-col justify-between p-16 z-10">
        <div>
          {/* Logo Group */}
          <div className="mb-20 flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-teal-300 to-cyan-500 font-bold text-black shadow-md text-lg">
              K
            </div>
            <h2 className="text-2xl font-bold tracking-wider text-white">
              KAF<span className="text-teal-400">M</span>
            </h2>
          </div>

          {/* Subtitle */}
          <p className="mb-6 text-xs font-semibold uppercase tracking-[4px] text-teal-400/90">
            Unified Facility Platform
          </p>

          {/*Text*/}
          <h1 className="max-w-lg text-4xl font-bold tracking-tight text-white leading-[1]">
            One platform.
            <br />
            Configure it.
            <br />
            Run it.
          </h1>

          {/* Paragraph explanation */}
          <p className="mt-6 max-w-md text-[16px] leading-relaxed text-slate-400">
            Administer tenants, sites and access — then operate every
            building from the same console. Multi-tenant, scoped to the site
            in front of you.
          </p>

          {/* Badges Stack */}
          <div className="mt-10 flex flex-col items-start gap-3">
            <Badge icon={<ShieldCheck size={14} className="text-teal-400" />}>
              MFA enforced
            </Badge>
            <Badge icon={<KeyRound size={14} className="text-teal-400" />}>
              Encrypted in transit
            </Badge>
            <Badge icon={<FileText size={14} className="text-teal-400" />}>
              Full audit trail
            </Badge>
          </div>
        </div>

        {/*StatCard is used   */}
        <div className="   flex gap-2 mt-10  text-slate-300 ">
          <Stat number="4" label="TENANTS" />
          <Stat number="8" label="MODULES" />
          <Stat number="2" label="WORKSPACES" />
        </div>
      </div>
    </div>
    
  );
}