// Work, Stay, Enjoy — the daytime-workspace pitch.

function WorkPerk({ tag, body }) {
  return (
    <div style={{ color: "var(--c-cream)", display: "flex", flexDirection: "column", gap: 8 }}>
      <div className="mono" style={{ color: "var(--c-yellow)" }}>{tag}</div>
      <div style={{ fontSize: 15.5, lineHeight: 1.55,
                     color: "color-mix(in oklab, var(--c-cream) 84%, transparent)" }}>
        {body}
      </div>
    </div>
  );
}

function Work() {
  const C = "var(--c-cream)";
  return (
    <section className="dark">
      <div className="wrap">
        <div style={{
          display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)",
          gap: 48, alignItems: "stretch",
        }}>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", gap: 28 }}>
            <p className="eyebrow">Work · Stay · Enjoy</p>
            <h2 style={{ color: C, maxWidth: "14ch" }}>
              The third place that's <em style={{ fontStyle: "italic", color: "var(--c-yellow)" }}>actually</em> yours.
            </h2>
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.6, maxWidth: "44ch",
                         color: "color-mix(in oklab, " + C + " 80%, transparent)" }}>
              Free Wi-Fi, real tables, outlets where you'd expect them, and a noise level that
              lets you actually work. We built the space for the Oak Cliff crowd that'd rather
              be here than home.
            </p>

            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24,
              paddingTop: 18,
              borderTop: "1px solid color-mix(in oklab, " + C + " 22%, transparent)",
            }}>
              <WorkPerk tag="Wi-Fi" body="Free, fast, no captive portal. Members get a separate 5 GHz channel." />
              <WorkPerk tag="Power" body="Outlets at every work table, USB-C at the bar, plug at the long table." />
              <WorkPerk tag="Light" body="Floor-to-ceiling windows. Morning is the busy block — mornings are the best block." />
              <WorkPerk tag="Vibe" body="Active but not loud. People work, take meetings, talk. Not a library." />
            </div>
          </div>

          <div style={{ minHeight: 480, borderRadius: 10, overflow: "hidden",
                       background: "var(--c-cream-deep)" }}>
            <img src="web/img/shop/bo9a-5794.jpg"
                 alt="Inside Everyday Works in Oak Cliff"
                 style={{ width: "100%", height: "100%", minHeight: 480,
                          objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Work = Work;