"use client";

import { Badge, Button, Card } from "ikoncomponents";
import { ArrowRight, Brain, BrainCircuit } from "lucide-react";
import { useRouter } from "next/dist/client/components/navigation";

export function HeroSection() {
  const router = useRouter();

  const handleStartTrial = () => {
    router.push("/main/overview/dashboard");
  };

  return (
    <section className="min-h-[70vh] flex justify-center py-12 px-4 sm:px-6">
      <div className="grid sm:grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center max-w-7xl w-full">
        {/* LEFT SECTION */}
        <div className="space-y-8">
          <Badge className="bg-indigo-500/10 text-indigo-400 border-indigo-500/20 px-3 py-1 flex items-center gap-2 w-fit">
            <BrainCircuit size={14} />
            AI-Powered Platform
          </Badge>

          <div className="space-y-4">
            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
              Predictive Project <br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">
                Management
              </span>
            </h1>

            <p className="text-gray-400 text-base sm:text-lg max-w-lg leading-relaxed">
              Transform reactive project tracking into proactive, predictive
              management. Leverage AI and ML for executive-level insights into
              financial health, resource optimization, and schedule
              predictability.
            </p>
          </div>

          <div className="flex gap-4">
            <Button
              className="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-6 text-lg rounded-md group"
              onClick={handleStartTrial}
            >
              Get Started
              <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
            </Button>
          </div>

          <div className="grid grid-cols-2 gap-8 pt-8 border-t border-white/5 max-w-md">
            <div>
              <div className="text-3xl font-bold text-indigo-400">20%</div>
              <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">
                Reduced Schedule Overruns
              </p>
            </div>
            <div>
              <div className="text-3xl font-bold text-indigo-400">85%</div>
              <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">
                AI Prediction Accuracy
              </p>
            </div>
          </div>
        </div>

        {/* RIGHT SECTION */}
        <div className="relative max-w-lg w-full">
          <Card className="p-4 rounded-2xl shadow-2xl">
            <div className="flex justify-between items-center mb-3">
              <div className="flex gap-2">
                <div className="w-3 h-3 rounded-full bg-red-500/80" />
                <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
                <div className="w-3 h-3 rounded-full bg-green-500/80" />
              </div>

              <Badge variant="secondary" className="bg-white/5 font-normal">
                Live Preview
              </Badge>
            </div>

            <div className="flex justify-between items-start p-3 border rounded-xl">
              <div>
                <h3 className="text-lg font-semibold">Enterprise Rollout</h3>
                <p className="text-sm">Phase 2 Active</p>
              </div>

              <div className="flex items-center gap-4 text-right">
                <div>
                  <div className="text-2xl font-bold text-green-400">92</div>
                  <div className="text-[10px] uppercase tracking-widest">
                    AI Score
                  </div>
                </div>

                <div className="p-2 rounded-full border border-green-500/30 bg-green-500/10">
                  <Brain className="text-green-400" size={24} />
                </div>
              </div>
            </div>

            <div className="grid lg:grid-cols-3 gap-3">
              <StatBox label="Budget" value="$2.4M" />
              <StatBox label="P/L Health" value="+12%" highlight />
              <StatBox label="On-Time" value="98%" />
            </div>

            <div className="flex items-center gap-1">
              <div className="flex-1 h-2 bg-gray-800 rounded-full overflow-hidden">
                <div className="h-full bg-gradient-to-r from-indigo-500 to-cyan-400 w-[75%]" />
              </div>
              <span className="text-xs w-10 text-right">75%</span>
            </div>
          </Card>
        </div>
      </div>
    </section>
  );
}

function StatBox({
  label,
  value,
  highlight,
}: {
  label: string;
  value: string;
  highlight?: boolean;
}) {
  return (
    <div className="p-4 rounded-xl border text-center">
      <div className={`text-xl font-bold ${highlight ? "text-green-400" : ""}`}>
        {value}
      </div>
      <div className="text-[10px] text-gray-500 uppercase mt-1">{label}</div>
    </div>
  );
}