// Eat — Chef Frank's weekend kitchen. Uses the Chef Frank sub-brand
// language (coral / navy accents in the supporting elements).

function Eat() {
  const D = "var(--c-dark-green)";
  const C = "var(--c-cream)";
  const FRANK_NAVY = "#1F2A44";
  const FRANK_CORAL = "#E36B5C";

  const items = [
    { n: "Chef Frank's tofu banh mi", d: "Marinated tofu, pickled daikon + carrot, cilantro, lime mayo on baguette.", p: "$13", note: "From Frank's last residency · drops occasionally" },
    { n: "Sundried tomato pesto melt", d: "From the current resident · Casa Marisol · three cheeses, basil pesto, sourdough.", p: "$12" },
    { n: "Smoky black bean tostada", d: "Casa Marisol · crispy corn tostada, black bean, avocado, salsa macha, lime.", p: "$11" },
    { n: "Cardamom olive oil cookie", d: "Casa Marisol · two per order. Limit one per customer.", p: "$4" },
  ];

  return (
    <section className="cream-deep" id="eat">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 48, alignItems: "stretch",
        }}>
          {/* Left — photo */}
          <div style={{ minHeight: 520, borderRadius: 10, overflow: "hidden",
                       background: "var(--c-cream-deep)" }}>
            <img src="web/img/shop/bo9a-8773.jpg"
                 alt="Weekend pop-up market at Everyday Works in Oak Cliff"
                 style={{ width: "100%", height: "100%", minHeight: 520,
                          objectFit: "cover", display: "block" }} />
          </div>

          {/* Right — copy + menu */}
          <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
            <div>
              <p className="eyebrow" style={{ color: D }}>The guest kitchen · this weekend</p>
              <h2 style={{ color: D }}>
                A rotating cast of local chefs. <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>One weekend</em> at a time.
              </h2>
            </div>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6,
                         color: "color-mix(in oklab, " + D + " 82%, transparent)", maxWidth: "44ch" }}>
              The food-truck window on the Hampton Rd side is open to a different small food
              business almost every weekend — chefs, pop-ups, brands building their following.
              This weekend it's <strong>Casa Marisol</strong>. Chef Frank rotates in occasionally
              when his calendar lines up.
            </p>

            <div style={{
              background: C, borderRadius: 8, padding: "22px 24px",
              border: "1px solid color-mix(in oklab, " + D + " 14%, transparent)",
              display: "flex", flexDirection: "column", gap: 14,
            }}>
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "baseline",
              }}>
                <div className="mono" style={{ color: FRANK_NAVY }}>
                  This weekend · Casa Marisol · 4 items
                </div>
                <span className="mono" style={{ color: FRANK_CORAL }}>@casamarisol_tx</span>
              </div>
              {items.map((it, i) => (
                <div key={i} style={{
                  display: "grid", gridTemplateColumns: "1fr auto", gap: 20,
                  alignItems: "baseline",
                  paddingTop: i === 0 ? 0 : 12,
                  borderTop: i === 0 ? 0 : "1px dashed color-mix(in oklab, " + D + " 18%, transparent)",
                }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.15,
                                   color: D }}>{it.n}</div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.55, marginTop: 2,
                                   color: "color-mix(in oklab, " + D + " 75%, transparent)" }}>
                      {it.d}
                    </div>
                    {it.note && (
                      <div className="mono" style={{ color: FRANK_CORAL, marginTop: 4, fontSize: 9 }}>
                        {it.note}
                      </div>
                    )}
                  </div>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: D }}>
                    {it.p}
                  </span>
                </div>
              ))}
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="https://www.clover.com/online-ordering/everyday-works-dallas" target="_blank" rel="noopener" className="btn btn-primary">Pre-order →</a>
              <a href="kitchen.html" className="btn btn-ghost">Run the kitchen with us →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Eat = Eat;