"use client";

import { useRouter } from "next/navigation";

export default function MediaBuyingClient() {
  const router = useRouter();

  const whatsappNumber = "6281234567890";
  const whatsappMessage =
    "Hello, I'm interested in your Digital Media Buying services";

  const handleChatWithUs = () => {
    const encodedMessage = encodeURIComponent(whatsappMessage);
    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;
    window.open(whatsappUrl, "_blank");
  };

  const handleCheckBusiness = (path: string) => {
    router.push(path);
  };

  return (
    <div className="w-full bg-[#F8F0E3] py-16">
      <div className="max-w-7xl mx-auto px-6 space-y-24">
        {/* DIGITAL MEDIA BUYING */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Image kiri */}
          <div className="order-1">
            <img
              src="/digitalmedia/digitalmediabuying.jpg"
              alt="Digital Media Buying"
              className="w-full h-[350px] object-cover rounded-xl shadow-lg"
            />
          </div>

          {/* Text kanan */}
          <div className="order-2">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
              DIGITAL MEDIA BUYING
            </h2>
            <p className="text-gray-600 mb-6 text-justify leading-relaxed">
              Digital Media Buying is the art and science of placing your brand's
              message on the right digital platforms, at the right time, to reach
              the most relevant and potential audience.
            </p>

            <ul className="space-y-3 mb-8 text-justify">
              {[
                "Search Engine Marketing",
                "Social Media Advertising",
                "Programmatic & Display Advertising",
                "Video & YouTube Advertising",
                "E-Commerce & Marketplace Ads",
                "Content Marketing & SEO",
              ].map((item, i) => (
                <li key={i} className="flex items-start text-gray-700">
                  <div className="w-2 h-2 mt-2 bg-blue-600 rounded-full mr-3"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <button
              onClick={() =>
                handleCheckBusiness("/business/digital-media-buying/cabang/digital")
              }
              className="bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded transition-colors duration-300"
            >
              Check our Business
            </button>
          </div>
        </div>

        {/* INFLUENCER & CREATOR MARKETING */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Text kiri */}
          <div>
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
              INFLUENCER & CREATOR MARKETING
            </h2>
            <p className="text-gray-600 mb-6 text-justify leading-relaxed">
              Influencer & Creator Marketing is the strategy of connecting your
              brand with its target audience through authentic and trusted voices
              of creators.
            </p>

            <ul className="space-y-3 mb-8 text-justify">
              {[
                "Influencer Strategy & Selection",
                "Campaign Management & Execution",
                "Content Creator Collaboration",
                "Performance Tracking & Reporting",
                "Event & Activation Integration",
              ].map((item, i) => (
                <li key={i} className="flex items-start text-gray-700">
                  <div className="w-2 h-2 mt-2 bg-blue-600 rounded-full mr-3"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <button
              onClick={() =>
                handleCheckBusiness("/business/digital-media-buying/cabang/influencer")
              }
              className="bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded transition-colors duration-300"
            >
              Check our Business
            </button>
          </div>

          {/* Image kanan */}
          <div>
            <img
              src="/digitalmedia/influencer.jpg"
              alt="Influencer & Creator Marketing"
              className="w-full h-[350px] object-cover rounded-xl shadow-lg"
            />
          </div>
        </div>

        {/* STRATEGIC AUDIO MARKETING */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Image kiri */}
          <div className="order-1 lg:order-1">
            <img
              src="/digitalmedia/strategicaudio.jpg"
              alt="Strategic Audio Marketing"
              className="w-full h-[350px] object-cover rounded-xl shadow-lg"
            />
          </div>

          {/* Text kanan */}
          <div className="order-2 lg:order-2">
            <h2 className="text-3xl lg:text-4xl font-bold text-gray-800 mb-4">
              STRATEGIC AUDIO MARKETING
            </h2>
            <p className="text-gray-600 mb-6 text-justify leading-relaxed">
              Our approach to reach audiences through the power of sound. We
              leverage moments when your audience is listening in the car, during
              a workout, or while relaxing.
            </p>

            <ul className="space-y-3 mb-8 text-justify">
              {[
                "Radio & Podcast Ads",
                "Audio Programmatic Buying",
                "Spotify & Streaming Ads",
                "Voice Search Optimization",
                "Jingle & Audio Branding",
              ].map((item, i) => (
                <li key={i} className="flex items-start text-gray-700">
                  <div className="w-2 h-2 mt-2 bg-blue-600 rounded-full mr-3"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            <button
              onClick={() =>
                handleCheckBusiness("/business/digital-media-buying/cabang/strategic")
              }
              className="bg-blue-900 hover:bg-blue-800 text-white px-8 py-3 rounded transition-colors duration-300"
            >
              Check our Business
            </button>
          </div>
        </div>
      </div>

      {/* Floating WhatsApp Button */}
      <div className="fixed bottom-6 right-6">
        <button
          onClick={handleChatWithUs}
          className="bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-full shadow-lg flex items-center space-x-2"
        >
          <span>💬 Chat With Us</span>
        </button>
      </div>
    </div>
  );
}