// process.jsx — Paint Correction SOP, broadsheet poster format
// Mirrors the 4-column reference SOPs (Method / Tools / Frequency / OoO)
// in JEWEL's cream + ink + Newsreader vocabulary.
// ─────────────────────────────────────────────────────────────

// ────── tiny SVG glyphs — built from primitives, no AI-slop pictograms
function Gly({ children, label }) {
  return (
    <div className="col gap-8" style={{ alignItems: "flex-start" }}>
      <div style={{
        width: 56, height: 56, border: "1px solid var(--rule)",
        display: "flex", alignItems: "center", justifyContent: "center",
        background: "var(--bg-2)",
      }}>{children}</div>
      <div className="spec" style={{ fontSize: 10, color: "var(--ink-2)", letterSpacing: "0.12em" }}>
        {label}
      </div>
    </div>
  );
}

const G = {
  polisher: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <circle cx="14" cy="22" r="10" />
      <circle cx="14" cy="22" r="4" />
      <rect x="20" y="10" width="14" height="6" />
      <line x1="22" y1="16" x2="22" y2="22" />
    </svg>
  ),
  pad: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <circle cx="20" cy="20" r="14" />
      <circle cx="20" cy="20" r="14" strokeDasharray="2 3" />
      <circle cx="20" cy="20" r="3" />
    </svg>
  ),
  bottle: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <rect x="15" y="6" width="10" height="4" />
      <path d="M14 10 L14 34 L26 34 L26 10" />
      <line x1="14" y1="18" x2="26" y2="18" />
    </svg>
  ),
  meter: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <rect x="8" y="10" width="24" height="20" />
      <line x1="8" y1="22" x2="32" y2="22" />
      <circle cx="20" cy="22" r="6" />
      <line x1="20" y1="22" x2="24" y2="18" />
    </svg>
  ),
  light: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <circle cx="20" cy="18" r="8" />
      <line x1="20" y1="26" x2="20" y2="32" />
      <line x1="8" y1="18" x2="2" y2="18" />
      <line x1="38" y1="18" x2="32" y2="18" />
      <line x1="12" y1="10" x2="8" y2="6" />
      <line x1="28" y1="10" x2="32" y2="6" />
    </svg>
  ),
  micro: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <rect x="6" y="10" width="28" height="20" />
      <line x1="6" y1="14" x2="34" y2="14" />
      <line x1="6" y1="18" x2="34" y2="18" strokeDasharray="2 3" />
      <line x1="6" y1="22" x2="34" y2="22" strokeDasharray="2 3" />
      <line x1="6" y1="26" x2="34" y2="26" strokeDasharray="2 3" />
    </svg>
  ),
  iron: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <path d="M10 20 Q10 12 20 12 Q30 12 30 20 L30 28 L10 28 Z" />
      <line x1="10" y1="24" x2="30" y2="24" />
      <line x1="14" y1="18" x2="18" y2="18" />
    </svg>
  ),
  clay: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <path d="M8 20 Q12 12 22 14 Q34 16 32 24 Q30 32 18 30 Q6 28 8 20 Z" />
      <circle cx="16" cy="22" r="1" />
      <circle cx="24" cy="20" r="1" />
    </svg>
  ),
  ipa: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <rect x="12" y="8" width="16" height="6" />
      <path d="M10 14 L10 32 L30 32 L30 14" />
      <line x1="10" y1="22" x2="30" y2="22" />
      <text x="14" y="29" fontFamily="ui-monospace" fontSize="6" fill="currentColor"
            stroke="none" letterSpacing="0.5">IPA</text>
    </svg>
  ),
  tape: (
    <svg viewBox="0 0 40 40" width="36" height="36" fill="none" stroke="currentColor" strokeWidth="1.1">
      <circle cx="20" cy="20" r="12" />
      <circle cx="20" cy="20" r="5" />
      <line x1="32" y1="20" x2="38" y2="20" strokeDasharray="2 2" />
    </svg>
  ),
};

const TOOLS = [
  ["DA polisher",       G.polisher, "Dual-action; 8/15/21 mm throws as needed."],
  ["Rotary",            G.polisher, "For heavy cut, controlled-temp paint only."],
  ["Foam pads",         G.pad,      "Cut · polish · finish · jewel — colour-coded."],
  ["Microfiber pads",   G.pad,      "For final refinement on softer clear coats."],
  ["Compound",          G.bottle,   "Heavy + medium cut, water-based abrasive."],
  ["Polish",            G.bottle,   "Refining · finishing · jeweling."],
  ["Gloss meter",       G.meter,    "60° handheld; verified before, between, after."],
  ["Tri-spectrum light",G.light,    "4500 K halogen · 6500 K LED · raked LED."],
  ["IPA panel wipe",    G.ipa,      "50% IPA, between every stage."],
  ["Fallout remover",   G.iron,     "Iron-bonding chemical decontamination."],
  ["Clay bar / mitt",   G.clay,     "Mechanical decon, with lubrication."],
  ["Micro towel",       G.micro,    "Edgeless, 70/30 split, fresh per stage."],
  ["Painter's tape",    G.tape,     "Trim, badges, panel gaps. Always."],
];

const FREQ = [
  { label: "First-time intake",      note: "Multi-stage correction baseline." },
  { label: "Annual maintenance",     note: "For coating-protected vehicles." },
  { label: "Pre-show / concours",    note: "Two- to five-stage refinement." },
  { label: "Sale prep",              note: "Single-stage enhancement." },
  { label: "Post-paint / re-spray",  note: "After cure (~30 days minimum)." },
];

const STEPS = [
  {
    num: "01", title: "Pre-inspection",
    items: [
      "Walk panel-by-panel with raked LED at 4500 K.",
      "Photograph defect severity at three angles.",
      "Take baseline gloss-meter reading on 8 panels.",
      "Measure clear-coat thickness; abort if < 80 µm.",
    ],
    caption: "Establish the floor. Everything is measured against this.",
  },
  {
    num: "02", title: "Decontamination",
    items: [
      "Foam pre-wash · dwell 4 min · low-pressure rinse.",
      "Apply iron-fallout remover; allow 6–8 min reaction.",
      "Clay or mitt pass — straight lines, lubricated.",
      "Final rinse · deionized · blow-dry edges.",
    ],
    caption: "Until the surface squeaks. Anything left becomes a scratch.",
  },
  {
    num: "03", title: "Compound · cut",
    items: [
      "Tape trim, plastics, badges, panel gaps.",
      "Heavy or medium cut depending on defect depth.",
      "Cross-hatch passes; 4–6 per section.",
      "Wipe with 50% IPA; re-inspect under 4500 K.",
    ],
    caption: "Largest defects first. Aggression here, never later.",
  },
  {
    num: "04", title: "Polish · refine",
    items: [
      "Switch to finishing pad + refining polish.",
      "Reduce pressure; slow the machine to 1200–1500 OPM.",
      "Two passes minimum; chase haze under raked light.",
      "Re-wipe with IPA; gloss-meter reading.",
    ],
    caption: "Where micro-marring leaves and depth returns.",
  },
  {
    num: "05", title: "Jewel · final pass",
    items: [
      "Microfiber finishing pad · finishing oil.",
      "Single-direction passes, 30 cm/sec, light pressure.",
      "Verify under three light temperatures.",
      "Final gloss + DOI reading; sign the panel report.",
    ],
    caption: "The slow pass. This is the entire reason we are here.",
  },
];

const CRITERIA = [
  ["Hologramming under raked LED",      "Re-polish that panel."],
  ["Visible swirl under 4500 K halogen", "Return to refine stage."],
  ["Gloss reading below ΔGU target",     "Add a refining pass."],
  ["Clear coat under 50 µm remaining",   "Stop. Coating only."],
];

function SOPoster({ embedded = false }) {
  const Tag = embedded ? "div" : "section";
  return (
    <Tag className={embedded ? "col" : "section"} style={embedded ? {
      marginTop: 8,
    } : {
      paddingTop: "var(--pad-section)",
      paddingBottom: "var(--pad-section)",
      borderTop: "1px solid var(--rule)",
    }}>
      <div className="wrap col gap-48">
        {!embedded && (
        <div className="row responsive-stack" style={{
          justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap",
        }}>
          <div className="col gap-12" style={{ flex: "1 1 auto", minWidth: 0 }}>
            <div className="spec">{embedded ? "THE WORKING DOCUMENT · SOP 001" : "§ 02 · THE WORKING DOCUMENT"}</div>
            <h2 className="h-display" style={{ fontSize: "clamp(40px, 5vw, 76px)", margin: 0 }}>
              The <em>SOP</em>.
            </h2>
          </div>
          <p style={{
            fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
            color: "var(--ink-3)", maxWidth: 360, margin: 0, fontSize: 17, lineHeight: 1.5,
          }}>
            What separates measured correction from improvisation — the
            checklist we work to, on every job.
          </p>
        </div>
        )}

      <div className="col" style={{ gap: 0 }}>

        {/* poster header */}
        <header style={{
          background: "var(--ink)", color: "var(--bg)",
          padding: "24px 32px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          borderBottom: "1px solid var(--ink)",
        }}>
          <div className="row gap-32" style={{ alignItems: "baseline" }}>
            <div className="spec" style={{ color: "oklch(0.85 0.02 60)" }}>JTP · SOP · 001</div>
            <div className="spec" style={{ color: "oklch(0.85 0.02 60)" }}>REV. 2026.05</div>
          </div>
          <div style={{
            fontFamily: "var(--serif)", fontWeight: 300,
            fontSize: "clamp(28px, 4vw, 44px)",
            letterSpacing: "-0.02em", lineHeight: 1, textAlign: "center",
          }}>
            Paint Correction <em style={{ color: "oklch(0.85 0.02 60)" }}>SOP</em>
          </div>
          <div className="row gap-32" style={{ alignItems: "baseline" }}>
            <div className="spec" style={{ color: "oklch(0.85 0.02 60)" }}>BAY AREA · MOBILE</div>
            <div className="spec" style={{ color: "oklch(0.85 0.02 60)" }}>PAGE 1 / 1</div>
          </div>
        </header>

        {/* 4-column top row — method · tools · frequency · criteria */}
        <div className="responsive-grid-2" style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1.6fr 1fr 1fr",
          borderLeft: "1px solid var(--ink)",
          borderRight: "1px solid var(--ink)",
        }}>
          {/* 01 METHOD */}
          <div style={{
            borderRight: "1px solid var(--rule)", padding: "28px 24px",
            display: "flex", flexDirection: "column", gap: 16,
          }}>
            <SOSection num="01" label="METHOD" />
            <div className="ph paint paint-clean" style={{
              aspectRatio: "1/1", width: "100%", maxWidth: 220,
              border: "1px solid var(--rule)",
            }}>
              <div className="paint-shine" style={{ animation: "sweep 7s ease-in-out infinite" }} />
              <style>{`@keyframes sweep {
                0%,8% { transform: translateX(-40%); opacity:0; }
                25% { opacity:.9; }
                55% { transform: translateX(120%); opacity:0; }
              }`}</style>
            </div>
            <div className="row" style={{ alignItems: "center", gap: 10 }}>
              <span style={{ color: "var(--accent)", fontSize: 22 }}>›</span>
              <div className="spec" style={{ fontSize: 13, color: "var(--ink)", letterSpacing: "0.18em" }}>
                MULTI-STAGE
              </div>
            </div>
            <p style={{
              fontSize: 13, color: "var(--ink-2)", lineHeight: 1.55, margin: 0,
              maxWidth: 280,
            }}>
              A three- to five-stage paint correction process. Decontamination,
              mechanical levelling, refinement, and a final jewel pass — verified
              under three light temperatures and measured on a 60° gloss meter
              between every stage.
            </p>
          </div>

          {/* 02 TOOLS */}
          <div style={{
            borderRight: "1px solid var(--rule)", padding: "28px 24px",
            display: "flex", flexDirection: "column", gap: 16,
          }}>
            <SOSection num="02" label="TOOLS & SUPPLIES" />
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(2, 1fr)",
              gap: 16, marginTop: 4,
            }}>
              {TOOLS.map((t, i) => (
                <div key={i} className="row gap-12" style={{ alignItems: "flex-start" }}>
                  <div style={{
                    width: 44, height: 44, flex: "0 0 44px",
                    border: "1px solid var(--rule)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    background: "var(--bg)",
                    color: "var(--ink-2)",
                  }}>
                    {t[1]}
                  </div>
                  <div className="col" style={{ gap: 2, minWidth: 0 }}>
                    <div style={{
                      fontFamily: "var(--sans)", fontSize: 12, fontWeight: 500,
                      color: "var(--ink)", letterSpacing: "0.02em",
                    }}>{t[0]}</div>
                    <div style={{
                      fontSize: 11, color: "var(--ink-3)", lineHeight: 1.4,
                    }}>{t[2]}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 03 FREQUENCY */}
          <div style={{
            borderRight: "1px solid var(--rule)", padding: "28px 24px",
            display: "flex", flexDirection: "column", gap: 12,
          }}>
            <SOSection num="03" label="WHEN TO USE" />
            <div className="col" style={{ gap: 0 }}>
              {FREQ.map((f, i) => (
                <div key={f.label} style={{
                  display: "grid",
                  gridTemplateColumns: "20px 1fr",
                  gap: 10, padding: "10px 0",
                  borderBottom: i < FREQ.length - 1 ? "1px dashed var(--rule)" : "none",
                  alignItems: "start",
                }}>
                  <span style={{ color: "var(--accent)", fontSize: 16, lineHeight: 1 }}>›</span>
                  <div className="col gap-2">
                    <div style={{
                      fontSize: 12, fontWeight: 500, color: "var(--ink)",
                      letterSpacing: "0.02em",
                    }}>{f.label}</div>
                    <div style={{ fontSize: 11, color: "var(--ink-3)", lineHeight: 1.4 }}>
                      {f.note}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 04 STOP / GO CRITERIA */}
          <div style={{
            padding: "28px 24px",
            display: "flex", flexDirection: "column", gap: 12,
          }}>
            <SOSection num="04" label="STOP-GO CRITERIA" />
            <div className="col" style={{ gap: 0 }}>
              {CRITERIA.map((c, i) => (
                <div key={i} style={{
                  padding: "10px 0",
                  borderBottom: i < CRITERIA.length - 1 ? "1px dashed var(--rule)" : "none",
                }}>
                  <div className="row gap-8" style={{ alignItems: "flex-start" }}>
                    <span style={{
                      fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-3)",
                      letterSpacing: "0.1em", marginTop: 2,
                    }}>IF</span>
                    <div style={{ fontSize: 12, color: "var(--ink)", fontWeight: 500, lineHeight: 1.4 }}>
                      {c[0]}
                    </div>
                  </div>
                  <div className="row gap-8" style={{ alignItems: "flex-start", marginTop: 4 }}>
                    <span style={{
                      fontFamily: "var(--mono)", fontSize: 10, color: "var(--accent)",
                      letterSpacing: "0.1em", marginTop: 2,
                    }}>→</span>
                    <div style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.4 }}>{c[1]}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="col gap-4" style={{ marginTop: 8 }}>
              <div className="spec" style={{ fontSize: 10 }}>NOTES</div>
              <p style={{ fontSize: 11, color: "var(--ink-3)", lineHeight: 1.55, margin: 0 }}>
                Clear-coat thickness is measured at three points per panel.
                Removal target per session: never more than 4 µm cumulative.
              </p>
            </div>
          </div>
        </div>

        {/* 05 ORDER OF OPERATIONS — 5 cells */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          borderTop: "1px solid var(--ink)",
          borderLeft: "1px solid var(--ink)",
          borderRight: "1px solid var(--ink)",
        }} className="responsive-grid-2 sop-ops">

          <style>{`
            @media (max-width: 980px) {
              .sop-ops { grid-template-columns: 1fr 1fr !important; }
            }
            @media (max-width: 600px) {
              .sop-ops { grid-template-columns: 1fr !important; }
            }
          `}</style>

          {/* full-width header for OoO row */}
          <div style={{
            gridColumn: "1 / -1",
            padding: "18px 24px",
            borderBottom: "1px solid var(--ink)",
            display: "flex", alignItems: "center", justifyContent: "space-between",
          }}>
            <SOSection num="05" label="ORDER OF OPERATIONS" />
            <div className="spec" style={{ color: "var(--ink-3)" }}>
              FIVE STAGES · 4500 K / 6500 K / RAKED
            </div>
          </div>

          {STEPS.map((s, i) => (
            <div key={s.num} style={{
              padding: "22px 18px",
              borderRight: i < STEPS.length - 1 ? "1px solid var(--rule)" : "none",
              display: "flex", flexDirection: "column", gap: 12,
              minHeight: 320,
            }}>
              <div className="row" style={{ alignItems: "center", gap: 10 }}>
                <div style={{
                  background: "var(--ink)", color: "var(--bg)",
                  fontFamily: "var(--mono)", fontSize: 11, fontWeight: 500,
                  padding: "3px 6px", letterSpacing: "0.05em",
                }}>{s.num}</div>
                <div style={{
                  fontFamily: "var(--sans)", fontSize: 14, fontWeight: 500,
                  color: "var(--ink)", letterSpacing: "0.02em",
                  textTransform: "uppercase",
                }}>{s.title}</div>
              </div>

              <ol style={{
                listStyle: "none", margin: 0, padding: 0,
                display: "flex", flexDirection: "column", gap: 8,
              }}>
                {s.items.map((it, j) => (
                  <li key={j} className="row gap-8" style={{ alignItems: "flex-start" }}>
                    <span style={{
                      fontFamily: "var(--mono)", fontSize: 10, fontWeight: 500,
                      color: "var(--accent)", lineHeight: 1.5, flex: "0 0 16px",
                    }}>{String.fromCharCode(65 + j)}.</span>
                    <span style={{
                      fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5,
                    }}>{it}</span>
                  </li>
                ))}
              </ol>

              {/* mini diagram for each step */}
              <div style={{
                marginTop: "auto", paddingTop: 12,
                borderTop: "1px dashed var(--rule)",
              }}>
                <StepGlyph step={i} />
                <p style={{
                  fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 12,
                  color: "var(--ink-3)", lineHeight: 1.45, margin: "10px 0 0",
                }}>
                  {s.caption}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* 06 FINAL TOUCH bar */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr 1fr 1fr",
          gap: 0,
          border: "1px solid var(--ink)",
          borderTop: "none",
          background: "var(--bg-2)",
        }} className="sop-final">
          <style>{`
            @media (max-width: 880px) {
              .sop-final { grid-template-columns: 1fr !important; }
            }
          `}</style>
          <div style={{
            padding: "18px 24px",
            background: "var(--ink)", color: "var(--bg)",
            display: "flex", alignItems: "center", gap: 12,
          }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 11, fontWeight: 500,
              letterSpacing: "0.05em",
              background: "oklch(1 0 0 / 0.1)", padding: "3px 6px",
            }}>06</div>
            <div className="spec" style={{ color: "oklch(0.92 0.005 60)", fontSize: 12 }}>
              FINAL TOUCH
            </div>
          </div>
          {[
            ["6A", "Hand-wipe every panel with a plush 70/30 microfiber and a UV-stable finishing oil."],
            ["6B", "Photograph each panel under the same three light temperatures used during work."],
            ["6C", "Hand the keys back — with the gloss/DOI panel report and a 30-day check-in date."],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: "18px 20px",
              borderRight: i < 2 ? "1px solid var(--rule)" : "none",
              display: "flex", flexDirection: "row", gap: 12, alignItems: "flex-start",
            }}>
              <span style={{
                fontFamily: "var(--mono)", fontSize: 11, fontWeight: 500,
                color: "var(--accent)", letterSpacing: "0.05em", flex: "0 0 24px",
                marginTop: 2,
              }}>{k}.</span>
              <span style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.55 }}>{v}</span>
            </div>
          ))}
        </div>

        {/* footer band */}
        <div style={{
          background: "var(--ink)", color: "var(--bg)",
          padding: "12px 24px",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          borderTop: "1px solid var(--ink)",
          fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em",
          color: "oklch(0.85 0.02 60)", flexWrap: "wrap", gap: 8,
        }}>
          <span>© 2026 JEWEL THE PAINT, LLC</span>
          <span>OWNER · OPS · LEAD TECHNICIAN</span>
          <span>jewelthepaint.com · sop · 001</span>
        </div>
      </div>
      </div>

      <div className="wrap" style={{ marginTop: 32, textAlign: "center" }}>
        <p style={{
          fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 300,
          color: "var(--ink-3)", fontSize: 16, margin: 0,
        }}>
          The SOP above is the working document for every multi-stage correction
          we perform. Tape a copy to the inside of the van; check off every line.
        </p>
        <div className="row gap-12 responsive-stack" style={{ justifyContent: "center", marginTop: 24 }}>
          <button className="btn" onClick={() => window.print()}>
            Print SOP <span className="arr">→</span>
          </button>
          <a className="btn btn-ghost" href="services.html">See services</a>
        </div>
      </div>
    </Tag>
  );
}

function SOSection({ num, label }) {
  return (
    <div className="row" style={{ alignItems: "baseline", gap: 10 }}>
      <div style={{
        fontFamily: "var(--mono)", fontSize: 22, fontWeight: 500,
        color: "var(--ink)", letterSpacing: "0.02em", lineHeight: 1,
      }}>{num}</div>
      <div style={{
        fontFamily: "var(--mono)", fontSize: 12, fontWeight: 500,
        color: "var(--ink)", letterSpacing: "0.14em",
        textTransform: "uppercase",
      }}>{label}</div>
    </div>
  );
}

// tiny per-step diagrams (small, technical)
function StepGlyph({ step }) {
  // each step gets a tiny SVG
  const w = 220, h = 50;
  switch (step) {
    case 0: // inspection — panel + raking light
      return (
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", maxHeight: 56 }}>
          <rect x="20" y="20" width="180" height="20" fill="oklch(0.92 0.005 85)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <g stroke="var(--ink-3)" strokeWidth="0.5" strokeDasharray="2 2">
            <line x1="20" y1="6" x2="20" y2="20" />
            <line x1="40" y1="4" x2="40" y2="20" />
            <line x1="60" y1="6" x2="60" y2="20" />
            <line x1="80" y1="4" x2="80" y2="20" />
          </g>
          <text x="6" y="15" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">LIGHT</text>
          <text x="100" y="34" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">CLEAR · BASE · SUBSTRATE</text>
        </svg>
      );
    case 1: // decon
      return (
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", maxHeight: 56 }}>
          <rect x="20" y="28" width="180" height="14" fill="oklch(0.92 0.005 85)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <g fill="var(--ink-3)" opacity="0.55">
            {[28,52,80,110,140,168].map((x,i)=><circle key={i} cx={x} cy={34} r={1.2}/>)}
          </g>
          <g stroke="var(--accent)" strokeWidth="0.7" fill="none">
            <path d="M30 16 Q35 14 40 16" /><path d="M50 14 Q55 12 60 14" />
            <path d="M80 16 Q85 14 90 16" /><path d="M120 14 Q125 12 130 14" />
          </g>
          <text x="6" y="13" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">FOAM ·›</text>
        </svg>
      );
    case 2: // compound
      return (
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", maxHeight: 56 }}>
          <rect x="20" y="28" width="180" height="14" fill="oklch(0.92 0.005 85)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <circle cx="60" cy="20" r="9" fill="none" stroke="var(--ink-2)" strokeWidth="0.8" />
          <circle cx="60" cy="20" r="3" fill="var(--accent)" />
          <line x1="69" y1="20" x2="100" y2="20" stroke="var(--ink-3)" strokeWidth="0.6" />
          <g stroke="var(--accent)" strokeWidth="0.4" opacity="0.6">
            <path d="M76 32 Q80 30 84 32" /><path d="M86 36 Q90 34 94 36" />
            <path d="M96 32 Q100 30 104 32" />
          </g>
          <text x="6" y="13" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">DA · CUT</text>
        </svg>
      );
    case 3: // polish
      return (
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", maxHeight: 56 }}>
          <rect x="20" y="28" width="180" height="14" fill="oklch(0.92 0.005 85)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <circle cx="110" cy="22" r="8" fill="none" stroke="var(--ink-2)" strokeWidth="0.8" strokeDasharray="2 2" />
          <circle cx="110" cy="22" r="2.5" fill="var(--accent)" opacity="0.7" />
          <line x1="118" y1="22" x2="150" y2="22" stroke="var(--ink-3)" strokeWidth="0.6" />
          <text x="6" y="13" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">REFINE ·›</text>
        </svg>
      );
    case 4: // jewel
      return (
        <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: "auto", maxHeight: 56 }}>
          <rect x="20" y="28" width="180" height="14" fill="oklch(0.92 0.005 85)" stroke="var(--ink-3)" strokeWidth="0.6" />
          <g stroke="var(--accent)" strokeWidth="0.6" fill="none" opacity="0.7">
            <polygon points="40,35 55,30 70,35 55,40" />
            <polygon points="80,35 95,30 110,35 95,40" />
            <polygon points="120,35 135,30 150,35 135,40" />
            <polygon points="160,35 175,30 190,35 175,40" />
          </g>
          <g stroke="var(--ink-3)" strokeWidth="0.5" strokeDasharray="1.5 2">
            {[40,55,70,85,100,115,130,145,160,175].map((x,i)=>(
              <line key={i} x1={x} y1={8} x2={x} y2={28} />
            ))}
          </g>
          <text x="6" y="13" fontFamily="ui-monospace" fontSize="6" fill="var(--ink-3)">JEWEL</text>
        </svg>
      );
    default:
      return null;
  }
}

Object.assign(window, { SOPoster });
