type SvgProps = { className?: string; title?: string };

/**
 * Fjora wordmark. Drawn letterforms on a 24-unit cap height; the A is a
 * mountain peak with a line of water in place of its crossbar.
 */
export function Wordmark({ className, title = "Fjora" }: SvgProps) {
  return (
    <svg
      className={className}
      viewBox="-1 -3 128 33"
      role="img"
      aria-label={title}
      fill="none"
      stroke="currentColor"
      strokeWidth={2.4}
      strokeLinejoin="miter"
      strokeMiterlimit={10}
    >
      {/* F */}
      <path d="M15.5 5.2H1.2V28M1.2 16.2H12.5" />
      {/* J */}
      <path d="M33.2 4v17.6a6 6 0 0 1-12 0" />
      {/* O */}
      <circle cx="55.5" cy="16" r="10.8" />
      {/* R */}
      <path d="M78.2 28V5.2h8a5.6 5.6 0 0 1 0 11.2h-8M85.6 16.4 93.6 28" />
      {/* A — peak and water */}
      <path d="M103.6 28 113.6 5.5 123.6 28" />
      <path d="M107.4 20.4c2.2-1.6 4.3-1.6 6.2 0s4 1.6 6.2 0" />
    </svg>
  );
}

/** Compact brand mark: a peak over two lines of water. */
export function Mark({ className, title }: SvgProps) {
  return (
    <svg
      className={className}
      viewBox="0 0 32 32"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.8}
      strokeLinecap="round"
      strokeLinejoin="round"
      role={title ? "img" : undefined}
      aria-label={title}
      aria-hidden={title ? undefined : true}
    >
      <path d="M4 18.5 12 7l4.5 6.2L19 10l9 8.5" />
      <path d="M5 23c2.75-2 5.25-2 8 0s5.25 2 8 0 4.75-2 6 -1" />
      <path d="M7 27.5c2.25-1.5 4.25-1.5 6.5 0s4.25 1.5 6.5 0" />
    </svg>
  );
}

/** Thin contour lines, used as a quiet section divider. */
export function Contours({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 1440 60" preserveAspectRatio="none" fill="none" aria-hidden="true">
      <path d="M0 38c180-22 360-22 540 0s360 22 540 0 270-20 360-8" stroke="currentColor" strokeWidth="1" />
      <path d="M0 48c200-18 400-18 600 0s400 18 600 0 180-14 240-6" stroke="currentColor" strokeWidth="1" opacity=".55" />
      <path d="M0 56c220-12 440-12 660 0s440 12 660 0 100-8 120-4" stroke="currentColor" strokeWidth="1" opacity=".3" />
    </svg>
  );
}

export function ArrowDown({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <path d="M8 2.5v11M3.5 9 8 13.5 12.5 9" />
    </svg>
  );
}