import React from 'react';
import Image from 'next/image';
import styles from './CateringPackages.module.css';
import { motion } from 'framer-motion';

const packages = [
    {
        id: 'silver',
        name: 'SILVER PACKAGE',
        price: '$19',
        perPerson: 'PER PERSON',
        minPeople: '(MIN 20PPL)',
        image: '/images/catering/packages/silver.webp', // Placeholder
        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',
        name: 'GOLD PACKAGE',
        price: '$23',
        perPerson: 'PER PERSON',
        minPeople: '(MIN 25PPL)',
        image: '/images/catering/packages/gold.webp', // Placeholder
        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',
        name: 'PLATINUM PACKAGE',
        price: '$25',
        perPerson: 'PER PERSON',
        minPeople: '(MIN 30PPL)',
        image: '/images/catering/packages/platinum.webp', // Placeholder
        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 (
        <>
            <section className={styles.packagesSection}>
                <div className={styles.container}>
                    <div className={styles.header}>
                        <h2 className={styles.mainTitle}>Catering Packages</h2>
                        <p className={styles.subTitle}>Choose the perfect menu for your event</p>
                    </div>

                    {packages.map((pkg, index) => (
                        <div key={pkg.id} className={`${styles.packageRow} ${index % 2 !== 0 ? styles.reverse : ''}`} style={index === packages.length - 1 ? { marginBottom: 0 } : {}}>
                            {/* Content Side */}
                            <div className={styles.contentSide}>
                                <div className={styles.ribbonWrapper}>
                                    <div className={styles.ribbon}>
                                        <span className={styles.ribbonText}>{pkg.name}</span>
                                    </div>
                                </div>

                                <div className={styles.priceTag}>
                                    <span className={styles.priceAmount}>{pkg.price}</span>
                                    <span className={styles.priceDetail}>{pkg.perPerson} {pkg.minPeople}</span>
                                </div>

                                <ul className={styles.itemsList}>
                                    {pkg.items.map((item, i) => (
                                        <li key={i} className={styles.listItem}>
                                            <span className={styles.checkIcon}>✓</span>
                                            <span className={styles.itemText}>{item}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            {/* Image Side */}
                            <div className={styles.imageSide}>
                                <div className={styles.archImageWrapper}>
                                    <Image
                                        src={pkg.image}
                                        alt={pkg.name}
                                        fill
                                        className={styles.archImage}
                                    />
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </section>

            {/* Add Ons Section */}
            <section className={styles.addOnsSection}>
                <div className={styles.container}>
                    <div className={styles.addOnsHeader}>
                        <span className={styles.addOnsSubtitle}>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>
                                <p className={styles.addOnPrice}>{addon.price}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
};

export default CateringPackages;