'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { useLanguage } from '@/context/LanguageContext';

interface Video {
  id: string;
  title: string;
  date: string;
}

const shortsVideos: Video[] = [
  { id: 'K3QwUttB0lk', title: 'SHORTS - Cara Baru Untuk Cantik', date: '2026' },
  { id: 't5aCGVvR28Q', title: 'SHORTS - Kulit Glowing Alami', date: '2026' },
  { id: '3F-aZ_n5WmU', title: 'SHORTS - Treatment Terbaru', date: '2026' },
  { id: 'ZqxVq_NjLqA', title: 'SHORTS - Tips Kecantikan', date: '2026' },
  { id: 'sJ6HLD9XyVY', title: 'SHORTS - Perawatan Kulit', date: '2026' },
  { id: 'Hj6JGAW2KOU', title: 'SHORTS - Rahasia Awet Muda', date: '2026' },
  { id: '0kQ9Xl3Vr0s', title: 'SHORTS - Facial Treatment', date: '2026' },
  { id: 'w8j5D1tJ8x4', title: 'SHORTS - Healthy Skin Tips', date: '2026' },
];

export default function LiputanPage() {
  const { t } = useLanguage();
  const [showPopup, setShowPopup] = useState(false);
  const [popupVideo, setPopupVideo] = useState('');

  const mainVideo: Video = {
    id: 'ms8_7sVre0g',
    title: 'Carla Skin Clinic - Age Differently, Age Gracefully',
    date: '10 Juli 2026',
  };

  const sideVideos: Video[] = [
    { id: '8Bbd7lGDpto', title: 'UCAPIN SELAMAT TINGGAL SAMA PORI-PORI STRAWBERRY! CUKUP TREATMENT INI AJA!', date: '22 November 2023' },
    { id: 'DT33KJAFCYc', title: 'SKINCARE AJA GAK CUKUP! KAMU BUTUH INI NIH!', date: '20 November 2023' },
    { id: 'bfkxeX9Bsxc', title: 'INJEKSI BOTOX PALING INSTAN UNTUK KERUTAN!', date: '19 November 2023' },
    { id: 'C9aLU_dtqcI', title: 'INOVASI TERBARU DARI LASER PICO, PICOWAY GLASS SKIN', date: '09 November 2023' },
    { id: 'pfNpmwcsHkw', title: 'COBA TREATMENT WAJAH TIRUS ALA OENNI KOREA SELATAN', date: '06 November 2023' },
    { id: 'OPge2MgUxpA', title: '2 TREATMENT MEWAH UNTUK KENCANGAN KULIT WAJAH & VAGINA', date: '03 November 2023' },
    { id: 'rEvdX3UAs1Y', title: 'HATI - HATI TERJADI ALOPECIA ANDOGENICA, TONTON VIDEO INI UNTUK PENJELASANNYA!', date: '31 October 2023' },
    { id: 'MclFOSrn1v4', title: 'XELAREDERM & PROFHILO, SOLUSI LEHER KENDUR', date: '27 October 2023' },
    { id: 'Cu7khVAoMTU', title: 'XELADERM & PROFHILO, SOLUSI LEHER KENDUR', date: '23 October 2023' },
  ];

  const openPopup = (videoId: string) => {
    setPopupVideo(videoId);
    setShowPopup(true);
  };

  const closePopup = () => {
    setShowPopup(false);
    setPopupVideo('');
  };

  return (
    <main className="min-h-screen bg-ivory">
      <Navbar />

      {/* Hero */}
      <section className="relative py-16 md:py-24 bg-espresso overflow-hidden">
        <div className="container-custom text-center text-white relative z-10">
          <h1 className="font-cormorant text-4xl md:text-6xl font-bold mb-4 uppercase text-white">LIPUTAN</h1>
          <p className="text-ivory/80 max-w-2xl mx-auto">Lihat liputan video dan informasi terbaru seputar treatment, teknologi, dan aktivitas Carla Skin Clinic.</p>
          <nav className="mt-4 text-xs tracking-widest uppercase text-white">
            <Link href="/" className="hover:text-gold transition text-white">Home</Link>
            <span className="mx-2 text-white">/</span>
            <span className="text-white/60">Liputan</span>
          </nav>
        </div>
      </section>

      {/* Video Content */}
      <section className="py-12 md:py-16">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
            {/* Left - Main Video */}
            <div className="flex flex-col gap-5">
              <div
                className="relative w-full aspect-video overflow-hidden rounded-lg bg-black cursor-pointer group"
                onClick={() => openPopup(mainVideo.id)}
              >
                <img
                  src={`https://i.ytimg.com/vi/${mainVideo.id}/maxresdefault.jpg`}
                  alt={mainVideo.title}
                  className="w-full h-full object-cover"
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    if (!target.dataset.fallback) {
                      target.dataset.fallback = '1';
                      target.src = `https://i.ytimg.com/vi/${mainVideo.id}/hqdefault.jpg`;
                    }
                  }}
                />
                <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition flex items-center justify-center">
                  <div className="w-16 h-16 bg-gold/90 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                    <svg className="w-7 h-7 text-white ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                  </div>
                </div>
              </div>
              <div>
                <h3 className="font-semibold text-espresso text-lg">{mainVideo.title}</h3>
                <p className="text-xs text-grey mt-1">{mainVideo.date}</p>
              </div>
            </div>

            {/* Right - Side Videos */}
            <div className="flex flex-col gap-3">
              {sideVideos.map((video, idx) => (
                <div
                  key={idx}
                  className="flex items-stretch bg-white rounded-lg border border-blush overflow-hidden hover:shadow-md transition cursor-pointer group"
                  onClick={() => openPopup(video.id)}
                >
                  <div className="flex-1 min-w-0 p-3 md:p-4 flex flex-col justify-center">
                    <h6 className="text-sm font-semibold text-espresso line-clamp-2 group-hover:text-gold transition">{video.title}</h6>
                    <p className="text-[10px] text-grey mt-1">{video.date}</p>
                  </div>
                  <div className="flex-shrink-0 w-[132px] md:w-[148px] relative bg-blush flex items-center justify-center overflow-hidden">
                    <img
                      src={`https://i.ytimg.com/vi/${video.id}/mqdefault.jpg`}
                      alt=""
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        const target = e.target as HTMLImageElement;
                        target.src = `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`;
                      }}
                    />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-8 h-8 bg-black/60 rounded-full flex items-center justify-center">
                        <svg className="w-4 h-4 text-white ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Instagram Feed Section */}
      <section className="bg-white py-16">
        <div className="container-custom">
          <div className="text-center mb-10">
            <h2 className="font-cormorant text-3xl md:text-4xl font-bold text-espresso mb-4 uppercase">{t('liputan.instagram')}</h2>
            <div className="w-12 h-0.5 bg-gold mx-auto"></div>
            <p className="text-grey-dark mt-4 text-sm">Ikuti kami di Instagram <a href="https://www.instagram.com/carlaskinclinic/" target="_blank" rel="noopener noreferrer" className="text-gold font-semibold hover:underline">@carlaskinclinic</a></p>
          </div>
          <div className="flex justify-center">
            <iframe
              src="https://www.instagram.com/carlaskinclinic/embed"
              className="w-full max-w-[450px] h-[470px] rounded-lg border border-blush"
              frameBorder="0"
              scrolling="no"
              allowTransparency
              title="Instagram Feed"
            />
          </div>
          <div className="text-center mt-6">
            <a href="https://www.instagram.com/carlaskinclinic/" target="_blank" rel="noopener noreferrer"
              className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 via-pink-500 to-orange-400 text-white text-xs uppercase tracking-widest font-semibold rounded-lg hover:opacity-90 transition">
              <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
              {t('liputan.instagram-btn')}
            </a>
          </div>
        </div>
      </section>

      <Footer />

      {/* Video Popup Modal */}
      {showPopup && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-sm" onClick={closePopup}>
          <div className="relative w-full max-w-4xl mx-4 aspect-video" onClick={(e) => e.stopPropagation()}>
            <iframe
              src={`https://www.youtube.com/embed/${popupVideo}?autoplay=1&rel=0`}
              title="YouTube video player"
              className="w-full h-full rounded-lg"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            />
            <button onClick={closePopup} className="absolute -top-10 right-0 text-white hover:text-gold transition text-sm">
              ✕ Tutup
            </button>
          </div>
        </div>
      )}
    </main>
  );
}