import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Compass, Image as ImageIcon, Sparkles, UploadCloud } from 'lucide-react';
import MockupFrame from './MockupFrame';
import { MockupCard, MockupLabel } from './MockupPrimitives';

export default function Mockup05CompassHub() {
  return (
    <MockupFrame
      title="Mockup 05 - Compass Hub"
      subtitle="Quadrant navigation around a central action"
    >
      <YStack position="relative" height={360} gap="$3">
        <XStack gap="$3">
          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
            <ImageIcon size={20} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Gallery
            </Text>
            <MockupLabel>Browse moments</MockupLabel>
          </MockupCard>
          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
            <UploadCloud size={20} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Upload
            </Text>
            <MockupLabel>Quick add</MockupLabel>
          </MockupCard>
        </XStack>
        <XStack gap="$3">
          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
            <Sparkles size={20} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Tasks
            </Text>
            <MockupLabel>Earn points</MockupLabel>
          </MockupCard>
          <MockupCard flex={1} height={150} justifyContent="center" alignItems="center">
            <Compass size={20} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Live show
            </Text>
            <MockupLabel>See highlights</MockupLabel>
          </MockupCard>
        </XStack>

        <YStack
          position="absolute"
          top="50%"
          left="50%"
          width={110}
          height={110}
          borderRadius={55}
          backgroundColor="$primary"
          alignItems="center"
          justifyContent="center"
          style={{ transform: 'translate(-50%, -50%)' }}
        >
          <Text fontSize="$4" fontWeight="$8" color="white">
            Capture
          </Text>
        </YStack>
      </YStack>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$3" fontWeight="$7">
              Event compass
            </Text>
            <MockupLabel>Tap any quadrant to jump.</MockupLabel>
          </YStack>
          <Text fontSize="$2" fontWeight="$7">
            4 zones
          </Text>
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}