// Site primitives — adapted from the Nextability brand pack
// for Mouhamad Alem's personal index.

const { useState, useEffect } = React;

/* ───── Wordmark — "mouhamad alem" ─────
   Accent moves between the two words via the `accentOn` prop.
   Forbidden trailing period; always lowercase. */
function Wordmark({ size = 18, accentOn = "alem", style = {} }) {
  return (
    <span
      style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 500,
        letterSpacing: '-0.05em',
        lineHeight: 1,
        fontSize: size,
        whiteSpace: 'nowrap',
        ...style,
      }}
    >
      <span style={{ color: accentOn === 'mouhamad' ? 'var(--accent)' : 'inherit' }}>mouhamad</span>
      <span style={{ opacity: 0.5, margin: '0 0.18em' }}>·</span>
      <span style={{ color: accentOn === 'alem' ? 'var(--accent)' : 'inherit' }}>alem</span>
    </span>
  );
}

/* ───── Stamp — accent disc with personal glyph ───── */
function Stamp({ size = 56, glyph = 'm', style = {} }) {
  return (
    <span
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: size,
        height: size,
        borderRadius: '50%',
        background: 'var(--accent)',
        color: 'var(--field-deep)',
        fontFamily: 'var(--font-display)',
        fontWeight: 600,
        fontSize: size * 0.5,
        letterSpacing: '-0.05em',
        lineHeight: 1,
        ...style,
      }}
    >
      {glyph}
    </span>
  );
}

/* ───── Orb ───── */
function Orb({ size = 200, float = true, style = {} }) {
  return (
    <div
      className={float ? 'float' : ''}
      aria-hidden="true"
      style={{
        width: size,
        height: size,
        borderRadius: '50%',
        background:
          'radial-gradient(circle at 35% 35%, var(--accent-hi) 0%, var(--accent) 50%, var(--accent-lo) 95%)',
        boxShadow: '0 0 120px color-mix(in srgb, var(--accent) 35%, transparent)',
        ...style,
      }}
    />
  );
}

/* ───── Dot ───── */
function Dot({ size = 8, pulse = false, style = {} }) {
  return (
    <span
      className={pulse ? 'pulse' : ''}
      style={{
        display: 'inline-block',
        width: size,
        height: size,
        borderRadius: '50%',
        background: 'var(--accent)',
        ...style,
      }}
    />
  );
}

/* ───── Cap — mono uppercase metadata ───── */
function Cap({ children, opacity = 0.55, style = {} }) {
  return (
    <span
      style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        opacity,
        display: 'inline-block',
        ...style,
      }}
    >
      {children}
    </span>
  );
}

/* ───── Marker — framed mono caps ───── */
function Marker({ children, style = {} }) {
  return (
    <span
      style={{
        display: 'inline-block',
        padding: '8px 14px',
        border: '1px solid var(--rule)',
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        ...style,
      }}
    >
      {children}
    </span>
  );
}

/* ───── Rule ───── */
function Rule({ strong = false, style = {} }) {
  return (
    <hr
      style={{
        border: 0,
        borderTop: `1px solid ${strong ? 'var(--rule-strong)' : 'var(--rule)'}`,
        margin: 0,
        ...style,
      }}
    />
  );
}

/* ───── Button ───── */
function Button({ children, primary = false, href, onClick, style = {} }) {
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        padding: '14px 20px',
        border: `1px solid ${primary ? 'var(--accent)' : 'var(--rule-strong)'}`,
        background: primary ? 'var(--accent)' : 'transparent',
        color: primary ? 'var(--field-deep)' : 'inherit',
        cursor: 'pointer',
        textDecoration: 'none',
        display: 'inline-flex',
        alignItems: 'center',
        gap: 10,
        transition: 'all 320ms cubic-bezier(.2,0,0,1)',
        ...style,
      }}
      onMouseEnter={(e) => {
        if (!primary) e.currentTarget.style.borderColor = 'currentColor';
      }}
      onMouseLeave={(e) => {
        if (!primary) e.currentTarget.style.borderColor = 'var(--rule-strong)';
      }}
    >
      {children}
    </Tag>
  );
}

/* ───── Arrow — flagged substitute (Lucide-style, 1.5px) ───── */
function Arrow({ size = 12, dir = 'right' }) {
  const rot = { right: 0, left: 180, up: -90, down: 90 }[dir];
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      style={{ transform: `rotate(${rot}deg)`, verticalAlign: 'middle' }}
    >
      <path d="M3 8 H13" strokeLinecap="square" />
      <path d="M9 4 L13 8 L9 12" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>
  );
}

Object.assign(window, { Wordmark, Stamp, Orb, Dot, Cap, Marker, Rule, Button, Arrow });