import clsx from 'clsx'
import Image from 'next/image'
import { type ElementType, type PropsWithChildren } from 'react'

import Container from '@/components/server/Container'
import HybridLink, {
  type Props as HybridLinkProps,
} from '@/components/server/HybridLink'
import {
  CodebergIcon,
  GitHubIcon,
  type IconProps,
  MastodonLogo,
} from '@/components/server/icons'
import PortraitImage from '@/images/portrait.jpg'

function SocialLink({
  className,
  href,
  children,
  icon: Icon,
}: PropsWithChildren<{
  icon: ElementType
  href: HybridLinkProps['href']
  className?: string
}>) {
  return (
    <li className={clsx('flex', className)}>
      <HybridLink
        href={href}
        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
      >
        <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
        <span className="ml-4">{children}</span>
      </HybridLink>
    </li>
  )
}

function MailIcon(props: IconProps) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path
        fillRule="evenodd"
        d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
      />
    </svg>
  )
}

export default function About() {
  return (
    <Container className="mt-16 sm:mt-32">
      <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
        <div className="lg:pl-20">
          <div className="max-w-xs px-2.5 lg:max-w-none">
            <Image
              src={PortraitImage}
              alt=""
              sizes="(min-width: 1024px) 32rem, 20rem"
              className="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
            />
          </div>
        </div>
        <div className="lg:order-first lg:row-span-2">
          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
            Sou o Filipe. Este é o meu espaço na internet.
          </h1>
          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
            <p>
              Apanhei o gosto por programação desde muito cedo e há muito que
              sei que é uma das minhas paixões. Depois do curso, quis logo
              entrar no mundo do trabalho, ver como era aquilo de que toda a
              gente falava.
            </p>
            <p>
              De certa forma desiludiu-me. Não me deu a satisfação de que estava
              à espera. Mas foi estranho, porque continuava (e continuo) a
              adorar programar e criar. A <i>web</i> - fazer sites e aplicações
              - é um escape criativo para mim. Mas parece que falta o sentido de
              propósito.
            </p>
            <p>
              Há uns tempos descobri um novo gosto: a economia. Comecei uns
              livros, ouvir umas palestras, estar muito mais atento à política.
              É divertido! Estou a pensar fazer uma mudança de carreira no
              futuro.
            </p>
            <p>
              Ainda assim, acho mesmo que nunca vou perder o gosto pela
              tecnologia e pela criação digital. Gostava de criar um produto
              (tenho várias ideias, de que provavelmente vou falar aqui no
              site).
            </p>
            <p>
              Quero viajar mais. Principalmente para fora da Europa. Países
              pouco <i>westernalizados</i> são o meu próximo objetivo (sudeste
              asiático, América Latina e África).
            </p>
            <p>Veremos para onde a vida nos leva.</p>
          </div>
        </div>
        <div className="lg:pl-20">
          <ul role="list">
            <SocialLink
              href="https://mastodon.green/@filipesm"
              icon={MastodonLogo}
            >
              Segue-me no Fediverse
            </SocialLink>
            <SocialLink
              href="https://codeberg.org/filipesm"
              icon={CodebergIcon}
              className="mt-4"
            >
              Segue-me no Codeberg
            </SocialLink>
            <SocialLink
              href="https://github.com/filipesmedeiros"
              icon={GitHubIcon}
              className="mt-4"
            >
              Segue-me no Github
            </SocialLink>
            <SocialLink
              href="mailto:hello@filipesm.eu"
              icon={MailIcon}
              className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
            >
              hello@filipesm.eu
            </SocialLink>
          </ul>
        </div>
      </div>
    </Container>
  )
}