import { type Metadata } from 'next'

import { Card } from '@/components/Card'
import { Section } from '@/components/Section'
import { SimpleLayout } from '@/components/SimpleLayout'

function SpeakingSection({
  children,
  ...props
}: React.ComponentPropsWithoutRef<typeof Section>) {
  return (
    <Section {...props}>
      <div className="space-y-16">{children}</div>
    </Section>
  )
}

function Appearance({
  title,
  description,
  event,
  cta,
  href,
}: {
  title: string
  description: string
  event: string
  cta: string
  href: string
}) {
  return (
    <Card as="article">
      <Card.Title as="h3" href={href}>
        {title}
      </Card.Title>
      <Card.Eyebrow decorate>{event}</Card.Eyebrow>
      <Card.Description>{description}</Card.Description>
      <Card.Cta>{cta}</Card.Cta>
    </Card>
  )
}

export const metadata: Metadata = {
  title: 'Speaking',
  description:
    'Speaking at prestigious institutions and conferences about blockchain, decentralized identity, and the future of the web.',
}

export default function Speaking() {
  return (
    <SimpleLayout
      title="Sharing the vision of decentralized identity with the world."
      intro="From guest lecturing at MIT alongside Vitalik Buterin to speaking at blockchain conferences, I\'m passionate about educating developers and entrepreneurs about the future of digital identity and how blockchain technology can empower users."
    >
      <div className="space-y-20">
        <SpeakingSection title="Guest Lectures & Conferences">
          <Appearance
            href="#"
            title="The Future of Decentralized Identity"
            description="Guest lecture at MIT Sloan School alongside Vitalik Buterin, Alex Mashinsky, Anthony Pompliano, and Yat Siu on blockchain innovation and decentralized identity."
            event="MIT Sloan School of Management, 2023"
            cta="Learn more"
          />
          <Appearance
            href="#"
            title="Building IBC-Enabled Blockchains for Identity"
            description="Technical deep-dive into Sonr\'s architecture, showcasing how we leverage IBC for cross-chain identity management and our innovative approach to wallet generation."
            event="Cosmos Ecosystem Conference, 2023"
            cta="Watch video"
          />
          <Appearance
            href="#"
            title="WebAuthn and the Future of Authentication"
            description="Presenting our work with W3C standards for DIDs and WebAuthn, demonstrating how passkey-based authentication can replace traditional passwords."
            event="W3C Workshop on Web Authentication, 2022"
            cta="View presentation"
          />
        </SpeakingSection>
        <SpeakingSection title="Podcasts & Interviews">
          <Appearance
            href="#"
            title="From App Store Pioneer to Blockchain Innovator"
            description="My journey from creating one of the first 5,000 iOS apps at age 12 to founding Sonr and becoming the 4th most active GitHub contributor worldwide."
            event="The Blockchain Founders Podcast, 2023"
            cta="Listen to podcast"
          />
          <Appearance
            href="#"
            title="Raising $4.7M to Build Decentralized Identity"
            description="How we raised funding for Sonr, onboarded 120+ first-time blockchain developers, and our vision for making blockchain accessible to everyone."
            event="Web3 Startup Stories, 2022"
            cta="Listen to podcast"
          />
          <Appearance
            href="#"
            title="The Technical Architecture of Self-Sovereign Identity"
            description="Deep technical discussion on DID documents, IPFS integration, UCAN tokens, and our approach to eliminating seed phrases with DKLS-MPC wallets."
            event="Decentralized Tech Talks, 2022"
            cta="Listen to podcast"
          />
        </SpeakingSection>
      </div>
    </SimpleLayout>
  )
}
