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

export default function MockupHome07MomentStack() {
  return (
    <MockupFrame
      title="Home 07 - Moment Stack"
      subtitle="Stacked cards for rapid capture"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 70% 0%, rgba(14, 165, 233, 0.15), transparent 50%)',
      }}
    >
      <MockupCard>
        <Text fontSize="$5" fontFamily="$display" fontWeight="$8">
          Moment stack
        </Text>
        <MockupLabel>Start at the top and keep capturing.</MockupLabel>
      </MockupCard>

      <YStack height={320} position="relative">
        <MockupCard
          height={220}
          position="absolute"
          left={0}
          right={0}
          style={{ transform: 'translateY(28px) rotate(-2deg)' }}
        >
          <Text fontSize="$4" fontWeight="$7">
            Prompt: hands in the air
          </Text>
        </MockupCard>
        <MockupCard
          height={230}
          position="absolute"
          left={0}
          right={0}
          style={{ transform: 'translateY(14px) rotate(1deg)' }}
        >
          <Text fontSize="$4" fontWeight="$7">
            Prompt: candid laugh
          </Text>
        </MockupCard>
        <MockupCard height={240} position="absolute" left={0} right={0}>
          <XStack alignItems="center" justifyContent="space-between">
            <Text fontSize="$5" fontWeight="$8">
              Prompt: dance floor
            </Text>
            <ArrowUpRight size={18} color="#0F172A" />
          </XStack>
          <MockupLabel>Tap to start this capture.</MockupLabel>
          <XStack alignItems="center" gap="$2">
            <Camera size={18} color="#0F172A" />
            <Text fontSize="$3" fontWeight="$7">
              Open camera
            </Text>
          </XStack>
        </MockupCard>
      </YStack>
    </MockupFrame>
  );
}