// wavecrest-marks.jsx — refined Coco Tide "Wave Crest" identity.
// Tweakable bits read CSS vars: --ct-accent (sun/accents), --ct-word (wordmark font).
// Fixed brand colors below.
const CT = {
  ink: '#0C3F3A', teal: '#0E7C70', turq: '#1AA294', aqua: '#7FCFC3',
  sand: '#E7D9BC', cream: '#F7F1E4', white: '#FFFFFF',
};
const ACC = 'var(--ct-accent)';
const WORDFONT = 'var(--ct-word)';

/* ---- the coconut-water medallion scene (shared core) ---- */
function MedallionScene({ id, accent = ACC, sky = CT.sand, mono = null }) {
  if (mono) {
    return (
      <g clipPath={`url(#med-${id})`}>
        <circle cx="80" cy="54" r="12" fill="none" stroke={mono} strokeWidth="4" />
        <path d="M26,104 C46,93 64,95 80,103 C97,111 113,110 134,99" stroke={mono} strokeWidth="5" fill="none" strokeLinecap="round" />
        <path d="M26,121 C46,110 64,112 80,120 C97,128 113,127 134,116" stroke={mono} strokeWidth="5" fill="none" strokeLinecap="round" opacity="0.55" />
      </g>
    );
  }
  return (
    <g clipPath={`url(#med-${id})`}>
      <rect x="8" y="8" width="144" height="144" fill={sky} />
      <circle cx="80" cy="54" r="13" style={{ fill: accent }} />
      <path d="M0,98 C34,86 62,88 84,97 C108,107 130,104 160,92 L160,160 L0,160 Z" fill={CT.aqua} />
      <path d="M0,114 C32,103 56,104 80,112 C106,121 130,118 160,108 L160,160 L0,160 Z" fill={CT.teal} />
    </g>
  );
}

/* ---- 1. FULL BADGE / STAMP ---- */
function Badge({ s = 220, reversed = false, mono = null, botSize = 10.5 }) {
  const rid = React.useId().replace(/[:]/g, '');
  const fieldInk = mono || (reversed ? CT.cream : CT.ink);
  const fieldBg = mono ? 'none' : (reversed ? CT.ink : CT.cream);
  const ringFill = mono ? 'none' : (reversed ? CT.cream : CT.ink);
  const botR = ((184 - botSize * 0.92) / 2).toFixed(1);
  return (
    <svg width={s} height={s} viewBox="0 0 260 260" style={{ display: 'block' }}>
      <defs>
        <path id={`top-${rid}`} d="M 130,130 m -81,0 a 81,81 0 1,1 162,0" />
        <path id={`bot-${rid}`} d={`M 130,130 m ${botR},0 a ${botR},${botR} 0 0,1 -${botR * 2},0`} />
        <clipPath id={`med-${rid}`}><circle cx="80" cy="80" r="64" /></clipPath>
      </defs>
      {!mono && <circle cx="130" cy="130" r="124" fill={ringFill} />}
      <circle cx="130" cy="130" r="118" fill={fieldBg} stroke={mono ? mono : 'none'} strokeWidth={mono ? 4 : 0} />
      <text fill={fieldInk} style={{ fontFamily: WORDFONT, fontSize: 22, fontWeight: 600, letterSpacing: '0.24em' }}>
        <textPath href={`#top-${rid}`} startOffset="50%" textAnchor="middle">COCO TIDE</textPath>
      </text>
      <text fill={fieldInk} style={{ fontFamily: WORDFONT, fontSize: botSize, fontWeight: 500, letterSpacing: '0.34em' }}>
        <textPath href={`#bot-${rid}`} startOffset="50%" textAnchor="middle">HULHUMALÉ · MALDIVES</textPath>
      </text>
      <circle cx="40.5" cy="130" r="3.4" style={{ fill: mono || ACC }} />
      <circle cx="219.5" cy="130" r="3.4" style={{ fill: mono || ACC }} />
      <g transform="translate(50 50)">
        <MedallionScene id={rid} mono={mono} sky={reversed && !mono ? CT.sand : CT.sand} />
      </g>
      {!mono && <circle cx="130" cy="130" r="64" fill="none" stroke={fieldInk} strokeWidth="3.5" />}
    </svg>
  );
}

/* ---- 2. CORE MARK (simplified icon, no ring text) ---- */
function Core({ s = 120, reversed = false, mono = null }) {
  const rid = React.useId().replace(/[:]/g, '');
  const ring = mono || (reversed ? CT.cream : CT.ink);
  return (
    <svg width={s} height={s} viewBox="0 0 160 160" style={{ display: 'block' }}>
      <defs><clipPath id={`med-${rid}`}><circle cx="80" cy="80" r="68" /></clipPath></defs>
      {!mono && <circle cx="80" cy="80" r="78" fill={reversed ? CT.cream : CT.ink} />}
      {mono && <circle cx="80" cy="80" r="76" fill="none" stroke={mono} strokeWidth="4" />}
      <MedallionScene id={rid} mono={mono} />
      <circle cx="80" cy="80" r={mono ? 76 : 72} fill="none" stroke={ring} strokeWidth={mono ? 0 : 3} opacity={mono ? 0 : 1} />
    </svg>
  );
}

/* ---- 3. CT MONOGRAM (compact stamp for lids / favicons) ---- */
function Monogram({ s = 96, onAccent = true }) {
  return (
    <div style={{ width: s, height: s, borderRadius: '50%',
      background: onAccent ? ACC : CT.ink, position: 'relative',
      display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
      <span style={{ fontFamily: WORDFONT, fontWeight: 700, fontSize: s * 0.42,
        letterSpacing: '-0.04em', color: onAccent ? CT.ink : CT.cream, lineHeight: 1, zIndex: 1 }}>ct</span>
      <svg viewBox="0 0 100 30" width={s} height={s * 0.3} style={{ position: 'absolute', bottom: s * 0.16 }}>
        <path d="M-2,16 C14,6 26,6 38,15 C50,24 64,24 102,10" fill="none"
          stroke={onAccent ? CT.ink : CT.cream} strokeWidth="4" strokeLinecap="round" opacity="0.85" />
      </svg>
    </div>
  );
}

/* ---- 4. WORDMARK ---- */
function Wordmark({ size = 56, color = CT.ink, accent = ACC, place = true, center = true }) {
  return (
    <div style={{ fontFamily: WORDFONT, lineHeight: 0.96, textAlign: center ? 'center' : 'left' }}>
      <div style={{ fontSize: size, fontWeight: 700, letterSpacing: '0.04em', color, whiteSpace: 'nowrap' }}>
        COCO<span style={{ color: accent }}>&nbsp;TIDE</span>
      </div>
      {place && (
        <div style={{ fontSize: size * 0.19, fontWeight: 500, letterSpacing: '0.46em', whiteSpace: 'nowrap',
          color, opacity: 0.55, marginTop: size * 0.2, paddingLeft: center ? '0.46em' : '0.04em' }}>
          HULHUMALÉ · MALDIVES
        </div>
      )}
    </div>
  );
}

Object.assign(window, { CT, Badge, Core, Monogram, Wordmark });