import { Link } from "react-router";
import { LogoMark } from "./Logo";
import { NavStrip } from "./NavStrip";
import { JapaneseHoverText } from "./JapaneseHoverText";

interface MastheadProps {
  showTicker?: boolean;
  showNav?: boolean;
}

export function Masthead({ showTicker = false, showNav = true }: MastheadProps) {
  return (
    <header className="border-b-4 border-double border-[#050d1f] bg-[#08162e]">
      <div className="flex items-center gap-3 px-4 py-3">
        <Link to="/" className="flex items-center gap-3 no-underline">
          <LogoMark size={32} />
          <div>
            <h1 className="m-0 text-xl text-white tracking-widest font-normal" style={{ fontFamily: 'var(--font-logo)' }}>
              makima.jp
            </h1>
            <small className="block text-[#dbe7ff] text-xs tracking-wide">
              <JapaneseHoverText
                japanese="支配する"
                english="Control System"
              />
            </small>
          </div>
        </Link>
      </div>

      {showTicker && (
        <div className="relative overflow-hidden border border-[#153667] bg-[#0a2242] text-[#b9d4ff] font-mono text-xs px-2.5 py-2 mx-4 mb-3">
          <div className="absolute inset-y-0 left-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent" />
          <div className="absolute inset-y-0 right-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent rotate-180" />
          <span className="ticker-content">
            /// MAKIMA CONTROL SYSTEM // MESH ORCHESTRATION PLATFORM ///
            TRANSPORT: WEBSOCKET /// DAEMONS: ACTIVE /// STATUS: ONLINE ///
            MAKIMA.JP /// MAKIMA CONTROL SYSTEM // MESH ORCHESTRATION PLATFORM
            /// TRANSPORT: WEBSOCKET /// DAEMONS: ACTIVE /// STATUS: ONLINE ///
            MAKIMA.JP ///
          </span>
        </div>
      )}

      {showNav && <NavStrip />}
    </header>
  );
}