// Market page — the curated shelf online. Hero, 4 category shelves with
// product cards, featured local makers, "Want to be on our shelves?" CTA,
// and a coming-soon online-shop teaser.

const CATEGORY_FALLBACK = {
  drinks: "web/img/shop/bo9a-3334.jpg",
  snacks: "web/img/shop/bo9a-1819.jpg",
  local:  "web/img/shop/bo9a-2099.jpg",
  grabgo: "web/img/shop/bo9a-8773.jpg",
};

function ProductCard({ name, brand, price, tag, accent, img, cat }) {
  const fallback = CATEGORY_FALLBACK[cat] || "web/img/shop/bo9a-1819.jpg";
  return (
    <div className="card lift" style={{ padding: 16, gap: 10 }}>
      <div style={{ aspectRatio: "4/5", borderRadius: 6, overflow: "hidden",
                     background: "var(--c-cream-deep)" }}>
        <img src={img || fallback}
             alt={`${name} at Everyday Works`}
             style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
      {tag && (
        <span className="mono" style={{ color: accent || "var(--c-sea-green)", fontSize: 9 }}>
          {tag}
        </span>
      )}
      <div style={{
        display: "grid", gridTemplateColumns: "1fr auto", gap: 6, alignItems: "baseline",
      }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 18, lineHeight: 1.15,
                         color: "var(--c-dark-green)" }}>{name}</div>
          <div className="mono" style={{ color: "var(--c-dark-green)", opacity: 0.65,
                                            fontSize: 9, marginTop: 2 }}>{brand}</div>
        </div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 12,
                        color: "var(--c-dark-green)" }}>{price}</span>
      </div>
    </div>
  );
}

function Shelf({ id, title, sub, products, dark, cat }) {
  const isDark = dark === true;
  return (
    <section id={id} className={isDark ? "dark" : ""} style={{ padding: "96px 0" }}>
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.2fr)",
          gap: 56, alignItems: "end", marginBottom: 36,
        }}>
          <div>
            <p className="eyebrow" style={{ color: isDark ? "var(--c-cream)" : "var(--c-dark-green)" }}>
              Shelf · {title}
            </p>
            <h2 style={{ color: isDark ? "var(--c-cream)" : "var(--c-dark-green)" }}>
              {sub.head}
            </h2>
          </div>
          <p className="lede" style={{
            color: isDark
              ? "color-mix(in oklab, var(--c-cream) 80%, transparent)"
              : "color-mix(in oklab, var(--c-dark-green) 80%, transparent)",
            maxWidth: "40ch",
          }}>{sub.body}</p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {products.map(p => <ProductCard key={p.name} {...p} cat={cat} />)}
        </div>
      </div>
    </section>
  );
}

function MakerCard({ name, makes, location, since }) {
  return (
    <div className="card" style={{ padding: 18, gap: 10 }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
      }}>
        <div style={{
          width: 52, height: 52, borderRadius: 999,
          background: "color-mix(in oklab, var(--c-dark-green) 10%, transparent)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-display)", fontSize: 20, color: "var(--c-dark-green)",
        }}>
          {name.split(" ").map(w => w[0]).slice(0, 2).join("")}
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.1,
                         color: "var(--c-dark-green)" }}>{name}</div>
          <div className="mono" style={{ color: "var(--c-sea-green)", marginTop: 2 }}>
            {makes}
          </div>
        </div>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "auto 1fr", gap: "4px 12px",
        fontSize: 12.5, color: "color-mix(in oklab, var(--c-charcoal) 78%, transparent)",
      }}>
        <span className="mono" style={{ opacity: 0.7 }}>From</span><span>{location}</span>
        <span className="mono" style={{ opacity: 0.7 }}>Since</span><span>{since}</span>
      </div>
    </div>
  );
}

function MarketPage() {
  const D = "var(--c-dark-green)";
  const C = "var(--c-cream)";
  const S = "var(--c-sea-green)";

  return (
    <>
      {/* Hero */}
      <section style={{ padding: "80px 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: D }}>The market</p>
            <h1 style={{ color: D, maxWidth: "14ch",
                          fontSize: "clamp(56px, 7vw, 110px)" }}>
              The shelf at the front — <em style={{ fontStyle: "italic", color: S }}>better</em> by default.
            </h1>
          </div>
          <div style={{ color: D, fontSize: 14, lineHeight: 1.65 }}>
            <p style={{ margin: "0 0 12px" }}>
              Functional drinks. Balanced snacks. Local pantry goods. Grab-and-go essentials.
              All curated by us, stocked by the people who made them.
            </p>
            <p className="mono" style={{ color: S, margin: 0 }}>
              Updated weekly · in-store now · online shop coming soon
            </p>
          </div>
        </div>
      </section>

      {/* Anchor nav */}
      <div className="anchor-nav">
        <div className="wrap">
          <a href="#drinks">Better Drinks</a>
          <a href="#snacks">Balanced Snacks</a>
          <a href="#local">Local Goods</a>
          <a href="#grabgo">Grab + Go</a>
          <a href="#makers">Makers</a>
          <a href="visit.html" className="ord btn btn-primary" style={{ padding: "10px 18px", fontSize: 13 }}>
            Visit us →
          </a>
        </div>
      </div>

      {/* Shelves */}
      <Shelf
        id="drinks"
        title="Better Drinks" cat="drinks"
        sub={{
          head: "Functional, fizzy, friendlier than soda.",
          body: "Kombucha, prebiotic spritzes, electrolytes, adaptogens. Drinks that do something besides put a smile on your face — though they do that too.",
        }}
        products={[
            { name: "Olipop Cherry Cola", brand: "Olipop", price: "$3.25", tag: "Bestseller", accent: S },
            ,
          { name: "Health-Ade Pink Lady", brand: "Health-Ade", price: "$4.50" },
            ,
          { name: "Recess Mood Mango", brand: "Recess", price: "$5.25", tag: "Adaptogen" }
          ]}
      />

      <Shelf
        id="snacks"
        title="Balanced Snacks" cat="snacks"
        dark
        sub={{
          head: "Eat-this-on-a-Tuesday snacks. Not mystery dust.",
          body: "Protein bars, jerky, nut mixes, real-ingredient cookies. We read every label so you don't have to.",
        }}
        products={[
            { name: "Mid-Day Squares", brand: "Mid-Day", price: "$3.95", tag: "Vegan", accent: "var(--c-yellow)" },
            ,
          { name: "RXBAR Chocolate Sea Salt", brand: "RX", price: "$2.95" },
            ,
          { name: "Hu Hazelnut Butter Bar", brand: "Hu", price: "$4.50", tag: "Paleo" }
          ]}
      />

      <Shelf
        id="local"
        title="Local Goods" cat="local"
        sub={{
          head: "Made within 30 miles. Stocked because we love it.",
          body: "Pantry, hot sauce, beans, granola, snacks from Oak Cliff and the rest of Dallas. The shelf rotates as makers run out — first come, first served.",
        }}
        products={[
            { name: "Lockwood Granola", brand: "Lockwood Bakery", price: "$11.00", tag: "Oak Cliff" },
            ,
          { name: "Dude Sweet Chocolate", brand: "Dude Sweet", price: "$8.50" },
            ,
          { name: "Mafa Salsa Macha", brand: "Mafa Cocina", price: "$12.00", tag: "Heat: medium" }
          ]}
      />

      <Shelf
        id="grabgo"
        title="Grab + Go Essentials" cat="grabgo"
        sub={{
          head: "Out the door in ninety seconds.",
          body: "Cold case staples — fruit, parfaits, breakfast tacos, salads. Stocked daily by 8 am.",
        }}
        products={[
            { name: "Yogurt + Granola Parfait", brand: "Made on-site", price: "$7.50" },
            ,
          { name: "Breakfast Taco", brand: "Made on-site", price: "$4.25", tag: "Daily" },
            ,
          { name: "Whole Fruit", brand: "Daily delivery", price: "$1.75" }
          ]}
      />

      {/* Featured makers */}
      <section id="makers" className="cream-deep">
        <div className="wrap">
          <div style={{
            display: "grid", gridTemplateColumns: "minmax(0, 1.2fr) minmax(0, 1fr)",
            gap: 56, alignItems: "end", marginBottom: 48,
          }}>
            <div>
              <p className="eyebrow" style={{ color: D }}>Featured Oak Cliff makers</p>
              <h2 style={{ color: D }}>
                Six on the shelf this month.
              </h2>
            </div>
            <p style={{
              fontSize: 16, lineHeight: 1.6,
              color: "color-mix(in oklab, " + D + " 80%, transparent)",
              maxWidth: "44ch",
            }}>
              A rotating spotlight on the people behind the products. If you like what they
              make, follow them — most are one-person operations.
            </p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            <MakerCard name="Mafa Cocina" makes="Salsa, hot sauce" location="Bishop Arts · Dallas" since="2019" />
            <MakerCard name="Pollyanna" makes="Cold brew + coffee" location="Oak Cliff · Dallas" since="2017" />
            <MakerCard name="Dude Sweet" makes="Chocolate, confections" location="Bishop Arts · Dallas" since="2010" />
            <MakerCard name="Lockwood Bakery" makes="Granola, pastry" location="Lake Highlands" since="2014" />
            <MakerCard name="Honey Salt" makes="Pantry, spice blends" location="Oak Cliff · Dallas" since="2021" />
            <MakerCard name="Brun Coffee Co." makes="Single-origin beans" location="South Dallas" since="2018" />
          </div>
        </div>
      </section>

      {/* Vendor CTA + coming-soon */}
      <section style={{ padding: "96px 0" }}>
        <div className="wrap" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16,
        }}>
          {/* Want to be on our shelves */}
          <div style={{
            background: D, color: C, borderRadius: 10, padding: "40px 40px 36px",
            display: "flex", flexDirection: "column", gap: 18,
          }}>
            <p className="eyebrow">For makers</p>
            <h2 style={{ color: C, maxWidth: "14ch" }}>
              Want to be on our <em style={{ fontStyle: "italic", color: "var(--c-yellow)" }}>shelves?</em>
            </h2>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55,
                         color: "color-mix(in oklab, " + C + " 80%, transparent)",
                         maxWidth: "42ch" }}>
              We stock 30 products at a time and rotate quarterly. If you're a maker in
              Dallas / Fort Worth and you'd like to be considered, send us a hello and a
              product sample.
            </p>
            <a href="apply.html" className="btn btn-primary" style={{ alignSelf: "flex-start" }}>
              Apply to be a vendor →
            </a>
          </div>

          {/* Coming soon — online shop */}
          <div style={{
            background: "var(--c-cream-deep)", borderRadius: 10, padding: "40px 40px 36px",
            border: "1px solid color-mix(in oklab, " + D + " 12%, transparent)",
            display: "flex", flexDirection: "column", gap: 18,
          }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              alignSelf: "flex-start",
              background: D, color: "var(--c-yellow)",
              padding: "6px 12px", borderRadius: 999,
              fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em",
              textTransform: "uppercase",
            }}>
              Coming soon
            </div>
            <h2 style={{ color: D, maxWidth: "16ch" }}>
              The market, shipped.
            </h2>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.55,
                         color: "color-mix(in oklab, " + D + " 80%, transparent)",
                         maxWidth: "42ch" }}>
              Gift cards, beans, merch, and curated bundles — coming to the online shop later
              this year. Get on the list to hear first.
            </p>
            <a href="mailto:hello@everydayworkscoffee.com?subject=Notify me when the Everyday Works online shop launches" className="btn btn-ghost" style={{ alignSelf: "flex-start" }}>
              Notify me →
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

window.MarketPage = MarketPage;