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

export default function MockupHome01PulseHero() {
  return (
    <MockupFrame
      title="Home 01 - Pulse Hero"
      subtitle="Live stats + big capture call-to-action"
      backgroundStyle={{
        backgroundImage: 'radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.16), transparent 50%)',
      }}
    >
      <MockupCard>
        <XStack alignItems="center" justifyContent="space-between">
          <YStack gap="$1">
            <Text fontSize="$3" fontWeight="$7">
              Sofia + Luca
            </Text>
            <MockupLabel>Reception in progress</MockupLabel>
          </YStack>
          <XStack alignItems="center" gap="$2">
            <Zap size={16} color="#F97316" />
            <Text fontSize="$3" fontWeight="$7">
              Live
            </Text>
          </XStack>
        </XStack>
      </MockupCard>

      <YStack
        padding="$5"
        borderRadius="$card"
        backgroundColor="$surface"
        borderWidth={1}
        borderColor="$borderColor"
        alignItems="center"
        gap="$3"
      >
        <Camera size={28} color="#0F172A" />
        <Text fontSize="$7" fontFamily="$display" fontWeight="$8">
          Capture the next moment
        </Text>
        <MockupLabel>Share it instantly with the room.</MockupLabel>
        <Button size="$4" backgroundColor="$primary" borderRadius="$pill">
          Start capture
        </Button>
      </YStack>

      <XStack gap="$3">
        <MockupCard flex={1} alignItems="center">
          <Text fontSize="$6" fontWeight="$8">
            128
          </Text>
          <MockupLabel>Photos today</MockupLabel>
        </MockupCard>
        <MockupCard flex={1} alignItems="center">
          <Users size={18} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$7">
            54 guests
          </Text>
        </MockupCard>
      </XStack>
    </MockupFrame>
  );
}