import React from 'react'

/** The Hanzo mark, exactly as shipped in the press kit (assets/logo.svg).
 *  Path data is the press-kit source; the light seams stay #DDDDDD. */
export function HanzoLogo({ size = 22, variant = 'white', title = 'Hanzo', style, ...rest }) {
  const fill = variant === 'white' ? '#ffffff' : variant === 'black' ? 'var(--hanzo-black)' : 'currentColor'
  return (
    <svg viewBox="0 0 67 67" width={size} height={size} xmlns="http://www.w3.org/2000/svg" role="img" aria-label={title} style={{ display: 'block', flexShrink: 0, ...style }} {...rest}>
      <path d="M22.21 67V44.6369H0V67H22.21Z" fill={fill}></path>
      <path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#DDDDDD"></path>
      <path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill={fill}></path>
      <path d="M22.21 0H0V22.3184H22.21V0Z" fill={fill}></path>
      <path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill={fill}></path>
      <path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#DDDDDD"></path>
      <path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill={fill}></path>
    </svg>
  )
}

/** Mark + wordmark lockup, as used in the nav and footer. */
export function HanzoWordmark({ size = 22, label = 'Hanzo AI', variant = 'white', style }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, ...style }}>
      <HanzoLogo size={size} variant={variant} />
      <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>{label}</span>
    </span>
  )
}