// ------------------------------------------------------------------------
//  components/Wordmark.js - The SunScope sun-icon wordmark (Sun + icon +
//  Scope), sized for use inside modals.
//
//  Mirrors the nav/header markup but self-contained: each instance gets a
//  unique clipPath id so multiple wordmarks can render on the page without
//  the SVG clip colliding. Size via the `fontSize` prop.
// ------------------------------------------------------------------------

import { h } from '../../vendor/preact.js';
import { useState } from '../../vendor/preact-hooks.js';
import htm from '../../vendor/htm.js';

const html = htm.bind(h);

let _wmCounter = 0; // bump per instance for a stable unique id

export function Wordmark({ fontSize = '34px' }) {
  const [clipId] = useState(() => 'ss-clip-wm-' + (++_wmCounter));
  return html`
    <div style=${{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'Manrope, sans-serif',
      fontWeight: 250,
      fontSize,
      lineHeight: 1,
      letterSpacing: '-0.01em',
      color: '#1e1208',
    }}>
      <span>Sun</span><svg viewBox="0 0 174 173" aria-hidden="true" style=${{ width: '0.82em', height: '0.82em', flexShrink: 0 }}><g transform="matrix(0.986226,0,0,0.986226,-585.724252,-110.041209)"><clipPath id=${clipId}><circle cx="681.9838" cy="199.4502" r="83.2987"/></clipPath><g clip-path=${`url(#${clipId})`}><g transform="matrix(0.948836,0,0,0.948836,19.787839,-2.49381)"><path d="M666.992,233.0768C666.3949,230.6581 666.1785,228.6317 666.1785,226.0296C666.1785,208.6786 680.2653,194.5919 697.6163,194.5919C714.9672,194.5919 729.054,208.6786 729.054,226.0296C729.054,228.4125 728.9892,230.9346 728.4859,233.1663" fill="none" stroke="#c8922a" stroke-width="7.48"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M724.9315,291.8131C777.359,291.8131 826.5862,305.6245 869.1698,329.8044" fill="none" stroke="currentColor" stroke-width="13.64"/></g><g transform="matrix(0.520349,0,0,0.520349,304.766642,64.226716)"><path d="M580.8436,329.719C623.3927,305.592 672.5657,291.8131 724.9315,291.8131" fill="none" stroke="currentColor" stroke-width="13.64"/></g></g><circle cx="681.9838" cy="199.4502" r="83.2987" fill="none" stroke="currentColor" stroke-width="9.13"/></g></svg><span>Scope</span>
    </div>`;
}