"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation } from "swiper/modules";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { motion } from "framer-motion";

/* ========================= DATA ========================= */
const businesses = [
    {
    title: "Media Buying",
    desc: "Maximize your brand reach through strategic offline media.",
    img: "/bisnis/mediabuyingoffline.jpg",
    link: "/business/media-buying",
  },
  {
    title: "Digital Media Buying",
    desc: "Professional media buying service to expand your reach through precise targeting and impactful ad placement.",
    img: "/bisnis/digitalmediabuying.jpg",
    link: "/business/digital-media-buying",
  },
  {
    title: "Influencer & Creator Marketing",
    desc: "Connect your brand with trusted influencers & creators for authentic engagement and long-lasting impact.",
    img: "/bisnis/influencer.jpg",
    link: "/business/digital-media-buying/cabang/influencer",
  },
  {
    title: "Strategic Audio Marketing",
    desc: "Reach audiences through sound with creative and measurable audio campaigns across streaming platforms.",
    img: "/bisnis/strategicaudio.jpg",
    link: "/business/digital-media-buying/cabang/strategic",
  },
  {
    title: "Event Management",
    desc: "Deliver unforgettable experiences through our creative, strategic, and professional event management team.",
    img: "/bisnis/event.jpg",
    link: "/business/event-management",
  },
  {
    title: "Virtual Office",
    desc: "Empowering your business with a professional address, modern workspace, and seamless virtual solutions.",
    img: "/bisnis/virtualoffice.jpg",
    link: "/business/virtual-office",
  },
];


const clients = [
  { name: "Adira", logo: "/logo/adira.png" },
  { name: "BNI", logo: "/logo/bni.svg" },
  { name: "BRI", logo: "/logo/bri.png" },
  { name: "Carrefour", logo: "/logo/carrefour.svg" },
  { name: "Chevrolet", logo: "/logo/chevrolet.svg" },
  { name: "Danamon", logo: "/logo/danamon.png" },
  { name: "Danone", logo: "/logo/danone.svg" },
  { name: "DBS", logo: "/logo/dbs.svg" },
  { name: "Djarum", logo: "/logo/djarum.png" },
  { name: "Grab", logo: "/logo/grab-2.svg" },
];

const testimonials = [
    { 
    name: "Dodi K.", 
    role: "Media Advertisement & Marcomm - Sharp Electronics Indonesia", 
    text: "Brite Indonesia, terima kasih atas kerjasamanya... One Stop Service-nya selalu oke, networknya luas dan yang pasti paketnya murah. Campaign jadi lebih efektif dan efisien menjangkau seluruh daerah. Semoga Brite sukses terus dan Berjaya. Amin YRA." 
  },
  { 
    name: "Fajar Herlambang", 
    role: "Ketua Timker Fungsi Informasi dan Humas Kanwil Kemenag DKI Jakarta", 
    text: "Kerjasama dengan BRITE Indonesia sangat memuaskan! Tim profesional, responsif, dan paham kebutuhan komunikasi Kanwil Kemenag DKI. Hasilnya maksimal, engagement meningkat signifikan. Recommended banget, pasti kerjasama lagi!" 
  },
  {
  name: "City Budiyanto",
  role: "Media Director",
  text: "Media buying Radio terbaik selama saya masuk ke dunia Advertising Agency. Dari Agency satu ke Agency lain selalu tidak pernah mau pindah ke lain hati, hampir 20 tahun lebih selalu bersama. Hasilnya nyata - selalu membuahkan hasil di setiap tender yang kita kerjakan."
},
];

const newsData = [
  { id: 1, category: "Brand Identity", time: "5 min read", title: "The importance of a strong brand identity", desc: "Brand identity sangat penting untuk membangun kepercayaan pelanggan.", image: "/news1.jpg" },
  { id: 2, category: "UI/UX", time: "5 min read", title: "Top 10 UI and UX design mistakes to avoid", desc: "Hindari kesalahan umum dalam desain UI/UX agar produk lebih user-friendly.", image: "/news2.jpg" },
  { id: 3, category: "Web Development", time: "5 min read", title: "The benefits of using a web framework", desc: "Framework mempercepat proses development dengan best practices.", image: "/news3.jpg" },
];

const faqData = [
  { id: 1, question: "What is a media buying house?", answer: "A company specialized in placing advertisements across traditional and digital media." },
  { id: 2, question: "What types of media can be purchased?", answer: "Radio, print media, local TV, digital ads (Google, Meta, TikTok, etc.)." },
  { id: 3, question: "What are the advantages?", answer: "Time & cost efficiency, as well as access to extensive databases aligned with target market." },
  { id: 4, question: "Do you provide campaign reports?", answer: "Yes, we always provide reporting and evaluation after each campaign." },
];

/* ========================= BUTTON ========================= */
const PrimaryButton = ({ children }: { children: React.ReactNode }) => (
  <button className="px-6 py-3 rounded-full bg-[#000432] text-white hover:bg-[#111852] transition">
    {children}
  </button>
);

/* ========================= ANIMATION VARIANTS ========================= */
const fadeUp = {
  hidden: { opacity: 0, y: 40 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.8,
      ease: [0.25, 0.1, 0.25, 1] as [number, number, number, number], // ✅ cubic-bezier easeOut
    },
  },
};

/* ========================= HOMEPAGE ========================= */
export default function HomePage() {
  const [openFaq, setOpenFaq] = useState<number | null>(1);
  const toggleFaq = (id: number) => setOpenFaq(openFaq === id ? null : id);

  return (
    <div className="w-full bg-[#F8F0E3]">
      {/* 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-700/70"></div>
  <motion.div
    className="relative z-10 flex items-center h-full px-8 md:px-16"
    initial="hidden"
    animate="show"
    variants={fadeUp}
  >
    <div className="max-w-3xl text-white text-center md:text-left">
      <h1 className="text-5xl font-extrabold mb-4">BRITE INDONESIA</h1>
      <h2 className="text-2xl font-semibold mb-6">Your Professional Partner</h2>
      <p className="text-lg mb-6 text-gray-200">
        We elevate your brand image and publication through our professional strategy and marketing plan.
      </p>

<a
  href="https://wa.me/6281997790765"
  target="_blank"
  rel="noopener noreferrer"
  className="inline-block"
>
  <button
    className="group bg-green-500 hover:bg-green-600 text-white font-semibold px-8 py-4 rounded-full 
               transition-all duration-300 transform hover:scale-105 hover:shadow-lg flex items-center space-x-2"
  >
    {/* WhatsApp Icon */}
    <svg
      className="w-5 h-5"
      fill="currentColor"
      viewBox="0 0 24 24"
    >
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.687" />
    </svg>
    <span>Chat With Us</span>
  </button>
</a>

    </div>
  </motion.div>
</div>


      {/* ABOUT SECTION */}
      <motion.section
        className="w-full bg-[#F8F0E3] py-16 px-6"
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.2 }}
        variants={fadeUp}
      >
        <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-black mb-4">Faster Better Best Network in Indonesia</h2>
            <p className="text-lg text-gray-700 leading-relaxed text-justify">
              Brite Indonesia makes it easy for brands to execute media buying quickly and measurably through platforms designed to optimize KPI (Key Performance Indicator) and ROI.
            </p>
          </div>
          <Image src="/fotohome.png" alt="About Brite Indonesia" width={600} height={400} className="rounded-lg shadow-lg" />
        </div>
      </motion.section>

      {/* OUR BUSINESS */}
      <motion.section
      className="w-full px-6 py-20 bg-[#000432] text-white"
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.2 }}
      variants={fadeUp}
    >
      <div className="max-w-7xl mx-auto">
        {/* Title */}
        <div className="text-center mb-14">
          <h2 className="text-4xl md:text-5xl font-extrabold mb-4">
            Our Business
          </h2>
          <p className="text-gray-300 max-w-2xl mx-auto text-lg">
            We connect creativity, technology, and strategy to deliver
            measurable results for your brand.
          </p>
        </div>

        {/* Swiper Cards */}
        <Swiper
          modules={[Navigation]}
          navigation
          spaceBetween={24}
          slidesPerView={1}
          breakpoints={{
            768: { slidesPerView: 2 },
            1024: { slidesPerView: 3 },
          }}
        >
          {businesses.map((item, i) => (
            <SwiperSlide key={i}>
              <motion.div
                className="group bg-[#F8F0E3] text-[#000432] rounded-3xl shadow-xl overflow-hidden flex flex-col h-full transition-transform duration-500 hover:-translate-y-2 hover:shadow-2xl"
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
              >
                {/* Image */}
                <div className="relative">
                  <Image
                    src={item.img}
                    alt={item.title}
                    width={500}
                    height={320}
                    className="h-52 w-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                </div>

                {/* Content */}
                <div className="p-6 flex flex-col flex-grow justify-between">
                  <div>
                    <h3 className="text-xl font-bold mb-2 group-hover:text-[#2C145A] transition-colors duration-300">
                      {item.title}
                    </h3>
                    <p className="text-sm text-gray-700 mb-6 leading-relaxed">
                      {item.desc}
                    </p>
                  </div>

                  {/* Button */}
                  <Link href={item.link}>
                    <button
                      className="w-full bg-[#000432] hover:bg-[#2C145A] text-white font-semibold px-6 py-3 rounded-full
                                 flex items-center justify-center gap-2 transition-all duration-300
                                 hover:scale-105 hover:shadow-lg"
                    >
                      See What We Do
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17 8l4 4m0 0l-4 4m4-4H3"
                        />
                      </svg>
                    </button>
                  </Link>
                </div>
              </motion.div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </motion.section>

      {/* CLIENTS */}
      {/* CLIENTS */}
<motion.section
  className="w-full px-6 py-16 bg-[#F8F0E3] text-center"
  initial="hidden"
  whileInView="show"
  viewport={{ once: true, amount: 0.2 }}
  variants={fadeUp}
>
  <h2 className="text-3xl font-bold text-[#000432] mb-12">
    Our Awesome Clients
  </h2>

  {/* Client Logos */}
  <div className="max-w-6xl mx-auto grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-8">
    {clients.map((c, i) => (
      <motion.div
        key={i}
        className="aspect-square flex items-center justify-center p-4 bg-white rounded-xl shadow hover:shadow-lg transition"
        whileHover={{ scale: 1.05 }}
      >
        <Image
          src={c.logo}
          alt={c.name}
          width={120}
          height={120}
          className="object-contain max-w-[80%] max-h-[80%]"
        />
      </motion.div>
    ))}
  </div>

  {/* See More Button */}
  <div className="mt-12">
    <Link href="/company/partner">
      <button
        className="bg-[#000432] hover:bg-[#111852] text-white font-semibold px-8 py-3 rounded-full 
                   transition-all duration-300 transform hover:scale-105 hover:shadow-lg"
      >
        See More
      </button>
    </Link>
  </div>
</motion.section>


{/* TESTIMONIALS */}
<motion.section
  className="w-full px-4 sm:px-6 py-16 bg-[#2C145A] text-white flex items-center justify-center"
  initial="hidden"
  whileInView="show"
  viewport={{ once: true, amount: 0.2 }}
  variants={fadeUp}
>
  <div className="max-w-6xl mx-auto text-center">
    <h2 className="text-3xl font-bold mb-12">What Our Clients Say</h2>

    <div className="flex justify-center items-center">
      <Swiper
        modules={[Navigation]}
        navigation
        spaceBetween={20}
        slidesPerView={1}
        breakpoints={{
          768: { slidesPerView: 2 },
          1024: { slidesPerView: 2 },
        }}
        className="w-full max-w-xs sm:max-w-full px-2 sm:px-4 md:px-0" // ✅ Batasi lebar maksimum di mobile
      >
        {testimonials.map((item, i) => (
          <SwiperSlide
            key={i}
            className="flex justify-center items-stretch px-2 sm:px-4 md:px-2"
          >
            <motion.div
              className="bg-[#000432] rounded-xl shadow-lg p-5 w-full text-justify flex flex-col justify-between transition-transform duration-300 hover:scale-[1.02] h-auto min-h-[240px] max-w-[280px] sm:max-w-lg mx-auto" // ✅ Tambah max-w-[280px] untuk mobile
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              variants={fadeUp}
            >
              <p className="text-sm mb-6 leading-relaxed">{item.text}</p>
              <div>
                <h4 className="font-semibold text-base">{item.name}</h4>
                <p className="text-xs opacity-80">{item.role}</p>
              </div>
            </motion.div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  </div>
</motion.section>





      {/* LATEST NEWS */}
      {/* <motion.section
        className="w-full bg-[#6C0D0D] py-16"
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.2 }}
        variants={fadeUp}
      >
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex justify-between items-center mb-10">
            <h2 className="text-3xl font-bold text-white">Latest Brite News</h2>
            <Link href="/brite-news">
              <button className="border border-white text-white px-6 py-2 rounded-md hover:bg-white hover:text-[#6C0D0D] transition">
                View All
              </button>
            </Link>
          </div>
          <div className="hidden lg:grid grid-cols-3 gap-8">
            {newsData.map((item) => (
              <motion.div key={item.id} className="rounded-lg overflow-hidden" variants={fadeUp}>
                <img src={item.image} alt={item.title} className="w-full h-56 object-cover rounded-lg" />
                <h3 className="mt-4 text-lg font-semibold text-white">{item.title}</h3>
                <p className="mt-2 text-sm text-gray-200 line-clamp-3">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </motion.section> */}

      {/* FAQ */}
<section className="w-full py-16 px-4 sm:px-6 lg:px-8">
  <div className="max-w-6xl mx-auto">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
      {/* Left Side - Title */}
      <div>
        <h2 className="text-3xl md:text-4xl font-bold text-[#000432] leading-tight">
          Frequently asked questions
        </h2>
      </div>

      {/* Right Side - FAQ Items */}
      <div className="space-y-4">
        {faqData.map((faq) => (
          <div key={faq.id} className="border-b border-gray-300 pb-4">
            <button
              onClick={() => toggleFaq(faq.id)}
              className="w-full flex justify-between items-center text-left py-4 focus:outline-none group"
            >
              <span className="text-lg font-semibold text-[#000432] pr-4 group-hover:text-[#111852] transition-colors">
                {faq.question}
              </span>
              <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center">
                {openFaq === faq.id ? (
                  <svg
                    className="w-5 h-5 text-[#000432] transition-transform"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                ) : (
                  <svg
                    className="w-5 h-5 text-[#000432] transition-transform"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 4v16m8-8H4"
                    />
                  </svg>
                )}
              </div>
            </button>

            {/* Answer */}
            <div
              className={`overflow-hidden transition-all duration-300 ease-in-out ${
                openFaq === faq.id
                  ? "max-h-96 opacity-100"
                  : "max-h-0 opacity-0"
              }`}
            >
              <div className="pb-4">
                <p className="text-gray-700 leading-relaxed text-base">
                  {faq.answer}
                </p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
</section>

    </div>
  );
}