export default function MarketSevenPulse() {
  const aiNodes = [
    {
      id: 1,
      x: "6%",
      y: "12%",
      w: "260px",
      h: "150px",
      label: "GPT Core",
      glow: "cyan",
    },
    {
      id: 2,
      x: "30%",
      y: "8%",
      w: "170px",
      h: "170px",
      label: "Claude",
      glow: "purple",
    },
    {
      id: 3,
      x: "48%",
      y: "15%",
      w: "240px",
      h: "120px",
      label: "Runway",
      glow: "blue",
    },
    {
      id: 4,
      x: "72%",
      y: "10%",
      w: "160px",
      h: "220px",
      label: "Veo",
      glow: "cyan",
    },

    {
      id: 5,
      x: "14%",
      y: "38%",
      w: "180px",
      h: "180px",
      label: "Cursor",
      glow: "purple",
    },
    {
      id: 6,
      x: "38%",
      y: "34%",
      w: "320px",
      h: "190px",
      label: "Gemini",
      glow: "cyan",
    },
    {
      id: 7,
      x: "70%",
      y: "42%",
      w: "220px",
      h: "130px",
      label: "Kling",
      glow: "blue",
    },

    {
      id: 8,
      x: "10%",
      y: "72%",
      w: "130px",
      h: "130px",
      label: "Pika",
      glow: "purple",
    },
    {
      id: 9,
      x: "32%",
      y: "74%",
      w: "260px",
      h: "120px",
      label: "Perplexity",
      glow: "cyan",
    },
    {
      id: 10,
      x: "62%",
      y: "70%",
      w: "150px",
      h: "200px",
      label: "Ideogram",
      glow: "blue",
    },
  ];

  const microNodes = Array.from({ length: 65 }, (_, i) => ({
    id: i,
    left: `${Math.random() * 100}%`,
    top: `${Math.random() * 100}%`,
    size: `${28 + Math.random() * 38}px`,
    opacity: 0.15 + Math.random() * 0.35,
    duration: `${4 + Math.random() * 6}s`,
  }));

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

  return (
    <div className="relative min-h-screen overflow-hidden bg-[#020617] text-white">

      {/* MAIN BACKGROUND */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,211,238,0.14),transparent_30%)]" />

      <div className="absolute top-[-200px] left-[-100px] w-[700px] h-[700px] bg-cyan-500/10 rounded-full blur-[180px]" />

      <div className="absolute bottom-[-250px] right-[-150px] w-[900px] h-[900px] bg-blue-500/10 rounded-full blur-[220px]" />

      <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(rgba(255,255,255,1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,1)_1px,transparent_1px)] bg-[size:70px_70px]" />

      {/* FLOATING PARTICLES */}
      {microNodes.map((node) => (
        <div
          key={node.id}
          className="absolute rounded-xl border border-cyan-400/10 bg-cyan-400/5 backdrop-blur-sm animate-pulse"
          style={{
            left: node.left,
            top: node.top,
            width: node.size,
            height: node.size,
            opacity: node.opacity,
            animationDuration: node.duration,
          }}
        />
      ))}

      {/* HEADER */}
      <header className="relative z-50 flex items-center justify-between px-8 py-6 border-b border-cyan-400/10 backdrop-blur-2xl bg-[#020617]/60">

        <div>
          <h1 className="text-4xl md:text-5xl font-black tracking-tight">
            MarketSeven{" "}
            <span className="text-cyan-400">
              Pulse
            </span>
          </h1>

          <p className="mt-2 text-[11px] tracking-[0.35em] uppercase text-cyan-300/50">
            AI ECOSYSTEM MAP
          </p>
        </div>

        <div className="hidden md:flex items-center gap-4">

          <div className="px-4 py-2 rounded-full border border-white/10 bg-white/[0.03] text-zinc-400 text-sm">
            10 MAY 2026
          </div>

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

        </div>

      </header>

      {/* MAIN CONTENT */}
      <main className="relative z-10 flex h-[calc(100vh-90px)] overflow-hidden">

        {/* AI MAP */}
        <section className="relative flex-1 overflow-hidden">

          {/* HUGE TITLE */}
          <div className="absolute top-12 left-12 z-30">

            <h2 className="text-[70px] md:text-[120px] font-black leading-none tracking-tight text-white/[0.05]">
              PULSE
            </h2>

            <div className="absolute top-10 left-2">

              <h3 className="text-3xl md:text-5xl font-bold text-white">
                AI Universe
              </h3>

              <p className="mt-4 max-w-lg text-zinc-400 leading-relaxed">
                Explore the most advanced artificial intelligence ecosystem
                through a cinematic real-time interface.
              </p>

            </div>

          </div>

          {/* AI NODES */}
          {aiNodes.map((node) => (
            <div
              key={node.id}
              className="absolute group transition-all duration-700 hover:scale-[1.04] cursor-pointer"
              style={{
                left: node.x,
                top: node.y,
                width: node.w,
                height: node.h,
              }}
            >

              {/* OUTER GLOW */}
              <div className="absolute -inset-[2px] rounded-[34px] bg-cyan-400/10 blur-2xl opacity-0 group-hover:opacity-100 transition-all duration-700" />

              {/* MAIN CARD */}
              <div className="relative h-full overflow-hidden rounded-[34px] border border-cyan-400/10 bg-white/[0.03] backdrop-blur-3xl shadow-[0_0_60px_rgba(34,211,238,0.06)] group-hover:border-cyan-400/30 transition-all duration-700">

                {/* INTERNAL LIGHT */}
                <div className="absolute inset-0 bg-gradient-to-br from-cyan-400/[0.07] via-transparent to-blue-500/[0.04]" />

                {/* GRID */}
                <div className="absolute inset-0 opacity-30 bg-[linear-gradient(rgba(34,211,238,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(34,211,238,0.05)_1px,transparent_1px)] bg-[size:20px_20px]" />

                {/* AMBIENT LIGHT */}
                <div className="absolute top-[-60px] right-[-40px] w-[180px] h-[180px] bg-cyan-400/10 rounded-full blur-[80px]" />

                {/* STATUS DOT */}
                <div className="absolute top-5 right-5 flex items-center gap-2">

                  <div className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />

                  <span className="text-[9px] uppercase tracking-[0.25em] text-cyan-300/50">
                    LIVE
                  </span>

                </div>

                {/* LABEL */}
                <div className="absolute bottom-6 left-6">

                  <div className="text-2xl font-bold tracking-wide">
                    {node.label}
                  </div>

                  <div className="mt-2 text-[10px] uppercase tracking-[0.35em] text-cyan-300/50">
                    ACTIVE NODE
                  </div>

                </div>

              </div>

            </div>
          ))}

        </section>

        {/* RIGHT PANEL */}
        <aside className="relative w-[110px] border-l border-cyan-400/10 bg-[#020617]/70 backdrop-blur-2xl flex flex-col items-center py-6">

          <div className="rotate-90 text-[10px] uppercase tracking-[0.45em] text-cyan-300/40 mt-10 mb-16 whitespace-nowrap">
            TOP AI TODAY
          </div>

          <div className="flex flex-col gap-3">

            {topAI.map((ai, index) => (
              <div
                key={index}
                className="group relative w-[64px] h-[64px] rounded-2xl border border-cyan-400/10 bg-white/[0.03] backdrop-blur-xl flex flex-col items-center justify-center transition-all duration-500 hover:scale-110 hover:border-cyan-400/30 hover:bg-cyan-400/10 cursor-pointer overflow-hidden"
              >

                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-700 bg-gradient-to-br from-cyan-400/10 via-transparent to-blue-500/10" />

                <span className="relative z-10 text-[10px] text-zinc-500 font-bold">
                  #{index + 1}
                </span>

                <span className="relative z-10 mt-1 text-[10px] font-bold text-white group-hover:text-cyan-300">
                  {ai}
                </span>

              </div>
            ))}

          </div>

        </aside>

      </main>

      {/* BOTTOM AI CHAT */}
      <div className="fixed bottom-0 left-0 right-0 z-50 p-4">

        <div className="max-w-6xl mx-auto overflow-hidden rounded-[34px] border border-cyan-400/10 bg-[#020617]/80 backdrop-blur-3xl shadow-[0_0_80px_rgba(34,211,238,0.08)]">

          {/* HEADER */}
          <div className="flex items-center gap-3 border-b border-cyan-400/5 px-6 py-4">

            <div className="w-3 h-3 rounded-full bg-cyan-400 animate-pulse" />

            <span className="text-sm uppercase tracking-[0.3em] text-cyan-300">
              Pulse AI Guide
            </span>

          </div>

          {/* EXAMPLE */}
          <div className="px-6 py-4 border-b border-cyan-400/5 text-sm text-zinc-400">
            “I want to create automated 10 minute AI videos for free. Which tools should I use?”
          </div>

          {/* INPUT */}
          <div className="flex items-center gap-4 p-4">

            <input
              type="text"
              placeholder="Ask anything about the AI ecosystem..."
              className="flex-1 h-16 rounded-2xl border border-cyan-400/10 bg-white/[0.03] px-6 text-sm text-white outline-none transition-all duration-300 focus:border-cyan-400/30 focus:bg-white/[0.05]"
            />

            <button className="h-16 px-8 rounded-2xl bg-cyan-400 text-black font-bold transition-all duration-300 hover:scale-105 hover:bg-cyan-300 shadow-[0_0_40px_rgba(34,211,238,0.35)]">
              ASK
            </button>

          </div>

        </div>

      </div>

    </div>
  );
}