'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import EventPromoHero from './components/EventPromoHero';
import type { EventPromoCardData } from './components/EventPromoCard';

const DUMMY_EVENTS: EventPromoCardData[] = [
  {
    id: '1',
    title: 'GIVEAWAY DALAM RANGKA ANNIVERSARY KE-47 GARAM CAP KAPAL',
    excerpt:
      "IT'S GIVEAWAY TIME! Dalam rangka Anniversary ke-47, Garam Cap Kapal mau bagi-bagi hadiah dengan total senilai Rp1.000.000!",
    fullDescription:
      "IT'S GIVEAWAY TIME!\nDalam rangka Anniversary ke-47, Garam Cap Kapal mau bagi-bagi hadiah dengan total senilai Rp1.000.000!\n\nCaranya gampang:\nJawab pertanyaan quiz di slide kedua & menangkan hadiah menarik berupa:\nE-money senilai Rp100.000 untuk 7 orang pemenang\nHadiah berupa kaos, pouch, notes pen, garam 500gr & garam 250gr\n\nPeriode : 2 - 8 September 2025\nPengumuman pemenang : 10 September 2025 lewat IG Story\nCek syarat & ketentuan di slide terakhir ya!\n\nYuk ikutan sekarang dan raih hadiahnya!\n\n#GaramCapKapal #GaramBeryodium #GaramCapKapalGiveaway #Giveaway #GiveawayAlert #GiveawayIndonesia #GiveawayTime #Giveaways #Giveaway2025 #GaramBerkualitas #MengarungiMasakanNusantara",
    date: '2 September 2025',
    image: '/images/home/event-promo/poster-1.png',
    slug: 'giveaway-anniversary-47',
  },
  {
    id: '2',
    title: 'DISKON SPESIAL ANNIVERSARY 47%',
    excerpt:
      'Rayakan Anniversary ke-47 Garam Cap Kapal dengan diskon spesial 47% untuk semua produk pilihan!',
    fullDescription:
      'Rayakan Anniversary ke-47 Garam Cap Kapal dengan diskon spesial 47% untuk semua produk pilihan!\n\nPeriode: 6 - 31 Okt 2025\nBerlaku di seluruh gerai modern trade.',
    date: '6 Oktober 2025',
    image: '/images/home/event-promo/poster-2.png',
    slug: 'diskon-anniversary-47',
  },
  {
    id: '3',
    title: 'GIVEAWAY ANNIVERSARY KE-47 GARAM CAP KAPAL',
    excerpt:
      'Ikuti giveaway spesial Anniversary ke-47! Hadiah menarik menanti untuk kamu yang beruntung.',
    fullDescription:
      'Ikuti giveaway spesial Anniversary ke-47!\nHadiah menarik menanti untuk kamu yang beruntung.\n\nPeriode: 26-31 Okt 2025\nCek syarat & ketentuan di slide terakhir ya!',
    date: '26 Oktober 2025',
    image: '/images/home/event-promo/poster-3.png',
    slug: 'giveaway-anniversary-47-2',
  },
  {
    id: '4',
    title: 'BAZAAR RUN FEST SURABAYA 2025',
    excerpt:
      'Garam Cap Kapal hadir di Bazaar Run Fest Surabaya 2025! Kunjungi booth kami dan dapatkan berbagai promo menarik.',
    fullDescription:
      'Garam Cap Kapal hadir di Bazaar Run Fest Surabaya 2025!\nKunjungi booth kami dan dapatkan berbagai promo menarik.\n\nTanggal: 26-28 September 2025\nLokasi: JX International, Surabaya\n\nAda banyak aktivitas seru dan hadiah menarik!',
    date: '26 September 2025',
    image: '/images/home/event-promo/poster-1.png',
    slug: 'bazaar-run-fest-2025',
  },
];

const EventPromoCarousel = dynamic(
  () => import('./components/EventPromoCarousel'),
  {
    loading: () => (
      <div className="py-20 flex justify-center">
        <div className="w-8 h-8 border-4 border-[#FFD738] border-t-transparent rounded-full animate-spin" />
      </div>
    ),
  }
);

const EventPromoFeatured = dynamic(
  () => import('./components/EventPromoFeatured'),
  {
    loading: () => <div className="h-[600px]" />,
  }
);

export default function EventAndPromoPage() {
  const [selectedItem, setSelectedItem] = useState<EventPromoCardData>(
    DUMMY_EVENTS[0]
  );

  return (
    <div className="bg-white min-h-screen overflow-x-hidden selection:bg-[#FFD738] selection:text-[#1C1D1F] md:pb-40">
      <EventPromoHero />
      <EventPromoCarousel items={DUMMY_EVENTS} onSelectItem={setSelectedItem} />
      <EventPromoFeatured item={selectedItem} />
    </div>
  );
}