import { Masthead } from "../components/Masthead";
import { Logo } from "../components/Logo";
import { JapaneseHoverText } from "../components/JapaneseHoverText";

export default function HomePage() {
  return (
    <div className="relative z-10 min-h-screen flex flex-col">
      <Masthead showTicker showNav />

      <main className="flex-1 p-6 md:p-8 flex flex-col items-center justify-center">
        <section className="text-center max-w-xl">
          <div className="flex justify-center mb-6">
            <Logo size={160} />
          </div>

          <span className="inline-block px-2 py-1 border border-[#3f6fb3] bg-[#0f1c2f] text-[#9bc3ff] font-mono text-xs tracking-wide uppercase mb-3">
            <JapaneseHoverText
              japanese="支配する"
              english="Control System"
            />
          </span>
          <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
            Mesh Orchestration Platform
          </h2>
          <p className="my-2 text-[#e4edff]">
            Makima is a control system for orchestrating distributed daemon meshes,
            coordinating concurrent execution across distinct domains.
          </p>
          <p className="my-2 text-[#e4edff]">
            Unified command interface for spawning, monitoring, and directing
            worker daemons. Real-time task coordination with overlay management.
          </p>
        </section>
      </main>

      <footer className="px-4 py-3 border-t-4 border-double border-[#23477a] bg-gradient-to-b from-[rgba(11,18,32,0.95)] to-[rgba(14,26,45,0.7)] text-xs text-[#e4edff] text-center">
        <p className="m-1">&copy; makima.jp</p>
        <p className="m-1">
          <a
            href="https://makima.jp"
            className="text-[#dbe7ff] underline"
          >
            https://makima.jp
          </a>
          {" / "}
          <a
            href="https://soryu.co"
            target="_blank"
            rel="noopener noreferrer"
            className="text-[#dbe7ff] underline"
          >
            https://soryu.co
          </a>
        </p>
      </footer>
    </div>
  );
}