/* AMARINE — decorative SVG marks
   Editorial, restrained: hairlines and concentric circles, never figurative. */

function MarkConcentric({ size = 80, stroke = 'var(--gold)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" fill="none" aria-hidden="true">
      <circle cx="40" cy="40" r="38" stroke={stroke} strokeOpacity="0.25" strokeWidth="1"/>
      <circle cx="40" cy="40" r="28" stroke={stroke} strokeOpacity="0.45" strokeWidth="1"/>
      <circle cx="40" cy="40" r="18" stroke={stroke} strokeOpacity="0.7"  strokeWidth="1"/>
      <circle cx="40" cy="40" r="2.5" fill={stroke}/>
    </svg>
  );
}

function MarkCompass({ size = 96, stroke = 'var(--gold)' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 96 96" fill="none" aria-hidden="true">
      <circle cx="48" cy="48" r="46" stroke={stroke} strokeOpacity="0.35" strokeWidth="1"/>
      <circle cx="48" cy="48" r="32" stroke={stroke} strokeOpacity="0.55" strokeWidth="1"/>
      <line x1="48" y1="2"  x2="48" y2="94" stroke={stroke} strokeOpacity="0.45" strokeWidth="1"/>
      <line x1="2"  y1="48" x2="94" y2="48" stroke={stroke} strokeOpacity="0.45" strokeWidth="1"/>
      <line x1="14" y1="14" x2="82" y2="82" stroke={stroke} strokeOpacity="0.2" strokeWidth="1"/>
      <line x1="82" y1="14" x2="14" y2="82" stroke={stroke} strokeOpacity="0.2" strokeWidth="1"/>
      <circle cx="48" cy="48" r="3" fill={stroke}/>
    </svg>
  );
}

function MarkArc({ size = 120, stroke = 'var(--gold)' }) {
  return (
    <svg width={size} height={size/2} viewBox="0 0 120 60" fill="none" aria-hidden="true">
      <path d="M2 58 A 58 58 0 0 1 118 58" stroke={stroke} strokeOpacity="0.5" strokeWidth="1"/>
      <path d="M14 58 A 46 46 0 0 1 106 58" stroke={stroke} strokeOpacity="0.3" strokeWidth="1"/>
      <line x1="60" y1="2" x2="60" y2="14" stroke={stroke} strokeOpacity="0.7" strokeWidth="1"/>
    </svg>
  );
}

function MarkRule({ width = 200, stroke = 'var(--gold)' }) {
  return (
    <svg width={width} height="12" viewBox={`0 0 ${width} 12`} fill="none" aria-hidden="true">
      <line x1="0" y1="6" x2={width} y2="6" stroke={stroke} strokeOpacity="0.5" strokeWidth="1"/>
      <circle cx="6" cy="6" r="2" fill={stroke}/>
      <circle cx={width - 6} cy="6" r="2" fill={stroke}/>
    </svg>
  );
}

/* Big editorial numeral over teal — used in section openers */
function BigNumeral({ n = 'I', size = 360 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 360 360" aria-hidden="true" style={{display:'block'}}>
      <text x="50%" y="62%" textAnchor="middle"
            fontFamily="'Cormorant Garamond', Georgia, serif"
            fontStyle="italic" fontWeight="400"
            fontSize="320"
            fill="none" stroke="var(--gold)" strokeOpacity="0.5" strokeWidth="0.6">
        {n}
      </text>
    </svg>
  );
}

Object.assign(window, { MarkConcentric, MarkCompass, MarkArc, MarkRule, BigNumeral });
