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

const mockups = [
  { id: '1', title: 'Pulse Hero', description: 'Live stats + big capture call-to-action.' },
  { id: '2', title: 'Story Rings', description: 'Circular quick actions with story chips.' },
  { id: '3', title: 'Live Stream', description: 'Highlight reel + action strip.' },
  { id: '4', title: 'Task Sprint', description: 'Prompt ladder + progress meter.' },
  { id: '5', title: 'Gallery First', description: 'Grid preview + quick filters.' },
  { id: '6', title: 'Calm Focus', description: 'Minimal home with one primary action.' },
  { id: '7', title: 'Moment Stack', description: 'Stacked cards for rapid capture.' },
  { id: '8', title: 'Countdown Stage', description: 'Event timing + live show entry.' },
  { id: '9', title: 'Share Hub', description: 'Invite + QR + guest sharing tools.' },
  { id: '10', title: 'Moodboard', description: 'Palette + prompts to set the vibe.' },
];

export default function MockupsHomeIndexScreen() {
  const navigate = useNavigate();

  return (
    <MockupFrame
      title="Home concepts"
      subtitle="10 start screen ideas for the new guest PWA"
    >
      <MockupCard padding="$3">
        <XStack alignItems="center" gap="$2">
          <Home size={18} color="#0F172A" />
          <Text fontSize="$4" fontWeight="$8">
            Start screen concepts
          </Text>
        </XStack>
        <MockupLabel>Pick one as the north star for v2.</MockupLabel>
      </MockupCard>

      <YStack gap="$3">
        {mockups.map((mockup) => (
          <MockupCard key={mockup.id} gap="$2">
            <XStack alignItems="center" justifyContent="space-between">
              <Text fontSize="$5" fontWeight="$8" fontFamily="$display">
                {mockup.title}
              </Text>
              <Button
                size="$3"
                backgroundColor="$primary"
                borderRadius="$pill"
                onPress={() => navigate(`/mockups/home/${mockup.id}`)}
              >
                <XStack alignItems="center" gap="$2">
                  <Text fontSize="$3" color="white">
                    View
                  </Text>
                  <ArrowRight size={16} color="white" />
                </XStack>
              </Button>
            </XStack>
            <MockupLabel>{mockup.description}</MockupLabel>
          </MockupCard>
        ))}
      </YStack>
    </MockupFrame>
  );
}