// app/business/digital-media-buying/page.tsx
import type { Metadata } from "next";
import { mediaBuyingMetadata } from "@/lib/seo-metadata";
import MediaBuyingClient from "./MediaBuyingClient";

export const metadata: Metadata = mediaBuyingMetadata;

export default function MediaBuyingPage() {
  return (
    <div className="w-full">
      {/* Hero Section */}
      <div className="relative w-full h-screen overflow-hidden">
        <img
          src="/background.jpg"
          alt="Building background"
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gray-500/60" />
        <div className="relative z-10 flex items-center h-full px-8 md:px-16">
          <div className="max-w-2xl text-white">
            <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
              Digital Media Buying
            </h1>
            <p className="text-lg md:text-xl lg:text-2xl leading-relaxed mb-8 text-white/90">
              With experiment, we'll help other business to grow
            </p>
          </div>
        </div>

        {/* Decorative Elements */}
        <div className="absolute top-20 right-20 w-32 h-32 bg-blue-400/20 rounded-full blur-xl animate-pulse" />
        <div className="absolute bottom-40 right-40 w-20 h-20 bg-white/10 rounded-full blur-lg animate-bounce" />
      </div>

      {/* Client-side Section */}
      <MediaBuyingClient />
    </div>
  );
}