// fichaje.eu — Logo
// Mark: a stamp / time-punch — a circle with a notched corner forming a "play/punch" wedge
// suggesting both a clock and a time-stamp. Royal blue brand.

const FichajeLogo = ({ size = 28, variant = 'full', tone = 'brand' }) => {
  const primary = tone === 'white' ? '#FFFFFF' : '#1E40AF';
  const accent  = tone === 'white' ? 'rgba(255,255,255,.75)' : '#2563EB';
  const ink     = tone === 'white' ? '#FFFFFF' : '#0F172A';

  const Mark = (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      {/* outer rounded square — the punch card */}
      <rect x="2" y="2" width="36" height="36" rx="10" fill={primary}/>
      {/* notch / corner-cut suggesting a time-card */}
      <path d="M28 2 H38 V12 Z" fill={accent} opacity="0.55"/>
      {/* clock hands inside */}
      <circle cx="20" cy="22" r="9" stroke="#FFFFFF" strokeWidth="2" fill="none"/>
      <path d="M20 22 V16" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round"/>
      <path d="M20 22 L25 24.5" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="20" cy="22" r="1.4" fill="#FFFFFF"/>
    </svg>
  );

  if (variant === 'mark') return Mark;

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      {Mark}
      <span style={{
        fontFamily: 'var(--font-sans)',
        fontWeight: 700,
        fontSize: size * 0.62,
        letterSpacing: '-0.02em',
        color: ink,
        lineHeight: 1
      }}>
        fichaje<span style={{ color: primary }}>.eu</span>
      </span>
    </div>
  );
};

// Alternate logo proposals for the canvas
const FichajeLogoAlt = ({ variant = 'A', size = 32 }) => {
  if (variant === 'A') {
    // The chosen mark (above)
    return <FichajeLogo size={size} />;
  }
  if (variant === 'B') {
    // Monogram "f." inside a circle
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <svg width={size} height={size} viewBox="0 0 40 40">
          <circle cx="20" cy="20" r="18" fill="#0F172A"/>
          <path d="M16 12 h6 a3 3 0 0 1 3 3 v1 h-5 v3 h5 v3 h-5 v10 h-4 v-10 h-2 v-3 h2 v-1 a6 6 0 0 1 0 -5 Z" fill="#FFFFFF"/>
          <circle cx="28" cy="29" r="2" fill="#1E40AF"/>
        </svg>
        <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: size * 0.6, letterSpacing: '-0.02em', color: '#0F172A', lineHeight: 1 }}>
          fichaje<span style={{ color: '#1E40AF' }}>.eu</span>
        </span>
      </div>
    );
  }
  if (variant === 'C') {
    // Pure type — modern monospaced
    return (
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontWeight: 600,
        fontSize: size * 0.7,
        letterSpacing: '-0.04em',
        color: '#1E40AF',
        lineHeight: 1,
      }}>
        fichaje<span style={{ color: '#0F172A' }}>.eu</span>
      </div>
    );
  }
  return null;
};

Object.assign(window, { FichajeLogo, FichajeLogoAlt });