/* CategoryGrid, 4 tiles: Trimmers · Cutter Heads & Blades · Easels · Mount Boards */

function CategoryTile({ name, blurb, n, placeholder, accent, href }) {
  return (
    <a href={href || "#"} style={{
      display: "flex", flexDirection: "column",
      textDecoration: "none", color: "inherit",
      background: "var(--scd-cream-50)",
      border: "1px solid var(--border)",
      borderRadius: 4,
      overflow: "hidden",
      transition: "box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)",
    }}
    onMouseOver={e => { e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "var(--scd-ink-300)"; }}
    onMouseOut={e => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--border)"; }}>
      <div style={{
        aspectRatio: "4/3", background: "var(--scd-cream-300)",
        position: "relative", overflow: "hidden",
        borderBottom: "1px solid var(--border)",
      }}>
        <div className="placeholder__grain" style={{ position: "absolute", inset: 0 }}/>
        <span style={{
          position: "absolute", top: 12, left: 12,
          fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--scd-blush-700)", fontWeight: 600,
        }}>Placeholder</span>
        <span style={{
          position: "absolute", bottom: 12, left: 12, right: 12,
          fontFamily: "var(--font-body)", fontSize: 11, lineHeight: 1.4,
          color: "var(--scd-ink-700)",
          background: "rgba(253, 252, 250, 0.85)",
          padding: "5px 8px", borderRadius: 2,
        }}>{placeholder}</span>
      </div>
      <div style={{ padding: 22, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
          <h3 style={{
            fontFamily: "var(--font-display)", fontWeight: 400, fontSize: 26,
            color: "var(--fg-brand)", letterSpacing: "-0.01em", margin: 0, lineHeight: 1.1,
          }}>{name}</h3>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg-muted)", whiteSpace: "nowrap" }}>{n}</span>
        </div>
        <p style={{ fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-muted)", margin: 0 }}>{blurb}</p>
        <div style={{ fontSize: 13, color: "var(--fg-brand)", fontWeight: 500, marginTop: 4 }}>
          Shop {name.toLowerCase()} <Arrow/>
        </div>
      </div>
    </a>
  );
}

function CategoryGrid() {
  return (
    <section className="band-cream">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Eyebrow>Shop by category</Eyebrow>
            <h2 style={{ marginTop: 14 }}>Everything a print shop reorders, in one place.</h2>
          </div>
          <p className="lead">
            The four categories that keep a production floor running. Specs on every SKU,
            blade-replacement schedules, and a parts rep you can actually call.
          </p>
        </div>
        <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          <CategoryTile
            name="Trimmers"
            href="collection-rotary-trimmers-v1.html"
            blurb="Rotary paper trimmers, 36″ to 72″. Twin-rail carriage, serviceable heads."
            n="14 models"
            placeholder="52″ rotary trimmer, three-quarter overhead, warm shop light."
          />
          <CategoryTile
            name="Cutter heads & blades"
            blurb="Replacement heads and precision-ground blades. Rotatrim-compatible."
            n="32 parts"
            placeholder="Close-up of a cutter head on the workbench, blade exposed."
          />
          <CategoryTile
            name="Easels"
            blurb="Display easels for photo labs, galleries, and trade-show booths."
            n="8 sizes"
            placeholder="Archival easel holding a mounted print, studio lighting."
          />
          <CategoryTile
            name="Mount boards"
            blurb="Acid-free and standard mount boards in 22 stocks and a dozen sizes."
            n="22 stocks"
            placeholder="Stack of mount boards, paper-edge macro, shallow depth of field."
          />
        </div>
      </div>
    </section>
  );
}

window.CategoryGrid = CategoryGrid;