﻿import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { CurrencyPrice } from '@/Components/CurrencyPrice';
import { Sparkles, Check, ArrowRight, Calendar } from 'lucide-react';

interface Props {
    packages: any[];
}

export default function Offers({ packages = [] }: Props) {
    return (
        <PublicLayout>
            <Head title="Exclusive Offers & Packages — Primon Hotel Naalya" />

            <section className="relative py-28 bg-[#1A1A1A] text-[#FBF9F5] text-center border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <span className="text-xs uppercase tracking-[0.3em] text-[#C5A880] font-semibold">
                        Curated Privileges
                    </span>
                    <h1 className="font-serif text-4xl sm:text-6xl font-light text-white">
                        Special Packages & Offers
                    </h1>
                    <p className="text-sm sm:text-base text-gray-300 font-light max-w-2xl mx-auto leading-relaxed">
                        Curated experiences combining luxury accommodation with private rooftop dining, restorative spa rituals, and VIP airport transfers.
                    </p>
                </div>
            </section>

            <section className="py-20 bg-[#FBF9F5]">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
                        {packages.map((pkg) => (
                            <div
                                key={pkg.id}
                                className="bg-[#F3EFEA] rounded-3xl overflow-hidden border border-[#C5A880]/20 shadow-lg flex flex-col justify-between"
                            >
                                <div className="relative h-72 overflow-hidden">
                                    <img
                                        src={pkg.image || 'https://images.unsplash.com/photo-1578683010236-d716f9a3f461?auto=format&fit=crop&w=1200&q=80'}
                                        alt={pkg.name}
                                        className="w-full h-full object-cover"
                                    />
                                    <div className="absolute top-4 right-4 bg-[#1A1A1A]/85 backdrop-blur-md px-4 py-2 rounded-full border border-[#C5A880]/40 text-xs font-semibold text-[#FBF9F5]">
                                        Package Rate <CurrencyPrice amountUsd={pkg.price_usd} />
                                    </div>
                                </div>

                                <div className="p-8 space-y-6 flex-1 flex flex-col justify-between">
                                    <div className="space-y-3">
                                        <span className="text-[10px] uppercase tracking-widest text-[#C5A880] font-semibold">
                                            {pkg.tagline || 'Curated Hospitality Package'}
                                        </span>
                                        <h3 className="font-serif text-3xl font-normal text-[#1A1A1A]">
                                            {pkg.name}
                                        </h3>
                                        <p className="text-xs sm:text-sm text-gray-700 font-light leading-relaxed">
                                            {pkg.description || pkg.short_description}
                                        </p>

                                        {/* Inclusions */}
                                        {pkg.inclusions && (
                                            <div className="space-y-2 pt-3 border-t border-gray-300">
                                                <span className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold block">
                                                    Package Inclusions:
                                                </span>
                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                                                    {pkg.inclusions.map((inc: string, i: number) => (
                                                        <div key={i} className="flex items-center gap-2 text-xs text-gray-700">
                                                            <Check className="h-3.5 w-3.5 text-[#C5A880] shrink-0" />
                                                            <span className="truncate">{inc}</span>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        )}
                                    </div>

                                    <div className="pt-4">
                                        <Link
                                            href={`/booking?package_id=${pkg.id}&room_type_id=${pkg.room_type_id || ''}`}
                                            className="w-full text-center bg-[#1A1A1A] hover:bg-[#C5A880] hover:text-[#1A1A1A] text-[#FBF9F5] py-3.5 rounded-xl text-xs font-bold uppercase tracking-widest transition-all shadow-md block"
                                        >
                                            Book This Package
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
