"use client";

export function Luna() {
  return (
    <section className="mx-auto w-full max-w-4xl px-4">
      <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6 sm:p-8 md:p-10">
        <div className="space-y-5">
          <div className="flex items-center gap-3">
            <span className="h-2.5 w-2.5 rounded-full bg-white/70" />
            <p className="text-xs font-medium uppercase tracking-[0.25em] text-gray-500">
              AI Agent
            </p>
          </div>

          <h2 className="text-2xl font-semibold text-white sm:text-3xl">Meet Luna</h2>

          <p className="max-w-2xl text-base leading-relaxed text-gray-400 sm:text-lg">
            Luna is a personal agent running in{" "}
            <span className="font-medium text-gray-200">Openclaw</span> on my homelab. Luna
            codes, reviews PRs, and handles a bunch of other tasks throughout the day.
          </p>

          <div className="flex flex-wrap gap-2">
            {["Writes code", "Reviews PRs", "Runs on Openclaw", "OpenAI (ChatGPT Plus)"].map(
              (tag) => (
                <span
                  key={tag}
                  className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium text-gray-300"
                >
                  {tag}
                </span>
              ),
            )}
          </div>

          <div className="pt-1">
            <a
              href="https://luna.spaceistyping.com"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-5 py-2.5 text-sm font-semibold text-white transition-all duration-300 hover:border-white/30 hover:bg-white/10"
            >
              Visit Luna
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
