"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 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">
        {/* MEDIA PLACEMENT */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Image kiri */}
          <div className="order-1">
            <img
              src="/mediabuying/media.jpg"
              alt="Media Placement"
              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">
              MEDIA PLACEMENT
            </h2>
            <p className="text-gray-600 text-justify mb-6 leading-relaxed">
              We help you in planning, creative creation, segment selection and
              calculating your advertising budget to all mass media in Indonesia
              according to your goals effectively and efficiently.
            </p>
            <ul className="space-y-3 mb-8 text-justify">
              {[
                "Radio Advertising (Loose Spot, Adlibs, Talk Show, Live Report, Quiz, Phone Interview, Outside Broadcast)",
                "Print Advertising (Classified Ads, Column Ads, Display Ads, Advertorials, Brochures)",
                "Digital Advertising (Paid Search, Display, Native, Social Media, Mobile, Video, Email, SMS Ads)",
                "Syndicated & Program Ads (special packages across stations or platforms)",
                "Production & Insertion (creating & inserting ad materials to media channels)",
              ].map((item, i) => (
                <li key={i} className="flex items-start text-gray-700">
                  <div className="w-2 h-2 mt-2 bg-purple-600 rounded-full mr-3 flex-shrink-0"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* OUT OF HOME (OOH) */}
        <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 text-justify">
              OUT OF HOME (OOH)
            </h2>
            <p className="text-gray-600 mb-6 leading-relaxed text-justify">
              Flexibility in choosing location, format and duration makes OOH a
              strategic alternative for increasing your brand awareness. We do
              it ourselves and collaborate with other parties to help you for
              OOH production and placement.
            </p>
          </div>

          {/* Image kanan */}
          <div>
            <img
              src="/mediabuying/ooh.jpg"
              alt="Out of Home Advertising"
              className="w-full h-[350px] object-cover rounded-xl shadow-lg"
            />
          </div>
        </div>

        {/* BRITE STUDIO */}
        <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="/mediabuying/studio.jpg"
              alt="Brite Studio"
              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 text-justify">
              BRITE STUDIO
            </h2>
            <p className="text-gray-600 mb-6 leading-relaxed text-justify">
              To support the production of material (both audio and video), we
              have a studio with good standard equipment. Our team will be happy
              to help you from the creative process until supporting activities
              during production.
            </p>
          </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>
  );
}