"use client";

import { Badge, Card } from "ikoncomponents";
import { CheckCircle2 } from "lucide-react";

const visibilityPoints = [
  "AI Health Scores with confidence percentages",
  "Real-time P/L and budget tracking",
  "Resource utilization heatmaps",
  "Portfolio-level performance metrics",
];

const dashboardStats = [
  { label: "Active Projects", value: "12" },
  { label: "Avg Health Score", value: "87%", color: "text-emerald-400" },
  { label: "Total Budget", value: "$4.2M" },
  { label: "At Risk", value: "3", color: "text-amber-500" },
];

export function VisibilitySection() {
  return (
    <section className="py-12">
      <div className="container mx-auto px-4">
        <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-7xl w-full mx-auto">
          
          {/* Left Column */}
          <div className="space-y-6">
            <Badge variant="outline" className="px-3 py-1 w-fit border">
              Executive Dashboard
            </Badge>

            <div className="space-y-4">
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight">
                Complete Visibility <br /> at a Glance
              </h2>
              <p className="text-gray-400 text-lg max-w-md leading-relaxed">
                A unified view of project health, financial metrics, and
                predictive insights designed for strategic decision-making.
              </p>
            </div>

            <div className="space-y-3">
              {visibilityPoints.map((point) => (
                <div key={point} className="flex items-start gap-3">
                  <div className="mt-1 flex-shrink-0 w-5 h-5 rounded-full border border-indigo-500/30 flex items-center justify-center">
                    <CheckCircle2 className="text-indigo-400" size={12} />
                  </div>
                  <span className="font-medium">{point}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column */}
          <div className="relative">
            {/* Background glow */}
            <div className="absolute -inset-6 bg-indigo-500/5 rounded-3xl blur-3xl" />

            <Card className="relative p-6 rounded-2xl shadow-2xl">
              <div className="flex justify-between items-center mb-6">
                <h3 className="font-semibold text-lg">
                  Portfolio Overview
                </h3>
                <Badge className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
                  Healthy
                </Badge>
              </div>

              <div className="grid sm:grid-cols-2 gap-4">
                {dashboardStats.map((stat) => (
                  <div
                    key={stat.label}
                    className="border p-4 rounded-xl"
                  >
                    <div
                      className={`text-3xl font-bold mb-1 ${
                        stat.color ?? ""
                      }`}
                    >
                      {stat.value}
                    </div>
                    <div className="text-xs text-gray-500 uppercase tracking-wider font-medium">
                      {stat.label}
                    </div>
                  </div>
                ))}
              </div>
            </Card>
          </div>

        </div>
      </div>
    </section>
  );
}