// outfitting.jsx — Lemon-AID apparel catalog (inner page)
// Reuses SiteChrome / DB_PAL / dbStyles / MerchCard from direction-b.jsx (window globals).

const OP = DB_PAL;
const ops = dbStyles;

function OP_Hero() {
  const count = LEMONAID.merch.length;
  return (
    <section style={{ padding: "72px 48px 56px" }}>
      <div style={{ ...ops.label, color: OP.mute, marginBottom: 8 }}>
        OUTFITTING / LA-101–{String(100 + count)}
      </div>
      <h1 style={{ ...ops.display, fontSize: 132, margin: "0 0 28px", lineHeight: .92 }}>
        The uniform.
      </h1>
      <p style={{ fontSize: 19, lineHeight: 1.5, maxWidth: 640, color: OP.ink }}>
        The complete Lemon-AID apparel catalog. Each shirt is printed to order on
        a Bella + Canvas 3001 and fulfilled by a third party. We do not hold
        inventory. We hold standards.
      </p>
      <div style={{ marginTop: 36, display: "flex", gap: 16, flexWrap: "wrap" }}>
        {[
          ["Designs", String(count)],
          ["Per shirt", "$22.00"],
          ["Fulfillment", "Third party"],
        ].map(([l, v]) => (
          <div key={l} style={{
            padding: "14px 18px", border: `1px solid ${OP.ink}`,
            ...ops.label, fontSize: 11, display: "flex", flexDirection: "column", gap: 6,
          }}>
            <span style={{ color: OP.mute }}>{l}</span>
            <span style={{ ...ops.display, fontSize: 24 }}>{v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function OP_Catalog() {
  return (
    <section style={{ padding: "16px 48px 72px", borderTop: `1px solid ${OP.ink}` }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", margin: "40px 0 32px" }}>
        <h2 style={{ ...ops.display, fontSize: 56, margin: 0 }}>The catalog.</h2>
        <div style={{ ...ops.label, color: OP.mute }}>{LEMONAID.merch.length} SKUS · PRINTED TO ORDER</div>
      </div>
      <div data-merch-grid style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
        {LEMONAID.merch.map((m) => (
          <MerchCard key={m.id} m={m} />
        ))}
      </div>
    </section>
  );
}

function OP_Notes() {
  const rows = [
    ["Sizing", "XS–5XL. Unisex fit, true to size. Every shirt is a Bella + Canvas 3001."],
    ["Printing", "Direct-to-garment, printed to order. No two batches sit in a warehouse."],
    ["Shipping", "A flat $6.00 per order. Printed to order, so allow a few days to produce before it leaves."],
    ["Payment", "Processed by Square. The card table itself does not take online orders."],
    ["Returns", "Per the fulfillment partner's policy. Misprints are replaced without argument."],
  ];
  return (
    <section style={{ padding: "72px 48px", background: OP.ink, color: OP.bg, borderTop: `1px solid ${OP.ink}` }}>
      <div style={{ ...ops.label, color: OP.accent, marginBottom: 8 }}>THE FINE PRINT</div>
      <h2 style={{ ...ops.display, fontSize: 56, margin: "0 0 40px" }}>How this works.</h2>
      <div style={{ border: `1px solid ${OP.bg}33` }}>
        {rows.map((r, i, a) => (
          <div key={r[0]} style={{
            display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 32,
            padding: "22px 28px",
            borderBottom: i < a.length - 1 ? `1px solid ${OP.bg}1f` : "none",
          }}>
            <div style={{ ...ops.label, color: OP.accent }}>{r[0]}</div>
            <div style={{ fontSize: 15, lineHeight: 1.5, opacity: .85 }}>{r[1]}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function OP_CTA() {
  return (
    <section style={{ padding: "96px 48px", borderTop: `1px solid ${OP.ink}`, textAlign: "center" }}>
      <h2 style={{ ...ops.display, fontSize: 72, margin: "0 0 24px" }}>
        Wear the company.<br/>
        <span style={{ background: OP.accent, padding: "2px 12px", display: "inline-block" }}>From the corner.</span>
      </h2>
      <p style={{ fontSize: 17, color: OP.mute, maxWidth: 520, margin: "0 auto 12px" }}>
        Lemonade is two dollars. The shirt is more. Both are made with the same
        amount of seriousness.
      </p>
      <p style={{ ...ops.label, fontSize: 11, color: OP.mute }}>
        Corner of Birchway and Burlwood · For the lemonade, at least
      </p>
    </section>
  );
}

function OutfittingPage({ statusOverride }) {
  return (
    <SiteChrome statusOverride={statusOverride} activeNav="outfitting">
      <OP_Hero />
      <OP_Catalog />
      <OP_Notes />
      <OP_CTA />
    </SiteChrome>
  );
}

window.OutfittingPage = OutfittingPage;