"use client";
import { 
  Smile, 
  ShieldCheck, Database, Leaf,
  Plus, 
} from "lucide-react";
      
import {SATISFACTION_DRIVERS,TICKETS_DATA} from "@/constants/constant";
import StatCard from "../../utils/dashStatCard";
import Button from "@/utils/button";
import InfoBanner from "@/utils/infoBanner";
export default function EngagementPage() {
  return (
    <div className="bg-[#071321] text-[#93a3b8] font-sans antialiased min-h-screen">
    
      <main className="pt-10  pb-10">
        
        {/* 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>

        {/* Column of StatCard  */}


<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <StatCard 
    variant="icon" title="Engagement score" value="82%" icon={Smile} 
    badgeText="+4 vs Q1" badgeClassName="text-emerald-400" 
    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
  />
  
  <StatCard 
    variant="icon" title="Asset availability" value="38%" icon={ShieldCheck} 
    badgeText="SLA met" badgeClassName="text-emerald-400 font-sans normal-case" 
    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
  />

  <StatCard 
    variant="icon" title="Energy cost / mo" value="₹11.8 L" icon={Database} 
    badgeText="↓ vs avg" badgeClassName="text-emerald-400 font-sans normal-case font-bold" 
    iconContainerClassName="bg-[#271d15] border-amber-500/10 text-amber-500" 
  />
  
  <StatCard 
    variant="icon" title="ESG rating" value="B+" icon={Leaf} 
    badgeText="improving" badgeClassName="text-emerald-400 lowercase font-sans font-medium" 
    iconContainerClassName="bg-[#0e2726] border-[#10b981]/15 text-[#10b981]" 
  />
</div>

        {/*  (Drivers & Tickets lists columns) */}
        <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>
<InfoBanner 
  boldText="Closing the loop:" 
  normalText="complaints become tracked FM tickets, suggestions are triaged and voted on, and declining pulse trends flag retention risk early." 
/>
    
      
    </div>
  );
}