import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { Text } from '@/ui/Text';

export function HeaderContent() {
  return (
    <div className="flex items-center justify-between h-16 md:h-20">
      <div className="flex items-center space-x-6">
        <Link href="/" className="inline-flex items-center group">
          <div className="relative">
            <Image
              src="/images/logos/wordmark-rectangle-dark.svg"
              alt="GridPilot"
              width={160}
              height={30}
              className="h-6 w-auto md:h-7 transition-opacity group-hover:opacity-80"
              priority
            />
            <div className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-accent transition-all group-hover:w-full" />
          </div>
        </Link>
        <div className="hidden sm:flex items-center space-x-2 border-l border-border-gray/50 pl-6">
          <div className="w-1.5 h-1.5 rounded-full bg-primary-accent animate-pulse" />
          <Text size="xs" color="text-gray-500" weight="bold" className="uppercase tracking-[0.2em] font-mono">
            Motorsport Infrastructure
          </Text>
        </div>
      </div>
      
      <div className="flex items-center space-x-4">
        <div className="hidden md:flex items-center space-x-1 px-3 py-1 border border-border-gray/30 bg-panel-gray/20">
          <Text size="xs" color="text-gray-600" weight="bold" font="mono" className="uppercase">Status:</Text>
          <Text size="xs" color="text-success-green" weight="bold" font="mono" className="uppercase">Operational</Text>
        </div>
      </div>
    </div>
  );
}