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

export default function MockupHome06CalmFocus() {
  return (
    <MockupFrame
      title="Home 06 - Calm Focus"
      subtitle="Minimal home with one primary action"
      backgroundStyle={{
        backgroundImage: 'linear-gradient(180deg, rgba(236, 254, 255, 0.9), rgba(255, 255, 255, 0.95))',
      }}
    >
      <YStack
        padding="$5"
        borderRadius="$card"
        backgroundColor="$surface"
        borderWidth={1}
        borderColor="$borderColor"
        gap="$3"
      >
        <Text fontSize="$6" fontFamily="$display" fontWeight="$8">
          Capture something quiet
        </Text>
        <MockupLabel>One great photo beats five ok ones.</MockupLabel>
        <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
          <XStack alignItems="center" gap="$2">
            <Camera size={18} color="white" />
            <Text fontSize="$3" color="white">
              Open camera
            </Text>
          </XStack>
        </Button>
      </YStack>

      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <Text fontSize="$3" fontWeight="$7">
            Uploads today
          </Text>
          <XStack alignItems="center" gap="$2">
            <CheckCircle2 size={16} color="#22C55E" />
            <Text fontSize="$2" fontWeight="$7">
              12 approved
            </Text>
          </XStack>
        </XStack>
        <MockupLabel>Everything is synced and safe.</MockupLabel>
      </MockupCard>
    </MockupFrame>
  );
}