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

export const metadata: Metadata = mediaBuyingClientMetadata;

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">
              Media Buying
            </h1>
            <p className="text-lg md:text-xl lg:text-2xl leading-relaxed mb-8 text-white/90">
              Maximize your brand reach through strategic offline media
            </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 */}
      <OfflineMediaBuyingClient />
    </div>
  );
}