import React from 'react';
import Image from 'next/image';
import styles from './CateringPackages.module.css';

const packages = [
    {
        id: 'silver',
        tier: 'Silver',
        tierClass: 'tierSilver',
        watermark: 'S',
        minPeople: 'Minimum 20 People',
        image: '/images/catering/packages/silver.webp',
        items: [
            'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
            'Rice or Bulgur',
            'Choice of one salad (Garden, Greek, Caesar Salad)',
            'Choice of 1 appetizer (Babaghanoush, Hummus, Haydari)',
            'Freshly baked bread',
            'Grilled tomato and peppers',
        ]
    },
    {
        id: 'gold',
        tier: 'Gold',
        tierClass: 'tierGold',
        watermark: 'G',
        minPeople: 'Minimum 25 People',
        image: '/images/catering/packages/gold.webp',
        items: [
            'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
            'Rice or Bulgur',
            'Choice of one salad (Garden, Greek, Caesar Salad)',
            'Choice of 2 appetizers (Babaghanoush, Hummus, Haydari)',
            'Garlic potatoes or Fried and spiced eggplants',
            'Freshly baked bread',
            'Grilled tomato and peppers',
            'Dessert (Sutlac-Rice Pudding)',
        ]
    },
    {
        id: 'platinum',
        tier: 'Platinum',
        tierClass: 'tierPlatinum',
        watermark: 'P',
        minPeople: 'Minimum 30 People',
        image: '/images/catering/packages/platinum.webp',
        items: [
            'Choice of 2 kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
            'Rice or Bulgur',
            'Choice of one salad (Garden, Greek, Caesar Salad)',
            'Choice of 2 appetizers (Babaghanoush, Hummus, Haydari)',
            'Garlic potatoes or Fried and Spiced eggplants',
            'Grilled tomato and peppers',
            'Freshly baked bread',
            'Dessert (Sutlac-Rice Pudding)',
            'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)',
        ]
    }
];

const addOns = [
    { name: 'Tray of Falafel', price: '$60', image: '/images/catering/packages/tray.webp' },
    { name: 'Shola Gorbandi', price: '$80', image: '/images/catering/packages/shola.webp' },
    { name: 'Kavurma (Saluted Veal)', price: '$80', image: '/images/catering/packages/kavurma.webp' },
    { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' },
];

const CateringPackages = () => {
    return (
        <>
            {/* ── Packages Section ── */}
            <section className={styles.packagesSection}>

                {/* Header */}
                <div className={styles.sectionHeader}>
                    <p className={styles.eyebrow}>Tailored Experiences</p>
                    <h2 className={styles.mainTitle}>Catering Packages</h2>
                </div>

                {/* Package Panels */}
                {packages.map((pkg, index) => {
                    const isReversed = index % 2 !== 0;
                    return (
                        <div
                            key={pkg.id}
                            className={`${styles.packagePanel} ${isReversed ? styles.reverse : ''} ${styles[pkg.tierClass]}`}
                        >
                            {/* Accent strip between image & content */}
                            <div className={styles.panelAccentStrip} />

                            {/* ── Image Side ── */}
                            <div className={styles.panelImageSide}>
                                <Image
                                    src={pkg.image}
                                    alt={`${pkg.tier} catering package`}
                                    fill
                                    className={styles.panelImage}
                                    priority={index === 0}
                                />
                                {/* Gradient bridge */}
                                <div className={styles.imageFade} />
                            </div>

                            {/* ── Content Side ── */}
                            <div className={styles.panelContentSide}>
                                {/* Watermark letter */}
                                <span className={styles.watermarkLetter} aria-hidden="true">
                                    {pkg.watermark}
                                </span>

                                <div className={styles.panelInner}>
                                    {/* Tier badge */}
                                    <div className={styles.tierBadge}>
                                        <span className={styles.tierName}>{pkg.tier}</span>
                                    </div>

                                    {/* Package name */}
                                    <h3 className={styles.packageName}>{pkg.tier} Package</h3>

                                    {/* Min people */}
                                    <p className={styles.packageMinPeople}>{pkg.minPeople}</p>

                                    {/* Ornamental divider */}
                                    <div className={styles.panelDivider}>
                                        <span className={styles.panelDividerDot} />
                                    </div>

                                    {/* Items list */}
                                    <ul className={styles.itemsList}>
                                        {pkg.items.map((item, i) => (
                                            <li key={i} className={styles.listItem}>
                                                <span className={styles.checkMark}>◆</span>
                                                <span>{item}</span>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </section>

            {/* ── Add-Ons Section ── */}
            <section className={styles.addOnsSection}>
                <div className={styles.addOnsHeader}>
                    <span className={styles.addOnsEyebrow}>EXTRAS</span>
                    <h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
                    <p className={styles.addOnsDescription}>
                        Enhance your catering package with our signature sides and specialty dishes.
                    </p>
                </div>

                <div className={styles.addOnsGrid}>
                    {addOns.map((addon, i) => (
                        <div key={i} className={styles.addOnCard}>
                            <div className={styles.addOnImageWrapper}>
                                <Image
                                    src={addon.image}
                                    alt={addon.name}
                                    fill
                                    className={styles.addOnImage}
                                />
                            </div>
                            <h4 className={styles.addOnName}>{addon.name}</h4>
                        </div>
                    ))}
                </div>
            </section>
        </>
    );
};

export default CateringPackages;
