// Local-intent SEO pages. These are real customer-use pages, not doorway pages:
// each one explains a nearby search need and routes visitors to menu, order, or visit.

const LOCAL_PAGES = {
  "oak-cliff-coffee-shop": {
    eyebrow: "Oak Cliff coffee shop",
    title: "Coffee, matcha, market snacks, and a table to actually work.",
    lead: "Everyday Works is an Oak Cliff coffee shop and market at 516 S Hampton Rd #180 in Dallas. Stop in for espresso, matcha, cold brew, smoothies, snacks, Wi-Fi, and pickup or delivery.",
    image: "web/img/shop/bo9a-1819.jpg",
    imageAlt: "Market shelves inside Everyday Works in Oak Cliff",
    tag: "Oak Cliff · Hampton",
    sections: [
      ["What to get", "Espresso drinks, seasonal lattes, matcha, cold brew, smoothies, refreshers, snacks, and market goods."],
      ["Why people stay", "Free Wi-Fi, a neighborhood feel, easy Hampton access, and enough variety for coffee runs, quick meetings, or a focused work block."],
      ["How to order", "Walk in, order ahead, or use DoorDash, Uber Eats, and Postmates through the current ordering page."]
    ],
    related: [
      ["Menu", "/menu"],
      ["Order online", "/order"],
      ["Visit", "/visit"],
      ["Matcha in Oak Cliff", "/matcha-oak-cliff"]
    ]
  },
  "coffee-near-bishop-arts": {
    eyebrow: "Coffee near Bishop Arts",
    title: "A Hampton Road coffee stop close to Bishop Arts, Oak Cliff, and Kessler.",
    lead: "If you are looking for coffee near Bishop Arts without fighting the busiest blocks, Everyday Works is nearby on S Hampton Rd with espresso, matcha, cold brew, snacks, market goods, and Wi-Fi.",
    image: "web/img/shop/bo9a-3334.jpg",
    imageAlt: "Branded canned drinks at Everyday Works in Dallas",
    tag: "Near Bishop Arts",
    sections: [
      ["Quick local stop", "Grab coffee, matcha, or a cold drink on the way through Oak Cliff, Hampton, Kessler, or Bishop Arts."],
      ["Easy food pairing", "Pair a drink with pastries, snacks, grab-and-go items, or market goods when the coffee run turns into a small errand."],
      ["Current hours", "Open Monday and Wednesday-Friday 6:30 AM-4 PM, Saturday 7 AM-5 PM, Sunday 8 AM-5 PM, and closed Tuesday."]
    ],
    related: [
      ["Directions", "/visit"],
      ["Coffee + drinks menu", "/menu"],
      ["Order delivery", "/order"],
      ["Oak Cliff coffee shop", "/oak-cliff-coffee-shop"]
    ]
  },
  "matcha-oak-cliff": {
    eyebrow: "Matcha in Oak Cliff",
    title: "Matcha, cold matcha drinks, and colorful seasonal sips in Oak Cliff.",
    lead: "Everyday Works serves matcha alongside espresso, cold brew, smoothies, refreshers, and market snacks. Come by the Hampton Road shop or order delivery when the matcha craving hits.",
    image: "web/img/drinks/mango-matcha-lemonade.jpg",
    imageAlt: "Mango matcha lemonade at Everyday Works in Oak Cliff",
    tag: "Matcha · cold drinks",
    sections: [
      ["Matcha options", "Look for matcha lattes, cold matcha drinks, seasonal matcha specials, and fruit-forward refreshers on the current menu."],
      ["Non-coffee choices", "Not everyone wants espresso. Everyday Works keeps smoothies, lemonades, refreshers, snacks, and market drinks in the rotation."],
      ["Order path", "Use the menu page to choose, then order pickup or delivery through the current order page."]
    ],
    related: [
      ["Menu", "/menu"],
      ["Order", "/order"],
      ["Coffee near Bishop Arts", "/coffee-near-bishop-arts"],
      ["Visit", "/visit"]
    ]
  },
  "work-from-cafe-dallas": {
    eyebrow: "Coffee shop with Wi-Fi",
    title: "A Dallas coffee shop for Wi-Fi, laptop time, and better everyday choices.",
    lead: "Everyday Works gives Oak Cliff a practical coffee shop for a focused work block: espresso, matcha, cold drinks, market snacks, free Wi-Fi, and a neighborhood feel on Hampton.",
    image: "web/img/shop/bo9a-2099.jpg",
    imageAlt: "Snacks and market goods at Everyday Works in Dallas",
    tag: "Wi-Fi · snacks · coffee",
    sections: [
      ["Work-friendly stop", "Use Everyday Works for solo laptop time, a small meeting, or a quick reset between errands around Oak Cliff."],
      ["Fuel choices", "Coffee, matcha, cold brew, smoothies, refreshers, snacks, and market goods keep the visit flexible."],
      ["Plan the visit", "Check the current hours before heading over. Tuesday is closed."]
    ],
    related: [
      ["Visit details", "/visit"],
      ["Menu", "/menu"],
      ["Oak Cliff coffee shop", "/oak-cliff-coffee-shop"],
      ["Order online", "/order"]
    ]
  }
};

function normalizedLocalSlug() {
  const fromBody = document.body.getAttribute("data-local-page");
  if (fromBody) return fromBody;
  return window.location.pathname
    .replace(/^\//, "")
    .replace(/\/$/, "")
    .replace(/\.html$/, "") || "oak-cliff-coffee-shop";
}

function InfoCard({ title, body }) {
  return (
    <article className="card lift">
      <h3 style={{ color: "var(--c-dark-green)", fontSize: 32 }}>{title}</h3>
      <p style={{ margin: 0, color: "color-mix(in oklab, var(--c-charcoal) 82%, transparent)" }}>{body}</p>
    </article>
  );
}

function LocalPage() {
  const page = LOCAL_PAGES[normalizedLocalSlug()] || LOCAL_PAGES["oak-cliff-coffee-shop"];
  return (
    <>
      <SiteHeader currentPage="visit" />

      <section className="cream-deep" style={{ padding: "72px 0 84px" }}>
        <div className="wrap" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.15fr) minmax(320px, .85fr)",
          gap: 56,
          alignItems: "center"
        }}>
          <div>
            <p className="eyebrow" style={{ color: "var(--c-dark-green)" }}>{page.eyebrow}</p>
            <h1 style={{ color: "var(--c-dark-green)", fontSize: "clamp(52px, 7vw, 104px)", maxWidth: "11ch" }}>
              {page.title}
            </h1>
            <p className="lede" style={{ color: "var(--c-dark-green)", marginTop: 24, maxWidth: "48ch" }}>
              {page.lead}
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
              <a href="/menu" className="btn btn-primary">See menu</a>
              <a href="/order" className="btn btn-ghost">Order online</a>
              <a href="/visit" className="btn btn-ghost">Get directions</a>
            </div>
          </div>
          <div className="photo" style={{ aspectRatio: "4 / 5", borderRadius: 8 }}>
            <img src={page.image} alt={page.imageAlt} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            <span className="tag">{page.tag}</span>
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="wrap">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
            gap: 18
          }}>
            {page.sections.map(([title, body]) => <InfoCard key={title} title={title} body={body} />)}
          </div>
        </div>
      </section>

      <section className="dark tight">
        <div className="wrap" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, .9fr)",
          gap: 42,
          alignItems: "start"
        }}>
          <div>
            <p className="eyebrow">Visit Everyday Works</p>
            <h2>516 S Hampton Rd #180, Dallas, TX 75208.</h2>
            <p className="lede" style={{ marginTop: 18, maxWidth: "46ch", color: "color-mix(in oklab, var(--c-cream) 82%, transparent)" }}>
              Open Monday and Wednesday-Friday 6:30 AM-4 PM, Saturday 7 AM-5 PM, Sunday 8 AM-5 PM, and closed Tuesday.
            </p>
          </div>
          <div className="card" style={{ background: "color-mix(in oklab, var(--c-cream) 8%, transparent)", borderColor: "color-mix(in oklab, var(--c-cream) 18%, transparent)" }}>
            <div className="mono" style={{ color: "var(--c-yellow)" }}>Helpful links</div>
            {page.related.map(([label, href]) => (
              <a key={href} href={href} style={{
                color: "var(--c-cream)",
                textDecoration: "none",
                padding: "10px 0",
                borderTop: "1px solid color-mix(in oklab, var(--c-cream) 14%, transparent)"
              }}>{label} →</a>
            ))}
          </div>
        </div>
      </section>

      <SiteFooter />
      <a href="/order" className="sticky-order">Order Everyday Works</a>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<LocalPage />);