import { type Metadata } from 'next'
import Image from 'next/image'

import { Card } from '@/components/Card'
import { SimpleLayout } from '@/components/SimpleLayout'
import logoSuperball from '@/images/logos/superball.svg'
import logoVoluntree from '@/images/logos/voluntree.svg'
import logoSpacebolt from '@/images/logos/spacebolt.svg'
import logoYue from '@/images/logos/yue.svg'
import logoSonr from '@/images/logos/sonr.svg'

const projects = [
  {
    name: 'Sonr',
    created: '2020 - Present',
    description:
      'IBC-enabled blockchain for decentralized identity. Features passkey-based accounts, DKLS-MPC wallets, and 600ms wallet generation.',
    link: { href: 'https://sonr.io', label: 'sonr.io' },
    logo: logoSonr,
  },
  {
    name: 'DID & WebAuthn Standards',
    created: '2021 - Present',
    description:
      'Contributing to W3C Working Groups for DIDs, WebAuthn, and WASM standards that define the future of digital identity.',
    link: { href: 'https://www.w3.org/TR/did-core/', label: 'w3.org' },
    logo: logoYue,
  },
  // {
  //   name: 'ML Livestock Detection',
  //   description:
  //     'Real-time video streaming library, optimized for interstellar transmission.',
  //   link: { href: '#', label: 'github.com' },
  //   logo: logoHelioStream,
  // },
  // {
  //   name: 'AR Whiteboard',
  //   description:
  //     'The operating system that powers our Sonr space shuttles.',
  //   link: { href: '#', label: 'github.com' },
  //   logo: logoCosmos,
  // },
  {
    name: 'Spacebolt',
    created: '2017 - 2018',
    description:
      'Unity-based mobile game featuring innovative physics-based gameplay. Part of my journey in mobile development.',
    link: { href: 'https://github.com/prnk28', label: 'github.com' },
    logo: logoSpacebolt,
  },
  {
    name: 'VolunTree',
    created: '2015 - 2016',
    description:
      'iOS app for tracking volunteer hours and connecting volunteers with organizations. Simplified community service engagement.',
    link: { href: 'https://github.com/prnk28', label: 'github.com' },
    logo: logoVoluntree,
  },
  {
    name: 'Superball',
    created: '2010 - 2011',
    description:
      'One of the first 10,000 apps published on the App Store. A physics-based game that started my journey at age 12.',
    link: { href: 'https://github.com/prnk28', label: 'github.com' },
    logo: logoSuperball,
  },
]

function LinkIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
      <path
        d="M15.712 11.823a.75.75 0 1 0 1.06 1.06l-1.06-1.06Zm-4.95 1.768a.75.75 0 0 0 1.06-1.06l-1.06 1.06Zm-2.475-1.414a.75.75 0 1 0-1.06-1.06l1.06 1.06Zm4.95-1.768a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm3.359.53-.884.884 1.06 1.06.885-.883-1.061-1.06Zm-4.95-2.12 1.414-1.415L12 6.344l-1.415 1.413 1.061 1.061Zm0 3.535a2.5 2.5 0 0 1 0-3.536l-1.06-1.06a4 4 0 0 0 0 5.656l1.06-1.06Zm4.95-4.95a2.5 2.5 0 0 1 0 3.535L17.656 12a4 4 0 0 0 0-5.657l-1.06 1.06Zm1.06-1.06a4 4 0 0 0-5.656 0l1.06 1.06a2.5 2.5 0 0 1 3.536 0l1.06-1.06Zm-7.07 7.07.176.177 1.06-1.06-.176-.177-1.06 1.06Zm-3.183-.353.884-.884-1.06-1.06-.884.883 1.06 1.06Zm4.95 2.121-1.414 1.414 1.06 1.06 1.415-1.413-1.06-1.061Zm0-3.536a2.5 2.5 0 0 1 0 3.536l1.06 1.06a4 4 0 0 0 0-5.656l-1.06 1.06Zm-4.95 4.95a2.5 2.5 0 0 1 0-3.535L6.344 12a4 4 0 0 0 0 5.656l1.06-1.06Zm-1.06 1.06a4 4 0 0 0 5.657 0l-1.061-1.06a2.5 2.5 0 0 1-3.535 0l-1.061 1.06Zm7.07-7.07-.176-.177-1.06 1.06.176.178 1.06-1.061Z"
        fill="currentColor"
      />
    </svg>
  )
}

export const metadata: Metadata = {
  title: 'Projects',
  description: 'Blockchain innovations and decentralized identity solutions I\'ve built to empower users.',
}

export default function Projects() {
  return (
    <SimpleLayout
      title="Building the infrastructure for a decentralized future."
      intro="From creating one of the first App Store apps at age 12 to founding Sonr, I\\'ve developed over 10 projects with 1M+ downloads. These represent my journey from mobile development to blockchain innovation, all focused on empowering users with better technology."
    >
      <ul
        role="list"
        className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2 lg:grid-cols-3"
      >
        {projects.map((project) => (
          <Card as="li" key={project.name}>
            <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0">
              <Image
                src={project.logo}
                alt=""
                className="h-8 w-8 rounded-full"
                unoptimized
              />
            </div>
            <h2 className="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100">
              <Card.Link href={project.link.href}>{project.name}</Card.Link>
            </h2>
            <Card.Description>{project.description}</Card.Description>
            <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500 dark:text-zinc-200">
              <LinkIcon className="h-6 w-6 flex-none" />
              <span className="ml-2">{project.link.label}</span>
            </p>
          </Card>
        ))}
      </ul>
    </SimpleLayout>
  )
}
