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

export default function Mockup01CaptureOrbit() {
  return (
    <MockupFrame
      title="Mockup 01 - Capture Orbit"
      subtitle="Full-screen capture hub with orbiting actions"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 50% 10%, rgba(248, 113, 113, 0.18), transparent 55%)',
      }}
    >
      <MockupCard padding="$3">
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$3" fontWeight="$7">
              Event energy
            </Text>
            <MockupLabel>87 moments today</MockupLabel>
          </YStack>
          <XStack alignItems="center" gap="$2">
            <Zap size={16} color="#F97316" />
            <Text fontSize="$3" fontWeight="$7">
              Live
            </Text>
          </XStack>
        </XStack>
      </MockupCard>

      <YStack alignItems="center" gap="$4">
        <YStack
          width={260}
          height={260}
          borderRadius={130}
          backgroundColor="$surface"
          borderWidth={1}
          borderColor="$borderColor"
          alignItems="center"
          justifyContent="center"
          gap="$2"
          style={{ boxShadow: '0 12px 40px rgba(15, 23, 42, 0.08)' }}
        >
          <Camera size={32} color="#0F172A" />
          <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
            Tap to capture
          </Text>
          <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
            Capture
          </Button>
        </YStack>

        <XStack gap="$3">
          {[
            { icon: <UploadCloud size={20} color="#0F172A" />, label: 'Upload' },
            { icon: <Sparkles size={20} color="#0F172A" />, label: 'Prompt' },
            { icon: <Camera size={20} color="#0F172A" />, label: 'Burst' },
          ].map((item) => (
            <YStack
              key={item.label}
              width={72}
              height={72}
              borderRadius={36}
              backgroundColor="$surface"
              borderWidth={1}
              borderColor="$borderColor"
              alignItems="center"
              justifyContent="center"
              gap="$1"
            >
              {item.icon}
              <Text fontSize="$2" fontWeight="$6">
                {item.label}
              </Text>
            </YStack>
          ))}
        </XStack>
      </YStack>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$3" fontWeight="$7">
              Upload queue
            </Text>
            <MockupLabel>3 queued, 1 sending</MockupLabel>
          </YStack>
          <Button size="$3" backgroundColor="$surface" borderRadius="$pill" borderWidth={1} borderColor="$borderColor">
            View
          </Button>
        </XStack>
      </MockupCard>
    </MockupFrame>
  );
}