// Menu page — full menu listing.
// Anchor nav, four sections (Coffee, Drinks, Weekend Kitchen, Grab-and-Go),
// each section is a card with rows: name + description + price.

function MenuRow({ name, desc, price, badge }) {
  return (
    <div className="menu-row">
      <div>
        <div className="menu-name">
          {name}
          {badge && <span className="menu-badge">{badge}</span>}
        </div>
        {desc && <div className="menu-desc">{desc}</div>}
      </div>
      <span className="menu-price">{price}</span>
    </div>
  );
}

function MenuSection({ id, title, sub, items, dark, photoTag }) {
  const isDark = dark === true;
  return (
    <section id={id} style={{ padding: "96px 0" }} className={isDark ? "dark" : ""}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)",
          gap: 56, alignItems: "start",
        }}>
          {/* Title block */}
          <div style={{ position: "sticky", top: 160 }}>
            <p className="eyebrow" style={{ color: isDark ? "var(--c-cream)" : "var(--c-dark-green)" }}>
              {photoTag}
            </p>
            <h2 style={{ color: isDark ? "var(--c-cream)" : "var(--c-dark-green)" }}>{title}</h2>
            {sub && (
              <p className="lede" style={{
                marginTop: 14,
                color: isDark
                  ? "color-mix(in oklab, var(--c-cream) 80%, transparent)"
                  : "color-mix(in oklab, var(--c-dark-green) 78%, transparent)",
                maxWidth: "36ch",
              }}>{sub}</p>
            )}
          </div>

          {/* Item list as a card on light, plain on dark */}
          <div style={isDark ? {
            background: "color-mix(in oklab, var(--c-cream) 6%, transparent)",
            borderRadius: 10, padding: "26px 32px",
            border: "1px solid color-mix(in oklab, var(--c-cream) 16%, transparent)",
          } : {
            background: "var(--c-cream)", borderRadius: 10, padding: "26px 32px",
            border: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
            boxShadow: "0 8px 28px rgba(31,77,58,.06)",
          }}>
            {items.map((it, i) => (
              <div key={i} style={isDark ? { color: "var(--c-cream)" } : {}}>
                {isDark ? (
                  <div className="menu-row" style={{
                    borderTopColor: "color-mix(in oklab, var(--c-cream) 18%, transparent)",
                  }}>
                    <div>
                      <div className="menu-name" style={{ color: "var(--c-cream)" }}>
                        {it.name}
                        {it.badge && (
                          <span className="menu-badge" style={{
                            background: "var(--c-yellow)", color: "var(--c-dark-green)",
                          }}>{it.badge}</span>
                        )}
                      </div>
                      {it.desc && (
                        <div className="menu-desc" style={{
                          color: "color-mix(in oklab, var(--c-cream) 72%, transparent)",
                        }}>{it.desc}</div>
                      )}
                    </div>
                    <span className="menu-price" style={{ color: "var(--c-cream)" }}>{it.price}</span>
                  </div>
                ) : (
                  <MenuRow {...it} />
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MenuHero() {
  return (
    <section style={{ padding: "72px 0 56px" }} className="cream-deep">
      <div className="wrap" style={{
        display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)",
        gap: 48, alignItems: "end",
      }}>
        <div>
          <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>The menu</p>
          <h1 style={{ color: "var(--c-dark-green)", maxWidth: "13ch",
                        fontSize: "clamp(56px, 7vw, 110px)" }}>
            Real food. <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>Real drinks.</em> Real prices.
          </h1>
        </div>
        <div style={{ color: "var(--c-dark-green)", fontSize: 14, lineHeight: 1.65 }}>
          <p style={{ margin: "0 0 12px" }}>
            Updated weekly. Prices include tax. Modifications honored at the bar — ask the
            barista or chef.
          </p>
          <p className="mono" style={{ color: "var(--c-sea-green)", margin: 0 }}>
            Allergens · gluten-free · vegan options noted with badges
          </p>
        </div>
      </div>
    </section>
  );
}

function AnchorNav() {
  const items = [
    { l: "Coffee", h: "#coffee" },
    { l: "Drinks", h: "#drinks" },
    { l: "Weekend Kitchen", h: "#weekend" },
    { l: "Grab + Go", h: "#grabgo" },
  ];
  return (
    <div className="anchor-nav">
      <div className="wrap">
        {items.map(i => <a key={i.l} href={i.h}>{i.l}</a>)}
        <a href="https://www.clover.com/online-ordering/everyday-works-dallas" target="_blank" rel="noopener" className="ord btn btn-primary" style={{ padding: "10px 18px", fontSize: 13 }}>
          Order pickup →
        </a>
      </div>
    </div>
  );
}

function MenuPage() {
  return (
    <>
      <MenuHero />
      <AnchorNav />

      <MenuSection
        id="coffee"
        title="Coffee."
        sub="Single-origin espresso pulled on a La Marzocco. Whole, oat, almond, or skim. House syrups made in-house."
        photoTag="Espresso bar"
        items={[
          { name: "Espresso · double", desc: "House blend. Bright, balanced, slightly chocolate.", price: "$3.75" },
          { name: "Cortado", desc: "Espresso + equal warm milk. Velvety, no flourish.", price: "$4.50" },
          { name: "House Latte", desc: "Single-origin espresso, milk of choice, just enough sweetness.", price: "$5.25", badge: "Bestseller" },
          { name: "Vanilla Latte", desc: "House vanilla bean syrup. Real vanilla, not extract.", price: "$5.75" },
          { name: "Mocha", desc: "House chocolate ganache, espresso, steamed milk.", price: "$5.95" },
          { name: "Cappuccino", desc: "Equal espresso, milk, foam. Traditional. Served small.", price: "$4.75" },
          { name: "Drip Coffee", desc: "Rotating roaster. Today: Brun Coffee Co. Free refills in-store.", price: "$3.25" },
          { name: "Pour Over", desc: "Single cup, made to order. 4 min wait. Ask the bar for today's bean.", price: "$5.50", badge: "By the bar" },
        ]}
      />

      <MenuSection
        id="drinks"
        title="Drinks."
        sub="Matcha from Kyoto. Refreshers built in-house. Seasonal builds rotate monthly."
        photoTag="Cold + matcha"
        dark
        items={[
          { name: "Iced Matcha Latte", desc: "Ceremonial-grade, cold-shaken, served over ice.", price: "$6.00" },
          { name: "Strawberry Matcha", desc: "House strawberry purée + matcha latte. May only.", price: "$6.50", badge: "Seasonal" },
          { name: "Cold Brew", desc: "Slow-steeped 18 hrs. Smooth, low acidity. Bottomless refill in-store.", price: "$4.75" },
          { name: "Nitro Cold Brew", desc: "Cold brew, nitro tap. Creamy without dairy.", price: "$5.50" },
          { name: "Iced Chai", desc: "House masala chai concentrate, milk of choice.", price: "$5.25" },
          { name: "Hibiscus Refresher", desc: "Hibiscus tea, lime, mint, light agave.", price: "$5.00" },
          { name: "Brown Sugar Cardamom Oat", desc: "Espresso, oat milk, brown sugar, cardamom. May only.", price: "$5.95", badge: "May build" },
        ]}
      />

      <MenuSection
        id="weekend"
        title="The Guest Kitchen."
        sub="A rotating roster of local chefs and food artists in the truck-window kitchen. This weekend: Casa Marisol. Frank pops in occasionally. Pre-orders open Friday at noon."
        photoTag="Sat + Sun · 10 am – 2 pm · Casa Marisol"
        items={[
          { name: "Sundried Tomato Pesto Melt", desc: "Casa Marisol · three cheeses, basil pesto, sourdough, hot off the press.", price: "$12" },
          { name: "Smoky Black Bean Tostada", desc: "Casa Marisol · crispy corn tostada, black bean, avocado, salsa macha, lime.", price: "$11", badge: "GF · Vegan" },
          { name: "Mushroom French Dip", desc: "Casa Marisol · roasted king trumpets, herb jus, gruyère, baguette.", price: "$14" },
          { name: "Cardamom Olive Oil Cookie", desc: "Casa Marisol · two per order. Limit one per customer.", price: "$4" },
          { name: "Chef Frank's Tofu Banh Mi", desc: "Back for one night only · Sunday brunch · Frank's signature.", price: "$13", badge: "One-night drop" },
          { name: "Cook with us →", desc: "If you're a chef or food brand, the kitchen is open to you. Apply for a residency.", price: "Apply" },
        ]}
      />

      <MenuSection
        id="grabgo"
        title="Grab + Go."
        sub="Out the door in 90 seconds. Stocked daily from local bakeries + the kitchen."
        photoTag="Cold case · pastry"
        items={[
          { name: "Breakfast Taco", desc: "Flour tortilla, scrambled egg, cheddar, salsa verde. Bacon or potato add-on.", price: "$4.25" },
          { name: "Yogurt Parfait", desc: "House granola, Greek yogurt, seasonal berries, local honey.", price: "$7.50" },
          { name: "Avocado Toast", desc: "Multigrain, smashed avocado, chili crisp, lime, sea salt.", price: "$8.50" },
          { name: "Almond Croissant", desc: "From Lockwood Bakery, 30 min away. Limited daily.", price: "$5.25" },
          { name: "Banana Bread", desc: "Vegan, brown butter, walnut, made on-site Tuesdays.", price: "$4.50", badge: "Vegan" },
          { name: "Daily Fruit", desc: "Whole apple, banana, or orange. Whatever's in season.", price: "$1.75" },
          { name: "Energy Bar Selection", desc: "RX, Hu, Mid-Day Squares. From the market shelf — same price.", price: "$3.50+" },
        ]}
      />

      {/* Order CTA strip */}
      <section style={{ padding: "80px 0", background: "var(--c-cream-deep)" }}>
        <div className="wrap" style={{
          background: "var(--c-dark-green)", color: "var(--c-cream)",
          borderRadius: 12, padding: "48px 56px",
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) auto",
          gap: 36, alignItems: "center",
        }}>
          <div>
            <p className="eyebrow">Order</p>
            <h2 style={{ color: "var(--c-cream)", maxWidth: "16ch" }}>
              Skip the line. Pick up at the bar.
            </h2>
            <p style={{ marginTop: 14, fontSize: 15.5, lineHeight: 1.55,
                         color: "color-mix(in oklab, var(--c-cream) 78%, transparent)",
                         maxWidth: "48ch" }}>
              Order pickup on Clover for the fastest path. Or order delivery on DoorDash,
              Uber Eats, or Postmates.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <a href="https://www.clover.com/online-ordering/everyday-works-dallas" target="_blank" rel="noopener" className="btn btn-primary">Order pickup · Clover →</a>
            <a href="order.html" className="btn btn-cream">Order delivery →</a>
          </div>
        </div>
      </section>
    </>
  );
}

window.MenuPage = MenuPage;