B.Tech-Project-III/thirdeye/dashboard/app/components/InsightHero.tsx

export default function InsightHero() {
  return (
    <div className="glass rounded-2xl border border-white/5 p-8 relative overflow-hidden group animate-fade-in-scale delay-200">
      <div className="absolute top-0 right-0 p-8 opacity-10 blur-xl group-hover:opacity-20 transition-opacity duration-700">
        {/* This div seems to be a placeholder or an incomplete instruction.
            The content '8BFA", boxShadow: "0 0 15px rgba(167, 139, 250, 0.08)", }'
            is not valid JSX content. Assuming it was meant to be part of a style
            or a class, but without clear instruction, it's left as an empty div
            to maintain syntactic correctness. */}
      </div>
      <div className="p-10 grid md:grid-cols-3 gap-10 relative z-10">
        {/* Left: main content */}
        <div className="md:col-span-2 space-y-6">
          <div className="flex items-center gap-4">
            <span
              className="px-3 py-1 text-[10px] font-bold tracking-[0.1em] rounded-full"
              style={{
                color: "#A78BFA",
                backgroundColor: "rgba(167,139,250,0.2)",
                border: "1px solid rgba(167,139,250,0.3)",
              }}
            >
              SYSTEM_ALERT
            </span>
            <span className="text-zinc-400 text-[11px] uppercase tracking-widest font-semibold">
              Cross-Group Intelligence Analysis
            </span>
          </div>

          <h2 className="text-3xl font-bold tracking-tight text-white leading-tight">
            Discrepancy in Strategy Alignment: Product vs Engineering
          </h2>

          <p className="text-zinc-300 text-[15px] leading-relaxed max-w-2xl font-light">
            Insight explanation: Discrepancy in Q3 roadmap priorities identified across 4
            cross-functional meetings. Product prioritizes feature velocity, while Engineering
            focuses on technical debt reduction.
          </p>

          <div className="flex gap-4">
            <button className="bg-[#A78BFA]/20 text-[#A78BFA] border border-[#A78BFA]/50 hover:bg-[#A78BFA] hover:text-[#09090B] px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase btn-interactive shadow-[0_0_15px_rgba(167,139,250,0.1)] hover:shadow-[0_0_20px_rgba(167,139,250,0.4)]">
              Schedule Sync
            </button>
            <button className="text-zinc-400 hover:text-zinc-200 bg-white/5 hover:bg-white/10 px-6 py-2 rounded-lg text-sm font-semibold tracking-widest uppercase transition-colors btn-interactive">
              Dismiss Signal
            </button>
          </div>
        </div>

        {/* Right: alignment bars */}
        <div className="space-y-6">
          {/* Group A */}
          <div
            className="p-5 rounded-xl border"
            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
          >
            <div className="flex justify-between items-center mb-3">
              <span className="text-[11px] text-zinc-300 font-semibold">Group A (Product)</span>
              <span className="text-xs text-white">72%</span>
            </div>
            <div
              className="h-1.5 rounded-full overflow-hidden"
              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
            >
              <div
                className="h-full rounded-full"
                style={{ width: "72%", backgroundColor: "rgba(167,139,250,0.6)" }}
              />
            </div>
            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
              Alignment on Speed-to-Market
            </p>
          </div>

          {/* Group B */}
          <div
            className="p-5 rounded-xl border"
            style={{ backgroundColor: "rgba(0,0,0,0.2)" }}
          >
            <div className="flex justify-between items-center mb-3">
              <span className="text-[11px] text-zinc-300 font-semibold">Group B (Eng)</span>
              <span className="text-xs text-white">84%</span>
            </div>
            <div
              className="h-1.5 rounded-full overflow-hidden"
              style={{ backgroundColor: "rgba(255,255,255,0.05)" }}
            >
              <div className="h-full rounded-full" style={{ width: "84%", backgroundColor: "#A78BFA" }} />
            </div>
            <p className="text-[10px] text-zinc-400 mt-3 italic font-light tracking-wide">
              Focus on System Stability
            </p>
          </div>

          {/* Recommendation */}
          <div
            className="p-5 rounded-xl"
            style={{
              border: "1px solid rgba(167,139,250,0.2)",
              backgroundColor: "rgba(167,139,250,0.1)",
            }}
          >
            <p className="text-[12px] font-medium leading-relaxed" style={{ color: "#A78BFA" }}>
              <span className="font-bold">RECOMMENDATION:</span> Schedule immediate alignment session
              for Q3 priority sync.
            </p>
          </div>
        </div>
      </div>

      {/* Abstract gradient element */}
      <div
        className="absolute right-0 top-0 h-full w-96 pointer-events-none"
        style={{
          opacity: 0.1,
          background: "linear-gradient(to left, #A78BFA, transparent)",
        }}
      />
    </div>
  );
}