// Bee Blossom — cocktail menu data + Cocktail card

const COCKTAILS = [
  {
    id: "queen",
    name: "Queen Bee",
    tag: "House signature · since day one",
    price: "$14",
    image: { src: "", alt: "Colorful signature cocktails garnished with citrus and herbs" },
    ingredients: ["Wildflower honey gin", "Meyer lemon", "Lavender bitters", "Champagne float"],
  },
  {
    id: "blossom",
    name: "Orange Blossom",
    tag: "Bright, citrus-forward, easy",
    price: "$13",
    image: { src: " ", alt: "Orange cocktail served over ice with a citrus garnish" },
    ingredients: ["Tequila blanco", "Blood orange", "Orange-blossom honey", "Smoked sea salt"],
  },
  {
    id: "garden",
    name: "Garden Pollen",
    tag: "Garden-to-glass · vegetal & cool",
    price: "$13",
    image: { src: " ", alt: "Bartender pouring a smoky cocktail while a guest records the drink" },
    ingredients: ["Cucumber-infused vodka", "Honeydew", "Basil syrup", "Lime"],
  },
  {
    id: "amber",
    name: "Amber Hum",
    tag: "Bourbon's warmer cousin",
    price: "$15",
    image: { src: "", alt: "Illuminated Bee Blossom bar set up for an evening event" },
    ingredients: ["Rye bourbon", "Buckwheat honey", "Burnt orange peel", "Angostura"],
  },
  {
    id: "petal",
    name: "Petal & Pollen",
    tag: "Floral, low-ABV, all season",
    price: "$12",
    image: { src: "", alt: "Guests gathered near the Bee Blossom mobile bar at dusk" },
    ingredients: ["Elderflower aperitif", "Chamomile honey", "Prosecco", "Edible petals"],
  },
  {
    id: "hive",
    name: "Hive Mind (NA)",
    tag: "Zero-proof · zero compromises",
    price: "$10",
    image: { src: "", alt: "Outdoor mobile bar surrounded by guests and greenery" },
    ingredients: ["Botanical NA spirit", "Honeycomb tonic", "Rosemary", "Pink grapefruit"],
  },
];

function Cocktail({ c, imageryStyle }) {
  const imgClass = `bb-img photo ${imageryStyle === "botanical" ? "botanical" : "stripes"}`;
  return (
    <article className="bb-cocktail">
      <div className={imgClass}>
        <img src={c.image.src} alt={c.image.alt} loading="lazy" />
      </div>
      <div className="bb-cocktail-body">
        <div className="bb-cocktail-head">
          <h3>{c.name}</h3>
          <span className="bb-price">{c.price}</span>
        </div>
        <p className="bb-cocktail-tagline">{c.tag}</p>
        <p className="bb-cocktail-ingredients">{c.ingredients.join(" · ")}</p>
      </div>
    </article>
  );
}

Object.assign(window, { COCKTAILS, Cocktail });