KAFM-Project/components/dashboard/engagement.tsx

"use client";
import { 
  Smile, 
  Activity, 
  AlertTriangle, 
  Star, 
  Plus, 
  Sparkles
} from "lucide-react";

import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
export default function EngagementPage() {
  return (
    <div className="bg-[#071321] text-[#93a3b8] font-sans antialiased min-h-screen">
    
      <main className="pt-20 px-8 pb-12">
        
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mt-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-teal-500">
              <span>Apple One — HQ Tower</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Intelligence</span>
              <span className="text-gray-600">·</span>
              <span className="text-gray-400">Engagement</span>
            </div>
            <h1 className="text-2xl font-bold text-white tracking-tight mt-1">Employee engagement</h1>
            <p className="mt-2 text-sm text-gray-400 max-w-2xl leading-relaxed">
              Pulse satisfaction surveys, complaint tickets and a suggestion system — boosting morale, transparency and retention.
            </p>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-3">
            <button className="flex items-center gap-2 rounded-xl border border-[#142538] bg-[#091624] px-4 py-2.5 text-xs font-bold text-white hover:bg-[#11233a] transition">
              <Smile size={15} className="text-slate-400" />
              Pulse survey
            </button>
            <button className="flex items-center gap-1.5 rounded-xl bg-[#3de0c4] hover:bg-[#32cbb0] px-4 py-2.5 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
              <Plus size={15} strokeWidth={2.5} />
              New ticket
            </button>
          </div>
        </div>

        {/* 3. Metrics Cards Grid (4 Columns) */}
        <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          
          {/* Card 1: Engagement Score */}
          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
            <div className="flex items-center justify-between">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#0e2726] border border-[#10b981]/15 text-[#10b981]">
                <Smile size={18} />
              </div>
              <span className="text-[10px] font-bold text-emerald-400 tracking-wider">+4 vs Q1</span>
            </div>
            <div className="mt-4">
              <span className="text-3xl font-extrabold text-white tracking-tight">82%</span>
              <p className="text-xs font-semibold text-slate-400 mt-1">Engagement score</p>
            </div>
          </div>

          {/* Card 2: Survey Response */}
          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
            <div className="flex items-center justify-between">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-cyan-400">
                <Activity size={18} />
              </div>
              <span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">this pulse</span>
            </div>
            <div className="mt-4">
              <span className="text-3xl font-extrabold text-white tracking-tight">71%</span>
              <p className="text-xs font-semibold text-slate-400 mt-1">Survey response</p>
            </div>
          </div>

          {/* Card 3: Open Tickets */}
          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
            <div className="flex items-center justify-between">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#271d15] border border-amber-500/10 text-amber-500">
                <AlertTriangle size={18} />
              </div>
              <span className="text-[10px] font-bold text-amber-500 tracking-wider uppercase font-mono">to resolve</span>
            </div>
            <div className="mt-4">
              <span className="text-3xl font-extrabold text-white tracking-tight">2</span>
              <p className="text-xs font-semibold text-slate-400 mt-1">Open tickets</p>
            </div>
          </div>

          {/* Card 4: CSAT */}
          <div className="relative rounded-2xl border border-[#142538] bg-[#091624] p-5">
            <div className="flex items-center justify-between">
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#11233a] border border-[#1b2c3f]/50 text-blue-400">
                <Star size={18} />
              </div>
              <span className="text-[10px] font-semibold text-slate-500 tracking-wider uppercase font-mono">of 5.0</span>
            </div>
            <div className="mt-4">
              <span className="text-3xl font-extrabold text-white tracking-tight">4.2</span>
              <p className="text-xs font-semibold text-slate-400 mt-1">CSAT</p>
            </div>
          </div>

        </div>

        {/* 4. Double Columns layout (Drivers & Tickets lists) */}
        <div className="mt-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
          
          {/* Left Column: Satisfaction Drivers */}
          <div className="lg:col-span-7 rounded-2xl border border-[#142538] bg-[#091624] p-6">
            <div className="flex items-center justify-between border-b border-[#142538]/40 pb-4">
              <h3 className="font-bold text-sm text-white tracking-tight">Satisfaction drivers</h3>
              <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider font-mono">latest pulse</span>
            </div>

            <div className="mt-6 space-y-5">
              {SATISFACTION_DRIVERS.map((driver) => (
                <div key={driver.label} className="space-y-2">
                  <div className="flex items-center justify-between text-xs font-medium">
                    <span className="text-slate-300">{driver.label}</span>
                    <span className="font-bold text-white">{driver.score}</span>
                  </div>
                  
                  {/* Track line background */}
                  <div className="h-2 w-full rounded-full bg-[#101c2a]">
                    {/* Filled bar width */}
                    <div 
                      className={`h-2 rounded-full ${driver.color} transition-all duration-500`}
                      style={{ width: `${driver.score}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Tickets & Suggestions */}
          <div className="lg:col-span-5 rounded-2xl border border-[#142538] bg-[#091624] p-6">
            <div className="border-b border-[#142538]/40 pb-4">
              <h3 className="font-bold text-sm text-white tracking-tight">Tickets & suggestions</h3>
            </div>

            <div className="mt-2 divide-y divide-[#142538]/30">
              {TICKETS_DATA.map((ticket, index) => (
                <div key={index} className="flex items-center justify-between py-4 first:pt-2 last:pb-2">
                  <div className="min-w-0">
                    <h4 className="font-bold text-xs text-white truncate pr-2">{ticket.title}</h4>
                    <span className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider block mt-0.5">
                      {ticket.type}
                    </span>
                  </div>

                  {/* Status Indicator Badges */}
                  <div>
                    {ticket.status === "OPEN" ? (
                      <span className="inline-flex items-center gap-1.5 rounded-full bg-[#3b2a1a] border border-amber-500/25 px-2.5 py-0.5 text-[9px] font-bold text-amber-500">
                        <span className="h-1.5 w-1.5 rounded-full bg-amber-500"></span>
                        OPEN
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1.5 rounded-full bg-[#152332] border border-[#1e344e]/50 px-2.5 py-0.5 text-[9px] font-bold text-slate-400">
                        <span className="h-1.5 w-1.5 rounded-full bg-slate-500"></span>
                        CLOSED
                      </span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>

        </div>

      </main>

    
      
    </div>
  );
}