import { ArrowUpRight } from "lucide-react"

import { aiAssistants, aiPrompt } from "@/modules/landingPage/data/content"
import { Magnetic } from "@/modules/shared/ui/components/magnetic"

/** "Ask an AI about us": proof of the AI visibility we also sell. */
export function AiVisibilitySection() {
  return (
    <section aria-labelledby="ki-title" data-theme="light" className="pb-section">
      <div className="container-site">
        <div
          data-theme="dark"
          className="flex flex-col items-center rounded-[2.5rem] px-6 py-20 text-center md:py-28"
        >
          <p className="font-mono text-label text-ink-400">(KI-Sichtbarkeit)</p>
          <h2 id="ki-title" className="mt-6 text-display type-poster">
            Frag nicht uns.
            <br />
            <span className="text-outline">Frag eine KI.</span>
          </h2>

          <p className="mt-12 max-w-[60ch] rounded-2xl border border-white/15 bg-white/5 px-6 py-4 text-left font-mono text-label text-white">
            <span className="text-ink-400">&gt; </span>
            {aiPrompt}
            <span aria-hidden="true" className="ml-1 inline-block h-4 w-2 translate-y-0.5 animate-pulse bg-white" />
          </p>

          <ul className="mt-10 flex flex-wrap justify-center gap-4">
            {aiAssistants.map((assistant) => (
              <li key={assistant.name}>
                <Magnetic strength={0.3}>
                  <a
                    href={assistant.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="group inline-flex h-14 items-center gap-2 rounded-full border border-white/25 px-7 font-medium transition-colors duration-300 hover:bg-white hover:text-black"
                  >
                    {assistant.name} fragen
                    <ArrowUpRight
                      aria-hidden
                      className="size-4 transition-transform duration-500 ease-out-expo group-hover:rotate-45"
                    />
                    <span className="sr-only"> (öffnet in neuem Tab)</span>
                  </a>
                </Magnetic>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  )
}