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

export const metadata: Metadata = radioMetadata;

export default function BriteNewsPage() {
  const categories = [
    "Politics",
    "Economy",
    "Sports",
    "Technology",
    "Health",
    "Entertainment",
    "Lifestyle",
    "Education",
  ];

  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">
              Brite News
            </h1>
            <h4 className="text-2xl md:text-4xl lg:text-5xl font-bold mb-6">
              Connecting the World Through Stories
            </h4>
            <p className="text-lg md:text-xl lg:text-2xl leading-relaxed mb-8 text-white/90">
              Bringing you facts, insights, and voices around the globe
            </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>

      {/* What is Brite News Section */}
      <section className="w-full bg-[#F8C8C8] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          <div>
            <h2 className="text-2xl md:text-3xl font-bold text-[#1B1C4D] mb-4">
              What is Brite News?
            </h2>
            <p className="text-base text-justify md:text-lg text-[#1B1C4D] leading-relaxed">
              Brite News is a part of PT Bahurekso Ingkang Teguh (Brite Indonesia) that serves as a modern news portal. 
              Dedicated to delivering accurate, reliable, and engaging information, Brite News covers a 
              wide range of topics including current affairs, education, culture, lifestyle, and media. 
              Through Brite News, Brite Indonesia strengthens its role as a trusted source of knowledge and 
              inspiration for readers who want to stay informed and connected with today’s world.

            </p>
          </div>
          <div className="flex flex-col items-center md:items-end text-center md:text-right">
            <img
              src="/newslogo.png"
              alt="Brite News Logo"
              className="w-100 h-45 mb-4"
            />
          </div>
        </div>
      </section>

      {/* What We Provide Section */}
      <section className="w-full bg-[#F8C8C8] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-bold text-[#1B1C4D] mb-8">
            What we provide
          </h2>
          <div className="flex flex-wrap justify-center gap-4">
            {categories.map((category, idx) => (
              <span
                key={idx}
                className="px-4 py-2 bg-white shadow-sm rounded-full text-[#1B1C4D] font-medium cursor-pointer hover:bg-gray-100 transition"
              >
                {category}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Free Access Section */}
      <section className="w-full bg-[#FFF8F0] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="text-left">
            <h2 className="text-xl md:text-2xl font-bold text-[#1B1C4D]">
              FREE ACCESS EVERY NEWS
            </h2>
            <p className="text-sm md:text-base text-[#1B1C4D] mt-1">
              FREE ACCESS EVERY NEWS
            </p>
          </div>
          <a
            href="https://britenews.id/"
            target="_blank"
            rel="noopener noreferrer"
            className="bg-[#FF5A5A] text-black font-semibold px-8 py-3 rounded-full shadow-md hover:bg-[#ff3d3d] transition"
          >
            TAKE ME THERE
          </a>
        </div>
      </section>

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