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

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">
            Listening System
          </span>
          <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
            Mesh Listening Lattice
          </h2>
          <p className="my-2 text-[#e4edff]">
            Makima is a mesh listening lattice for contested domains, delivering
            live audio surveillance, detection, and analysis in one persistent layer.
          </p>
          <p className="my-2 text-[#e4edff]">
            Dynamic telemetry for detection, orchestration, and mission-critical
            decisions. Real-time transcription with speaker diarization.
          </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>
  );
}