// app/radio/page.tsx
import type { Metadata } from "next";
import { newsMetadata } from "@/lib/seo-metadata";
import FaqClient from "./FaqClient";

export const metadata: Metadata = newsMetadata;

export default function RadioPage() {
  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 opacity-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 mb-6">
              Radio Brite
            </h1>
            <h4 className="text-4xl md:text-6xl lg:text-5xl font-bold mb-6">
              Born To Be Loud
            </h4>
            <p className="text-lg md:text-xl lg:text-2xl leading-relaxed mb-8 text-white/90">
              Your gateway to Brite Indonesia radio and podcast world, made to inform, entertain and inspire
            </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>

{/* About Section */}
<section className="w-full bg-[#F8F0E3] py-16 px-6 md:px-12 lg:px-20">
  <div className="max-w-6xl mx-auto">
    <h2 className="text-3xl font-bold text-black mb-4">
      What is Brite Radio?
    </h2>

    <p className="text-lg text-justify text-gray-700 leading-relaxed mb-8">
      Brite Radio is a part of PT Bahurekso Ingkang Teguh (Brite Indonesia) that operates as an online streaming radio platform. 
      Created to amplify creativity, entertainment, and inspiration, 
      Brite Radio provides a space for expression and connection with its listeners. 
      With the tagline "Born to Be Loud, The Voice of a Generation, Unlimited Energy," 
      Brite Radio reflects the vision of Brite Indonesia in building innovative 
      media platforms that become loyal companions in people’s daily lives.
    </p>

    {/* Button */}
          <a
            href="https://radio.briteindonesia.id/"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-[#D9D9D9] text-black font-semibold px-8 py-3 rounded-full shadow-md hover:bg-[#89CFF0] transition"
          >
            TAKE ME THERE
          </a>

  </div>
</section>


      {/* Our Program Section */}
      <section className="w-full bg-[#D9D9D9] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold text-[#1D1A39] mb-10">
            Our Program
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="space-y-6">
              <p className="text-lg font-semibold text-black">Brite Info</p>
              <p className="text-lg font-semibold text-black">Tips & Tricks</p>
              <p className="text-lg font-semibold text-black">Lunch Info Kuliner</p>
              <p className="text-lg font-semibold text-black">Beats of Music</p>
              <p className="text-lg font-semibold text-black">Brite Traveling</p>
              <p className="text-lg font-semibold text-black">Jumat Barokah</p>
            </div>
            <div className="space-y-6 border-l border-gray-400 pl-6">
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
              <p className="text-lg text-gray-700">08.00 - 10.00 WIB Everyday</p>
            </div>
          </div>
        </div>
      </section>

      {/* Podcast Section */}
      <section className="w-full bg-[#F8F0E3] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-2xl md:text-3xl font-bold text-[#1D1A39] mb-10">
            Podcast
          </h2>

          <div className="space-y-8">
            {[
              {
                id: 1,
                url: "https://www.youtube.com/embed/TMUxxNK6pwk?si=pQnSLFw1smH-gXQA",
                title:
                  "Lebih Dekat Dengan Rusmin Kusen CEO CPP Radio Network | Brite Show S2 Eps 128",
                date: "May 6, 2025",
              },
              {
                id: 2,
                url: "https://www.youtube.com/embed/UaHPbsDaLbc?si=8C3kAOpqnJKy5iRI",
                title:
                  "Cerita di Balik PENCARIAN Digarap Hanya dalam Waktu 10 MENIT?! | Brite Show S2 Eps 128",
                date: "Apr 11, 2025",
              },
              {
                id: 3,
                url: "https://www.youtube.com/embed/uf_SUlgGCms?si=iW-7FsfBDOWmkZJ1",
                title:
                  "TIPS MIX & MATCH WARNA Bareng Colour & Style Analyst Nihel Rashiqa | Brite Show S2 Eps 127",
                date: "Mar 5, 2025",
              },
            ].map((podcast) => (
              <div
                key={podcast.id}
                className="flex flex-col sm:flex-row items-start gap-6"
              >
                <div className="w-full sm:w-1/3 aspect-video rounded-lg overflow-hidden shadow-md">
                  <iframe
                    src={podcast.url}
                    title={`Podcast ${podcast.id}`}
                    className="w-full h-full"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowFullScreen
                  ></iframe>
                </div>
                <div className="flex-1 text-left">
                  <p className="text-lg text-black mb-2">{podcast.title}</p>
                  <p className="text-sm text-gray-700">{podcast.date}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Package Section */}
      <section className="bg-[#D9D9D9] py-16 px-6 md:px-16">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-[#1B1C4D] mb-12">
            Our Packages and Partnerships
          </h2>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-10 text-center">
            <div>
              <h3 className="text-xl font-bold mb-4">Spot PT/RT</h3>
              <p className="text-gray-800 text-justify">
                A radio advertisement material from the recording process that
                contains the advertisers’ message complete with narration, music
                background, and tagline.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Insert Recorded</h3>
              <p className="text-gray-800 text-justify">
                An advertisement program that provides space for listener
                interaction by answering questions related to product knowledge
                or services from advertisers. Lucky listeners will receive
                prizes.
              </p>
            </div>
            <div>
              <h3 className="text-xl font-bold mb-4">Adlibs Recorder</h3>
              <p className="text-gray-800 text-justify">
                A radio advertisement material read by the announcer through
                improvisation, creating a theatre of mind experience for
                listeners.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section (Client Component) */}
      <FaqClient />
    </div>
  );
}