// Wordmark exploration for the new DataOwners brand.
// All wordmarks are SVG, sized to a 320×64 viewBox, so they can be
// dropped into the nav at any scale without re-rendering.

// ─── A · "Mark + Two-Tone Serif" ────────────────────────────────
// Interlocking-lozenge mark + "Data" regular ink, "Owners" italic brass.
// The committed wordmark — combines A's mark + B's type emphasis.
function WordmarkA({ height = 28, color = "#1C1A17", accent = "#D9933F" }) {
  const accentText = accent === "#F2EFE8" ? "#D9933F" : accent;
  return (
    <svg viewBox="0 0 280 48" height={height} xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
      {/* Mark — two interlocking brackets forming a lozenge */}
      <g transform="translate(0,4)">
        <path d="M 4 20 L 14 4 L 24 20 L 14 36 Z" fill="none" stroke={color} strokeWidth="1.5"/>
        <path d="M 14 20 L 24 4 L 34 20 L 24 36 Z" fill={accent}/>
      </g>
      {/* Two-tone wordmark */}
      <text x="48" y="32" fontFamily="'Source Serif 4', Georgia, serif" fontSize="26" fontWeight="500" fill={color} letterSpacing="-0.5">
        Data<tspan fontStyle="italic" fontWeight="500" fill={accentText}>Owners</tspan>
      </text>
    </svg>
  );
}

// ─── B · "Two-tone Serif" ───────────────────────────────────────
// "Data" regular ink, "Owners" italic brass. Emphasis on OWNERSHIP.
// No separate mark — the type does the work.
function WordmarkB({ height = 28, color = "#1C1A17", accent = "#9E6A26" }) {
  return (
    <svg viewBox="0 0 280 48" height={height} xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
      <text x="0" y="32" fontFamily="'Source Serif 4', Georgia, serif" fontSize="28" fontWeight="500" fill={color} letterSpacing="-0.6">
        Data<tspan fontStyle="italic" fontWeight="500" fill={accent}>Owners</tspan>
      </text>
    </svg>
  );
}

// ─── C · "Brass dot O" ─────────────────────────────────────────
// The "O" in Owners becomes a filled brass disc. Wordmark IS the mark.
// Closest to a single-letter logomark you can extract for favicons.
function WordmarkC({ height = 28, color = "#1C1A17", accent = "#D9933F" }) {
  return (
    <svg viewBox="0 0 280 48" height={height} xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
      <text x="0" y="32" fontFamily="'Source Serif 4', Georgia, serif" fontSize="28" fontWeight="500" fill={color} letterSpacing="-0.5">
        DataO
      </text>
      {/* Disc replacing the second O */}
      <circle cx="113" cy="22" r="12" fill={accent}/>
      <text x="125" y="32" fontFamily="'Source Serif 4', Georgia, serif" fontSize="28" fontWeight="500" fill={color} letterSpacing="-0.5">
        wners
      </text>
    </svg>
  );
}

// ─── D · "Stamp seal" ───────────────────────────────────────────
// Circular notary/seal mark beside a clean wordmark. Plays into the
// "verified marketplace" thesis — feels like a certification.
function WordmarkD({ height = 32, color = "#1C1A17", accent = "#D9933F" }) {
  return (
    <svg viewBox="0 0 320 56" height={height} xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
      {/* Seal */}
      <g transform="translate(0,4)">
        <circle cx="24" cy="24" r="22" fill="none" stroke={color} strokeWidth="1.25"/>
        <circle cx="24" cy="24" r="17" fill="none" stroke={color} strokeWidth="1" strokeDasharray="2 2"/>
        <text x="24" y="29" textAnchor="middle" fontFamily="'Source Serif 4', Georgia, serif" fontWeight="600" fontSize="17" fill={accent}>DO</text>
      </g>
      {/* Wordmark */}
      <text x="60" y="32" fontFamily="'Source Serif 4', Georgia, serif" fontSize="26" fontWeight="500" fill={color} letterSpacing="-0.4">
        DataOwners
      </text>
      <text x="60" y="46" fontFamily="'JetBrains Mono', monospace" fontSize="8.5" fill={color} opacity="0.5" letterSpacing="3">
        VERIFIED MARKETPLACE
      </text>
    </svg>
  );
}

// Lookup so the nav can swap variants live.
const WORDMARKS = { A: WordmarkA, B: WordmarkB, C: WordmarkC, D: WordmarkD };

function Wordmark({ variant = "A", height = 28, color = "#1C1A17", accent }) {
  const W = WORDMARKS[variant] || WordmarkA;
  return <W height={height} color={color} accent={accent} />;
}

// ─── Exploration card ───────────────────────────────────────────
// Renders all four wordmarks on a single artboard for review.
function WordmarkExploration() {
  const variants = [
    { id: "A", label: "A · Mark + Two-Tone Serif · COMMITTED",  note: "The locked direction. Mark abstracts a two-sided market; type does the brass work via italic emphasis on 'Owners'." },
    { id: "B", label: "B · Two-Tone Serif (no mark)",            note: "Same type treatment without the lozenge mark. Alternate if you ever want a markless lockup." },
    { id: "C", label: "C · Brass-Dot O",                         note: "Wordmark = mark. The disc is your favicon, your social glyph, your sticker." },
    { id: "D", label: "D · Stamp Seal",                          note: "Plays the verified-marketplace card hardest. Risks reading 'badge' if overused." },
  ];
  return (
    <div style={{ background: "#F2EFE8", padding: 48, height: "100%", boxSizing: "border-box", fontFamily: "Inter, sans-serif" }}>
      <Kicker>WORDMARK EXPLORATION · PICK ONE</Kicker>
      <H2 style={{ marginTop: 12, marginBottom: 8, fontSize: 32 }}>Wordmark, locked.</H2>
      <Lede style={{ maxWidth: "60ch", fontSize: 15 }}>
        Option A · two-tone: interlocking-lozenge mark + serif wordmark with "Owners" set italic brass. Three alternates preserved below for the record. Tell me to swap if you change your mind.
      </Lede>

      <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid #D8D3C7" }}>
        {variants.map((v, i) => {
          const W = WORDMARKS[v.id];
          return (
            <div key={v.id} style={{
              padding: "40px 32px",
              background: "#FFFFFF",
              borderRight: i % 2 === 0 ? "1px solid #D8D3C7" : "none",
              borderBottom: i < 2 ? "1px solid #D8D3C7" : "none",
              display: "flex", flexDirection: "column", gap: 24, minHeight: 220,
            }}>
              <div className="kicker" style={{ color: "#9E6A26" }}>{v.label}</div>
              <div style={{ flex: 1, display: "flex", alignItems: "center", minHeight: 64 }}>
                <W height={36} />
              </div>
              <Body style={{ fontSize: 13, color: "#5A5853" }}>{v.note}</Body>
            </div>
          );
        })}
      </div>

      <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid #D8D3C7" }}>
        {/* Dark backgrounds — does it survive on ink? */}
        {variants.map((v, i) => {
          const W = WORDMARKS[v.id];
          return (
            <div key={v.id} style={{
              padding: "32px",
              background: "#1C1A17",
              borderRight: i % 2 === 0 ? "1px solid rgba(242,239,232,0.15)" : "none",
              borderBottom: i < 2 ? "1px solid rgba(242,239,232,0.15)" : "none",
              display: "flex", alignItems: "center", minHeight: 100,
            }}>
              <W height={32} color="#F2EFE8" accent="#D9933F" />
            </div>
          );
        })}
      </div>

      <div className="kicker" style={{ marginTop: 12, color: "#5A5853", fontSize: 9 }}>SAME WORDMARKS, INK BACKGROUND — CHECKING LEGIBILITY</div>
    </div>
  );
}