import { MailIcon, MessageCircleIcon, RadioIcon, WavesIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function AboutPage() {
  return (
    <div className="max-w-3xl mx-auto px-4 py-12 flex flex-col gap-10">
      <section className="text-center space-y-4">
        <h1 className="text-4xl font-bold tracking-tight">About</h1>
        <p className="text-muted-foreground text-lg">
          Fellies is a network of services for a small group of fluffy, furry and furry-friendly folks.<br />
          We are here to support the furry and queer communities and provide a safe space for them to express themselves.<br />
          This place is my personal space to showcase all the beautiful artwork that my (currently) three OCs, including my main fursona Citali, have received from all the amazing and talented artists.
        </p>
        <p className="text-muted-foreground py-4">
          This place is free of any AI or tracking functionality and is not intended to be used for any commercial purposes.<br />
          The usage of any content on this page for AI training is strictly prohibited.
        </p>
      </section>

      <section className="border rounded-lg p-6 shadow bg-muted/20 space-y-4">
        <h2 className="text-xl font-semibold text-center">Connect with me</h2>
        <div className="flex flex-wrap gap-4 justify-between">
          <SocialLink icon={<MailIcon className="w-5 h-5" />} href="mailto:core@fellies.email" label="Email" />
          <SocialLink icon={<MessageCircleIcon className="w-5 h-5" />} href="https://signal.me/#eu/ax5Sf75Na5g6c_Cir3Q9c0zv6TnoaQCKAo3dcUo15990aLTlbIBO1qbKqoB7WPuQ" label="Signal" />
          <SocialLink icon={<WavesIcon className="w-5 h-5" />} href="https://matrix.to/#/@citali:steffo.dev" label="Matrix" />
          <SocialLink icon={<RadioIcon className="w-5 h-5" />} href="https://fellies.social/@Citali" label="Fediverse" rel="me" />
        </div>
      </section>

      <section className="border rounded-lg p-6 shadow bg-muted/20 space-y-4">
        <div className="py-6 flex justify-center">
          <Image
            src="/images/Intersex-inclusive_pride_flag.png"
            alt="Inclusive Pride Flag"
            width={500}
            height={500}
            className="rounded shadow"
          />
        </div>
      </section>
    </div>
  );
}

function SocialLink({ icon, href, label, rel }: { icon: React.ReactNode, href: string, label: string, rel?: string }) {
  return (
    <Link
      href={href}
      className="flex items-center gap-2 px-3 py-2 rounded-md bg-muted/30 hover:bg-muted/50 transition text-sm"
      target="_blank"
      rel={rel ? rel : 'noopener noreferrer'}
    >
      {icon}
      {label}
    </Link>
  )
}