// Custom monogram for Ana Paula Celis — letter A reinterpreted with
// organic, intertwining brushstrokes. Self-drawing on first paint.
function Monogram({ size = 80, color = "currentColor", animated = false, strokeWidth = 1 }) {
  const dash = animated ? { strokeDasharray: 1400, animation: "drawA 2.6s cubic-bezier(.2,.7,.2,1) forwards" } : {};
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 200 200"
      fill="none"
      stroke={color}
      strokeLinecap="round"
      strokeLinejoin="round"
      style={{ display: "block" }}
      aria-label="Ana Paula Celis monogram"
    >
      {/* Outer envelope (A silhouette) */}
      <path d="M 36 172 C 50 110, 80 56, 100 28 C 120 56, 150 110, 164 172"
            strokeWidth={strokeWidth} style={dash} />
      {/* Inner crossbar — softened */}
      <path d="M 64 124 C 82 118, 118 118, 136 124"
            strokeWidth={strokeWidth * 0.85} style={dash} />
      {/* Right-side flourish loop — brushstroke arc */}
      <path d="M 100 28 C 120 50, 142 88, 148 132 C 150 154, 140 168, 122 172"
            strokeWidth={strokeWidth * 0.85} opacity="0.85" style={dash} />
      {/* Left-side flourish loop */}
      <path d="M 100 28 C 80 50, 58 88, 52 132 C 50 154, 60 168, 78 172"
            strokeWidth={strokeWidth * 0.85} opacity="0.85" style={dash} />
      {/* Tiny serif feet */}
      <path d="M 30 174 C 34 172, 42 172, 46 174" strokeWidth={strokeWidth * 0.7} />
      <path d="M 154 174 C 158 172, 166 172, 170 174" strokeWidth={strokeWidth * 0.7} />
      {/* Subtle ornament — a falling petal */}
      <path d="M 100 90 C 102 96, 102 104, 100 110 C 98 104, 98 96, 100 90 Z"
            strokeWidth={strokeWidth * 0.6} opacity="0.5" />
    </svg>
  );
}

// Wordmark — set in Cormorant with wide tracking
function Wordmark({ small = false, color = "currentColor" }) {
  const fs = small ? 13 : 16;
  return (
    <span style={{
      fontFamily: 'var(--serif)',
      fontWeight: 400,
      fontSize: fs,
      letterSpacing: "0.42em",
      textTransform: "uppercase",
      color,
      whiteSpace: "nowrap",
      fontFeatureSettings: '"liga" 1',
    }}>
      Ana&nbsp;Paula&nbsp;Celis
    </span>
  );
}

window.Monogram = Monogram;
window.Wordmark = Wordmark;