"use client";
import { 
  Zap, 
  Leaf, 
  AlertTriangle, 
  Database,
  Sliders, 
  Download,
  Sparkles
} from "lucide-react";
      
import { SATISFACTION_DRIVERS, TICKETS_DATA } from "@/constants/constant";
import StatCard from "../../common/dashStatCard";
import Button from "@/components/common/button";
import InfoBanner from "@/components/common/infoBanner";

// Import your custom Card components
import { Card } from "@/components/common/cardWrapper"; 
import { CardHeader } from "@/components/common/cardHeader"; 

export default function EnergyBenchmarkingPortal() {
  return (
    <div className="text-[#8e9bae] font-sans my-15">
    

        
        {/* Page Header Section */}
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2 text-[11px] font-medium tracking-wider text-[#3de0c4]">
              <span>APPLE ONE — HQ TOWER</span>
              <span className="text-[#3a495e]">•</span>
              <span className="text-[#596980]">INTELLIGENCE</span>
              <span className="text-[#3a495e]">•</span>
              <span className="text-[#596980]">BENCHMARKING</span>
            </div>
            <h1 className="text-3xl font-bold text-white tracking-tight mt-1.5">Portfolio energy benchmarking</h1>
            <p className="mt-2 text-sm text-[#7e8c9f] max-w-2xl leading-relaxed">
              Rank every site against a common baseline (EUI, kWh/m²/yr), spotlight the best performer, and quantify the savings if the rest caught up.
            </p>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-3">
            <Button
              className="flex items-center gap-2 rounded-lg border border-[#1b2a3d] bg-[#0c1626] px-4 py-2 text-xs font-semibold text-white hover:bg-[#132238] transition">
              <Sliders size={14} className="text-[#3de0c4]" />
              Set baseline
            </Button>
            <Button
              className="flex items-center gap-1.5 rounded-lg bg-[#3de0c4] hover:bg-[#34ceb3] px-4 py-2 text-xs font-bold text-[#05111d] transition shadow-md shadow-[#3de0c4]/10">
              <Download size={14} strokeWidth={2.5} />
              Export
            </Button>
          </div>
        </div>

        {/* --- STAT CARD GRID --- */}
        <div className="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <StatCard 
            variant="icon" title="Portfolio EUI" value="144" icon={Zap} 
            badgeText="kWh/m²/yr" badgeClassName="text-[#596980] lowercase text-[11px]" 
            iconContainerClassName="bg-[#0d2136] border-[#183350] text-[#3b82f6]" 
          />
          
          <StatCard 
            variant="icon" title="Best performer" value="Annexe" icon={Leaf} 
            badgeText="124 EUI" badgeClassName="text-[#3de0c4] font-semibold text-[11px]" 
            iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]" 
          />

          <StatCard 
            variant="icon" title="Highest intensity" value="HQ Tower" icon={AlertTriangle} 
            badgeText="163 EUI" badgeClassName="text-[#f87171] font-semibold text-[11px]" 
            iconContainerClassName="bg-[#2a1318] border-[#481c24] text-[#f87171]" 
          />
          
          <StatCard 
            variant="icon" title="Savings if matched" value="₹125k" icon={Database} 
            badgeText="best performer" badgeClassName="text-[#3de0c4] font-semibold text-[11px]" 
            iconContainerClassName="bg-[#0b2823] border-[#13423a] text-[#3de0c4]" 
          />
        </div>

        {/* --- TWO COLUMNS (SITE BENCHMARK & END-USE BREAKDOWN) --- */}
        <div className="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-6">
          
          {/* Left Column: Site Benchmark */}
          <div className="lg:col-span-7">
            <Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl">
              <CardHeader title="Site benchmark" subtitle="vs 150 baseline" />

              <div className="mt-6 space-y-6">
                {/* Annexe Bar */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-xs font-semibold">
                    <div className="flex items-center gap-2">
                      <span className="text-white">Annexe</span>
                      <span className="bg-[#0b2823] text-[#3de0c4] text-[9px] font-bold px-1.5 py-0.5 rounded border border-[#13423a]">BEST</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <span className="font-bold text-[#f59e0b]">124</span>
                      <span className="text-[#3de0c4] text-[11px]">-17%</span>
                    </div>
                  </div>
                  <div className="h-2.5 w-full rounded-full bg-[#111e30]">
                    <div className="h-2.5 rounded-full bg-[#f59e0b] transition-all duration-500" style={{ width: "70%" }} />
                  </div>
                </div>

                {/* HQ Tower Bar */}
                <div className="space-y-2">
                  <div className="flex items-center justify-between text-xs font-semibold">
                    <span className="text-white">HQ Tower</span>
                    <div className="flex items-center gap-1.5">
                      <span className="font-bold text-[#f87171]">163</span>
                      <span className="text-[#f87171] text-[11px]">+9%</span>
                    </div>
                  </div>
                  <div className="h-2.5 w-full rounded-full bg-[#111e30]">
                    <div className="h-2.5 rounded-full bg-[#f87171] transition-all duration-500" style={{ width: "90%" }} />
                  </div>
                </div>
              </div>
            </Card>
          </div>

          {/* Right Column: End-use Breakdown */}
          <div className="lg:col-span-5">
            <Card className="p-5 bg-[#0a121e] border-[#172538] rounded-xl h-full flex flex-col justify-between">
              <div>
                <CardHeader title="End-use breakdown" subtitle="portfolio" />

                <div className="mt-4 space-y-3.5">
                  {/* Item 1 */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#8e9bae] w-24">HVAC</span>
                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
                      <div className="h-2 rounded-full bg-[#3de0c4]" style={{ width: "52%" }} />
                    </div>
                    <span className="font-bold text-white w-8 text-right">52%</span>
                  </div>

                  {/* Item 2 */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#8e9bae] w-24">Lighting</span>
                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
                      <div className="h-2 rounded-full bg-[#3b82f6]" style={{ width: "18%" }} />
                    </div>
                    <span className="font-bold text-white w-8 text-right">18%</span>
                  </div>

                  {/* Item 3 */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#8e9bae] w-24">Plug loads</span>
                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
                      <div className="h-2 rounded-full bg-[#f59e0b]" style={{ width: "14%" }} />
                    </div>
                    <span className="font-bold text-white w-8 text-right">14%</span>
                  </div>

                  {/* Item 4 */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#8e9bae] w-24">Lifts & pumps</span>
                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
                      <div className="h-2 rounded-full bg-[#10b981]" style={{ width: "11%" }} />
                    </div>
                    <span className="font-bold text-white w-8 text-right">11%</span>
                  </div>

                  {/* Item 5 */}
                  <div className="flex items-center justify-between text-xs">
                    <span className="text-[#8e9bae] w-24">Other</span>
                    <div className="flex-1 mx-3 h-2 rounded-full bg-[#111e30]">
                      <div className="h-2 rounded-full bg-[#475569]" style={{ width: "5%" }} />
                    </div>
                    <span className="font-bold text-white w-8 text-right">5%</span>
                  </div>
                </div>
              </div>

              <p className="text-[11px] text-[#7e8c9f] mt-4 pt-3 border-t border-[#172538]/60 leading-relaxed">
                HVAC dominates intensity — the fastest lever for closing the gap to <span className="font-bold text-white">Annexe</span>.
              </p>
            </Card>
          </div>

        </div>

      

      {/* Footer / Ask AI Floating Banner */}
      <div className="mt-8 relative">
        <InfoBanner 
          boldText="How it works:" 
          normalText="normalised EUI puts every site on one scale regardless of size. Deviation from baseline flags outliers; replicating the best performer's operating strategy across the portfolio is the quick win." 
        />

      </div>
      
    </div>
  );
}