// Coffee + Drinks — 4-card grid with real SPRING 2.0 product photos.

function CoffeeCard({ name, sub, price, accent, img, alt }) {
  return (
    <div className="card lift" style={{ position: "relative" }}>
      {img ? (
        <div style={{
          aspectRatio: "4/5", borderRadius: 6, overflow: "hidden",
          background: "var(--c-cream-deep)",
        }}>
          <img src={img} alt={alt || name}
               style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      ) : (
        <div className="photo" style={{ aspectRatio: "4/3", borderRadius: 6 }}>
          <div className="tag">Photo · {name.toLowerCase()}</div>
        </div>
      )}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
        <h3 style={{ color: "var(--c-dark-green)" }}>{name}</h3>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 13,
                        color: "var(--c-dark-green)" }}>{price}</span>
      </div>
      <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55,
                   color: "color-mix(in oklab, var(--c-charcoal) 85%, transparent)" }}>{sub}</p>
      {accent && (
        <span className="mono" style={{ color: "var(--c-sea-green)" }}>
          {accent}
        </span>
      )}
    </div>
  );
}

function Coffee() {
  return (
    <section id="menu">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)",
          gap: 56, alignItems: "end", marginBottom: 56,
        }}>
          <div>
            <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>Coffee + drinks</p>
            <h2 style={{ color: "var(--c-dark-green)" }}>
              Built right. Pulled <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>slow.</em>
            </h2>
          </div>
          <a href="menu.html" className="btn btn-ghost" style={{ justifySelf: "end" }}>
            See the full menu →
          </a>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
          <CoffeeCard
            name="Strawberry Shortcake Latte"
            sub="Espresso, milk, and strawberry compote, layered. Tastes like dessert and pours like a sunset."
            price="$—"
            accent="Bestseller"
            img="web/img/drinks/strawberry-shortcake-latte.jpg"
            alt="Strawberry Shortcake Latte at Everyday Works in Oak Cliff" />
          <CoffeeCard
            name="Lucky Charm Matcha"
            sub="Ceremonial-grade matcha, milk, and a marshmallow rainbow on top. The kind of drink that ends up on Instagram."
            price="$—"
            accent="Fan favorite"
            img="web/img/drinks/lucky-charm-matcha.jpg"
            alt="Lucky Charm Matcha at Everyday Works in Oak Cliff" />
          <CoffeeCard
            name="Mango Matcha Lemonade"
            sub="Mango lemonade with a matcha float and a lemon wedge. Bright, fresh, made for the walk."
            price="$—"
            img="web/img/drinks/mango-matcha-lemonade.jpg"
            alt="Mango Matcha Lemonade at Everyday Works in Oak Cliff" />
          <CoffeeCard
            name="Coconut Cold Brew"
            sub="Slow-steeped cold brew, finished with coconut cream. Smooth, low acid, and worth the cup."
            price="$—"
            img="web/img/drinks/coconut-cold-brew.jpg"
            alt="Coconut Cold Brew at Everyday Works in Oak Cliff" />
        </div>
      </div>
    </section>
  );
}

window.Coffee = Coffee;