import gradio as gr

# Popcorn data
popcorn_data = [
    {
        "name": "Cheese Popcorn",
        "image": "static/Flavours/Cheese popcorn.jpg",
        "prices": {
            "Small": "₹199",
            "Medium": "₹349",
            "Large": "₹499"
        }
    },
    {
        "name": "Caramel Popcorn",
        "image": "static/Flavours/Caramel popcorn.jpg",
        "prices": {
            "Small": "₹249",
            "Medium": "₹399",
            "Large": "₹599"
        }
    },
    {
        "name": "Butter Popcorn",
        "image": "static/Flavours/Butter popcorn.jpg",
        "prices": {
            "Small": "₹149",
            "Medium": "₹299",
            "Large": "₹399"
        }
    },
    {
        "name": "Spicy Popcorn",
        "image": "static/Flavours/Spicy popcorn.jpg",
        "prices": {
            "Small": "₹249",
            "Medium": "₹449",
            "Large": "₹649"
        }
    },
]

def display_price(prices, size):
    return f"<div class='popcorn-price'>{prices[size]}</div>"

with gr.Blocks(css="""
    .main-container {
        background: linear-gradient(to right, #fff3e0, #ffe0b2);
        padding: 40px;
        border-radius: 20px;
    }
    ..app-header h1 {
    text-align: center;
    color: #d35400;  /* Rich orange */
    font-size: 48px !important;  /* Make it big */
    font-weight: 900 !important;  /* Make it bold */
    margin-bottom: 30px;
    font-family: 'Segoe UI', sans-serif;
    }
    .popcorn-card {
        border: 2px solid #ffcc00;
        border-radius: 15px;
        padding: 15px;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #ffffffcc;
        margin: 10px;
    }
    .popcorn-price {
        color: #ff6600;
        font-weight: bold;
        font-size: 18px;
        margin-top: 10px;
    }
    .popcorn-name {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        margin-top: 10px;
    }
""") as demo:

    with gr.Column(elem_classes="main-container"):
        gr.Markdown("<h1 class='app-header'>🍿 Welcome to the Popcorn Gallery</h1>")

        for i in range(0, len(popcorn_data), 2):
            with gr.Row():
                for item in popcorn_data[i:i+2]:
                    with gr.Column(elem_classes="popcorn-card"):
                        gr.Image(value=item["image"], label=item["name"], height=200)
                        gr.Markdown(f"<div class='popcorn-name'>{item['name']}</div>")
                        size_dropdown = gr.Dropdown(
                            choices=list(item["prices"].keys()), 
                            value="Small", 
                            label="Select Size"
                        )
                        price_display = gr.Markdown(
                            value=f"<div class='popcorn-price'>{item['prices']['Small']}</div>"
                        )
                        size_dropdown.change(
                            fn=display_price, 
                            inputs=[gr.State(item["prices"]), size_dropdown],
                            outputs=price_display
                        )

demo.launch()