import { type Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import clsx from 'clsx'

import { Container } from '@/components/Container'
import {
  GitHubIcon,
  InstagramIcon,
  LinkedInIcon,
  MediumIcon,
  TwitterIcon,
} from '@/components/SocialIcons'
import portraitImage from '@/images/portrait.jpg'

function SocialLink({
  className,
  href,
  children,
  icon: Icon,
}: {
  className?: string
  href: string
  icon: React.ComponentType<{ className?: string }>
  children: React.ReactNode
}) {
  return (
    <li className={clsx(className, 'flex')}>
      <Link
        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>
      </Link>
    </li>
  )
}

function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
  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 const metadata: Metadata = {
  title: 'About',
  description:
    'I\'m Prad Nukala, founder of Sonr and blockchain identity pioneer. Building the future of decentralized identity in New York City.',
}

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">
            I\'m Prad Nukala. I live in New York City, where I\'m building the future of digital identity.
          </h1>
          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
            <p>
              I\'ve been passionate about technology since the introduction of the App Store, where I made one 
              of the first 5,000 apps at age 12. This early start in mobile development shaped my understanding 
              of how technology can empower individuals and sparked my lifelong commitment to building tools that 
              put users first.
            </p>
            <p>
              My journey in blockchain began with a simple realization: the internet\'s identity layer is fundamentally 
              broken. Users have no control over their digital selves, leading to privacy breaches, data exploitation, 
              and a web that serves corporations over people. This inspired me to found Sonr in 2020, where we\'re 
              building an IBC-enabled blockchain specifically designed for decentralized identity.
            </p>
            <p>
              As a W3C Working Group Member for DIDs, WebAuthn, and WASM, I\'m actively shaping the standards that 
              will define the future of digital identity. My technical contributions speak to my commitment - with over 
              6,000 GitHub contributions from 2021-2023, I was ranked as the 4th most active contributor worldwide. 
              Before Sonr, I self-developed over 10 projects that garnered more than 1 million downloads combined.
            </p>
            <p>
              Today, I lead Sonr with a clear mission: to create a peer-to-peer identity and asset management system 
              that leverages DID documents, WebAuthn, and IPFS. We\'ve raised $4.7M in funding and onboarded over 120 
              first-time blockchain developers to our platform. Our technology features passkey-based user accounts, 
              DKLS-MPC powered wallets (no seed phrases), and lightning-fast 600ms wallet generation. I believe the 
              future of the internet is one where users own their identity, control their data, and interact on their 
              own terms.
            </p>
          </div>
        </div>
        <div className="lg:pl-20">
          <ul role="list">
            <SocialLink href="https://twitter.com/thisisprad" icon={TwitterIcon}>
              Follow on Twitter
            </SocialLink>
            <SocialLink href="https://medium.com/@prnk28" icon={MediumIcon} className="mt-4">
              Follow on Medium
            </SocialLink>
            <SocialLink href="https://github.com/prnk28" icon={GitHubIcon} className="mt-4">
              Follow on GitHub
            </SocialLink>
            <SocialLink href="https://linkedin.com/in/pradn" icon={LinkedInIcon} className="mt-4">
              Follow on LinkedIn
            </SocialLink>
            <SocialLink
              href="mailto:prad.nukala@sonr.io"
              icon={MailIcon}
              className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
            >
              prad.nukala@sonr.io
            </SocialLink>
          </ul>
        </div>
      </div>
    </Container>
  )
}
