// direction-b.jsx — Clinical Modern
// Paper white, deep black, mustard accent. Neo-grotesque + mono labels.
// Think: Athletic Greens × One Medical × a Stripe doc page.

const DB_PAL = {
  bg: "#fafaf7",
  paper: "#ffffff",
  ink: "#0a0a0a",
  rule: "#0a0a0a",
  accent: "#e8d547",   // mustard
  warm: "#b8413a",
  mute: "#666",
  faint: "#e8e6df",
};

const dbStyles = {
  root: {
    background: DB_PAL.bg,
    color: DB_PAL.ink,
    fontFamily: '"Inter", "Söhne", system-ui, sans-serif',
    width: "100%",
    fontSize: 14,
    lineHeight: 1.55,
    fontFeatureSettings: '"ss01", "cv11"',
  },
  display: {
    fontFamily: '"Inter", system-ui, sans-serif',
    fontWeight: 700,
    letterSpacing: "-.04em",
    lineHeight: .9,
  },
  mono: { fontFamily: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace' },
  label: {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 10,
    letterSpacing: ".18em",
    textTransform: "uppercase",
  },
};

function DB_Nav({ status, activeNav }) {
  const isHome = activeNav === "home";
  const prefix = isHome ? "" : "index.html";
  return (
    <div data-nav style={{
      display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
      padding: "20px 48px", alignItems: "center",
      borderBottom: `1px solid ${DB_PAL.ink}`,
      background: DB_PAL.bg, position: "sticky", top: 0, zIndex: 10,
    }}>
      <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color: "inherit" }}>
        <div style={{
          width: 28, height: 28, background: DB_PAL.accent,
          display: "grid", placeItems: "center",
          ...dbStyles.display, fontSize: 16, color: DB_PAL.ink,
        }}>L</div>
        <span style={{ ...dbStyles.display, fontSize: 18, letterSpacing: "-.02em" }}>Lemon-AID</span>
      </a>
      <nav data-nav-menu style={{ display: "flex", gap: 28, justifyContent: "center", ...dbStyles.label, color: DB_PAL.ink }}>
        <a href={`${prefix}#products`} style={{ color: "inherit", textDecoration: "none" }}>Products</a>
        <a href="outfitting.html" style={{ color: "inherit", textDecoration: "none" }}>Outfitting</a>
        <a href={`${prefix}#hours`} style={{ color: "inherit", textDecoration: "none" }}>Hours</a>
        <a href={`${prefix}#about`} style={{ color: "inherit", textDecoration: "none" }}>About</a>
        <a href={`${prefix}#press`} style={{ color: "inherit", textDecoration: "none" }}>Press</a>
      </nav>
      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 12 }}>
        <div data-nav-status style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "6px 12px",
          background: status.open ? DB_PAL.ink : "transparent",
          color: status.open ? DB_PAL.accent : DB_PAL.ink,
          border: `1px solid ${DB_PAL.ink}`,
          ...dbStyles.label, fontSize: 10,
          whiteSpace: "nowrap",
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: "50%",
            background: status.open ? DB_PAL.accent : DB_PAL.warm,
            animation: status.open ? "db-pulse 2s infinite" : "none",
            flex: "0 0 auto",
          }} />
          {status.label}<span data-nav-status-detail> · {status.detail}</span>
        </div>
      </div>
    </div>
  );
}

function DB_Hero({ status }) {
  return (
    <section style={{ padding: "72px 48px 56px", position: "relative" }}>
      <div data-hero-grid style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "stretch" }}>
        <div data-hero-copy style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>
            REFRESHMENT / RECOVERY / WINSTON-SALEM NC
          </div>
          <div>
            <h1 style={{ ...dbStyles.display, fontSize: 156, lineHeight: 1.02, margin: "16px 0 0" }}>
              Hydrate.<br/>
              Heal.<br/>
              <span style={{ background: DB_PAL.accent, padding: "4px 12px", display: "inline-block", marginTop: 6 }}>Walk on.</span>
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.45, marginTop: 28, maxWidth: 480, color: DB_PAL.ink }}>
              Lemon-AID is a small-format refreshment and minor-injury supply
              company operating from a card table. We sell three things. They
              are all good.
            </p>
          </div>
          <div style={{
            marginTop: 32, display: "flex", gap: 10, flexWrap: "wrap",
          }}>
            {LEMONAID.products.map((p) => (
              <div key={p.id} style={{
                padding: "8px 10px", border: `1px solid ${DB_PAL.ink}`,
                ...dbStyles.label, fontSize: 10, display: "flex", gap: 8,
                whiteSpace: "nowrap",
              }}>
                <span>{p.name}</span>
                <span style={{ color: DB_PAL.mute }}>{formatMoney(p.price)}</span>
              </div>
            ))}
          </div>
        </div>
        <div data-hero-image-wrap style={{ position: "relative" }}>
          <image-slot id="db-hero" data-hero-image style={{ width: "100%", height: 600, display: "block", background: "transparent" }}
            shape="rect" fit="contain" src="assets/lemon-hero.png"
            placeholder="Hero product still — lemonade on white seamless"></image-slot>
        </div>
      </div>
    </section>
  );
}

function DB_Spec() {
  return (
    <section style={{ padding: "0 48px 56px" }}>
      <div data-spec-strip style={{
        background: DB_PAL.ink, color: DB_PAL.bg, padding: "32px 36px",
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
      }}>
        {[
          ["INGREDIENTS", "Real lemons, cane sugar, water, ice"],
          ["BATCH", "Small. Made fresh."],
          ["PAYMENT", "Cash & cards accepted"],
          ["DISTRIBUTION", "Single point of sale"],
        ].map(([l, v], i, arr) => (
          <div key={l} style={{
            padding: "0 24px", borderRight: i < arr.length - 1 ? `1px solid ${DB_PAL.bg}33` : "none",
          }}>
            <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>{l}</div>
            <div style={{ fontSize: 16, lineHeight: 1.35 }}>{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function DB_Products() {
  return (
    <section id="products" style={{ padding: "56px 48px", borderTop: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>02 — PRODUCT LINE</div>
          <h2 style={{ ...dbStyles.display, fontSize: 64, margin: 0 }}>The catalog.</h2>
        </div>
        <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>3 SKUS · UPDATED WEEKLY</div>
      </div>
      <div data-product-grid style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {LEMONAID.products.map((p) => (
          <article key={p.id} style={{
            background: DB_PAL.paper, border: `1px solid ${DB_PAL.ink}`,
            display: "flex", flexDirection: "column",
          }}>
            <image-slot id={`db-prod-${p.id}`} data-prod-image style={{ width: "100%", height: 240, display: "block", borderBottom: `1px solid ${DB_PAL.ink}` }}
              shape="rect" src={`assets/db-prod-${p.id}.webp`} placeholder={`${p.sku} · ${p.name}`}></image-slot>
            <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
              <div style={{ display: "flex", justifyContent: "space-between", ...dbStyles.label, color: DB_PAL.mute }}>
                <span>{p.sku}</span><span>{p.tag.toUpperCase()}</span>
              </div>
              <h3 style={{ ...dbStyles.display, fontSize: 36, margin: 0 }}>{p.name}</h3>
              <p style={{ margin: 0, fontSize: 14, color: DB_PAL.mute }}>{p.short}</p>
              <ul style={{ margin: "8px 0 0", padding: 0, listStyle: "none", borderTop: `1px solid ${DB_PAL.faint}` }}>
                {p.details.map((d, i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 12, padding: "10px 0", borderBottom: `1px solid ${DB_PAL.faint}`, fontSize: 13 }}>
                    <span style={{ ...dbStyles.label, color: DB_PAL.mute }}>{String(i + 1).padStart(2, "0")}</span>
                    <span>{d}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "baseline", paddingTop: 16, borderTop: `1px solid ${DB_PAL.ink}` }}>
                <span style={{ ...dbStyles.display, fontSize: 40 }}>{formatMoney(p.price)}</span>
                <span style={{ ...dbStyles.label, color: DB_PAL.mute }}>{p.unit}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function DB_FirstAid() {
  return (
    <section style={{ padding: "72px 48px", background: DB_PAL.ink, color: DB_PAL.bg, borderTop: `1px solid ${DB_PAL.ink}`, borderBottom: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
        <image-slot id="db-firstaid" data-tall-image style={{ width: "100%", height: 520, display: "block" }}
          shape="rect" src="assets/db-firstaid.webp" placeholder="First aid bundle — top-down, white"></image-slot>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 12 }}>DEEP DIVE / LA-003</div>
          <h2 style={{ ...dbStyles.display, fontSize: 88, margin: "0 0 24px" }}>
            The bundle, <span style={{ color: DB_PAL.accent }}>specified.</span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.5, color: DB_PAL.bg, opacity: .8, maxWidth: 480, margin: "0 0 32px" }}>
            People fall down. We thought about that for a long time. The
            result is a small, sealed bag.
          </p>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <tbody>
            {[
              ["P/N", "LA-003"],
              ["UPC", "Not applicable"],
              ["CONTENTS", "2 × bandage, 1 × wipe"],
              ["WEIGHT", "≈ 8 g"],
              ["ASSEMBLY", "By hand, small runs"],
              ["MSRP", "$2.00 USD"],
            ].map(([k, v], i) => (
              <tr key={k} style={{ borderTop: `1px solid ${DB_PAL.bg}22` }}>
                <td style={{ ...dbStyles.label, color: DB_PAL.accent, padding: "12px 0", width: 140 }}>{k}</td>
                <td style={{ padding: "12px 0", ...dbStyles.mono, fontSize: 13 }}>{v}</td>
              </tr>
            ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// One merch card. Shared by the home teaser and the Outfitting page.
function MerchCard({ m }) {
  return (
    <article style={{
      background: DB_PAL.paper, border: `1px solid ${DB_PAL.ink}`,
      display: "flex", flexDirection: "column",
    }}>
      <image-slot id={`db-merch-${m.id}`} data-merch-image style={{ width: "100%", height: 240, display: "block", borderBottom: `1px solid ${DB_PAL.ink}` }}
        shape="rect" src={m.image} placeholder={`${m.sku} · ${m.name}`}></image-slot>
      <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
          <h3 style={{ ...dbStyles.display, fontSize: 36, margin: 0 }}>{m.name}</h3>
          <span style={{ ...dbStyles.display, fontSize: 32, whiteSpace: "nowrap" }}>{formatMoney(m.price)}</span>
        </div>
        <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>{m.sku} · {m.color} · {m.fabric}</div>
        <div style={{ marginTop: "auto", paddingTop: 16, borderTop: `1px solid ${DB_PAL.ink}` }}>
          {m.url ? (
            <a href={m.url} target="_blank" rel="noopener noreferrer" style={{
              display: "block", textAlign: "center", padding: "12px 0",
              background: DB_PAL.ink, color: DB_PAL.bg, textDecoration: "none",
              ...dbStyles.label,
            }}>Acquire</a>
          ) : (
            <div aria-disabled="true" style={{
              display: "block", textAlign: "center", padding: "12px 0",
              border: `1px solid ${DB_PAL.faint}`, color: DB_PAL.mute,
              ...dbStyles.label,
            }}>Specification pending</div>
          )}
        </div>
      </div>
    </article>
  );
}

// Home teaser: highlights one shirt and links to the full Outfitting page.
function DB_Merch() {
  const featured = LEMONAID.merch.find((m) => m.id === "hyphen-white") || LEMONAID.merch[0];
  const count = LEMONAID.merch.length;
  return (
    <section id="merch" style={{ padding: "56px 48px", borderTop: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>OUTFITTING / THE FULL LINE</div>
          <h2 style={{ ...dbStyles.display, fontSize: 64, margin: 0 }}>The uniform.</h2>
        </div>
        <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>FULFILLED BY THIRD PARTY</div>
      </div>
      <div data-merch-feature style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "stretch" }}>
        <MerchCard m={featured} />
        <div style={{
          border: `1px solid ${DB_PAL.ink}`, background: DB_PAL.ink, color: DB_PAL.bg,
          padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          <div>
            <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 16 }}>THE FULL CATALOG</div>
            <h3 style={{ ...dbStyles.display, fontSize: 44, margin: "0 0 16px" }}>{count} shirts. One supply chain.</h3>
            <p style={{ fontSize: 16, lineHeight: 1.5, opacity: .8, maxWidth: 400, margin: 0 }}>
              Every Lemon-AID design, in every color we offer. Printed to order and
              fulfilled by a third party. Specification, made wearable.
            </p>
          </div>
          <a href="outfitting.html" style={{
            ...dbStyles.label, color: DB_PAL.ink, background: DB_PAL.accent,
            padding: "14px 20px", textDecoration: "none", display: "inline-block",
            marginTop: 28, alignSelf: "flex-start",
          }}>View all {count} shirts →</a>
        </div>
      </div>
    </section>
  );
}

function DB_Calculator() {
  const { qty, inc, total, itemCount } = usePriceCalc();
  return (
    <section style={{ padding: "72px 48px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 48 }}>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>03 — PLAN YOUR VISIT</div>
          <h2 style={{ ...dbStyles.display, fontSize: 56, margin: "0 0 16px" }}>
            Build the order.
          </h2>
          <p style={{ color: DB_PAL.mute, fontSize: 15, maxWidth: 340 }}>
            Tap to add items. The total is not a reservation. Cash or card.
            Exact change appreciated.
          </p>
        </div>
        <div style={{ border: `1px solid ${DB_PAL.ink}`, background: DB_PAL.paper }}>
          {LEMONAID.products.map((p, i) => (
            <div key={p.id} data-calc-row style={{
              display: "grid", gridTemplateColumns: "auto 1fr auto auto",
              alignItems: "center", gap: 24,
              padding: "22px 28px",
              borderBottom: i < LEMONAID.products.length - 1 ? `1px solid ${DB_PAL.faint}` : "none",
            }}>
              <div style={{
                width: 48, height: 48, background: DB_PAL.accent,
                display: "grid", placeItems: "center",
                ...dbStyles.display, fontSize: 18,
              }}>
                {p.sku.split("-")[1]}
              </div>
              <div>
                <div style={{ ...dbStyles.display, fontSize: 22, letterSpacing: "-.02em" }}>{p.name}</div>
                <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginTop: 2 }}>
                  {p.sku} · {formatMoney(p.price)} · {p.unit}
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 0, border: `1px solid ${DB_PAL.ink}` }}>
                <button onClick={() => inc(p.id, -1)} style={db_btn}>−</button>
                <span style={{ ...dbStyles.mono, width: 40, textAlign: "center", fontSize: 16, padding: "6px 0" }}>{qty[p.id]}</span>
                <button onClick={() => inc(p.id, +1)} style={db_btn}>+</button>
              </div>
              <div style={{ ...dbStyles.display, fontSize: 22, minWidth: 80, textAlign: "right" }}>
                {formatMoney(qty[p.id] * p.price)}
              </div>
            </div>
          ))}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr auto",
            alignItems: "center",
            padding: "24px 28px",
            background: DB_PAL.ink, color: DB_PAL.bg,
          }}>
            <div>
              <div style={{ ...dbStyles.label, color: DB_PAL.accent }}>SUBTOTAL · {itemCount} ITEM{itemCount===1?"":"S"}</div>
              <div style={{ ...dbStyles.label, opacity: .6, marginTop: 4 }}>TAX N/A · TIP NOT CUSTOMARY</div>
            </div>
            <div style={{ ...dbStyles.display, fontSize: 64, color: DB_PAL.accent }}>
              {formatMoney(total)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
const db_btn = {
  width: 36, height: 36, border: "none", background: "transparent",
  borderRight: `1px solid ${DB_PAL.ink}`, cursor: "pointer", fontSize: 16,
  color: DB_PAL.ink, fontFamily: "inherit",
};

function DB_Founder() {
  return (
    <section id="about" style={{ padding: "72px 48px", borderTop: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>04 — LEADERSHIP</div>
      <h2 style={{ ...dbStyles.display, fontSize: 64, margin: "0 0 48px" }}>From the founder.</h2>
      <div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 48 }}>
        <div>
          <image-slot id="db-founder" data-tall-image style={{ width: "100%", height: 360, display: "block", marginBottom: 16 }}
            shape="rect" src="assets/db-founder.webp" placeholder="Ari, founder"></image-slot>
          <div style={{ ...dbStyles.display, fontSize: 22 }}>{LEMONAID.founder.name}</div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginTop: 4 }}>{LEMONAID.founder.title.toUpperCase()}</div>
          <div style={{ marginTop: 16, padding: 12, background: DB_PAL.accent, ...dbStyles.label, fontSize: 10, lineHeight: 1.6 }}>
            AGE 10 · TENURE 1 YR<br/>
            REPORTS TO NO ONE
          </div>
        </div>
        <div data-letter style={{ columnCount: 2, columnGap: 40 }}>
          {LEMONAID.founder.letter.map((p, i) => (
            <p key={i} style={{
              margin: i === 0 ? "0 0 16px" : "0 0 14px",
              fontSize: i === 0 ? 22 : 15,
              fontWeight: i === 0 ? 600 : 400,
              lineHeight: 1.55,
              breakInside: "avoid",
            }}>{p}</p>
          ))}
          <div style={{ ...dbStyles.display, fontSize: 36, marginTop: 8 }}>— {LEMONAID.founder.sig}</div>
        </div>
      </div>
    </section>
  );
}

function DB_Hours({ status }) {
  return (
    <section id="hours" style={{ padding: "72px 48px", background: DB_PAL.paper, borderTop: `1px solid ${DB_PAL.ink}`, borderBottom: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>05 — HOURS / LOCATION</div>
          <h2 style={{ ...dbStyles.display, fontSize: 56, margin: "0 0 24px" }}>
            Currently <span style={{ background: status.open ? DB_PAL.accent : DB_PAL.faint, padding: "0 10px" }}>{status.open ? "open" : "closed"}</span>.
          </h2>
          <div style={{ border: `1px solid ${DB_PAL.ink}` }}>
            {LEMONAID.hours.map((h, i) => {
              const isToday = new Date().getDay() === [1,2,3,4,5,6,0][i];
              return (
                <div key={h.day} data-hours-row style={{
                  display: "grid", gridTemplateColumns: "120px 1fr auto",
                  gap: 16, alignItems: "center", padding: "14px 20px",
                  borderBottom: i < LEMONAID.hours.length - 1 ? `1px solid ${DB_PAL.faint}` : "none",
                  background: isToday ? `${DB_PAL.accent}55` : h.start ? "transparent" : DB_PAL.faint,
                }}>
                  <div style={{ ...dbStyles.display, fontSize: 18, letterSpacing: "-.01em", fontWeight: isToday ? 900 : 700 }}>{h.day}</div>
                  <div style={{ ...dbStyles.mono, fontSize: 12, opacity: h.start ? 1 : .5 }}>
                    {h.start != null ? `${formatHour(h.start)} → ${formatHour(h.end)}` : "—"}
                  </div>
                  <div data-hours-note style={{ ...dbStyles.label, color: DB_PAL.mute, fontSize: 10 }}>{h.note}</div>
                </div>
              );
            })}
          </div>
        </div>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>LOCATION</div>
          <h3 style={{ ...dbStyles.display, fontSize: 36, margin: "0 0 16px", lineHeight: 1.1 }}>
            "{LEMONAID.location.primary}"
          </h3>
          <p style={{ color: DB_PAL.mute, fontSize: 14, margin: "0 0 20px", whiteSpace: "pre-line" }}>
            Corner of Birchway and Burlwood, Winston-Salem, North Carolina.{"\n"}Look for the white card table. There is a sign.
          </p>
          <image-slot id="db-setup" data-tall-image style={{ width: "100%", height: 260, display: "block" }}
            shape="rect" src="assets/db-setup.webp" placeholder="The card table, on the corner"></image-slot>
          <div style={{
            marginTop: 16, padding: 20, background: DB_PAL.ink, color: DB_PAL.bg,
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12,
            ...dbStyles.label, fontSize: 10,
          }}>
            <div>PAYMENT<br/><span style={{ color: DB_PAL.accent, fontSize: 13 }}>CASH + CARD</span></div>
            <div>CHANGE<br/><span style={{ color: DB_PAL.accent, fontSize: 13 }}>APPRECIATED</span></div>
            <div>DELIVERY<br/><span style={{ color: DB_PAL.accent, fontSize: 13 }}>NO</span></div>
            <div>RESERVATIONS<br/><span style={{ color: DB_PAL.accent, fontSize: 13 }}>NO</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DB_Press() {
  return (
    <section id="press" style={{ padding: "72px 48px" }}>
      <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>06 — VOICES</div>
      <h2 style={{ ...dbStyles.display, fontSize: 56, margin: "0 0 40px" }}>From the sidewalk.</h2>
      <div data-press-grid style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: `1px solid ${DB_PAL.ink}` }}>
        {LEMONAID.press.map((p, i) => (
          <blockquote key={i} style={{
            margin: 0, padding: 28,
            borderRight: i % 2 === 0 ? `1px solid ${DB_PAL.faint}` : "none",
            borderBottom: i < 2 ? `1px solid ${DB_PAL.faint}` : "none",
            background: DB_PAL.paper,
          }}>
            <div style={{ ...dbStyles.display, fontSize: 28, lineHeight: 1.15, marginBottom: 20 }}>
              "{p.quote}"
            </div>
            <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>— {p.source}</div>
          </blockquote>
        ))}
      </div>
    </section>
  );
}

function DB_IRCareers() {
  return (
    <section style={{ padding: "72px 48px", background: DB_PAL.paper, borderTop: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }}>
        <div style={{ padding: 32, border: `1px solid ${DB_PAL.ink}` }}>
          <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>CAREERS</div>
          <h3 style={{ ...dbStyles.display, fontSize: 40, margin: 0 }}>{LEMONAID.careers.headline}</h3>
          <p style={{ marginTop: 16, fontSize: 14, color: DB_PAL.mute }}>{LEMONAID.careers.body}</p>
          <div style={{
            marginTop: 20, padding: "10px 14px",
            background: DB_PAL.faint, ...dbStyles.label, fontSize: 10,
            display: "inline-block",
          }}>0 OPEN POSITIONS</div>
        </div>
        <div style={{ padding: 32, background: DB_PAL.ink, color: DB_PAL.bg }}>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>INVESTOR RELATIONS</div>
          <h3 style={{ ...dbStyles.display, fontSize: 40, margin: 0 }}>{LEMONAID.ir.headline}</h3>
          <p style={{ marginTop: 16, fontSize: 14, opacity: .8 }}>{LEMONAID.ir.body}</p>
          <div data-ir-metrics style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginTop: 24 }}>
            {LEMONAID.ir.metrics.map((m) => (
              <div key={m.label} style={{ padding: 12, background: "#1a1a1a" }}>
                <div style={{ ...dbStyles.display, fontSize: 28, color: DB_PAL.accent }}>{m.value}</div>
                <div style={{ ...dbStyles.label, fontSize: 9, opacity: .6, marginTop: 4 }}>{m.label.toUpperCase()}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, borderTop: `1px solid #ffffff22`, paddingTop: 20 }}>
            <div style={{ ...dbStyles.label, fontSize: 9, color: DB_PAL.accent, marginBottom: 12 }}>USE OF PROCEEDS</div>
            {LEMONAID.ir.allocation.map((a) => (
              <div key={a.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "7px 0", borderBottom: `1px solid #ffffff11` }}>
                <div style={{ fontSize: 13, opacity: .85 }}>{a.label}</div>
                <div style={{ ...dbStyles.mono, fontSize: 13, color: DB_PAL.accent, marginLeft: 16, flexShrink: 0 }}>{a.pct}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function DB_Footer() {
  return (
    <footer style={{ background: DB_PAL.ink, color: DB_PAL.bg, padding: "56px 48px 32px" }}>
      <div data-foot-logo style={{ ...dbStyles.display, fontSize: 180, lineHeight: .85, marginBottom: 32, letterSpacing: "-.05em", whiteSpace: "nowrap" }}>
        Lemon-AID<svg
          viewBox="0 0 24 24"
          aria-hidden="true"
          style={{
            width: "0.18em",
            height: "0.18em",
            display: "inline-block",
            verticalAlign: "baseline",
            marginLeft: "0.02em",
          }}
        >
          <circle cx="12" cy="12" r="11" fill={DB_PAL.accent} />
          <circle cx="12" cy="12" r="9" fill="#f4e689" />
          <g stroke={DB_PAL.accent} strokeWidth="1.2" strokeLinecap="round">
            <line x1="12" y1="4" x2="12" y2="20" />
            <line x1="4" y1="12" x2="20" y2="12" />
            <line x1="6.3" y1="6.3" x2="17.7" y2="17.7" />
            <line x1="17.7" y1="6.3" x2="6.3" y2="17.7" />
          </g>
          <circle cx="12" cy="12" r="1.6" fill={DB_PAL.accent} />
        </svg>
      </div>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24,
        paddingTop: 24, borderTop: `1px solid ${DB_PAL.bg}22`,
      }}>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>TAGLINE</div>
          <div>{LEMONAID.tagline}</div>
        </div>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>HQ</div>
          <div>{LEMONAID.location.city}</div>
        </div>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>CONTACT</div>
          <div>{LEMONAID.contact.inPerson}</div>
        </div>
        <div>
          <div style={{ ...dbStyles.label, color: DB_PAL.accent, marginBottom: 8 }}>SITE BY</div>
          <a href={LEMONAID.legal.builderUrl} style={{ color: "inherit" }}>{LEMONAID.legal.builder}</a>
        </div>
      </div>
      <div style={{ display: "flex", gap: 24, marginTop: 24, fontSize: 10,
           letterSpacing: ".18em", textTransform: "uppercase",
           fontFamily: "'JetBrains Mono', ui-monospace, monospace" }}>
        <a href="index.html" style={{ color: "inherit" }}>Home</a>
        <a href="outfitting.html" style={{ color: "inherit" }}>Outfitting</a>
        <a href="franchising.html" style={{ color: "inherit" }}>Franchising</a>
        <a href="brand-book.html" style={{ color: "inherit" }}>Brand Book</a>
      </div>
      <div style={{ marginTop: 28, ...dbStyles.label, fontSize: 10, opacity: .5 }}>
        {LEMONAID.legal.copyright}
      </div>
    </footer>
  );
}

function HomeExpansion() {
  const cards = [
    {
      kicker: "07 — Expansion",
      title: "Franchising",
      body: "The corner is proven. The model is documented. Qualified operators may now be considered for territories beyond it.",
      href: "franchising.html",
      cta: "View the opportunity",
    },
    {
      kicker: "08 — Standards",
      title: "Brand Book",
      body: "Every mark, color, and sentence the company uses, specified. Required reading for partners, vendors, and the curious.",
      href: "brand-book.html",
      cta: "Read the standards",
    },
  ];
  return (
    <section style={{ padding: "72px 48px", borderTop: `1px solid ${DB_PAL.ink}` }}>
      <div style={{ ...dbStyles.label, color: DB_PAL.mute, marginBottom: 8 }}>09 — THE COMPANY, EXPANDED</div>
      <h2 style={{ ...dbStyles.display, fontSize: 56, margin: "0 0 40px" }}>Two more documents.</h2>
      <div data-press-grid style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
        {cards.map((c) => (
          <a key={c.href} href={c.href} style={{
            display: "flex", flexDirection: "column", gap: 16,
            padding: 36, border: `1px solid ${DB_PAL.ink}`, background: DB_PAL.paper,
            textDecoration: "none", color: "inherit", transition: "background .15s",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.background = DB_PAL.accent; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = DB_PAL.paper; }}>
            <div style={{ ...dbStyles.label, color: DB_PAL.mute }}>{c.kicker}</div>
            <h3 style={{ ...dbStyles.display, fontSize: 44, margin: 0 }}>{c.title}</h3>
            <p style={{ margin: 0, fontSize: 15, color: DB_PAL.mute, maxWidth: 420 }}>{c.body}</p>
            <div style={{ marginTop: "auto", paddingTop: 16, ...dbStyles.label, display: "flex", alignItems: "center", gap: 8 }}>
              {c.cta} <span aria-hidden="true">&rarr;</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

function SiteChrome({ statusOverride, children, activeNav }) {
  const status = useOpenStatus(statusOverride);
  return (
    <div className="db-root" style={dbStyles.root}>
      <style>{`
        html { scroll-behavior: smooth; }
        @keyframes db-pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }

        /* ── Tablet & below ──────────────────────────────────────── */
        @media (max-width: 980px) {
          .db-root section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
          .db-root footer { padding-left: 24px !important; padding-right: 24px !important; }

          /* Collapse every inline-grid layout to a single column */
          .db-root [style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
            gap: 28px !important;
          }
          /* …except the per-product detail row (small qty/price strip) and footer meta */
          .db-root footer > div[style*="grid-template-columns"] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 20px !important;
          }
          /* Product grid keeps 2 cols on tablet */
          .db-root [data-product-grid] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
          }
          /* Merch grid keeps 2 cols on tablet */
          .db-root [data-merch-grid] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
          }
          /* Merch card image slots */
          .db-root [data-merch-image] { height: 220px !important; }
          /* Press grid keeps 2 cols on tablet */
          .db-root [data-press-grid] {
            grid-template-columns: repeat(2, 1fr) !important;
          }
          /* IR metrics: keep as 2 cols, not 1 */
          .db-root [data-ir-metrics] {
            grid-template-columns: repeat(2, 1fr) !important;
          }
          /* Spec strip 4 → 2x2 */
          .db-root [data-spec-strip] {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 24px 0 !important;
          }
          .db-root [data-spec-strip] > div {
            border-right: 0 !important;
            border-bottom: 1px solid rgba(255,255,255,.2);
            padding-bottom: 16px !important;
          }
          /* Hero: stack image above text */
          .db-root [data-hero-grid] {
            grid-template-areas: "image" "copy" !important;
          }
          .db-root [data-hero-copy] { grid-area: copy; }
          .db-root [data-hero-image-wrap] { grid-area: image; }

          /* Calculator row: SKU chip + name + qty + price → wrap nicely */
          .db-root [data-calc-row] {
            grid-template-columns: auto 1fr !important;
            grid-template-areas: "icon name" "qty price" !important;
            row-gap: 16px !important;
          }
          .db-root [data-calc-row] > :nth-child(1) { grid-area: icon; }
          .db-root [data-calc-row] > :nth-child(2) { grid-area: name; }
          .db-root [data-calc-row] > :nth-child(3) { grid-area: qty; justify-self: start; }
          .db-root [data-calc-row] > :nth-child(4) { grid-area: price; justify-self: end; }

          /* Type scale */
          .db-root h1 { font-size: 72px !important; line-height: 1.02 !important; }
          .db-root h2 { font-size: 40px !important; }
          .db-root h3 { font-size: 26px !important; }

          /* Hero image slot trims down */
          .db-root [data-hero-image] { height: 380px !important; }
          /* Product card image slots */
          .db-root [data-prod-image] { height: 220px !important; }
          /* Other image slots */
          .db-root [data-tall-image] { height: 360px !important; }

          /* Nav: drop center menu, shrink brand */
          .db-root [data-nav] { grid-template-columns: 1fr auto !important; gap: 8px; }
          .db-root [data-nav-menu] { display: none !important; }
          .db-root [data-nav-status] { font-size: 9px !important; padding: 5px 8px !important; }
          .db-root [data-nav-status-detail] { display: none !important; }

          /* Footer big logo: clamp to viewport */
          .db-root [data-foot-logo] { font-size: clamp(56px, 16vw, 120px) !important; }

          /* Founder column count */
          .db-root [data-letter] { column-count: 1 !important; }
          .db-root [data-letter] p:first-child { font-size: 19px !important; }

          /* Hours table tightening */
          .db-root [data-hours-row] {
            grid-template-columns: 100px 1fr !important;
          }
          .db-root [data-hours-note] { display: none !important; }
        }

        /* ── Small tablet & phone ───────────────────────────────── */
        @media (max-width: 560px) {
          .db-root section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 40px !important; padding-bottom: 40px !important; }
          .db-root footer { padding-left: 16px !important; padding-right: 16px !important; }
          .db-root h1 { font-size: 52px !important; }
          .db-root h2 { font-size: 30px !important; }
          .db-root h3 { font-size: 22px !important; }
          .db-root [data-foot-logo] { font-size: clamp(48px, 14vw, 88px) !important; }
          .db-root [data-hero-image] { height: 280px !important; }
          .db-root [data-tall-image] { height: 280px !important; }
          /* Product grid collapses to 1 col below 560 */
          .db-root [data-product-grid] {
            grid-template-columns: 1fr !important;
          }
          /* Merch grid collapses to 1 col below 560 */
          .db-root [data-merch-grid] {
            grid-template-columns: 1fr !important;
          }
          .db-root [data-press-grid] {
            grid-template-columns: 1fr !important;
          }
          .db-root footer > div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
          }
        }

        /* ── Narrow phone ───────────────────────────────────────── */
        @media (max-width: 400px) {
          /* Status pill: short-form OPEN/CLOSED, drop the detail */
          .db-root [data-nav-status-detail] { display: none !important; }
        }
      `}</style>
      <DB_Nav status={status} activeNav={activeNav} />
      {children}
      <DB_Footer />
    </div>
  );
}

function DirectionB({ statusOverride }) {
  const status = useOpenStatus(statusOverride);
  return (
    <SiteChrome statusOverride={statusOverride} activeNav="home">
      <DB_Hero status={status} />
      <DB_Spec />
      <DB_Products />
      <DB_FirstAid />
      <DB_Merch />
      <DB_Calculator />
      <DB_Founder />
      <DB_Hours status={status} />
      <DB_Press />
      <DB_IRCareers />
      <HomeExpansion />
    </SiteChrome>
  );
}

window.DirectionB = DirectionB;
window.SiteChrome = SiteChrome;
window.DB_PAL = DB_PAL;
window.dbStyles = dbStyles;
window.MerchCard = MerchCard;