// Market — 4 category shelves + featured local makers strip.

function ShelfCard({ name, body, items, color = "var(--c-sea-green)" }) {
  return (
    <div className="card" style={{ minHeight: 320, justifyContent: "space-between" }}>
      <div>
        <div className="mono" style={{ color, marginBottom: 10 }}>Shelf</div>
        <h3 style={{ color: "var(--c-dark-green)", marginBottom: 8 }}>{name}</h3>
        <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.55,
                     color: "color-mix(in oklab, var(--c-charcoal) 80%, transparent)" }}>
          {body}
        </p>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
        {items.map(t => (
          <span key={t} style={{
            fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
            textTransform: "uppercase",
            background: "color-mix(in oklab, var(--c-dark-green) 8%, transparent)",
            color: "var(--c-dark-green)",
            padding: "5px 9px", borderRadius: 999,
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

function MakerLogo({ name }) {
  return (
    <div style={{
      display: "flex", flexDirection: "column", alignItems: "center", gap: 8,
      padding: "18px 12px",
      borderRight: "1px dashed color-mix(in oklab, var(--c-dark-green) 18%, transparent)",
    }}>
      <div style={{
        width: 48, height: 48, borderRadius: 999,
        background: "color-mix(in oklab, var(--c-dark-green) 10%, transparent)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontFamily: "var(--font-display)", fontSize: 18,
        color: "var(--c-dark-green)",
      }}>
        {name.split(" ").map(w => w[0]).slice(0, 2).join("")}
      </div>
      <div style={{ fontFamily: "var(--font-wordmark)", fontSize: 10,
                     letterSpacing: "0.04em", textTransform: "uppercase",
                     color: "var(--c-dark-green)" }}>{name}</div>
    </div>
  );
}

function Market() {
  return (
    <section id="market">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0,1.4fr) minmax(0,1fr)",
          gap: 56, alignItems: "end", marginBottom: 48,
        }}>
          <div>
            <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>Market</p>
            <h2 style={{ color: "var(--c-dark-green)" }}>
              The shelf at the front — <em style={{ fontStyle: "italic", color: "var(--c-sea-green)" }}>better</em> by default.
            </h2>
          </div>
          <p className="lede" style={{
            color: "color-mix(in oklab, var(--c-dark-green) 80%, transparent)",
            maxWidth: "40ch",
          }}>
            A curated market of better daily goods. Functional drinks, balanced snacks, and
            local-maker finds — picked by us, stocked by the people who made them.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 64 }}>
          <ShelfCard name="Better Drinks"
            body="Kombucha, electrolytes, functional sodas, adaptogens, prebiotic spritzes."
            items={["Health-Ade", "Olipop", "Recess", "Liquid IV"]} />
          <ShelfCard name="Balanced Snacks"
            body="Protein bars, nut mixes, jerky, real-ingredient cookies. No mystery dust."
            items={["RX", "Hu", "Mid-Day Squares", "Caulipower"]} />
          <ShelfCard name="Local Goods"
            body="From makers within 30 miles. Pantry, beans, hot sauce, granola."
            items={["Lockwood", "Dude Sweet", "Pollyanna", "Honey Salt"]} />
          <ShelfCard name="Grab + Go Essentials"
            body="Cold brew, fruit, parfaits, breakfast tacos. Out the door in 90 seconds."
            items={["Daily fruit", "Mafa tacos", "House parfait"]} />
        </div>

        {/* Featured local makers */}
        <div style={{
          background: "var(--c-cream-deep)", borderRadius: 8,
          border: "1px solid color-mix(in oklab, var(--c-dark-green) 12%, transparent)",
          padding: "22px 28px",
          display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center",
        }}>
          <div>
            <div className="mono" style={{ color: "var(--c-dark-green)", marginBottom: 4 }}>
              Featured Oak Cliff makers
            </div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--c-dark-green)" }}>
              Six on the shelf this month.
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
            {["Mafa","Pollyanna","Dude Sweet","Honey Salt","Lockwood","Brun"].map(n => (
              <MakerLogo key={n} name={n} />
            ))}
          </div>
          <a href="apply.html" className="btn btn-ghost">On our shelves? →</a>
        </div>
      </div>
    </section>
  );
}

window.Market = Market;