hanzo.ai/components/creative/CreativeLanding.tsx

'use client'

import { Band, Card, Head, Words } from '@/components/marketing/band'
import { Box, XStack } from '@/components/ui'
import { Grid } from '@hanzo/ui/grid'
import { Action } from '@hanzo/ui/marketing'
import {
  Sparkles,
  ArrowRight,
  Film,
  Image as ImageIcon,
  Box as Box3dIcon,
  Volume2,
  Mic,
  Music,
} from 'lucide-react'
import type { CreativeModel } from '@/lib/creative-models'
import { Splash } from '@/components/family/Splash'
import { CreativeSurface } from './CreativeSurface'

/** The model's kind as an icon, in the hero's light ink on either theme. */
function ModalityIcon({ modality }: { modality: CreativeModel['modality'] }) {
  switch (modality) {
    case 'video':
      return <Film width={18} height={18} color="var(--white-80)" />
    case 'image':
      return <ImageIcon width={18} height={18} color="var(--white-80)" />
    case '3d':
      return <Box3dIcon width={18} height={18} color="var(--white-80)" />
    case 'foley':
      return <Volume2 width={18} height={18} color="var(--white-80)" />
    case 'voice':
      return <Mic width={18} height={18} color="var(--white-80)" />
    case 'music':
      return <Music width={18} height={18} color="var(--white-80)" />
    default:
      return <Sparkles width={18} height={18} color="var(--white-80)" />
  }
}

/**
 * Below the picture: the studio the model works in, what it does, where it is
 * used, and how to try it while its samples are still in blind review. One
 * ground, one card, no hue: the picture above is the colour on this page.
 */
export function CreativeLanding({ model }: { model: CreativeModel }) {
  return (
    <Box width="100%" $platform-web={{ color: 'var(--foreground)' }}>
      <Splash
        slug={model.slug}
        kind={model.modalityLabel}
        icon={<ModalityIcon modality={model.modality} />}
        name={model.release}
        line={model.tagline}
        lede={model.lede}
        primary={{ label: 'Request access', href: '/beta?program=research' }}
        secondary={{ label: 'Try it in Studio', href: '/studio' }}
        video={model.slug === 'koma' ? '/videos/koma-demo.mp4' : undefined}
      />

      {/* The studio surface the model works in. */}
      <Box id="studio" px="$4" $sm={{ px: '$5' }} $lg={{ px: '$6' }}>
        <CreativeSurface model={model} />
      </Box>

      <Band id="capabilities" measure={1080}>
        <Head eyebrow="Capabilities" title={`What ${model.name} does`} />
        <Grid columns={{ min: 280, max: 2 }} gap={16}>
          {model.capabilities.map((cap) => (
            <Card key={cap.title} p="$6">
              <Words render="h3" fontSize="$4" lineHeight="$4" weight="500">
                {cap.title}
              </Words>
              <Words render="p" mt="$2" fontSize="$2" lineHeight="$3" color="var(--text-secondary)">
                {cap.description}
              </Words>
            </Card>
          ))}
        </Grid>
      </Band>

      <Band id="uses" measure={1080}>
        <Head eyebrow="In production" title={`Where ${model.name} fits`} />
        <Grid columns={{ min: 260, max: 3 }} gap={16}>
          {model.use_cases.map((uc) => (
            <Card key={uc.title} p="$6">
              <Words render="p" fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                {uc.industry}
              </Words>
              <Words render="h3" mt="$3" fontSize="$4" lineHeight="$4" weight="500">
                {uc.title}
              </Words>
              <Words render="p" mt="$2" fontSize="$2" lineHeight="$3" color="var(--text-secondary)">
                {uc.description}
              </Words>
            </Card>
          ))}
        </Grid>
      </Band>

      <Band id="access" measure={760}>
        <Head
          eyebrow="Research preview"
          title={`Try ${model.name} on your own work`}
          lede={`Samples of ${model.name}'s own output publish only after blind review, so the pictures here are illustrations. A studio can apply now to test it in its own pipeline.`}
        >
          <XStack justify="center" gap="$3" flexWrap="wrap" mt="$2">
            <Action href="/beta?program=research" fill>
              Request access
              <ArrowRight width={16} height={16} />
            </Action>
            <Action href="/models">Every model</Action>
          </XStack>
        </Head>
      </Band>
    </Box>
  )
}