"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";

const tabs = ["INSTAGRAM", "TIKTOK"];

const instagramPosts = ["/ig1-new1.png", "/ig2-new2.png", "/ig3-new3.png"];

const tiktokPosts = [
  "/tiktokchm1.jpeg",
  "/tiktokchm2.jpeg",
  "/tiktokchm3.jpeg",
];

export default function SosmedSection() {
  const [activeTab, setActiveTab] = useState("INSTAGRAM");

  return (
    <section className="px-4 py-16 max-w-[1400px] mx-auto">
      {/* Title */}
      <h2 className="text-3xl font-bold mb-2 ml-4">Sosial Media Kami</h2>
      <p className="text-gray-500 text-sm mb-8 ml-4">
        Preview konten dari media sosial resmi kami
      </p>

      {/* Tabs */}
      <div className="flex gap-4 justify-center mb-10">
        {tabs.map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`px-5 py-2 rounded-full text-sm font-medium transition
              ${
                activeTab === tab
                  ? "bg-[#BCD4DF] text-sky-700"
                  : "bg-gray-100 text-gray-600 hover:bg-gray-200"
              }`}
          >
            {tab}
          </button>
        ))}
      </div>

      {/* INSTAGRAM */}
      {activeTab === "INSTAGRAM" && (
        <>
          <div className="flex flex-wrap justify-center gap-6">
            {instagramPosts.map((img, i) => (
              <Link
                key={i}
                href="https://www.instagram.com/jaecoocihampelasbdg"
                target="_blank"
              >
                <div className="relative w-full sm:w-[300px] md:w-[340px] aspect-[4/5] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
                  <Image
                    src={img}
                    alt={`Instagram post ${i + 1}`}
                    fill
                    className="object-cover transition-transform duration-300 group-hover:scale-105"
                  />

                  {/* Overlay */}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                    <span className="text-white text-sm font-semibold">
                      View on Instagram
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          <div className="flex justify-center mt-12">
            <Link
              href="https://www.instagram.com/jaecoocihampelasbdg"
              target="_blank"
            >
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={28} />
              </button>
            </Link>
          </div>
        </>
      )}

      {/* TIKTOK */}
      {activeTab === "TIKTOK" && (
        <>
          <div className="flex flex-wrap justify-center gap-6">
            {tiktokPosts.map((img, i) => (
              <Link
                key={i}
                href="https://www.tiktok.com/@jaecoo.cihampelasbdg"
                target="_blank"
              >
                <div className="relative w-full sm:w-[260px] md:w-[300px] aspect-[9/16] rounded-xl overflow-hidden bg-gray-100 group cursor-pointer shadow-sm">
                  <Image
                    src={img}
                    alt={`TikTok post ${i + 1}`}
                    fill
                    className="object-cover transition-transform duration-300 group-hover:scale-105"
                  />

                  {/* Overlay */}
                  <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                    <span className="text-white text-sm font-semibold">
                      View on TikTok
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          <div className="flex justify-center mt-12">
            <Link
              href="https://www.tiktok.com/@jaecoo.cihampelasbdg"
              target="_blank"
            >
              <button className="bg-[#1F6779] hover:bg-sky-800 text-white px-6 py-3 rounded-md flex items-center gap-2 text-lg font-medium">
                Lihat Selengkapnya
                <ArrowRight size={28} />
              </button>
            </Link>
          </div>
        </>
      )}
    </section>
  );
}