export default function MarketSevenPulse() {
  const aiTools = [
    { name: 'ChatGPT', color: 'bg-cyan-500', size: 'col-span-2 row-span-2', category: 'Chat' },
    { name: 'Claude', color: 'bg-purple-500', size: 'col-span-1 row-span-1', category: 'Reasoning' },
    { name: 'Runway', color: 'bg-red-500', size: 'col-span-2 row-span-1', category: 'Video' },
    { name: 'Kling', color: 'bg-orange-500', size: 'col-span-1 row-span-1', category: 'Video' },
    { name: 'Veo', color: 'bg-yellow-500', size: 'col-span-2 row-span-2', category: 'Cinema AI' },
    { name: 'Midjourney', color: 'bg-pink-500', size: 'col-span-1 row-span-1', category: 'Image' },
    { name: 'Ideogram', color: 'bg-green-500', size: 'col-span-1 row-span-1', category: 'Design' },
    { name: 'ElevenLabs', color: 'bg-indigo-500', size: 'col-span-1 row-span-1', category: 'Voice' },
    { name: 'Pika', color: 'bg-emerald-500', size: 'col-span-1 row-span-1', category: 'Video' },
    { name: 'Haiper', color: 'bg-sky-500', size: 'col-span-1 row-span-1', category: 'Animation' },
    { name: 'Suno', color: 'bg-violet-500', size: 'col-span-1 row-span-1', category: 'Music' },
    { name: 'Gemini', color: 'bg-blue-500', size: 'col-span-2 row-span-1', category: 'Assistant' },
    { name: 'Perplexity', color: 'bg-teal-500', size: 'col-span-1 row-span-1', category: 'Search AI' },
    { name: 'Cursor', color: 'bg-zinc-500', size: 'col-span-1 row-span-1', category: 'Code AI' },
    { name: 'Lovable', color: 'bg-rose-500', size: 'col-span-1 row-span-1', category: 'Apps' },
    { name: 'Bolt', color: 'bg-fuchsia-500', size: 'col-span-1 row-span-1', category: 'Builder' },
  ];

  const topAI = [
    'GPT',
    'Claude',
    'Veo',
    'Runway',
    'Gemini',
    'Kling',
    'Pika',
    'Suno',
    'Cursor',
    'Perplexity',
  ];

  return (
    <div className="min-h-screen bg-[#050816] text-white overflow-hidden relative">
      {/* Background Glow */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(0,255,255,0.12),transparent_35%)] pointer-events-none" />
      <div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-purple-500/10 blur-[120px] rounded-full" />

      {/* Header */}
      <header className="relative z-20 border-b border-white/10 backdrop-blur-xl bg-white/5 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 className="text-2xl md:text-3xl font-black tracking-tight">
            MarketSeven <span className="text-cyan-400">Pulse</span>
          </h1>
          <p className="text-xs text-zinc-400 mt-1 tracking-[0.2em] uppercase">
            Live Artificial Intelligence Ecosystem
          </p>
        </div>

        <div className="hidden md:flex items-center gap-3">
          <div className="bg-white/5 border border-white/10 rounded-full px-4 py-2 text-sm text-zinc-300">
            10 MAY 2026
          </div>

          <div className="bg-cyan-500/10 border border-cyan-400/20 rounded-full px-4 py-2 text-sm text-cyan-300 animate-pulse">
            12 New AI Today
          </div>
        </div>
      </header>

      {/* Main Layout */}
      <main className="relative z-10 flex h-[calc(100vh-82px)]">

        {/* Central AI Universe */}
        <section className="flex-1 p-4 md:p-6 overflow-hidden">
          <div className="relative h-full rounded-3xl border border-white/10 bg-white/[0.03] backdrop-blur-xl overflow-hidden shadow-2xl shadow-cyan-500/5">

            {/* Grid Overlay */}
            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] opacity-40" />

            {/* Floating Title */}
            <div className="absolute top-6 left-6 z-20">
              <h2 className="text-3xl md:text-5xl font-black tracking-tight text-white/90">
                AI UNIVERSE
              </h2>
              <p className="text-zinc-400 mt-2 max-w-md text-sm md:text-base">
                Discover the world’s fastest growing artificial intelligence ecosystem in real time.
              </p>
            </div>

            {/* AI Grid */}
            <div className="absolute inset-0 p-6 md:p-10 pt-32 overflow-auto">
              <div className="grid grid-cols-6 md:grid-cols-10 auto-rows-[90px] gap-3">
                {aiTools.map((tool, index) => (
                  <div
                    key={index}
                    className={`group relative rounded-2xl ${tool.color} ${tool.size} overflow-hidden cursor-pointer transition-all duration-500 hover:scale-[1.04] hover:z-20 hover:shadow-2xl hover:shadow-cyan-400/20`}
                  >
                    <div className="absolute inset-0 bg-black/25 group-hover:bg-black/10 transition-all duration-500" />

                    <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-500 bg-gradient-to-br from-white/20 to-transparent" />

                    <div className="relative z-10 h-full flex flex-col justify-between p-3">
                      <div className="flex items-center justify-between">
                        <div className="w-3 h-3 rounded-full bg-white animate-pulse" />
                        <span className="text-[10px] uppercase tracking-widest text-white/80">
                          LIVE
                        </span>
                      </div>

                      <div>
                        <h3 className="font-bold text-sm md:text-lg leading-tight">
                          {tool.name}
                        </h3>
                        <p className="text-[10px] md:text-xs text-white/80 mt-1 uppercase tracking-wide">
                          {tool.category}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* Right Ranking Panel */}
        <aside className="w-[90px] border-l border-white/10 bg-white/[0.03] backdrop-blur-xl flex flex-col items-center py-4 gap-3 overflow-hidden">
          <div className="text-[10px] tracking-[0.25em] uppercase text-zinc-500 rotate-90 mt-8 mb-10 whitespace-nowrap">
            Top AI Today
          </div>

          {topAI.map((ai, index) => (
            <div
              key={index}
              className="group w-[58px] h-[58px] rounded-2xl border border-white/10 bg-white/5 hover:bg-cyan-500/20 hover:border-cyan-400/40 transition-all duration-500 flex flex-col items-center justify-center cursor-pointer hover:scale-110"
            >
              <span className="text-[10px] text-zinc-400 font-bold">
                #{index + 1}
              </span>
              <span className="text-[10px] font-bold mt-1 group-hover:text-cyan-300 transition-colors duration-300">
                {ai}
              </span>
            </div>
          ))}
        </aside>
      </main>

      {/* Bottom AI Chat Bar */}
      <div className="fixed bottom-0 left-0 right-0 z-50 p-4">
        <div className="max-w-5xl mx-auto rounded-2xl border border-cyan-400/20 bg-[#0b1024]/90 backdrop-blur-2xl shadow-2xl shadow-cyan-500/10 overflow-hidden">
          <div className="flex items-center gap-3 px-5 py-4 border-b border-white/5">
            <div className="w-3 h-3 rounded-full bg-cyan-400 animate-pulse" />
            <span className="text-sm font-semibold tracking-wide text-cyan-300">
              Pulse AI Guide
            </span>
          </div>

          <div className="px-5 py-4 text-sm text-zinc-300 border-b border-white/5">
            “I want to create automated 10 minute videos with AI for free. Which tools do you recommend?”
          </div>

          <div className="flex items-center gap-3 p-4">
            <input
              type="text"
              placeholder="Ask the AI ecosystem anything..."
              className="flex-1 bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-sm outline-none focus:border-cyan-400/40 focus:bg-white/10 transition-all duration-300"
            />

            <button className="px-5 py-3 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-black font-bold transition-all duration-300 hover:scale-105 shadow-lg shadow-cyan-500/30">
              Ask
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}