/* Logo SVG components */

const LogoOriginal = () => (
  <a href="/" className="logo-link" aria-label="HowTo: Home Edition">
    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
      <path d="M10 26 L28 10 L46 26 L46 46 L10 46 Z" fill="#F4ECD8" stroke="#3A2D24" strokeWidth="2.5" strokeLinejoin="round"/>
      <path d="M8 27 L28 9 L48 27" stroke="#3A2D24" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <rect x="16" y="32" width="8" height="14" fill="#8B5A3C"/>
      <path d="M30 38 L38 38 L37 46 L31 46 Z" fill="#C26B3F"/>
      <path d="M34 38 C34 32 30 30 30 26" stroke="#7E8F5E" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M34 38 C34 32 38 30 39 26" stroke="#7E8F5E" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <ellipse cx="29" cy="27" rx="3" ry="2" fill="#7E8F5E" transform="rotate(-30 29 27)"/>
      <ellipse cx="39" cy="26" rx="3" ry="2" fill="#7E8F5E" transform="rotate(30 39 26)"/>
      <ellipse cx="34" cy="22" rx="2.5" ry="1.8" fill="#9DAE85"/>
    </svg>
    <span className="logo-text">
      <span className="logo-howto">HowTo:</span>
      <span className="logo-name">HOME EDITION</span>
      <span className="logo-rule"></span>
    </span>
  </a>
);

const LogoStamp = () => (
  <a href="/" className="logo-link logo-stamp" aria-label="HowTo: Home Edition">
    <div className="stamp-mark">
      <svg width="62" height="62" viewBox="0 0 62 62" aria-hidden="true">
        <circle cx="31" cy="31" r="29" fill="none" stroke="#3A2D24" strokeWidth="1.5" strokeDasharray="2 3"/>
        <circle cx="31" cy="31" r="24" fill="#F2EBDD" stroke="#3A2D24" strokeWidth="1"/>
        <text x="31" y="22" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="6" fill="#3A2D24" letterSpacing="1.5">EST · 2024</text>
        <path d="M31 44 L31 32" stroke="#4F5D3C" strokeWidth="1.6" strokeLinecap="round"/>
        <path d="M31 36 C28 33 25 33 24 30" stroke="#4F5D3C" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <path d="M31 33 C34 30 37 30 38 27" stroke="#4F5D3C" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        <ellipse cx="24" cy="30" rx="2.2" ry="1.4" fill="#7E8F5E" transform="rotate(-40 24 30)"/>
        <ellipse cx="38" cy="27" rx="2.2" ry="1.4" fill="#7E8F5E" transform="rotate(40 38 27)"/>
        <text x="31" y="50" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="5" fill="#3A2D24" letterSpacing="1">VOL · 01</text>
      </svg>
    </div>
    <span className="logo-text logo-text-stamp">
      <span className="stamp-howto">HowTo</span>
      <span className="stamp-edition">Home Edition</span>
    </span>
  </a>
);

const LogoMonogram = () => (
  <a href="/" className="logo-link logo-mono" aria-label="HowTo: Home Edition">
    <svg width="52" height="56" viewBox="0 0 52 56" aria-hidden="true">
      <path d="M4 24 L26 6 L48 24" stroke="#3A2D24" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M26 46 L26 30" stroke="#4F5D3C" strokeWidth="2" strokeLinecap="round"/>
      <path d="M26 36 C22 33 19 33 18 28" stroke="#4F5D3C" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <path d="M26 32 C30 29 33 29 34 24" stroke="#4F5D3C" strokeWidth="2" fill="none" strokeLinecap="round"/>
      <ellipse cx="18" cy="28" rx="3" ry="1.8" fill="#7E8F5E" transform="rotate(-40 18 28)"/>
      <ellipse cx="34" cy="24" rx="3" ry="1.8" fill="#7E8F5E" transform="rotate(40 34 24)"/>
      <line x1="6" y1="50" x2="46" y2="50" stroke="#C26B3F" strokeWidth="1.5"/>
    </svg>
    <span className="logo-text logo-text-mono">
      <span className="mono-row">
        <em>How&nbsp;to,</em>
        <span className="dot-sep">·</span>
        <span>at home.</span>
      </span>
      <span className="mono-sub">HOME EDITION · ISSUE 04</span>
    </span>
  </a>
);

window.LogoOriginal = LogoOriginal;
window.LogoStamp    = LogoStamp;
window.LogoMonogram = LogoMonogram;
