/* global React */
// Brand mark — broşürdeki "GG" monogramının KENDİSİ: PDF'ten 600dpi
// rasterlenip krem zemini şeffaflaştırılmış birebir görsel
// (images/gg-monogram.png, en-boy oranı 778/486 ≈ 1.60).

const BRAND_GOLD = "#B18449";
const MONOGRAM_RATIO = 778 / 486;

function BrandMark({ height = 32 }) {
  return (
    <img
      src="/images/gg-monogram.png"
      alt=""
      aria-hidden="true"
      draggable={false}
      style={{
        display: "block",
        flexShrink: 0,
        height,
        width: height * MONOGRAM_RATIO,
        userSelect: "none",
      }}
    />
  );
}

// Full wordmark: brand mark + "GİZEM GÜLEÇ" + tagline strip
function Wordmark({ height = 28, color = "currentColor", showTagline = true, brandColor = BRAND_GOLD }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 14,
        color,
        lineHeight: 1,
      }}
    >
      <BrandMark height={height * 1.05} color={brandColor} />
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <span
          style={{
            fontFamily: "'Cormorant Garamond', 'Instrument Serif', Georgia, serif",
            fontSize: height * 0.95,
            fontWeight: 500,
            letterSpacing: "0.04em",
            textTransform: "uppercase",
            lineHeight: 0.95,
          }}
        >
          Gizem Güleç
        </span>
        {showTagline && (
          <span
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: height * 0.32,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: brandColor,
              fontWeight: 500,
            }}
          >
            Mimarlık · Tasarım · Restorasyon
          </span>
        )}
      </div>
    </div>
  );
}

// Compact wordmark for tight nav slots
function WordmarkCompact({ height = 22, brandColor = BRAND_GOLD }) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 10,
        lineHeight: 1,
      }}
    >
      <BrandMark height={height} color={brandColor} />
      <span
        style={{
          fontFamily: "'Cormorant Garamond', 'Instrument Serif', Georgia, serif",
          fontSize: height * 0.78,
          fontWeight: 500,
          letterSpacing: "0.06em",
          textTransform: "uppercase",
          color: "var(--fg)",
        }}
      >
        Gizem Güleç
      </span>
    </div>
  );
}

// Stacked variant for side-rail nav
function StackMark({ brandColor = BRAND_GOLD }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" }}>
      <BrandMark height={36} color={brandColor} />
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        <span
          style={{
            fontFamily: "'Cormorant Garamond', 'Instrument Serif', Georgia, serif",
            fontSize: 18,
            fontWeight: 500,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            lineHeight: 1,
            color: "var(--fg)",
          }}
        >
          Gizem Güleç
        </span>
        <span
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9,
            letterSpacing: "0.18em",
            textTransform: "uppercase",
            color: brandColor,
            lineHeight: 1.2,
            maxWidth: 140,
          }}
        >
          Mimarlık<br />Tasarım<br />Restorasyon
        </span>
      </div>
    </div>
  );
}

window.BRAND_GOLD = BRAND_GOLD;
window.BrandMark = BrandMark;
window.Wordmark = Wordmark;
window.WordmarkCompact = WordmarkCompact;
window.StackMark = StackMark;