import Ck44Layout from '@/Layouts/Ck44Layout';
import PromotionSection from '@/Components/Ck44/PromotionSection';
import PromotionPlatformList from '@/Components/Ck44/PromotionPlatformList';
import PromotionRules from '@/Components/Ck44/PromotionRules';
import BottomNav from '@/Components/Ck44/BottomNav';
import { ChevronLeft } from 'lucide-react';

export default function Show({ promotion }) {
  return (
    <div title={promotion.title}>
      <div className="min-h-screen bg-[#004c4b] pb-24">
        <div className="sticky top-0 z-40 border-b border-white/10 bg-[rgba(7,55,58,0.88)] backdrop-blur-md">
          <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-4">
            <button
              type="button"
              onClick={() => window.history.back()}
              className="text-2xl font-bold text-[#ffd429]"
            >
               <ChevronLeft className="h-7 w-7" strokeWidth={2.6} />
            </button>
            <h1 className="text-2xl font-black text-[#ffd429]">Promotion</h1>
            <div className="w-6" />
          </div>
        </div>

        <div className="mx-auto max-w-3xl space-y-5 px-3 py-4 sm:px-4">
          <div className="overflow-hidden rounded-2xl shadow-[0_10px_35px_rgba(0,0,0,0.25)]">
            <img
              src={promotion.banner}
              alt={promotion.title}
              className="aspect-[16/9] w-full object-cover"
            />
          </div>

          <div>
            <h2 className="text-3xl font-black uppercase tracking-wide text-[#ffd429]">
              {promotion.title}
            </h2>
          </div>

          {promotion.cta_link ? (
            <a
              href={promotion.cta_link}
              target="_blank"
              rel="noreferrer"
              className="flex min-h-[76px] items-center justify-center rounded-2xl border border-white/10 bg-[#1a86d8] px-6 text-center text-lg font-black uppercase tracking-wide text-white shadow-[0_12px_30px_rgba(0,0,0,0.25)]"
            >
              {promotion.cta_text}
            </a>
          ) : null}

          <PromotionSection title="Introduction">
            <div className="space-y-4">
              <p className="text-lg leading-8 text-white/95">
                {promotion.description}
              </p>
              <PromotionPlatformList items={promotion.platforms} />
            </div>
          </PromotionSection>

          <PromotionSection title="Event Rules">
            <PromotionRules rules={promotion.rules} />
          </PromotionSection>
        </div>
      </div>
      <BottomNav />
    </div>
  );
}