// app/radio/page.tsx
import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { radioMetadata } from "@/lib/seo-metadata";
import FaqClient from "./FaqClient";

export const metadata: Metadata = radioMetadata;

export default function RadioPage() {
  const lessons = [
    {
      id: 1,
      title: "Sekolah Dasar",
      desc: "Matematika, Bahasa Indonesia, IPA, IPS, Seni Budaya",
      image: "/sd.png",
    },
    {
      id: 2,
      title: "Sekolah Menengah Pertama",
      desc: "Matematika, Bahasa Indonesia, IPA, IPS, Seni Budaya",
      image: "/smp.png",
    },
    {
      id: 3,
      title: "Sekolah Menengah Atas",
      desc: "Matematika, Bahasa Indonesia, Kimia, Biologi, Fisika, Sejarah & Ilmu Sosial, Seni Budaya",
      image: "/sma.png",
    },
  ];

  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 Genius
            </h1>
            <h4 className="text-4xl md:text-6xl lg:text-5xl font-bold mb-6">
              Your Professional Partner
            </h4>
            <p className="text-lg md:text-xl lg:text-2xl leading-relaxed mb-8 text-white/90">
              Learn anywhere, practice anytime and shine brighter with Brite Genius
            </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 Genius Section */}
      <section className="w-full bg-[#F8F0E3] 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-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-black mb-4">
              What is Brite Genius?
            </h2>
            <p className="text-lg text-justify text-gray-700 leading-relaxed">
              Brite Genius is a part of PT Bahurekso Ingkang Teguh (Brite Indonesia) 
              that serves as an online learning platform for everyone. Through Brite Genius, 
              Brite Indonesia provides accessible education for all levels, from elementary, 
              junior high, senior high, university students, to the general public. Designed to 
              make learning inclusive and innovative, Brite Genius reflects Brite Indonesia’s mission 
              o empower people with knowledge, creativity, and measurable success in education.
            </p>
          </div>
          <div>
            <Image
              src="/logogenius.png"
              alt="About Brite Genius"
              width={500}
              height={350}
              className="w-full h-auto rounded-lg shadow-lg"
            />
          </div>
        </div>
      </section>

      {/* Our Class and Lesson */}
      <section className="w-full bg-[#DEFAFF] py-16 px-6 md:px-12 lg:px-20">
        <div className="max-w-6xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-indigo-900 mb-12">
            Our Class And Lesson
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
            {lessons.map((lesson) => (
              <div key={lesson.id} className="flex flex-col items-center text-center">
                <Image
                  src={lesson.image}
                  alt={lesson.title}
                  width={120}
                  height={120}
                  className="mb-6"
                />
                <h3 className="text-lg font-semibold text-gray-900 mb-2">
                  {lesson.title}
                </h3>
                <p className="text-gray-700 text-sm leading-relaxed">
                  {lesson.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Free Access Section */}
      <section className="w-full bg-[#F8F0E3] py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold text-black mb-6">
            FREE ACCESS EVERY CLASS
          </h2>
          <p className="text-lg text-gray-700 leading-relaxed mb-8">
            Start learning now with open access to every course
          </p>
          <Link
            href="https://britegenius.com/"
            target="https://britegenius.com/"
            rel="noopener noreferrer"
            className="inline-block bg-sky-400 hover:bg-sky-500 text-black font-semibold py-3 px-8 rounded-full transition"
          >
            TAKE ME THERE
          </Link>
        </div>
      </section>

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