// JP monogram explorations — bento-grid marks where partition walls form the letters J + P
// All marks: stroke-based, geometric, no fills. viewBox 0 0 100 100.

function JPMarkStacked({ color = "#1B1A17", sw = 4 }) {
  // J occupies the top band, P the bottom band; horizontal divider at y=50
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="6" width="88" height="88" rx="14" />
      <path d="M6 50 H94" />
      <path d="M62 6 V30 Q62 50 42 50" />
      <path d="M38 50 V94" />
      <path d="M38 78 H58 Q72 78 72 64 Q72 50 58 50" />
    </svg>
  );
}

function JPMarkSide({ color = "#1B1A17", sw = 4 }) {
  // J left, P right; vertical divider at x=50
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="6" width="88" height="88" rx="14" />
      <path d="M50 6 V94" />
      <path d="M32 6 V46 Q32 66 6 66" />
      <path d="M72 6 V94" />
      <path d="M72 56 H78 Q94 56 94 31 Q94 6 78 6" />
    </svg>
  );
}

function JPMarkCircle({ color = "#1B1A17", sw = 4 }) {
  // Stacked, with the P bowl as a full circle cell (nod to a plate)
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="6" width="88" height="88" rx="14" />
      <path d="M6 50 H94" />
      <path d="M62 6 V30 Q62 50 42 50" />
      <path d="M36 50 V94" />
      <circle cx="59" cy="66" r="16" />
    </svg>
  );
}

// Lockup: mark + tracked caps wordmark
function JPLockup({ Mark, color = "#1B1A17", sub = "PRIVATE CHEF", size = 150, dark = false }) {
  const ink = dark ? "#EDEAE2" : color;
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 28 }}>
      <div style={{ width: size, height: size }}><Mark color={ink} /></div>
      <div style={{ textAlign: "center" }}>
        <div style={{ fontFamily: "'Karla', sans-serif", fontWeight: 600, fontSize: 21, letterSpacing: "0.32em", color: ink, textIndent: "0.32em" }}>JAKE&nbsp;PINKSTON</div>
        <div style={{ fontFamily: "'Karla', sans-serif", fontWeight: 600, fontSize: 13, letterSpacing: "0.46em", color: ink, opacity: 0.62, marginTop: 12, textIndent: "0.46em" }}>{sub}</div>
      </div>
    </div>
  );
}

// --- Round 2: CJP + type marks ---

function CJPMarkBento({ color = "#1B1A17", sw = 4 }) {
  // C top-left, J top-right, P bottom band
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <rect x="6" y="6" width="88" height="88" rx="14" />
      <path d="M50 6 V50" />
      <path d="M6 50 H94" />
      <path d="M40 19 A15 15 0 1 0 40 41" />
      <path d="M78 6 V32 Q78 50 62 50" />
      <path d="M30 50 V94" />
      <path d="M30 80 H54 Q68 80 68 65 Q68 50 54 50" />
    </svg>
  );
}

function JPMarkLigature({ color = "#1B1A17", sw = 4 }) {
  // J and P share one stem — monoline, no frame
  return (
    <svg viewBox="0 0 100 100" fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M54 10 V64 Q54 88 32 88" />
      <path d="M54 42 H60 Q78 42 78 26 Q78 10 60 10 H54" />
    </svg>
  );
}

function JPMarkSeal({ color = "#1B1A17", sw = 2.5 }) {
  // Circular seal: ring text + JP center
  return (
    <svg viewBox="0 0 120 120" fill="none">
      <circle cx="60" cy="60" r="57" stroke={color} strokeWidth={sw} />
      <circle cx="60" cy="60" r="36" stroke={color} strokeWidth={sw * 0.7} />
      <defs>
        <path id="sealTopArc" d="M14,60 A46,46 0 0 1 106,60" />
      </defs>
      <text fill={color} style={{ fontFamily: "'Karla', sans-serif", fontSize: 9.5, fontWeight: 700, letterSpacing: "0.34em" }}>
        <textPath href="#sealTopArc" startOffset="50%" textAnchor="middle">CHEF JAKE PINKSTON</textPath>
      </text>
      <circle cx="16.5" cy="72" r="1.8" fill={color} />
      <circle cx="103.5" cy="72" r="1.8" fill={color} />
      <text x="60" y="104" textAnchor="middle" fill={color} style={{ fontFamily: "'Karla', sans-serif", fontSize: 8, fontWeight: 700, letterSpacing: "0.3em" }}>MONTAUK</text>
      <text x="60" y="71" textAnchor="middle" fill={color} style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 34, fontWeight: 500, letterSpacing: "0.04em" }}>JP</text>
    </svg>
  );
}

// Horizontal lockup: mark left, wordmark right
function JPLockupHorizontal({ color = "#1B1A17", dark = false, size = 72 }) {
  const ink = dark ? "#EDEAE2" : color;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
      <div style={{ width: size, height: size }}><JPMarkLigature color={ink} sw={5} /></div>
      <div style={{ textAlign: "left", borderLeft: "1px solid " + (dark ? "rgba(237,234,226,0.25)" : "#D8D3C6"), paddingLeft: 24 }}>
        <div style={{ fontFamily: "'Karla', sans-serif", fontWeight: 600, fontSize: 17, letterSpacing: "0.3em", color: ink }}>JAKE&nbsp;PINKSTON</div>
        <div style={{ fontFamily: "'Karla', sans-serif", fontWeight: 600, fontSize: 11, letterSpacing: "0.42em", color: ink, opacity: 0.6, marginTop: 9 }}>PRIVATE&nbsp;CHEF&nbsp;—&nbsp;MONTAUK</div>
      </div>
    </div>
  );
}

Object.assign(window, { CJPMarkBento, JPMarkLigature, JPMarkSeal, JPLockupHorizontal });

Object.assign(window, { JPMarkStacked, JPMarkSide, JPMarkCircle, JPLockup });
