
// Platform images
import bunLogo from '../images/platforms/bun.svg';
import denoLogo from '../images/platforms/deno.svg';
import nodejsLogo from '../images/platforms/nodejs.svg';
import vercelLogo from '../images/platforms/vercel.svg';
import awsLambdaLogo from '../images/platforms/aws-lambda.svg';
import awsLogo from '../images/platforms/aws-light.svg';
import supabaseLogo from '../images/platforms/supabase.svg';
import railwayLogo from '../images/platforms/railway.svg';
import freestyleLogo from '../images/platforms/freestyle.svg';
import gcpLogo from '../images/platforms/gcp.svg';
import kubernetesLogo from '../images/platforms/kubernetes.svg';
import hetznerLogo from '../images/platforms/hetzner.svg';
import vmBareMetalLogo from '../images/platforms/vm-bare-metal.svg';

// Client images
import reactLogo from '../images/clients/react.svg';
import javascriptLogo from '../images/clients/javascript.svg';
import typescriptLogo from '../images/clients/typescript.svg';
import nextjsLogo from '../images/clients/nextjs.svg';
import vueLogo from '../images/clients/vue.svg';
import svelteLogo from '../images/clients/svelte.svg';

// Integration images
import honoLogo from '../images/integrations/hono.svg';
import expressLogo from '../images/integrations/express.svg';
import elysiaLogo from '../images/integrations/elysia.svg';
import trpcLogo from '../images/integrations/trpc.svg';
import vitestLogo from '../images/integrations/vitest.svg';
import betterAuthLogo from '../images/integrations/better-auth.svg';
import livestoreLogo from '../images/integrations/livestore.svg';
import zerosyncLogo from '../images/integrations/zerosync.svg';
import tinybaseLogo from '../images/integrations/tinybase.svg';
import yjsLogo from '../images/integrations/yjs.svg';

interface TechLinkProps {
  href: string;
  name: string;
  icon: string;
  alt: string;
  external?: boolean;
  status?: 'coming-soon' | 'help-wanted' | '1-click-deploy';
}

function TechLink({ href, name, icon, alt, external, status }: TechLinkProps) {
  const baseClasses =
    'relative flex items-center gap-2.5 px-3 py-2.5 bg-white/2 border border-white/20 rounded-lg hover:bg-white/10 hover:border-white/40 transition-all duration-200 group';

  const linkProps = external
    ? {
        target: '_blank',
        rel: 'noopener noreferrer'
      }
    : {};

  const statusText =
    status === 'coming-soon'
      ? 'On The Roadmap'
      : status === 'help-wanted'
      ? 'Help Wanted'
      : status === '1-click-deploy'
      ? '1-Click Deploy'
      : '';
  const statusClass =
    status === 'coming-soon'
      ? 'bg-[#ff4f00] text-white'
      : status === 'help-wanted'
      ? 'bg-[#0059ff] text-white'
      : status === '1-click-deploy'
      ? 'bg-[#3ECF8E] text-white'
      : '';

  return (
    <a href={href} className={baseClasses} {...linkProps}>
      {status && (
        <span
          className={`absolute -right-1.5 -top-1.5 rounded px-1.5 py-0.5 text-[10px] ${statusClass} font-medium`}
        >
          {statusText}
        </span>
      )}
      <img src={icon} alt={alt} width={22} height={22} className='object-contain' />
      <span className='text-sm font-medium text-white'>{name}</span>
    </a>
  );
}

interface TechSubSectionProps {
  title?: string;
  children: React.ReactNode;
}

function TechSubSection({ title, children }: TechSubSectionProps) {
  return (
    <div className='mx-auto max-w-full lg:ml-auto lg:max-w-md'>
      {title && <h3 className='font-600 mb-3 text-lg text-white/80'>{title}</h3>}
      <div className='grid grid-cols-1 grid-cols-2 gap-2.5 md:grid-cols-4 lg:grid-cols-2'>{children}</div>
    </div>
  );
}

interface TechSectionGroupProps {
  children: React.ReactNode;
}

function TechSectionGroup({ children }: TechSectionGroupProps) {
  return <div className='grid grid-cols-1 items-start gap-12 lg:grid-cols-2'>{children}</div>;
}

interface TechSectionTextProps {
  heading: string;
  description: string;
  linkText: string;
  linkHref: string;
  linkExternal?: boolean;
}

function TechSectionText({ heading, description, linkText, linkHref, linkExternal }: TechSectionTextProps) {
  const linkProps = linkExternal
    ? {
        target: '_blank',
        rel: 'noopener noreferrer'
      }
    : {};

  return (
    <div className='space-y-6'>
      <h2 className='font-700 text-2xl text-white sm:text-3xl'>{heading}</h2>
      <div className='space-y-4'>
        <p className='font-500 text-lg leading-relaxed text-white/40'>{description}</p>
        <p className='font-500 text-lg leading-relaxed text-white/40'>
          Don't see what you need?{' '}
          <a href={linkHref}
            className='text-white/80 underline transition-colors hover:text-white'
            {...linkProps}
          >
            {linkText}
          </a>
          .
        </p>
      </div>
    </div>
  );
}

interface TechSectionSubsectionsProps {
  children: React.ReactNode;
}

function TechSectionSubsections({ children }: TechSectionSubsectionsProps) {
  return <div className='space-y-8'>{children}</div>;
}

export function TechSection() {
  return (
    <div className='mx-auto max-w-7xl'>
      <div className='space-y-28'>
        <TechSectionGroup>
          <TechSectionText
            heading='Stack Agnostic'
            description="Use Rivet with your existing stack. Works with any framework, runtime, or infrastructure."
            linkText='Add your own'
            linkHref='https://github.com/rivet-dev/rivet/issues/new'
            linkExternal
          />

          <TechSectionSubsections>
            <TechSubSection title='Infrastructure'>
              <TechLink
                href='/docs/connect/vercel'
                name='Vercel'
                icon={vercelLogo}
                alt='Vercel'
                status='1-click-deploy'
              />
              <TechLink
                href='https://railway.com/deploy/rivet'
                name='Railway'
                icon={railwayLogo}
                alt='Railway'
                external
                status='1-click-deploy'
              />
              <TechLink
                href='/docs/connect/kubernetes'
                name='Kubernetes'
                icon={kubernetesLogo}
                alt='Kubernetes'
              />
              <TechLink href='/docs/connect/aws-ecs' name='AWS ECS' icon={awsLogo} alt='AWS ECS' />
              <TechLink
                href='/docs/connect/gcp-cloud-run'
                name='Google Cloud Run'
                icon={gcpLogo}
                alt='Google Cloud Run'
              />
              <TechLink href='/docs/connect/hetzner' name='Hetzner' icon={hetznerLogo} alt='Hetzner' />
              <TechLink
                href='/docs/connect/vm-and-bare-metal'
                name='VM & Bare Metal'
                icon={vmBareMetalLogo}
                alt='VM & Bare Metal'
              />
            </TechSubSection>

            <TechSubSection title='Frameworks'>
              <TechLink href='/docs/clients/react' name='React' icon={reactLogo} alt='React' />
              <TechLink href='/docs/clients/next-js' name='Next.js' icon={nextjsLogo} alt='Next.js' />
              <TechLink
                href='/docs/clients/javascript'
                name='Svelte'
                icon={svelteLogo}
                alt='Svelte'
              />
              <TechLink href='/docs/integrations/hono' name='Hono' icon={honoLogo} alt='Hono' />
              <TechLink href='/docs/integrations/express' name='Express' icon={expressLogo} alt='Express' />
              <TechLink href='/docs/integrations/elysia' name='Elysia' icon={elysiaLogo} alt='Elysia' />
              <TechLink href='/docs/integrations/trpc' name='tRPC' icon={trpcLogo} alt='tRPC' />
            </TechSubSection>

            <TechSubSection title='Runtimes'>
              <TechLink
                href='/docs/actors/quickstart/backend'
                name='Node.js'
                icon={nodejsLogo}
                alt='Node.js'
              />
              <TechLink href='/docs/actors/quickstart/backend' name='Bun' icon={bunLogo} alt='Bun' />
              <TechLink
                href='/docs/actors/quickstart/backend'
                name='Deno'
                icon={denoLogo}
                alt='Deno'
              />
            </TechSubSection>

            <TechSubSection title='Tools'>
              <TechLink href='/docs/integrations/vitest' name='Vitest' icon={vitestLogo} alt='Vitest' />
              <TechLink
                href='/docs'
                name='OpenAPI'
                icon={javascriptLogo}
                alt='OpenAPI'
              />
              <TechLink
                href='/docs'
                name='AsyncAPI'
                icon={javascriptLogo}
                alt='AsyncAPI'
              />
              <TechLink
                href='https://rivet-dev.github.io/rivetkit/'
                name='TypeDoc'
                icon={typescriptLogo}
                alt='TypeDoc'
                external
              />
            </TechSubSection>
          </TechSectionSubsections>
        </TechSectionGroup>

        <TechSectionGroup>
          <TechSectionText
            heading='Works With Your Tools'
            description='Seamlessly integrate Rivet with your favorite frameworks, languages, and tools.'
            linkText='Request an integration'
            linkHref='https://github.com/rivet-dev/rivet/issues/new'
            linkExternal
          />

          <TechSectionSubsections>
            <TechSubSection title='Frontend & Clients'>
              <TechLink
                href='/docs/clients/javascript'
                name='JavaScript'
                icon={javascriptLogo}
                alt='JavaScript'
              />
              <TechLink
                href='/docs/clients/javascript'
                name='TypeScript'
                icon={typescriptLogo}
                alt='TypeScript'
              />
              <TechLink href='/docs/clients/react' name='React' icon={reactLogo} alt='React' />
              <TechLink href='/docs/clients/next-js' name='Next.js' icon={nextjsLogo} alt='Next.js' />
              <TechLink
                href='/docs/clients/javascript'
                name='Svelte'
                icon={svelteLogo}
                alt='Svelte'
              />
              <TechLink
                href='https://github.com/rivet-dev/rivet/issues/new'
                name='Vue'
                icon={vueLogo}
                alt='Vue'
                status='help-wanted'
              />
            </TechSubSection>

            <TechSubSection title='Backend'>
              <TechLink href='/docs/integrations/hono' name='Hono' icon={honoLogo} alt='Hono' />
              <TechLink href='/docs/integrations/express' name='Express' icon={expressLogo} alt='Express' />
              <TechLink href='/docs/integrations/elysia' name='Elysia' icon={elysiaLogo} alt='Elysia' />
              <TechLink href='/docs/integrations/trpc' name='tRPC' icon={trpcLogo} alt='tRPC' />
            </TechSubSection>

            <TechSubSection title='Auth'>
              <TechLink
                href='/docs/integrations/better-auth'
                name='Better Auth'
                icon={betterAuthLogo}
                alt='Better Auth'
              />
            </TechSubSection>

            <TechSubSection title='Testing'>
              <TechLink href='/docs/integrations/vitest' name='Vitest' icon={vitestLogo} alt='Vitest' />
            </TechSubSection>

            <TechSubSection title='AI'>
              <TechLink
                href='https://github.com/rivet-dev/rivet/tree/main/examples/ai-agent'
                name='AI SDK'
                icon={vercelLogo}
                alt='AI SDK'
                status='coming-soon'
              />
            </TechSubSection>

            <TechSubSection title='Sync'>
              <TechLink
                href='https://github.com/rivet-dev/rivet/issues/new'
                name='LiveStore'
                icon={livestoreLogo}
                alt='LiveStore'
                status='coming-soon'
              />
              <TechLink
                href='https://github.com/rivet-dev/rivet/issues/new'
                name='ZeroSync'
                icon={zerosyncLogo}
                alt='ZeroSync'
                status='help-wanted'
              />
              <TechLink
                href='https://github.com/rivet-dev/rivet/issues/new'
                name='TinyBase'
                icon={tinybaseLogo}
                alt='TinyBase'
                status='help-wanted'
              />
              <TechLink
                href='https://github.com/rivet-dev/rivet/tree/main/examples/collaborative-document'
                name='Yjs'
                icon={yjsLogo}
                alt='Yjs'
                status='help-wanted'
              />
            </TechSubSection>
          </TechSectionSubsections>
        </TechSectionGroup>
      </div>
    </div>
  );
}
