/*
 * OwnershipLockup — "A DF4 Labs company" badge.
 * Used on every product surface (header + footer minimum).
 * Animated DF4 cube glyph on first paint and on hover.
 *
 * Variants:
 *   compact  — tight 14px line-height, header use
 *   default  — footer use, larger
 *   inverse  — for dark surfaces (FoxLitX header)
 */

function OwnershipLockup({ variant = 'compact', inverse = false, href = 'https://df4.uk' }) {
  const ref = React.useRef(null);
  const [hover, setHover] = React.useState(false);

  return (
    <a
      ref={ref}
      href={href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        ...lockupStyles.base,
        ...(variant === 'default' ? lockupStyles.default : lockupStyles.compact),
        ...(inverse ? lockupStyles.inverse : null),
      }}
    >
      <DF4CubeGlyph size={variant === 'default' ? 18 : 14} animate={hover} inverse={inverse} />
      <span style={lockupStyles.label}>
        A <span style={lockupStyles.labelStrong}>DF4 Labs</span> company
      </span>
    </a>
  );
}

function DF4CubeGlyph({ size = 14, animate = false, inverse = false }) {
  // Tiny cube + arrow mark, abstracted from the full logo.
  // Arrow nudges out on hover (engineered, not decorative).
  const stroke = inverse ? '#F4F5F7' : '#0B0D12';
  const accent = '#EC5B25';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <g style={{
        transition: 'transform var(--t-base) var(--ease)',
        transform: animate ? 'translate(0, 0)' : 'translate(0, 0)',
      }}>
        {/* Cube outline */}
        <path d="M4 7l8-4 8 4-8 4-8-4z" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
        <path d="M4 7v10l8 4V11" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
        <path d="M20 7v10l-8 4V11" stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" opacity="0.55" />
      </g>
      {/* Orange arrow exiting top-right */}
      <g style={{
        transition: 'transform var(--t-base) var(--ease)',
        transform: animate ? 'translate(2.2px, -2.2px)' : 'translate(0, 0)',
      }}>
        <path d="M16 6l4-4M20 2h-3M20 2v3" stroke={accent} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      </g>
    </svg>
  );
}

const lockupStyles = {
  base: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: 8,
    textDecoration: 'none',
    color: 'inherit',
    fontFamily: 'var(--font-mono)',
    letterSpacing: '0.02em',
    whiteSpace: 'nowrap',
    transition: 'opacity 160ms',
  },
  compact: {
    fontSize: 11,
    lineHeight: 1,
  },
  default: {
    fontSize: 13,
    lineHeight: 1,
  },
  inverse: {
    color: '#E4E7EC',
  },
  label: { color: 'currentColor', opacity: 0.7 },
  labelStrong: { color: 'currentColor', opacity: 1, fontWeight: 600 },
};

window.OwnershipLockup = OwnershipLockup;
window.DF4CubeGlyph = DF4CubeGlyph;