import React from "react";
import Link from "next/link";

export default function BlogHero() {
  return (
    <section className="relative h-[750px] w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800">
      {/* Gradient blobs */}
      <div
        className="absolute -left-[20%] -top-[30%] h-[80%] w-[60%] rounded-full opacity-90 blur-2xl"
        style={{
          background:
            "linear-gradient(135deg, rgba(59, 130, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(139, 92, 246, 0.3) 100%)",
        }}
      />
      <div
        className="absolute -bottom-[25%] -right-[15%] h-[70%] w-[55%] rounded-full opacity-90 blur-2xl"
        style={{
          background:
            "linear-gradient(315deg, rgba(139, 92, 246, 0.5) 0%, rgba(99, 102, 241, 0.4) 50%, rgba(59, 130, 246, 0.25) 100%)",
        }}
      />
      {/* Subtle curve lines (optional decoration) */}
      <svg
        className="absolute right-[15%] top-1/2 h-48 w-48 -translate-y-1/2 opacity-[0.07]"
        viewBox="0 0 100 100"
        fill="none"
        stroke="white"
        strokeWidth="0.5"
      >
        <path d="M10 50 Q50 20 90 50 Q50 80 10 50" />
        <path d="M20 50 Q50 30 80 50" />
      </svg>

      {/* Content */}
      <div className="container relative z-10 mx-auto flex h-full min-h-0 flex-col items-center justify-center px-4 text-center">
        <h1 className="text-4xl font-bold tracking-tight text-white drop-shadow-md md:text-5xl lg:text-6xl">
          Blog Grid
        </h1>
        <nav className="mt-3 flex items-center gap-1.5 text-sm text-white/95">
          <Link href="/" className="hover:underline">
            Home
          </Link>
          <span className="opacity-70">/</span>
          <span className="text-white">Blog Grid</span>
        </nav>
      </div>
    </section>
  );
}