// Diamond-shaped wakesurf board silhouette (placeholder, brand-mark inspired)
const BoardSVG = ({ accent = "#ffd600", accent2 = "#ffe566", className = "" }) => (
  <svg viewBox="0 0 400 800" xmlns="http://www.w3.org/2000/svg" className={className} aria-hidden="true">
    <defs>
      <linearGradient id="boardGrad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={accent2} stopOpacity="0.95" />
        <stop offset="40%" stopColor={accent} stopOpacity="1" />
        <stop offset="100%" stopColor="#2a1f5c" stopOpacity="0.95" />
      </linearGradient>
      <linearGradient id="boardSheen" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#ffffff" stopOpacity="0.35" />
        <stop offset="50%" stopColor="#ffffff" stopOpacity="0" />
        <stop offset="100%" stopColor="#000000" stopOpacity="0.4" />
      </linearGradient>
      <pattern id="carbonWeave" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
        <rect width="6" height="6" fill="transparent"/>
        <path d="M0,3 L6,3" stroke="#ffffff" strokeWidth="0.3" strokeOpacity="0.15" />
      </pattern>
    </defs>
    {/* Diamond board outline */}
    <path
      d="M200 20 C 260 120, 360 320, 380 500 C 380 680, 280 770, 200 780 C 120 770, 20 680, 20 500 C 40 320, 140 120, 200 20 Z"
      fill="url(#boardGrad)"
      stroke={accent2}
      strokeWidth="1.5"
      strokeOpacity="0.6"
    />
    {/* Carbon weave overlay */}
    <path
      d="M200 20 C 260 120, 360 320, 380 500 C 380 680, 280 770, 200 780 C 120 770, 20 680, 20 500 C 40 320, 140 120, 200 20 Z"
      fill="url(#carbonWeave)"
    />
    {/* Sheen */}
    <path
      d="M200 20 C 260 120, 360 320, 380 500 C 380 680, 280 770, 200 780 C 120 770, 20 680, 20 500 C 40 320, 140 120, 200 20 Z"
      fill="url(#boardSheen)"
    />
    {/* Center spine */}
    <line x1="200" y1="40" x2="200" y2="760" stroke="#ffffff" strokeOpacity="0.18" strokeWidth="1" />
    {/* Diamond mark inset */}
    <g transform="translate(200 540)">
      <rect x="-22" y="-22" width="44" height="44" fill="#0a0d12" transform="rotate(45)" />
      <rect x="-14" y="-14" width="28" height="28" fill={accent} transform="rotate(45)" />
    </g>
    {/* Logo lockup */}
    <text
      x="200" y="190"
      textAnchor="middle"
      fontFamily="JetBrains Mono, monospace"
      fontSize="14"
      letterSpacing="6"
      fill="#ffffff"
      fillOpacity="0.85"
    >
      WAKEDIAMOND
    </text>
    <text
      x="200" y="208"
      textAnchor="middle"
      fontFamily="JetBrains Mono, monospace"
      fontSize="8"
      letterSpacing="3"
      fill="#ffffff"
      fillOpacity="0.45"
    >
      SWISS · CARBON · 2025
    </text>
    {/* Fin */}
    <path
      d="M195 720 L205 720 L210 760 L200 770 L190 760 Z"
      fill="#0a0d12"
      stroke={accent}
      strokeOpacity="0.4"
      strokeWidth="0.5"
    />
  </svg>
);

window.BoardSVG = BoardSVG;