// Sadd — Brand Marks
// All marks drawn as inline SVG, scalable.

// ───────────────────────────────────────────────────────────
// PRIMARY MARK — "The Aperture"
// Two pillars (the barrier / dam) with a horizontal bar above (lintel)
// and a single dot (the shaddah — point of intention)
// ───────────────────────────────────────────────────────────
function MarkAperture({ size = 64, fg = '#F4EFE6', bg = null, stroke = 8, style }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" style={style}>
      {bg && <rect width="64" height="64" rx="14" fill={bg} />}
      {/* dot above (shaddah / intention) */}
      <circle cx="32" cy="9" r="2.4" fill={fg} />
      {/* lintel */}
      <rect x="14" y="17" width="36" height={stroke * 0.7} rx={stroke * 0.35} fill={fg} />
      {/* left pillar */}
      <rect x="14" y={17 + stroke * 0.7 + 2} width={stroke} height={64 - 17 - stroke * 0.7 - 2 - 8} rx={stroke / 2} fill={fg} />
      {/* right pillar */}
      <rect x={50 - stroke} y={17 + stroke * 0.7 + 2} width={stroke} height={64 - 17 - stroke * 0.7 - 2 - 8} rx={stroke / 2} fill={fg} />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// MARK — "The Arch" — solid mihrab-style arch with a notch
// ───────────────────────────────────────────────────────────
function MarkArch({ size = 64, fg = '#F4EFE6', bg = null, style }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" style={style}>
      {bg && <rect width="64" height="64" rx="14" fill={bg} />}
      <path d="M 16 56 L 16 28 Q 16 12 32 12 Q 48 12 48 28 L 48 56 Z" fill={fg} />
      {/* inner negative arch — small aperture */}
      <path d="M 28 56 L 28 36 Q 28 28 32 28 Q 36 28 36 36 L 36 56 Z" fill={bg || '#11141A'} />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// MARK — "The Seen" — stylized س (Arabic letter, used in سدّ)
// Three small teeth + a long base; abstracted to clean geometry
// ───────────────────────────────────────────────────────────
function MarkSeen({ size = 64, fg = '#F4EFE6', bg = null, style }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" style={style}>
      {bg && <rect width="64" height="64" rx="14" fill={bg} />}
      {/* the three teeth of seen */}
      <rect x="14" y="20" width="4" height="14" rx="2" fill={fg} />
      <rect x="22" y="20" width="4" height="14" rx="2" fill={fg} />
      <rect x="30" y="20" width="4" height="14" rx="2" fill={fg} />
      {/* the curved bowl */}
      <path d="M 14 34 L 38 34 Q 50 34 50 44 Q 50 50 44 50 L 14 50 Z"
            fill="none" stroke={fg} strokeWidth="4" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// MARK — "The Seal" — circular monogram with Arabic سدّ inside
// ───────────────────────────────────────────────────────────
function MarkSeal({ size = 64, fg = '#F4EFE6', bg = '#5C7A6A', style }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 64 64" style={style}>
      <circle cx="32" cy="32" r="30" fill={bg} stroke={fg} strokeOpacity="0.18" strokeWidth="0.5" />
      <circle cx="32" cy="32" r="26" fill="none" stroke={fg} strokeOpacity="0.22" strokeWidth="0.5" />
      <text x="32" y="43" textAnchor="middle"
            fontFamily="'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif"
            fontSize="26" fontWeight="500" fill={fg}>سدّ</text>
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// WORDMARK — "Sadd" in Newsreader serif, refined
// ───────────────────────────────────────────────────────────
function Wordmark({ size = 48, color = '#F4EFE6', italic = false, style }) {
  return (
    <span style={{
      fontFamily: "'Newsreader', Georgia, serif",
      fontSize: size,
      fontWeight: 500,
      fontStyle: italic ? 'italic' : 'normal',
      letterSpacing: '-0.025em',
      color,
      lineHeight: 1,
      ...style,
    }}>Sadd</span>
  );
}

function WordmarkArabic({ size = 48, color = '#F4EFE6', style }) {
  return (
    <span style={{
      fontFamily: "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
      fontSize: size,
      fontWeight: 500,
      color,
      lineHeight: 1,
      direction: 'rtl',
      ...style,
    }}>سدّ</span>
  );
}

// ───────────────────────────────────────────────────────────
// PRIMARY LOCKUP — Latin "Sadd" + Reem Kufi سدّ (the single logo)
// ───────────────────────────────────────────────────────────
function Lockup({ mark = 'reem', size = 56, color = '#F4EFE6', bg = null, sub = null }) {
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', gap: size * 0.08 }}>
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: size * 0.26 }}>
        <Wordmark size={size} color={color} />
        <span style={{
          fontFamily: "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
          fontSize: size * 0.84,
          fontWeight: 500,
          color,
          opacity: 0.5,
          lineHeight: 1,
          direction: 'rtl',
        }}>سدّ</span>
      </div>
      {sub && <span style={{
        fontFamily: "'IBM Plex Mono', monospace",
        fontSize: size * 0.18,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color,
        opacity: 0.55,
      }}>{sub}</span>}
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// iOS APP ICON — full bleed, with safe area
// rx = 0.2237 * size is Apple's superellipse approximation
// ───────────────────────────────────────────────────────────
function AppIcon({ size = 180, variant = 'sage' }) {
  const variants = {
    sage:      { bg: '#5C7A6A', fg: '#F4EFE6', sheen: 'linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%)' },
    ink:       { bg: '#11141A', fg: '#F4EFE6', sheen: 'linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 50%)' },
    parchment: { bg: '#F4EFE6', fg: '#11141A', sheen: 'linear-gradient(160deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)' },
    clay:      { bg: '#B05D3B', fg: '#F4EFE6', sheen: 'linear-gradient(160deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%)' },
    duotone:   { bg: 'linear-gradient(160deg, #2C3340 0%, #5C7A6A 100%)', fg: '#F4EFE6', sheen: 'none' },
  };
  const v = variants[variant] || variants.sage;
  const rx = size * 0.2237;
  return (
    <div style={{
      width: size, height: size, borderRadius: rx,
      background: v.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 6px rgba(0,0,0,0.10)',
    }}>
      <span style={{
        fontFamily: "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
        fontSize: size * 0.52, fontWeight: 500, color: v.fg,
        lineHeight: 1, direction: 'rtl', marginTop: -size * 0.03,
      }}>سدّ</span>
      <div style={{ position: 'absolute', inset: 0, background: v.sheen, pointerEvents: 'none' }} />
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// iOS APP ICON — Arabic seal variant
// ───────────────────────────────────────────────────────────
function AppIconArabic({ size = 180, bg = '#5C7A6A', fg = '#F4EFE6' }) {
  const rx = size * 0.2237;
  return (
    <div style={{
      width: size, height: size, borderRadius: rx,
      background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      position: 'relative', overflow: 'hidden',
    }}>
      <span style={{
        fontFamily: "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
        fontSize: size * 0.56,
        fontWeight: 500,
        color: fg,
        lineHeight: 1,
        direction: 'rtl',
        marginTop: -size * 0.03,
      }}>سدّ</span>
      <div style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%)',
        pointerEvents: 'none' }} />
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// FAVICON variants (16/32/64)
// ───────────────────────────────────────────────────────────
function Favicon({ size = 32, variant = 'sage' }) {
  const v = {
    sage: { bg: '#5C7A6A', fg: '#F4EFE6' },
    ink:  { bg: '#11141A', fg: '#F4EFE6' },
    parchment: { bg: '#F4EFE6', fg: '#11141A' },
  }[variant];
  return (
    <div style={{
      width: size, height: size, borderRadius: size * 0.18,
      background: v.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <span style={{
        fontFamily: "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
        fontSize: size * 0.6, fontWeight: 600, color: v.fg,
        lineHeight: 1, direction: 'rtl', marginTop: -size * 0.03,
      }}>سدّ</span>
    </div>
  );
}

// expose
Object.assign(window, {
  MarkAperture, MarkArch, MarkSeen, MarkSeal,
  Wordmark, WordmarkArabic, Lockup,
  AppIcon, AppIconArabic, Favicon,
});