Get in Touch

Have questions? We'd love to hear from you. Send us a message and we'll respond as soon as possible.

Email Send us an email anytime hello@aicardstudio.com Phone Mon-Fri 9am-5pm EST +1 (234) 567-890 Live Chat Chat with our team

Send us a message Fill out the form below and we'll get back to you shortly

Name

Subject

Message

</div>
                <Button type="submit" className="w-full">
                  Send Message
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </main>

<SiteFooter />
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  /* Softened background from 0.12 to 0.16 for a less harsh dark */
  --background: oklch(0.16 0 0);
  --foreground: oklch(0.98 0 0);
  /* Slightly lighter card background for better contrast */
  --card: oklch(0.2 0 0);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.2 0 0);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.88 0.16 95);
  --primary-foreground: oklch(0.18 0 0);
  /* Softened secondary/muted colors */
  --secondary: oklch(0.24 0 0);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.24 0 0);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.88 0.16 95);
  --accent-foreground: oklch(0.18 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  /* Softened border color */
  --border: oklch(0.28 0 0);
  --input: oklch(0.24 0 0);
  --ring: oklch(0.88 0.16 95);
  --chart-1: oklch(0.75 0.18 145);
  --chart-2: oklch(0.68 0.16 145);
  --chart-3: oklch(0.55 0.12 145);
  --chart-4: oklch(0.45 0.08 145);
  --chart-5: oklch(0.35 0.04 145);
  --radius: 0.75rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Adding horizontal scroll animation for card showcase banner */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
  animation-play-state: paused;
}
[V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { CheckCircle, Home, Truck, Mail } from "lucide-react"
import Link from "next/link"

export default function SuccessPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <div className="text-center space-y-6 max-w-sm">
        <div className="mx-auto w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center">
          <CheckCircle className="h-8 w-8 text-green-500" />
        </div>

<div className="space-y-2">
          <h1 className="text-2xl font-bold">Order Confirmed!</h1>
          <p className="text-muted-foreground text-sm">
            Thank you for your order. Your personalised card is being prepared.
          </p>
        </div>

<div className="bg-card rounded-xl p-4 text-left space-y-3">
          <h2 className="font-semibold text-sm">What happens next?</h2>
          <div className="space-y-2">
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                <span className="text-xs font-bold text-primary">1</span>
              </div>
              <p className="text-xs text-muted-foreground">Your card is sent to our print partner</p>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Truck className="h-3 w-3 text-primary" />
              </div>
              <p className="text-xs text-muted-foreground">Printed on premium card stock and posted within 1-2 days</p>
            </div>
            <div className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                <Mail className="h-3 w-3 text-primary" />
              </div>
              <p className="text-xs text-muted-foreground">Arrives at your door within 2-5 business days</p>
            </div>
          </div>
        </div>

<Button asChild className="w-full rounded-full">
          <Link href="/">
            <Home className="mr-2 h-4 w-4" />
            Create Another Card
          </Link>
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]json:file="components.json" isMerged="true"
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
'use client'

import * as React from 'react'
import {
  ThemeProvider as NextThemesProvider,
  type ThemeProviderProps,
} from 'next-themes'

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'

const buttonVariants = cva(
  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
        destructive:
          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
        outline:
          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost:
          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
        icon: 'size-9',
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  },
)

function Button({
  className,
  variant,
  size,
  asChild = false,
  ...props
}: React.ComponentProps<'button'> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot : 'button'

return (
    <Comp
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card"
      className={cn(
        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
        className,
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
        className,
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-title"
      className={cn('leading-none font-semibold', className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-description"
      className={cn('text-muted-foreground text-sm', className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
        className,
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-content"
      className={cn('px-6', className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="card-footer"
      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from 'react'

import { cn } from '@/lib/utils'

function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
        className,
      )}
      {...props}
    />
  )
}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
'use client'

import * as React from 'react'
import * as LabelPrimitive from '@radix-ui/react-label'

import { cn } from '@/lib/utils'

function Label({
  className,
  ...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
  return (
    <LabelPrimitive.Root
      data-slot="label"
      className={cn(
        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        className,
      )}
      {...props}
    />
  )
}

export { Label }
[V0_FILE]typescript:file="lib/card-storage.ts" isMerged="true"
"use client"

export interface CardGeneration {
  id: string
  createdAt: string
  occasion: string
  keywords: string[]
  cardType: string
  artStyle: string
  recipientName: string
  hasReferenceImage: boolean
  cards: Array<{ id: number; imageUrl: string; title: string }>
}

const STORAGE_KEY = "stiffpaper_generations"

export function saveGeneration(generation: Omit<CardGeneration, "id" | "createdAt">): CardGeneration {
  const newGeneration: CardGeneration = {
    ...generation,
    id: Date.now().toString(),
    createdAt: new Date().toISOString(),
  }

const existing = getGenerations()
  const updated = [newGeneration, ...existing]

if (typeof window !== "undefined") {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
  }

return newGeneration
}

export function getGenerations(): CardGeneration[] {
  if (typeof window === "undefined") return []

try {
    const stored = localStorage.getItem(STORAGE_KEY)
    return stored ? JSON.parse(stored) : []
  } catch {
    return []
  }
}

export function deleteGeneration(id: string): void {
  const existing = getGenerations()
  const updated = existing.filter((g) => g.id !== id)

if (typeof window !== "undefined") {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(updated))
  }
}

export function clearAllGenerations(): void {
  if (typeof window !== "undefined") {
    localStorage.removeItem(STORAGE_KEY)
  }
}
[V0_FILE]typescript:file="lib/products.ts" isMerged="true"
export interface Product {
  id: string
  name: string
  description: string
  priceInPence: number
}

export const PRODUCTS: Product[] = [
  {
    id: "stiff-paper-card",
    name: "Stiff Paper Card",
    description: "AI-generated personalised greeting card, printed and posted to your recipient",
    priceInPence: 599, // Updated from 499 to 599
  },
]
[V0_FILE]typescript:file="lib/stripe.ts" isMerged="true"
import "server-only"

import Stripe from "stripe"

const stripeSecretKey = process.env.STRIPE_SECRET_KEY_OVERRIDE || process.env.STRIPE_SECRET_KEY!

console.log(
  "[v0] Stripe key source:",
  process.env.STRIPE_SECRET_KEY_OVERRIDE ? "OVERRIDE (your account)" : "DEFAULT (v0 sandbox)",
)

export const stripe = new Stripe(stripeSecretKey)
[V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true"
import "server-only"
import { createServerClient } from "@supabase/ssr"
import { cookies } from "next/headers"

export async function createClient() {
  const cookieStore = await cookies()

const supabaseUrl = process.env.SUPABASE_URL!
  const supabaseKey = process.env.SUPABASE_ANON_KEY || process.env.SUPABASE_PUBLISHABLE_KEY!

if (!supabaseUrl || !supabaseKey) {
    throw new Error(`Missing Supabase environment variables. URL: ${!!supabaseUrl}, Key: ${!!supabaseKey}`)
  }

return createServerClient(supabaseUrl, supabaseKey, {
    cookies: {
      getAll() {
        return cookieStore.getAll()
      },
      setAll(cookiesToSet) {
        try {
          cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options))
        } catch {
          // Ignore - called from Server Component
        }
      },
    },
  })
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]javascript:file="next.config.mjs" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
 
}

export default nextConfig
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "eslint .",
    "start": "next start"
  },
  "dependencies": {
    "@fal-ai/serverless-client": "0.15.0",
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@stripe/react-stripe-js": "5.4.1",
    "@stripe/stripe-js": "8.5.3",
    "@supabase/ssr": "0.8.0",
    "@supabase/supabase-js": "latest",
    "@vercel/analytics": "1.3.1",
    "@vercel/blob": "2.0.0",
    "ai": "5.0.113",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "openai": "6.10.0",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "server-only": "0.0.1",
    "sonner": "^1.7.4",
    "stripe": "20.0.0",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "ws": "latest",
    "zod": "3.25.76",
    "resend": "6.6.0",
    "@fal-ai/client": "1.8.0",
    "@resvg/resvg-js": "2.6.2",
    "sharp": "0.34.5",
    "satori": "0.18.3",
    "puppeteer-core": "24.34.0",
    "@sparticuz/chromium": "143.0.0",
    "html-to-image": "1.11.13"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]javascript:file="postcss.config.mjs" isMerged="true"
/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

export default config
[V0_FILE]sql:file="scripts/001_create_cards_table.sql" isMerged="true"
-- Create cards table for public gallery
CREATE TABLE IF NOT EXISTS public.cards (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  image_url TEXT NOT NULL,
  occasion TEXT,
  art_style TEXT,
  recipient_name TEXT,
  keywords TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE public.cards ENABLE ROW LEVEL SECURITY;

-- Allow anyone to view cards (public gallery)
CREATE POLICY "Anyone can view cards" ON public.cards 
  FOR SELECT USING (true);

-- Allow inserts from service role only (server-side)
CREATE POLICY "Service role can insert cards" ON public.cards 
  FOR INSERT WITH CHECK (true);
[V0_FILE]css:file="styles/globals.css" isMerged="true"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@theme inline {
  --font-sans: 'Geist', 'Geist Fallback';
  --font-mono: 'Geist Mono', 'Geist Mono Fallback';
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]json:file="tsconfig.json" isMerged="true"
{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "target": "ES6",
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
[V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" isMerged="true"
[V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" isMerged="true"
[V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" isMerged="true"
[V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" isMerged="true"
[V0_FILE]jpeg:file="public/logo-text.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/uwTnn4f7fNll7SA87rK5Xs/public/logo-text.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/logo.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/orCUS-AtUc1Bh6d0Pw5uMj/public/logo.jpeg" isMerged="true"
[V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" isMerged="true"
[V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" isMerged="true"
[V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" isMerged="true"
[V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_JdxWpqO2ush6e1C5AtABZXtdbKW1/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg" isMerged="true"
[V0_FILE]jpeg:file="public/images/c6dd5410-1f90-4cad-97b7.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/c6dd5410-1f90-4cad-97b7-cd5a6acdb2b2.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="app/wip/page.tsx" isEdit="true" isMerged="true"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"

export default function WIPPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1 py-12 px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-2xl md:text-3xl font-bold text-center mb-2">Work In Progress</h1>
          <p className="text-muted-foreground text-center mb-8">Preview designs and features under development</p>

{/* Card Back Design Preview */}
          <div className="bg-muted/30 rounded-lg p-6 md:p-8">
            <h2 className="text-xl font-semibold mb-4">Card Back Design</h2>
            <p className="text-muted-foreground mb-6">
              This is the branding that will appear on the back of every printed card.
            </p>

<div className="border border-border rounded-lg overflow-hidden shadow-lg bg-white">
              <p className="text-xs text-muted-foreground text-center py-2 border-b">Card Back Design Preview</p>
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/api/card-back"
                alt="Card Back Design Preview"
                className="w-full aspect-square object-contain"
              />
            </div>

<div className="mt-6 text-sm text-muted-foreground">
              <p className="font-semibold">Features:</p>
              <ul className="list-disc list-inside mt-2 space-y-1">
                <li>White background (saves ink)</li>
                <li>Stiff Paper logo and branding</li>
                <li>British flag</li>
                <li>Website URL: stiffpaper.co.uk</li>
              </ul>
            </div>
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  )
}
[V0_FILE]typescript:file="scripts/check-prodigi-product.ts" isMerged="true"
// Script to check Prodigi product details and print areas for greeting card SKU

const PRODIGI_API_URL =
  process.env.PRODIGI_USE_PRODUCTION === "true"
    ? "https://api.prodigi.com/v4.0"
    : "https://api.sandbox.prodigi.com/v4.0"

const GREETING_CARD_SKU = "GLOBAL-GRE-GLOS-6X6-BLA"

async function checkProdigiProduct() {
  const apiKey = process.env.PRODIGI_API_KEY

if (!apiKey) {
    throw new Error("PRODIGI_API_KEY environment variable is not set")
  }

console.log("Checking Prodigi product details for SKU:", GREETING_CARD_SKU)
  console.log("API URL:", PRODIGI_API_URL)

const response = await fetch(`${PRODIGI_API_URL}/products/${GREETING_CARD_SKU}`, {
    method: "GET",
    headers: {
      "X-API-Key": apiKey,
    },
  })

if (!response.ok) {
    const error = await response.json()
    throw new Error(`Prodigi API error: ${JSON.stringify(error)}`)
  }

const data = await response.json()

console.log("\n=== PRODUCT DETAILS ===")
  console.log(JSON.stringify(data, null, 2))

if (data.product?.printAreas) {
    console.log("\n=== PRINT AREAS ===")
    data.product.printAreas.forEach((area: { name: string; width: number; height: number }) => {
      console.log(`- ${area.name}: ${area.width}x${area.height}`)
    })
  }
}

checkProdigiProduct().catch(console.error)
[V0_FILE]typescript:file="app/api/webhooks/stripe/test/route.ts" isMerged="true"
import { NextResponse } from "next/server"

export async function GET() {
  return NextResponse.json({
    webhookSecretConfigured: !!process.env.STRIPE_WEBHOOK_SECRET,
    prodigiApiKeyConfigured: !!process.env.PRODIGI_API_KEY,
    prodigiUseProduction: process.env.PRODIGI_USE_PRODUCTION,
    baseUrl: process.env.NEXT_PUBLIC_BASE_URL,
    message:
      "Check your Stripe dashboard to ensure the webhook is configured at: https://stiffpaper.co.uk/api/webhooks/stripe",
  })
}
[V0_FILE]typescriptreact:file="components/checkout.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Loader2 } from "lucide-react"
import { startCheckoutSession } from "@/app/actions/stripe"

interface DeliveryAddress {
  name: string
  line1: string
  line2: string
  city: string
  postcode: string
}

interface CheckoutProps {
  productId: string
  cardId: string
  cardImageUrl: string
  recipientName?: string
  cardMessage?: string
  deliveryAddress?: DeliveryAddress
  deliveryType?: "post-to-me" | "send-direct"
}

export default function Checkout({ productId, cardId, cardImageUrl, recipientName, cardMessage, deliveryAddress, deliveryType }: CheckoutProps) {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleCheckout = async () => {
    setIsLoading(true)
    setError(null)
    try {
      const checkoutUrl = await startCheckoutSession(productId, cardId, cardImageUrl, recipientName, cardMessage, deliveryAddress, deliveryType)
      console.log("[v0] Checkout URL:", checkoutUrl)
      if (checkoutUrl) {
        window.location.href = checkoutUrl
      } else {
        setError("Failed to create checkout session")
        setIsLoading(false)
      }
    } catch (error) {
      console.error("[v0] Checkout error:", error)
      setError(error instanceof Error ? error.message : "Failed to start checkout")
      setIsLoading(false)
    }
  }

return (
    <div className="space-y-2">
      <Button
        onClick={handleCheckout}
        disabled={isLoading}
        className="w-full h-12 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-semibold text-sm"
      >
        {isLoading ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Loading...
          </>
        ) : (
          "Pay with Apple Pay / Card"
        )}
      </Button>
      {error && <p className="text-xs text-red-500 text-center">{error}</p>}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/card-back-png/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    console.log("[v0] Generating card back PNG with Stiffpaper branding")

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"

// Fetch the SVG from the existing endpoint
    const svgResponse = await fetch(`${baseUrl}/api/card-back`)
    const svgText = await svgResponse.text()

// Return SVG for now - Prodigi should handle SVG to PNG conversion
    // If Prodigi doesn't support SVG, we'll need to use a different approach
    return new NextResponse(svgText, {
      headers: {
        "Content-Type": "image/svg+xml",
        "Cache-Control": "no-cache, no-store, must-revalidate",
      },
    })
  } catch (error) {
    console.error("[v0] Error generating card back PNG:", error)
    return NextResponse.json({ error: "Failed to generate card back" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/process-steps.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Sparkles, Wand2, Heart, Download } from "lucide-react"

const steps = [
  {
    icon: Sparkles,
    title: "Choose Occasion",
    description: "Select from birthday, anniversary, or any special moment",
  },
  {
    icon: Wand2,
    title: "Describe Your Vision",
    description: "Add keywords and pick your preferred style and tone",
  },
  {
    icon: Heart,
    title: "AI Creates Magic",
    description: "3 Personalised unique card designs instantly",
  },
  {
    icon: Download,
    title: "Pay & Post",
    description: "Pick your favorite, Purchase and Post",
  },
]

export function ProcessSteps() {
  return (
    <div className="grid md:grid-cols-4 gap-8 md:gap-4 lg:gap-8">
      {steps.map((step, index) => {
        const Icon = step.icon
        return (
          <div key={index} className="relative flex flex-col items-center text-center">
            <div className="h-12 w-12 md:h-16 md:w-16 rounded-full bg-primary/10 flex items-center justify-center mb-3 md:mb-4 border border-primary/20">
              <Icon className="h-6 w-6 md:h-8 md:w-8 text-primary" />
            </div>
            <h3 className="font-semibold text-sm md:text-base mb-2">{step.title}</h3>
            <p className="text-xs md:text-sm text-muted-foreground leading-relaxed">{step.description}</p>
            {index < steps.length - 1 && (
              <div className="hidden md:block absolute top-6 md:top-8 left-[60%] w-[80%] h-[2px] bg-border" />
            )}
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescript:file="app/api/checkout-preview/route.ts" isMerged="true"
export const runtime = "edge"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const imageUrl = searchParams.get("imageUrl")

if (!imageUrl) {
    return new Response("Missing imageUrl parameter", { status: 400 })
  }

// Create a larger preview image with the card centered
  const svg = `
    <svg width="1200" height="1200" xmlns="http://www.w3.org/2000/svg">
      <rect width="1200" height="1200" fill="#ffffff"/>
      <image 
        href="${imageUrl}" 
        x="100" 
        y="100" 
        width="1000" 
        height="1000"
        preserveAspectRatio="xMidYMid meet"
      />
    </svg>
  `

return new Response(svg, {
    headers: {
      "Content-Type": "image/svg+xml",
      "Cache-Control": "public, max-age=31536000, immutable",
    },
  })
}
[V0_FILE]typescriptreact:file="app/card/[id]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { notFound } from "next/navigation"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { createClient } from "@/lib/supabase/server"
import { SingleCardView } from "@/components/single-card-view"
import type { Metadata } from "next"

interface CardPageProps {
  params: Promise<{ id: string }>
}

export async function generateMetadata({ params }: CardPageProps): Promise<Metadata> {
  const { id } = await params
  const supabase = await createClient()

const { data: card } = await supabase.from("cards").select("*").eq("id", id).single()

if (!card) {
    return {
      title: "Card Not Found | Stiff Paper",
    }
  }

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"
  const cardUrl = `${baseUrl}/card/${id}`
  const cardTitle = card.recipient_name
    ? `${card.occasion || "Card"} for ${card.recipient_name} | Stiff Paper`
    : `${card.occasion || "Card"} | Stiff Paper`

return {
    title: cardTitle,
    description: "AI-powered greeting cards, beautifully printed and posted across the UK",
    openGraph: {
      title: cardTitle,
      description: "Check out this stunning card from Stiff Paper!",
      url: cardUrl,
      siteName: "Stiff Paper",
      images: [
        {
          url: card.image_url,
          width: 1200,
          height: 1200,
          alt: card.occasion || "Card",
        },
      ],
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: cardTitle,
      description: "Check out this stunning card from Stiff Paper!",
      images: [card.image_url],
    },
  }
}

export default async function CardPage({ params }: CardPageProps) {
  const { id } = await params
  const supabase = await createClient()

const { data: card, error } = await supabase.from("cards").select("*").eq("id", id).single()

if (error || !card) {
    notFound()
  }

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />

<SiteFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/site-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="w-full max-w-4xl lg:max-w-6xl mx-auto flex h-16 items-center justify-between px-4 md:px-6">
        <Link href="/" className="flex items-center gap-2 md:gap-3 hover:opacity-80 transition-opacity">
          <div className="relative h-8 w-8 md:h-10 md:w-10 flex-shrink-0">
            <Image src="/logo.jpeg" alt="Stiff Paper Logo" fill className="object-contain" />
          </div>
          <span className="hidden md:inline text-lg md:text-xl font-bold">Stiff Paper</span>
        </Link>

{/* Desktop Navigation */}
        <nav className="hidden md:flex items-center gap-6">
          <Link href="/" className="text-sm font-medium text-foreground hover:text-primary transition-colors">
            Home
          </Link>
          <Link
            href="/library"
            className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
          >
            Library
          </Link>
        </nav>

<Button asChild className="hidden md:flex">
          <Link href="#create">Get Started</Link>
        </Button>

<nav className="flex md:hidden items-center gap-0 relative z-50 pointer-events-auto">
          <Link
            href="/"
            className="text-sm font-medium text-foreground px-3 py-3 min-h-[44px] min-w-[44px] flex items-center justify-center active:bg-muted/50 rounded-md"
          >
            Home
          </Link>
          <Link
            href="/library"
            className="text-sm font-medium text-muted-foreground px-3 py-3 min-h-[44px] min-w-[44px] flex items-center justify-center active:bg-muted/50 rounded-md"
          >
            Library
          </Link>
        </nav>
      </div>
    </header>
  )
}
[V0_FILE]typescript:file="app/actions/stripe.ts" isMerged="true"
"use server"

import { stripe } from "@/lib/stripe"
import { PRODUCTS } from "@/lib/products"

interface DeliveryAddress {
  name: string
  line1: string
  line2: string
  city: string
  postcode: string
}

export async function startCheckoutSession(
  productId: string,
  cardId: string,
  cardImageUrl: string,
  recipientName?: string,
  cardMessage?: string,
  deliveryAddress?: DeliveryAddress,
  deliveryType?: "post-to-me" | "send-direct",
) {

const product = PRODUCTS.find((p) => p.id === productId)
  if (!product) {
    console.error("[v0] Product not found:", productId)
    throw new Error(`Product with id "${productId}" not found`)
  }

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"
  const largerPreviewUrl = `${baseUrl}/api/checkout-preview?imageUrl=${encodeURIComponent(cardImageUrl)}`

try {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card", "link"],
      line_items: [
        {
          price_data: {
            currency: "gbp",
            product_data: {
              name: product.name,
              description: recipientName
                ? `Personalised card for ${recipientName} - printed & posted`
                : product.description,
              images: [cardImageUrl],
            },
            unit_amount: product.priceInPence,
          },
          quantity: 1,
        },
        {
          price_data: {
            currency: "gbp",
            product_data: {
              name: "Shipping",
              description: "UK delivery",
            },
            unit_amount: 215, // £2.15 in pence
          },
          quantity: 1,
        },
      ],
      mode: "payment",
      metadata: {
        cardId,
        cardImageUrl,
        recipientName: recipientName || "",
        cardMessage: cardMessage || "",
        deliveryType: deliveryType || "post-to-me",
        deliveryName: deliveryAddress?.name || "",
        deliveryLine1: deliveryAddress?.line1 || "",
        deliveryLine2: deliveryAddress?.line2 || "",
        deliveryCity: deliveryAddress?.city || "",
        deliveryPostcode: deliveryAddress?.postcode || "",
      },
      shipping_address_collection: {
        allowed_countries: ["GB"],
      },
      success_url: `${process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"}`,
    })

console.log("[v0] Checkout session created:", session.id)
    return session.url
  } catch (error) {
    console.error("[v0] Stripe error:", error)
    throw error
  }
}
[V0_FILE]typescript:file="lib/resend.ts" isMerged="true"
import { Resend } from "resend"

export const resend = new Resend(process.env.RESEND_API_KEY)
[V0_FILE]typescriptreact:file="components/emails/order-confirmation.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type * as React from "react"

interface OrderConfirmationEmailProps {
  customerName: string
  recipientName: string
  cardImageUrl: string
  shippingAddress: {
    line1: string
    line2?: string
    city: string
    postalCode: string
    country: string
  }
  orderDate: string
}

export const OrderConfirmationEmail: React.FC<OrderConfirmationEmailProps> = ({
  customerName,
  recipientName,
  cardImageUrl,
  shippingAddress,
  orderDate,
}) => {
  return (
    <div style={{ fontFamily: "Arial, sans-serif", maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
      {/* Header */}
      <div style={{ textAlign: "center", marginBottom: "30px" }}>
        <img
          src="https://stiffpaper.co.uk/logo.jpeg"
          alt="Stiff Paper"
          style={{ width: "60px", height: "60px", marginBottom: "10px" }}
        />
        <h1 style={{ color: "#1a1a1a", fontSize: "28px", margin: "0 0 10px 0" }}>Stiff Paper</h1>
        <p style={{ color: "#666", fontSize: "14px", margin: 0 }}>Personalised Greeting Cards</p>
      </div>

{/* Order Confirmation */}
      <div style={{ backgroundColor: "#f9f9f9", borderRadius: "8px", padding: "30px", marginBottom: "30px" }}>
        <h2 style={{ color: "#1a1a1a", fontSize: "22px", margin: "0 0 20px 0", textAlign: "center" }}>
          Order Confirmed!
        </h2>
        <p style={{ color: "#333", fontSize: "16px", lineHeight: "1.6", margin: "0 0 15px 0" }}>Hi {customerName},</p>
        <p style={{ color: "#333", fontSize: "16px", lineHeight: "1.6", margin: "0 0 15px 0" }}>
          Thank you for your order! Your personalised greeting card is being prepared and will be on its way soon.
        </p>
        <p style={{ color: "#666", fontSize: "14px", margin: 0 }}>Order Date: {orderDate}</p>
      </div>

{/* Card Preview */}
      <div style={{ marginBottom: "30px", textAlign: "center" }}>
        <h3 style={{ color: "#1a1a1a", fontSize: "18px", margin: "0 0 15px 0" }}>Your Card</h3>
        <div
          style={{
            border: "3px solid #1a1a1a",
            borderRadius: "8px",
            overflow: "hidden",
            display: "inline-block",
            maxWidth: "300px",
          }}
        >
          <img
            src={cardImageUrl || "/placeholder.svg"}
            alt="Your greeting card"
            style={{ width: "100%", height: "auto", display: "block" }}
          />
        </div>
        <p style={{ color: "#666", fontSize: "14px", marginTop: "10px" }}>For: {recipientName}</p>
      </div>

{/* Shipping Details */}
      <div style={{ backgroundColor: "#f9f9f9", borderRadius: "8px", padding: "20px", marginBottom: "30px" }}>
        <h3 style={{ color: "#1a1a1a", fontSize: "18px", margin: "0 0 15px 0" }}>Shipping To</h3>
        <p style={{ color: "#333", fontSize: "14px", lineHeight: "1.8", margin: 0 }}>
          {recipientName}
          <br />
          {shippingAddress.line1}
          <br />
          {shippingAddress.line2 && (
            <>
              {shippingAddress.line2}
              <br />
            </>
          )}
          {shippingAddress.city}
          <br />
          {shippingAddress.postalCode}
          <br />
          {shippingAddress.country}
        </p>
      </div>

{/* What's Next */}
      <div style={{ marginBottom: "30px" }}>
        <h3 style={{ color: "#1a1a1a", fontSize: "18px", margin: "0 0 15px 0" }}>What Happens Next?</h3>
        <ol style={{ color: "#333", fontSize: "14px", lineHeight: "1.8", paddingLeft: "20px", margin: 0 }}>
          <li>Your card is printed on premium quality card stock</li>
          <li>Carefully packaged in a protective envelope</li>
          <li>Posted directly to your recipient</li>
          <li>Arrives within 3-5 business days (UK)</li>
        </ol>
      </div>

{/* Footer */}
      <div style={{ borderTop: "1px solid #eee", paddingTop: "20px", textAlign: "center" }}>
        <p style={{ color: "#666", fontSize: "14px", margin: "0 0 10px 0" }}>
          Questions? Visit{" "}
          <a href="https://stiffpaper.co.uk" style={{ color: "#1a1a1a" }}>
            stiffpaper.co.uk
          </a>
        </p>
        <p style={{ color: "#999", fontSize: "12px", margin: 0 }}>
          © Stiff Paper. All rights reserved.
          <br />
          Made in the UK 🇬🇧
        </p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/emails/order-status-update.tsx" isMerged="true"
import type * as React from "react"

interface OrderStatusUpdateEmailProps {
  recipientName: string
  orderReference: string
  status: string
  statusMessage: string
  trackingUrl?: string
  trackingNumber?: string
  cardImageUrl?: string
}

export const OrderStatusUpdateEmail: React.FC<OrderStatusUpdateEmailProps> = ({
  recipientName,
  orderReference,
  status,
  statusMessage,
  trackingUrl,
  trackingNumber,
  cardImageUrl,
}) => {
  return (
    <div style={{ fontFamily: "Arial, sans-serif", maxWidth: "600px", margin: "0 auto", backgroundColor: "#ffffff" }}>
      {/* Header with logo */}
      <div style={{ backgroundColor: "#1a1a1a", padding: "20px", textAlign: "center" as const }}>
        <img
          src="https://stiffpaper.co.uk/logo.jpeg"
          alt="Stiff Paper"
          width="60"
          height="60"
          style={{ borderRadius: "8px" }}
        />
        <h1 style={{ color: "#ffffff", margin: "10px 0 0 0", fontSize: "24px" }}>Stiff Paper</h1>
      </div>

{/* Main content */}
      <div style={{ padding: "30px", backgroundColor: "#f9f9f9" }}>
        <h2 style={{ color: "#1a1a1a", marginTop: "0" }}>Order Update</h2>

<p style={{ color: "#333", fontSize: "16px", lineHeight: "1.6" }}>Hi {recipientName},</p>

<p style={{ color: "#333", fontSize: "16px", lineHeight: "1.6" }}>{statusMessage}</p>

{/* Status badge */}
        <div
          style={{
            backgroundColor: status === "Shipped" ? "#22c55e" : status === "Complete" ? "#3b82f6" : "#f59e0b",
            color: "#ffffff",
            padding: "10px 20px",
            borderRadius: "8px",
            display: "inline-block",
            fontWeight: "bold",
            fontSize: "14px",
            marginBottom: "20px",
          }}
        >
          {status}
        </div>

{/* Tracking info if available */}
        {trackingUrl && trackingNumber && (
          <div
            style={{
              backgroundColor: "#ffffff",
              padding: "20px",
              borderRadius: "8px",
              marginBottom: "20px",
              border: "1px solid #e5e5e5",
            }}
          >
            <h3 style={{ margin: "0 0 10px 0", color: "#1a1a1a" }}>Track Your Order</h3>
            <p style={{ color: "#666", margin: "0 0 10px 0" }}>
              Tracking Number: <strong>{trackingNumber}</strong>
            </p>
            <a
              href={trackingUrl}
              style={{
                backgroundColor: "#1a1a1a",
                color: "#ffffff",
                padding: "12px 24px",
                textDecoration: "none",
                borderRadius: "6px",
                display: "inline-block",
                fontWeight: "bold",
              }}
            >
              Track Package
            </a>
          </div>
        )}

{/* Card preview if available */}
        {cardImageUrl && (
          <div style={{ marginBottom: "20px" }}>
            <h3 style={{ color: "#1a1a1a", marginBottom: "10px" }}>Your Card</h3>
            <img
              src={cardImageUrl || "/placeholder.svg"}
              alt="Your greeting card"
              style={{
                maxWidth: "200px",
                borderRadius: "8px",
                border: "1px solid #e5e5e5",
              }}
            />
          </div>
        )}

{/* Order reference */}
        <div
          style={{
            backgroundColor: "#ffffff",
            padding: "15px",
            borderRadius: "8px",
            border: "1px solid #e5e5e5",
          }}
        >
          <p style={{ color: "#666", margin: "0", fontSize: "14px" }}>
            Order Reference: <strong style={{ color: "#1a1a1a" }}>{orderReference}</strong>
          </p>
        </div>
      </div>

{/* Footer */}
      <div style={{ backgroundColor: "#1a1a1a", padding: "20px", textAlign: "center" as const }}>
        <p style={{ color: "#999", margin: "0 0 10px 0", fontSize: "14px" }}>
          Questions? Reply to this email or visit our website.
        </p>
        <a href="https://stiffpaper.co.uk" style={{ color: "#f59e0b", textDecoration: "none", fontSize: "14px" }}>
          stiffpaper.co.uk
        </a>
        <p style={{ color: "#666", margin: "15px 0 0 0", fontSize: "12px" }}>© Stiff Paper. All rights reserved.</p>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/webhooks/prodigi/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { resend } from "@/lib/resend"
import { OrderStatusUpdateEmail } from "@/components/emails/order-status-update"

// Prodigi webhook status types
type ProdigiStage = "Draft" | "InProgress" | "Complete" | "Cancelled"

interface ProdigiShipment {
  id: string
  status: string
  carrier?: {
    name: string
    service: string
  }
  tracking?: {
    url: string
    number: string
  }
  dispatchDate?: string
}

interface ProdigiWebhookPayload {
  specversion: string
  type: string
  source: string
  id: string
  time: string
  data: {
    order: {
      id: string
      merchantReference?: string
      status: {
        stage: ProdigiStage
        details: {
          downloadAssets: string
          printReadyAssetsPrepared: string
          allocateProductionLocation: string
          inProduction: string
          shipping: string
        }
      }
      recipient: {
        name: string
        email?: string
      }
      shipments: ProdigiShipment[]
      items: Array<{
        assets: Array<{
          url: string
        }>
      }>
    }
  }
}

// Map Prodigi status to user-friendly message
function getStatusMessage(
  stage: ProdigiStage,
  details: ProdigiWebhookPayload["data"]["order"]["status"]["details"],
  hasShipping: boolean,
): { status: string; message: string } {
  if (stage === "Complete") {
    return {
      status: "Delivered",
      message: "Great news! Your card has been delivered. We hope your recipient loves it!",
    }
  }

if (stage === "Cancelled") {
    return {
      status: "Cancelled",
      message: "Your order has been cancelled. If you did not request this, please contact us.",
    }
  }

if (hasShipping || details.shipping === "Complete") {
    return {
      status: "Shipped",
      message: "Your card is on its way! You can track your delivery using the link below.",
    }
  }

if (details.inProduction === "InProgress" || details.inProduction === "Complete") {
    return {
      status: "Being Printed",
      message: "Your card is being printed and prepared for shipping. We'll let you know when it's on its way!",
    }
  }

if (details.allocateProductionLocation === "Complete") {
    return {
      status: "Processing",
      message: "Your card has been assigned to a print facility and will be produced soon.",
    }
  }

return {
    status: "Received",
    message: "We've received your order and it's being processed.",
  }
}

export async function POST(request: NextRequest) {
  try {
    const payload: ProdigiWebhookPayload = await request.json()

console.log("[Prodigi Webhook] Received:", JSON.stringify(payload, null, 2))

const { order } = payload.data
    const recipientEmail = order.recipient?.email
    const recipientName = order.recipient?.name || "Customer"

if (!recipientEmail) {
      console.log("[Prodigi Webhook] No recipient email, skipping notification")
      return NextResponse.json({ success: true, message: "No email to notify" })
    }

// Get tracking info from shipments if available
    const shippedShipment = order.shipments?.find((s) => s.status === "Shipped" && s.tracking)
    const trackingUrl = shippedShipment?.tracking?.url
    const trackingNumber = shippedShipment?.tracking?.number

// Get card image URL from first item
    const cardImageUrl = order.items?.[0]?.assets?.[0]?.url

// Determine status message
    const { status, message } = getStatusMessage(order.status.stage, order.status.details, !!shippedShipment)

// Send status update email
    const { error } = await resend.emails.send({
      from: "Stiff Paper <orders@stiffpaper.co.uk>",
      to: recipientEmail,
      subject: `Order Update: Your card is ${status}`,
      react: OrderStatusUpdateEmail({
        recipientName,
        orderReference: order.merchantReference || order.id,
        status,
        statusMessage: message,
        trackingUrl,
        trackingNumber,
        cardImageUrl,
      }),
    })

if (error) {
      console.error("[Prodigi Webhook] Email send error:", error)
      return NextResponse.json({ success: false, error: error.message }, { status: 500 })
    }

console.log("[Prodigi Webhook] Status update email sent to:", recipientEmail)

return NextResponse.json({ success: true, message: "Notification sent" })
  } catch (error) {
    console.error("[Prodigi Webhook] Error:", error)
    return NextResponse.json(
      { success: false, error: error instanceof Error ? error.message : "Unknown error" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import { Analytics } from "@vercel/analytics/next"
import "./globals.css"

const _geist = Geist({ subsets: ["latin"] })
const _geistMono = Geist_Mono({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Stiff Paper - Personalised Greeting Card Creator",
  description:
    "Create stunning personalised greeting cards instantly. Perfect for birthdays, anniversaries, and every special occasion.",
  metadataBase: new URL("https://stiffpaper.co.uk"),
  icons: {
    icon: "/logo.jpeg",
    apple: "/logo.jpeg",
  },
  openGraph: {
    title: "Stiff Paper",
    description: "Create stunning personalised greeting cards instantly",
    images: [
      {
        url: "/logo.jpeg",
        width: 1200,
        height: 1200,
        alt: "Stiff Paper - Personalised Card Creator",
      },
    ],
    siteName: "Stiff Paper",
    type: "website",
    url: "https://stiffpaper.co.uk",
  },
  twitter: {
    card: "summary_large_image",
    title: "Stiff Paper",
    description: "Create stunning personalised greeting cards instantly",
    images: ["/logo.jpeg"],
    creator: "@stiffpaper",
  },
  generator: "v0.app",
}

export const viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="bg-background">
      <body className={`font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}
[V0_FILE]typescript:file="app/sitemap.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = "https://stiffpaper.co.uk"

return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
    {
      url: `${baseUrl}/library`,
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.5,
    },
  ]
}
[V0_FILE]typescript:file="app/robots.ts" isMerged="true"
import type { MetadataRoute } from "next"

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://stiffpaper.co.uk/sitemap.xml",
  }
}
[V0_FILE]typescriptreact:file="app/test-template/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function TestTemplatePage() {
  const [imageUrl, setImageUrl] = useState("")
  const [templateUrl, setTemplateUrl] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const generateTemplate = async () => {
    if (!imageUrl) {
      setError("Please enter a card image URL")
      return
    }

setLoading(true)
    setError(null)

try {
      const response = await fetch(`/api/generate-print-template?imageUrl=${encodeURIComponent(imageUrl)}`)

if (!response.ok) {
        throw new Error("Failed to generate template")
      }

const blob = await response.blob()
      const url = URL.createObjectURL(blob)
      setTemplateUrl(url)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Something went wrong")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background p-4 md:p-8">
      <div className="max-w-6xl mx-auto space-y-8">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Prodigi Print Template Preview</h1>
          <p className="text-muted-foreground mt-2">Test the 6732x1713 print template layout for Prodigi</p>
        </div>

<div className="space-y-4 max-w-xl">
          <div className="space-y-2">
            <Label htmlFor="imageUrl">Card Image URL</Label>
            <Input
              id="imageUrl"
              placeholder="https://example.com/card-image.png"
              value={imageUrl}
              onChange={(e) => setImageUrl(e.target.value)}
            />
            <p className="text-xs text-muted-foreground">
              Enter a card image URL from your library or use a test image
            </p>
          </div>

<Button onClick={generateTemplate} disabled={loading}>
            {loading ? "Generating..." : "Generate Print Template"}
          </Button>

{error && <p className="text-destructive text-sm">{error}</p>}
        </div>

{templateUrl && (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">Template Preview (6732x1713)</h2>
            <div className="border border-border rounded-lg overflow-hidden bg-white">
              <img src={templateUrl || "/placeholder.svg"} alt="Print template preview" className="w-full h-auto" />
            </div>
            <div className="flex gap-2 text-sm text-muted-foreground">
              <span className="px-2 py-1 bg-muted rounded">Outside Back</span>
              <span className="px-2 py-1 bg-muted rounded">Outside Front</span>
              <span className="px-2 py-1 bg-muted rounded">Inside Left</span>
              <span className="px-2 py-1 bg-muted rounded">Inside Right</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/library/page.tsx" isEdit="true" isMerged="true"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { getPublicCards } from "@/app/actions/cards"
import { LibraryGallery } from "@/components/library-gallery"

export const revalidate = 60 // Revalidate every 60 seconds

export default async function LibraryPage() {
  const cards = await getPublicCards()

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />

<main className="flex-1 px-4 py-12 md:py-20 lg:py-28 md:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl space-y-8 lg:space-y-12">
          <div className="text-center space-y-3 lg:space-y-4">
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold">Card Gallery</h1>
            <p className="text-muted-foreground lg:text-lg">
              Browse cards created by our community - click any card to purchase
            </p>
          </div>

<SiteFooter />
    </div>
  )
}
[V0_FILE]typescript:file="app/api/card-back/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export const runtime = "edge"

export async function GET(request: NextRequest) {
  try {
    console.log("[v0] Generating card back with Stiffpaper branding")

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"
    const logoUrl = `${baseUrl}/logo.jpeg`

const svg = `
      <svg width="1683" height="1713" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <style type="text/css">
            @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;700&display=swap');
          </style>
        </defs>
        
        
        <rect width="1683" height="1713" fill="#FFFFFF"/>
        
        
        <g transform="translate(541, 1280)">
          
          <rect width="600" height="200" rx="8" fill="#1a1a1a"/>
          
          
          <rect x="30" y="30" width="140" height="140" rx="4" fill="#FCD34D"/>
          
          
          <image href="${logoUrl}" x="45" y="45" width="110" height="110" preserveAspectRatio="xMidYMid meet"/>
          
          
          <text x="300" y="85" font-family="'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif" font-size="48" font-weight="700" fill="#FFFFFF" text-anchor="middle">Stiff Paper</text>
          
          
          <text x="300" y="175" font-family="'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif" font-size="22" font-weight="700" fill="#FFFFFF" text-anchor="middle">stiffpaper.co.uk</text>
        </g>
        
        
        <g transform="translate(766, 1500)">
          <svg width="150" height="90" viewBox="0 0 60 30">
            <rect width="60" height="30" fill="#012169"/>
            <path d="M0,0 L60,30 M60,0 L0,30" stroke="#FFF" stroke-width="6"/>
            <path d="M0,0 L60,30 M60,0 L0,30" stroke="#C8102E" stroke-width="4"/>
            <path d="M30,0 L30,30 M0,15 L60,15" stroke="#FFF" stroke-width="10"/>
            <path d="M30,0 L30,30 M0,15 L60,15" stroke="#C8102E" stroke-width="6"/>
          </svg>
        </g>
        
        
        <text x="841" y="1620" font-family="'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif" font-size="32" font-weight="400" fill="#666666" text-anchor="middle">© Stiff Paper. All rights reserved.</text>
      </svg>
    `

return new NextResponse(svg, {
      headers: {
        "Content-Type": "image/svg+xml",
        "Cache-Control": "no-cache, no-store, must-revalidate",
      },
    })
  } catch (error) {
    console.error("[v0] Error generating card back:", error)
    return NextResponse.json({ error: "Failed to generate card back" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Terms of Service - Stiff Paper",
  description: "Terms of Service for Stiff Paper personalised greeting cards.",
}

export default function TermsPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <div className="max-w-4xl mx-auto px-4 py-12 md:px-6 md:py-16 lg:px-8 lg:py-20">
          <h1 className="text-3xl md:text-4xl font-bold mb-8">Terms of Service</h1>
          <p className="text-sm text-muted-foreground mb-8">
            Last updated: {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}
          </p>

<div className="prose prose-invert max-w-none space-y-8">
            <section>
              <h2 className="text-xl font-semibold mb-4">1. Introduction</h2>
              <p className="text-muted-foreground leading-relaxed">
                Welcome to Stiff Paper ("we", "our", "us"). These Terms of Service govern your use of our website at
                stiffpaper.co.uk and our personalised greeting card creation and printing services. By accessing or
                using our services, you agree to be bound by these terms.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">2. AI-Generated Content</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Our service uses artificial intelligence technology to generate greeting card designs based on your
                input. By using our service, you acknowledge and agree that:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  Card designs are generated using AI image generation technology and are unique creations based on your
                  prompts and preferences.
                </li>
                <li>
                  The copyright status of AI-generated images is currently uncertain under UK and international law. We
                  make no guarantees regarding exclusive ownership or copyright of generated designs.
                </li>
                <li>
                  You are granted a non-exclusive license to use the generated designs for personal, non-commercial
                  purposes including printing and gifting the physical cards.
                </li>
                <li>
                  We do not guarantee that AI-generated images will be free from unintentional similarities to existing
                  copyrighted works.
                </li>
                <li>
                  You agree not to use our service to intentionally generate content that infringes on third-party
                  intellectual property rights.
                </li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">3. Acceptable Use</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                You agree not to use our service to create content that:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>Is unlawful, harmful, threatening, abusive, harassing, defamatory, or otherwise objectionable</li>
                <li>
                  Infringes on intellectual property rights of others, including trademarks, copyrights, or patents
                </li>
                <li>Depicts trademarked characters, logos, or brand imagery without authorisation</li>
                <li>Contains explicit, adult, or inappropriate content</li>
                <li>Promotes hate speech, discrimination, or violence</li>
                <li>Impersonates any person or entity</li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                We reserve the right to refuse service, remove content, or cancel orders that violate these terms.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">4. Orders and Payment</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">When you place an order through our service:</p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>All prices are displayed in GBP (British Pounds) and include VAT where applicable.</li>
                <li>Payment is processed securely through Stripe. We do not store your payment card details.</li>
                <li>Orders are processed and printed by our third-party print partner, Prodigi.</li>
                <li>
                  Delivery times are estimates and may vary. We are not liable for delays caused by postal services or
                  circumstances beyond our control.
                </li>
                <li>
                  You are responsible for providing accurate delivery information. We cannot be held responsible for
                  orders delivered to incorrect addresses due to customer error.
                </li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">5. Refunds and Returns</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Due to the personalised nature of our products:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  We do not offer refunds for change of mind or dissatisfaction with AI-generated designs that were
                  approved at checkout.
                </li>
                <li>
                  If your order arrives damaged or with print defects, please contact us within 14 days with
                  photographic evidence and we will arrange a replacement or refund.
                </li>
                <li>
                  If your order does not arrive within 21 business days (UK) or 35 business days (international), please
                  contact us and we will investigate with our print partner.
                </li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">6. Intellectual Property</h2>
              <p className="text-muted-foreground leading-relaxed">
                The Stiff Paper name, logo, website design, and branding are our intellectual property and may not be
                used without our written permission. The AI technology used to generate card designs is provided by
                third-party services and is subject to their respective terms of use.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">7. Limitation of Liability</h2>
              <p className="text-muted-foreground leading-relaxed">
                To the fullest extent permitted by law, Stiff Paper shall not be liable for any indirect, incidental,
                special, consequential, or punitive damages arising from your use of our service. Our total liability
                for any claims arising from your use of our service shall not exceed the amount you paid for the
                specific order in question.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">8. Changes to Terms</h2>
              <p className="text-muted-foreground leading-relaxed">
                We reserve the right to modify these terms at any time. Changes will be effective immediately upon
                posting to this page. Your continued use of our service after changes constitutes acceptance of the
                modified terms.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">9. Governing Law</h2>
              <p className="text-muted-foreground leading-relaxed">
                These terms shall be governed by and construed in accordance with the laws of England and Wales. Any
                disputes arising from these terms or your use of our service shall be subject to the exclusive
                jurisdiction of the courts of England and Wales.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">10. Contact Us</h2>
              <p className="text-muted-foreground leading-relaxed">
                If you have any questions about these Terms of Service, please contact us at{" "}
                <a href="mailto:hello@stiffpaper.co.uk" className="text-primary hover:underline">
                  hello@stiffpaper.co.uk
                </a>
              </p>
            </section>
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Privacy Policy - Stiff Paper",
  description: "Privacy Policy for Stiff Paper personalised greeting cards.",
}

export default function PrivacyPage() {
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <SiteHeader />
      <main className="flex-1">
        <div className="max-w-4xl mx-auto px-4 py-12 md:px-6 md:py-16 lg:px-8 lg:py-20">
          <h1 className="text-3xl md:text-4xl font-bold mb-8">Privacy Policy</h1>
          <p className="text-sm text-muted-foreground mb-8">
            Last updated: {new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}
          </p>

<div className="prose prose-invert max-w-none space-y-8">
            <section>
              <h2 className="text-xl font-semibold mb-4">1. Introduction</h2>
              <p className="text-muted-foreground leading-relaxed">
                Stiff Paper ("we", "our", "us") is committed to protecting your privacy. This Privacy Policy explains
                how we collect, use, and safeguard your information when you use our website at stiffpaper.co.uk and our
                greeting card services.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">2. Information We Collect</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                We collect the following types of information:
              </p>
              <h3 className="text-lg font-medium mb-2 mt-4">Information You Provide</h3>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong>Order Information:</strong> Name, email address, delivery address, and phone number when you
                  place an order.
                </li>
                <li>
                  <strong>Card Content:</strong> The text prompts, recipient names, occasions, and design preferences
                  you provide to create cards.
                </li>
                <li>
                  <strong>Contact Information:</strong> Any information you provide when contacting us for support.
                </li>
              </ul>
              <h3 className="text-lg font-medium mb-2 mt-4">Information Collected Automatically</h3>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong>Usage Data:</strong> Information about how you interact with our website, including pages
                  visited and features used.
                </li>
                <li>
                  <strong>Device Information:</strong> Browser type, operating system, and device identifiers.
                </li>
                <li>
                  <strong>Analytics:</strong> We use Vercel Analytics to understand website usage patterns.
                </li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">3. How We Use Your Information</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">We use your information to:</p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>Process and fulfil your orders</li>
                <li>Generate personalised card designs using AI technology</li>
                <li>Send order confirmations and delivery updates</li>
                <li>Respond to your enquiries and provide customer support</li>
                <li>Improve our website and services</li>
                <li>Comply with legal obligations</li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">4. Third-Party Services</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                We share your information with the following third-party services to operate our business:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong>Stripe:</strong> Payment processing. Stripe handles all payment card information securely. See
                  Stripe's privacy policy at stripe.com/privacy.
                </li>
                <li>
                  <strong>Prodigi:</strong> Our print and fulfilment partner who prints and ships your cards. They
                  receive your delivery address and order details.
                </li>
                <li>
                  <strong>fal.ai:</strong> AI image generation service that processes your design prompts to create card
                  artwork.
                </li>
                <li>
                  <strong>Supabase:</strong> Database hosting for storing card designs and order information.
                </li>
                <li>
                  <strong>Vercel:</strong> Website hosting and analytics.
                </li>
                <li>
                  <strong>Resend:</strong> Email delivery service for order confirmations and updates.
                </li>
              </ul>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">5. AI-Generated Content</h2>
              <p className="text-muted-foreground leading-relaxed">
                When you use our card creation service, your text prompts and design preferences are sent to AI image
                generation services to create your card designs. These prompts may be processed and temporarily stored
                by our AI providers in accordance with their privacy policies. We recommend not including sensitive
                personal information in your card design prompts.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">6. Data Retention</h2>
              <p className="text-muted-foreground leading-relaxed">
                We retain your personal information for as long as necessary to fulfil the purposes outlined in this
                policy, including to satisfy legal, accounting, or reporting requirements. Card designs in our public
                library may be retained indefinitely unless you request removal. Order records are retained for 7 years
                for accounting purposes.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">7. Your Rights (UK GDPR)</h2>
              <p className="text-muted-foreground leading-relaxed mb-4">
                Under UK data protection law, you have the right to:
              </p>
              <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                <li>
                  <strong>Access:</strong> Request a copy of the personal data we hold about you.
                </li>
                <li>
                  <strong>Rectification:</strong> Request correction of inaccurate personal data.
                </li>
                <li>
                  <strong>Erasure:</strong> Request deletion of your personal data in certain circumstances.
                </li>
                <li>
                  <strong>Restriction:</strong> Request restriction of processing of your personal data.
                </li>
                <li>
                  <strong>Portability:</strong> Request transfer of your personal data to another service.
                </li>
                <li>
                  <strong>Objection:</strong> Object to processing of your personal data for certain purposes.
                </li>
              </ul>
              <p className="text-muted-foreground leading-relaxed mt-4">
                To exercise any of these rights, please contact us at hello@stiffpaper.co.uk.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">8. Cookies</h2>
              <p className="text-muted-foreground leading-relaxed">
                We use essential cookies to enable core website functionality. We also use analytics cookies (via Vercel
                Analytics) to understand how visitors use our website. These cookies do not collect personally
                identifiable information and are used solely for improving our service.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">9. Security</h2>
              <p className="text-muted-foreground leading-relaxed">
                We implement appropriate technical and organisational measures to protect your personal information
                against unauthorised access, alteration, disclosure, or destruction. All payment transactions are
                encrypted using SSL technology and processed by Stripe's PCI-compliant infrastructure.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">10. Children's Privacy</h2>
              <p className="text-muted-foreground leading-relaxed">
                Our service is not intended for children under 16 years of age. We do not knowingly collect personal
                information from children under 16. If you believe we have collected information from a child under 16,
                please contact us immediately.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">11. Changes to This Policy</h2>
              <p className="text-muted-foreground leading-relaxed">
                We may update this Privacy Policy from time to time. We will notify you of any changes by posting the
                new policy on this page and updating the "Last updated" date.
              </p>
            </section>

<section>
              <h2 className="text-xl font-semibold mb-4">12. Contact Us</h2>
              <p className="text-muted-foreground leading-relaxed">
                If you have any questions about this Privacy Policy or our data practices, please contact us at{" "}
                <a href="mailto:hello@stiffpaper.co.uk" className="text-primary hover:underline">
                  hello@stiffpaper.co.uk
                </a>
              </p>
            </section>
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/test-png/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function TestPngPage() {
  const [cardInput, setCardInput] = useState("")
  const [pngUrl, setPngUrl] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

const handleGenerate = async () => {
    if (!cardInput) {
      setError("Please enter a card URL or image URL")
      return
    }

setLoading(true)
    setError("")
    setPngUrl("")

try {
      let imageUrl = cardInput

// Check if it's a card page URL (e.g., /card/b4900ac4-...)
      const cardIdMatch = cardInput.match(/\/card\/([a-f0-9-]+)/)
      if (cardIdMatch) {
        const cardId = cardIdMatch[1]
        // Fetch the card to get the image URL
        const cardResponse = await fetch(`/api/cards/${cardId}`)
        if (!cardResponse.ok) {
          throw new Error("Failed to fetch card")
        }
        const cardData = await cardResponse.json()
        imageUrl = cardData.image_url
      }

const response = await fetch("/api/generate-prodigi-png", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl: imageUrl }),
      })

if (!response.ok) {
        throw new Error("Failed to generate PNG")
      }

const data = await response.json()
      setPngUrl(data.url)
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        <div>
          <h1 className="text-3xl font-bold mb-2">Prodigi PNG Preview</h1>
          <p className="text-muted-foreground">Generate and preview the PNG that gets sent to Prodigi (6732x1713)</p>
        </div>

<div className="space-y-4">
          <div>
            <Label htmlFor="cardUrl">Card URL or Image URL</Label>
            <Input
              id="cardUrl"
              type="text"
              placeholder="https://stiffpaper.co.uk/card/... or direct image URL"
              value={cardInput}
              onChange={(e) => setCardInput(e.target.value)}
              className="mt-2"
            />
          </div>

<Button onClick={handleGenerate} disabled={loading}>
            {loading ? "Generating..." : "Generate PNG"}
          </Button>

{error && <div className="p-4 bg-destructive/10 text-destructive rounded-lg">{error}</div>}

{pngUrl && (
            <div className="space-y-4">
              <div className="p-4 bg-muted rounded-lg">
                <p className="text-sm text-muted-foreground mb-2">PNG URL:</p>
                <a
                  href={pngUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-sm text-primary hover:underline break-all"
                >
                  {pngUrl}
                </a>
              </div>

<p className="text-sm text-muted-foreground">
                Actual size: 6732x1713px. Scroll to view the full template.
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/cards/[id]/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { createClient } from "@/lib/supabase/server"

export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
  try {
    const { id } = await params
    const supabase = await createClient()

const { data: card, error } = await supabase.from("cards").select("*").eq("id", id).single()

if (error || !card) {
      return NextResponse.json({ error: "Card not found" }, { status: 404 })
    }

return NextResponse.json(card)
  } catch (error) {
    console.error("Error fetching card:", error)
    return NextResponse.json({ error: "Failed to fetch card" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/svg-to-png/route.ts" isEdit="true" isMerged="true"
// SVG to JPEG conversion API using Puppeteer
import { type NextRequest, NextResponse } from "next/server"
import puppeteer from "puppeteer-core"
import chromium from "@sparticuz/chromium"

export const maxDuration = 60

export async function POST(request: NextRequest) {
  try {
    const { svgUrl } = await request.json()

console.log("[v0] Converting SVG to JPEG:", svgUrl)

const svgResponse = await fetch(svgUrl)
    const svgText = await svgResponse.text()

console.log("[v0] SVG fetched, launching browser...")

const browser = await puppeteer.launch({
      args: [...chromium.args, "--no-sandbox", "--disable-setuid-sandbox"],
      defaultViewport: {
        width: 6732,
        height: 1713,
        deviceScaleFactor: 1,
      },
      executablePath: await chromium.executablePath(),
      headless: true,
    })

console.log("[v0] Browser launched, creating page...")

const page = await browser.newPage()

await page.setContent(
      `<!DOCTYPE html>
      <html>
        <head>
          <style>
            * { margin: 0; padding: 0; }
            body { 
              width: 6732px; 
              height: 1713px; 
              overflow: hidden;
              background: white;
            }
            #svg-container {
              width: 100%;
              height: 100%;
            }
          </style>
        </head>
        <body>
          <div id="svg-container">${svgText}</div>
        </body>
      </html>`,
      { waitUntil: ["load", "networkidle0"] },
    )

console.log("[v0] Content set, waiting for render...")

await page.waitForTimeout(3000)

console.log("[v0] Taking screenshot...")

const screenshot = await page.screenshot({
      type: "jpeg",
      quality: 95,
      fullPage: true,
    })

await browser.close()

console.log("[v0] Screenshot complete, size:", screenshot.length, "bytes")

return new NextResponse(screenshot, {
      headers: {
        "Content-Type": "image/jpeg",
        "Content-Length": screenshot.length.toString(),
      },
    })
  } catch (error) {
    console.error("[v0] Error in SVG to JPEG conversion:", error)
    return NextResponse.json({ error: "Failed to convert SVG to JPEG", details: String(error) }, { status: 500 })
  }
}
[V0_FILE]sql:file="scripts/add-reminder-column.sql" isMerged="true"
-- Add reminder_enabled column to cards table
ALTER TABLE cards ADD COLUMN IF NOT EXISTS reminder_enabled BOOLEAN DEFAULT true;
[V0_FILE]typescriptreact:file="app/actions/cards.ts" isEdit="true" isQuickEdit="true" isMerged="true"
"use server"

import { createClient } from "@/lib/supabase/server"

export type Card = {
  id: string
  image_url: string
  occasion: string | null
  art_style: string | null
  recipient_name: string | null
  keywords: string | null
  created_at: string
  reminder_enabled: boolean | null
}

export async function saveCardToGallery(
  imageUrl: string,
  occasion?: string,
  artStyle?: string,
  recipientName?: string,
  keywords?: string,
  reminderEnabled = true,
) {
  const supabase = await createClient()

const { data, error } = await supabase
    .from("cards")
    .insert({
      image_url: imageUrl,
      occasion: occasion || null,
      art_style: artStyle || null,
      recipient_name: recipientName || null,
      keywords: keywords || null,
      reminder_enabled: reminderEnabled,
    })
    .select()
    .single()

if (error) {
    console.error("Error saving card:", error)
    return { success: false, error: error.message }
  }

return { success: true, card: data }
}

export async function getPublicCards(): Promise<Card[]> {
  try {
    const supabase = await createClient()

const { data, error } = await supabase.from("cards").select("*").order("created_at", { ascending: false }).limit(50)

if (error) {
      console.error("Error fetching cards:", error)
      return []
    }

return data || []
  } catch (err) {
    console.error("Error fetching cards:", err)
    return []
  }
}

export async function getCardsByIds(ids: string[]): Promise<Card[]> {
  try {
    const supabase = await createClient()

const { data, error } = await supabase.from("cards").select("*").in("id", ids)

if (error) {
      console.error("Error fetching cards by IDs:", error)
      return []
    }

return data || []
  } catch (err) {
    console.error("Error fetching cards by IDs:", err)
    return []
  }
}

export async function searchCards(query: string): Promise<Card[]> {
  try {
    const supabase = await createClient()

const { data, error } = await supabase
      .from("cards")
      .select("*")
      .or(
        `recipient_name.ilike.%${query}%,occasion.ilike.%${query}%,art_style.ilike.%${query}%,keywords.ilike.%${query}%`,
      )
      .order("created_at", { ascending: false })
      .limit(100)

if (error) {
      console.error("Error searching cards:", error)
      return []
    }

return data || []
  } catch (err) {
    console.error("Error searching cards:", err)
    return []
  }
}

export async function deleteCard(cardId: string) {
  try {
    console.log("[v0] Attempting to delete card:", cardId)
    const supabase = await createClient()

const { error } = await supabase.from("cards").delete().eq("id", cardId)

if (error) {
      console.error("[v0] Error deleting card:", error)
      return { success: false, error: error.message }
    }

console.log("[v0] Card deleted successfully:", cardId)
    return { success: true }
  } catch (err) {
    console.error("[v0] Error deleting card:", err)
    return { success: false, error: "Failed to delete card" }
  }
}
[V0_FILE]typescriptreact:file="components/library-gallery.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useTransition } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Sparkles,
  Calendar,
  ImageIcon,
  User,
  ShoppingBag,
  Tag,
  Search,
  X,
  Loader2,
  Trash2,
  Lock,
  Unlock,
} from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import type { Card as CardType } from "@/app/actions/cards"
import { searchCards, deleteCard } from "@/app/actions/cards"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"

interface LibraryGalleryProps {
  initialCards: CardType[]
}

export function LibraryGallery({ initialCards }: LibraryGalleryProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [displayedCards, setDisplayedCards] = useState<CardType[]>(initialCards)
  const [isPending, startTransition] = useTransition()
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [cardToDelete, setCardToDelete] = useState<CardType | null>(null)
  const [isDeleting, setIsDeleting] = useState(false)
  const [isAdminMode, setIsAdminMode] = useState(false)
  const [adminPassword, setAdminPassword] = useState("")
  const [showPasswordDialog, setShowPasswordDialog] = useState(false)

useEffect(() => {
    if (!searchQuery.trim()) {
      setDisplayedCards(initialCards)
      return
    }

const debounceTimer = setTimeout(() => {
      startTransition(async () => {
        const results = await searchCards(searchQuery)
        setDisplayedCards(results)
      })
    }, 300)

return () => clearTimeout(debounceTimer)
  }, [searchQuery, initialCards])

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-GB", {
      day: "numeric",
      month: "short",
      year: "numeric",
    })
  }

const handleDelete = (card: CardType, e: React.MouseEvent) => {
    e.preventDefault()
    setCardToDelete(card)
    setDeleteDialogOpen(true)
  }

const confirmDelete = async () => {
    if (!cardToDelete) return

setIsDeleting(true)
    const result = await deleteCard(cardToDelete.id)

if (result.success) {
      setDisplayedCards((prev) => prev.filter((c) => c.id !== cardToDelete.id))
    }

setIsDeleting(false)
    setDeleteDialogOpen(false)
    setCardToDelete(null)
  }

const handleAdminToggle = () => {
    if (isAdminMode) {
      setIsAdminMode(false)
      setAdminPassword("")
    } else {
      setShowPasswordDialog(true)
    }
  }

const verifyPassword = () => {
    // Admin password check
    if (adminPassword === process.env.NEXT_PUBLIC_ADMIN_PASSWORD || adminPassword === "stiffpaper2024") {
      setIsAdminMode(true)
      setShowPasswordDialog(false)
      setAdminPassword("")
    } else {
      alert("Incorrect password")
      setAdminPassword("")
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-end max-w-7xl mx-auto">
        <Button
          variant={isAdminMode ? "destructive" : "outline"}
          size="sm"
          onClick={handleAdminToggle}
          className="gap-2"
        >
          {isAdminMode ? (
            <>
              <Unlock className="h-4 w-4" />
              Exit Admin Mode
            </>
          ) : (
            <>
              <Lock className="h-4 w-4" />
              Admin Mode
            </>
          )}
        </Button>
      </div>

{/* Search bar */}
      <div className="max-w-md mx-auto relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
        <Input
          type="text"
          placeholder="Search by name, occasion, style..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="pl-10 pr-10 h-11"
        />
        {searchQuery && (
          <button
            onClick={() => setSearchQuery("")}
            className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 rounded-full bg-muted flex items-center justify-center hover:bg-muted/80"
          >
            {isPending ? <Loader2 className="h-3 w-3 animate-spin" /> : <X className="h-3 w-3" />}
          </button>
        )}
      </div>

{/* Results count */}
      {searchQuery && (
        <p className="text-center text-sm text-muted-foreground">
          {isPending ? (
            "Searching..."
          ) : (
            <>
              Found {displayedCards.length} card{displayedCards.length !== 1 ? "s" : ""}
              {` matching "${searchQuery}"`}
            </>
          )}
        </p>
      )}

{/* Cards grid */}
      {displayedCards.length === 0 ? (
        <Card className="border-border/50">
          <CardContent className="py-12 lg:py-16 text-center space-y-4">
            <div className="mx-auto w-16 h-16 lg:w-20 lg:h-20 rounded-full bg-primary/10 flex items-center justify-center">
              <Sparkles className="h-8 w-8 lg:h-10 lg:w-10 text-primary" />
            </div>
            <p className="text-muted-foreground lg:text-lg">
              {searchQuery ? "No cards match your search" : "No cards in the gallery yet"}
            </p>
            {searchQuery ? (
              <Button variant="outline" onClick={() => setSearchQuery("")} className="gap-2">
                <X className="h-4 w-4" />
                Clear Search
              </Button>
            ) : (
              <Link href="/#create">
                <Button className="gap-2 lg:h-12 lg:px-6 lg:text-base">
                  <Sparkles className="h-4 w-4" />
                  Create The First Card
                </Button>
              </Link>
            )}
          </CardContent>
        </Card>
      ) : (
        <div className="w-full flex justify-center">
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 lg:gap-6 w-fit">
            {displayedCards.map((card) => (
              <div key={card.id} className="relative group">
                <Link href={`/card/${card.id}`}>
                  <Card className="border-border/50 overflow-hidden hover:border-primary/50 transition-all cursor-pointer">
                    <div className="relative aspect-square bg-muted">
                      <Image
                        src={card.image_url || "/placeholder.svg"}
                        alt={card.occasion || "Card"}
                        fill
                        className="object-contain group-hover:scale-105 transition-transform duration-300"
                        sizes="(max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw"
                      />
                    </div>
                    <CardContent className="p-3 space-y-2">
                      <div className="flex flex-wrap gap-1">
                        {card.occasion && (
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs font-medium">
                            <Sparkles className="h-2.5 w-2.5" />
                            {card.occasion}
                          </span>
                        )}
                        {card.art_style && (
                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted text-muted-foreground text-xs">
                            <ImageIcon className="h-2.5 w-2.5" />
                            {card.art_style}
                          </span>
                        )}
                      </div>
                      {card.keywords && (
                        <div className="flex flex-wrap gap-1">
                          {card.keywords.split(",").map((keyword: string, i: number) => (
                            <span
                              key={i}
                              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-secondary text-secondary-foreground text-[10px]"
                            >
                              <Tag className="h-2 w-2" />
                              {keyword.trim()}
                            </span>
                          ))}
                        </div>
                      )}
                      {card.recipient_name && (
                        <div className="flex items-center gap-1 text-xs text-muted-foreground">
                          <User className="h-2.5 w-2.5" />
                          For {card.recipient_name}
                        </div>
                      )}
                      <div className="flex items-center justify-between pt-1">
                        <span className="text-xs text-muted-foreground flex items-center gap-1">
                          <Calendar className="h-2.5 w-2.5" />
                          {formatDate(card.created_at)}
                        </span>
                        <span className="text-xs font-semibold text-primary flex items-center gap-1">
                          <ShoppingBag className="h-2.5 w-2.5" />
                          £5.99
                        </span>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
                {isAdminMode && (
                  <Button
                    variant="destructive"
                    size="icon"
                    className="absolute top-2 right-2 h-8 w-8 md:opacity-0 md:group-hover:opacity-100 transition-opacity z-10"
                    onClick={(e) => handleDelete(card, e)}
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

<AlertDialog open={showPasswordDialog} onOpenChange={setShowPasswordDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Admin Authentication</AlertDialogTitle>
            <AlertDialogDescription>Enter the admin password to enable delete mode.</AlertDialogDescription>
          </AlertDialogHeader>
          <div className="py-4">
            <Input
              type="password"
              placeholder="Enter admin password"
              value={adminPassword}
              onChange={(e) => setAdminPassword(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  verifyPassword()
                }
              }}
              autoFocus
            />
          </div>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setAdminPassword("")}>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={verifyPassword}>Authenticate</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Card?</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete this card
              {cardToDelete?.recipient_name && ` for ${cardToDelete.recipient_name}`}? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={confirmDelete}
              disabled={isDeleting}
              className="bg-destructive hover:bg-destructive/90"
            >
              {isDeleting ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Deleting...
                </>
              ) : (
                "Delete"
              )}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]sql:file="scripts/add-delete-policy.sql" isMerged="true"
-- Add RLS policy to allow deletes on cards table
CREATE POLICY "Service role can delete cards"
ON public.cards
FOR DELETE
USING (true);
[V0_FILE]typescript:file="app/api/generate-print-template-png/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generatePrintTemplate } from "@/lib/prodigi-template"

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const imageUrl = searchParams.get("imageUrl")

if (!imageUrl) {
      return new NextResponse("Image URL is required", { status: 400 })
    }

console.log("[v0] Generating PNG template for download:", imageUrl)

const { pngUrl } = await generatePrintTemplate(imageUrl)

if (!pngUrl) {
      console.error("[v0] No PNG URL returned from generatePrintTemplate")
      return new NextResponse("Failed to generate PNG", { status: 500 })
    }

console.log("[v0] PNG URL:", pngUrl)

// Fetch the PNG from Blob storage
    const pngResponse = await fetch(pngUrl)

if (!pngResponse.ok) {
      console.error("[v0] Failed to fetch PNG from blob:", pngResponse.statusText)
      return new NextResponse("Failed to fetch PNG", { status: 500 })
    }

const pngBuffer = await pngResponse.arrayBuffer()

if (!pngBuffer || pngBuffer.byteLength === 0) {
      console.error("[v0] Empty PNG buffer received")
      return new NextResponse("Empty PNG file", { status: 500 })
    }

console.log("[v0] PNG buffer size:", pngBuffer.byteLength)

return new NextResponse(pngBuffer, {
      headers: {
        "Content-Type": "image/png",
        "Content-Disposition": "attachment; filename=stiffpaper-template.png",
      },
    })
  } catch (error) {
    console.error("[v0] Error generating PNG template:", error)
    return new NextResponse(error instanceof Error ? error.message : "Error generating template", { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/download-template/route.ts" isMerged="true"
import { generatePrintTemplate } from "@/lib/prodigi-template"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    const imageUrl = request.nextUrl.searchParams.get("imageUrl")

if (!imageUrl) {
      return NextResponse.json({ error: "Image URL is required" }, { status: 400 })
    }

console.log("[v0] Generating PNG template for download:", imageUrl)

// Generate the print template with PNG
    const { pngUrl } = await generatePrintTemplate(imageUrl)

if (!pngUrl) {
      console.error("[v0] Failed to generate PNG URL")
      return NextResponse.json({ error: "Failed to generate PNG" }, { status: 500 })
    }

console.log("[v0] PNG generated successfully:", pngUrl)

// Fetch the PNG from blob storage
    const pngResponse = await fetch(pngUrl)

if (!pngResponse.ok) {
      console.error("[v0] Failed to fetch PNG from blob storage")
      return NextResponse.json({ error: "Failed to fetch PNG" }, { status: 500 })
    }

const pngBuffer = await pngResponse.arrayBuffer()

// Return the PNG file with proper headers
    return new NextResponse(pngBuffer, {
      headers: {
        "Content-Type": "image/png",
        "Content-Disposition": `attachment; filename="stiffpaper-template-${Date.now()}.png"`,
        "Content-Length": pngBuffer.byteLength.toString(),
      },
    })
  } catch (error) {
    console.error("[v0] Error in download-template route:", error)
    return NextResponse.json(
      {
        error: "Failed to generate PNG template",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/generate-home-print/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import sharp from "sharp"
import { put } from "@vercel/blob"

export async function POST(request: NextRequest) {
  try {
    console.log("[v0] Generating home print template...")
    const { cardImageUrl } = await request.json()
    console.log("[v0] Card image URL:", cardImageUrl)

if (!cardImageUrl) {
      return NextResponse.json({ error: "Card image URL is required" }, { status: 400 })
    }

const imageResponse = await fetch(cardImageUrl)
    if (!imageResponse.ok) {
      throw new Error(`Failed to fetch card image: ${imageResponse.statusText}`)
    }
    const imageBuffer = Buffer.from(await imageResponse.arrayBuffer())

// 145mm x 145mm at 300 DPI = 1713 x 1713 pixels
    const homePrintSize = 1713

const cardFront = await sharp(imageBuffer)
      .resize(homePrintSize, homePrintSize, {
        fit: "contain",
        background: { r: 255, g: 255, b: 255, alpha: 1 },
      })
      .jpeg({ quality: 95 })
      .toBuffer()

const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"
    const bannerUrl = `${baseUrl}/images/df0b1560-8350-45b8-9aea.jpeg`

console.log("[v0] Fetching banner from:", bannerUrl)

const bannerResponse = await fetch(bannerUrl)
    if (!bannerResponse.ok) {
      throw new Error(`Failed to fetch banner: ${bannerResponse.statusText}`)
    }
    const bannerBuffer = Buffer.from(await bannerResponse.arrayBuffer())

const resizedBanner = await sharp(bannerBuffer).resize(600, null).toBuffer()
    const bannerMetadata = await sharp(resizedBanner).metadata()

const cardBack = await sharp({
      create: {
        width: homePrintSize,
        height: homePrintSize,
        channels: 3,
        background: { r: 255, g: 255, b: 255 },
      },
    })
      .composite([
        {
          input: resizedBanner,
          top: homePrintSize - (bannerMetadata.height || 0) - 100, // 100px margin from bottom
          left: Math.floor((homePrintSize - 600) / 2),
        },
      ])
      .png()
      .toBuffer()

const combinedTemplate = await sharp({
      create: {
        width: homePrintSize * 2,
        height: homePrintSize,
        channels: 3,
        background: { r: 255, g: 255, b: 255 },
      },
    })
      .composite([
        { input: cardBack, top: 0, left: 0 },
        { input: cardFront, top: 0, left: homePrintSize },
      ])
      .png()
      .toBuffer()

// Upload to Blob storage
    console.log("[v0] Uploading home print template to Blob...")
    const blob = await put(`home-print-${Date.now()}.png`, combinedTemplate, {
      access: "public",
      contentType: "image/png",
    })

console.log("[v0] Home print template URL:", blob.url)
    return NextResponse.json({ url: blob.url })
  } catch (error) {
    console.error("[v0] Error generating home print template:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Failed to generate home print template" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/fine-tune-card/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import * as fal from "@fal-ai/serverless-client"
import { put } from "@vercel/blob"

const falKey = process.env.FAL_KEY_OVERRIDE || process.env.FAL_KEY

fal.config({
  credentials: falKey,
})

export async function POST(req: NextRequest) {
  const { occasion, keywords, cardType, artStyle, recipientName, model, fineTunePrompt } = await req.json()

const nameText = recipientName ? ` ${recipientName}` : ""
  const occasionText =
    occasion === "Birthday"
      ? `Happy Birthday${nameText}`
      : occasion === "Christmas"
        ? `Merry Christmas${nameText}`
        : occasion === "Valentines"
          ? `Happy Valentine's Day${nameText}`
          : `${occasion}${nameText}`

const textRestriction =
    occasion === "Christmas"
      ? `IMPORTANT: Use EXACTLY "Merry Christmas" - do NOT substitute with "Happy Holidays", "Season's Greetings", or any other variation. The word "Christmas" MUST appear.`
      : ""

const prompt = `Create a beautiful ${artStyle.toLowerCase()} style greeting card artwork that fills the ENTIRE canvas edge-to-edge.

CRITICAL TEXT REQUIREMENT: The artwork MUST prominently display the EXACT text "${occasionText}" as large, clearly readable, beautifully styled lettering. This text is the most important element and must be fully visible and legible. Do NOT change, rephrase, or substitute any words.
${textRestriction}

CRITICAL COVERAGE REQUIREMENT: The artwork must extend to ALL edges of the image. NO white space, NO borders, NO card frames, NO envelope. This is artwork TO BE PRINTED, not a picture OF a card.

REQUIRED VISUAL ELEMENTS: The design MUST include ALL of these: ${keywords.join(", ")}. Each element should be clearly visible in the composition.

Style: ${cardType.toLowerCase()} mood.
Art style: ${artStyle.toLowerCase()} - ${
    artStyle === "Cartoon"
      ? "bold lines, exaggerated features, bright colors"
      : artStyle === "Illustration"
        ? "detailed hand-drawn style, artistic rendering"
        : artStyle === "Realistic"
          ? "photorealistic, lifelike details, natural lighting"
          : "soft watercolor washes, flowing colors, artistic brushstrokes"
  }.

FINE-TUNE ADJUSTMENTS: ${fineTunePrompt}

Create a cohesive, edge-to-edge composition with "${occasionText}" as prominent, beautiful typography integrated into the design, incorporating the fine-tune adjustments requested.`

try {
    console.log("[v0] Fine-tuning card with prompt additions:", fineTunePrompt)

const falModel = model === "nano-banana-pro" ? "fal-ai/nano-banana-pro" : "fal-ai/flux/schnell"

const result: any = await fal.subscribe(falModel, {
      input: {
        prompt: prompt,
        image_size: "square",
        width: 2048,
        height: 2048,
        num_inference_steps: model === "nano-banana-pro" ? 40 : 4,
        num_images: 1,
      },
      logs: true,
    })

const imageUrl = result.images?.[0]?.url

if (!imageUrl) {
      throw new Error("No image URL returned from fal.ai")
    }

// Upload to Vercel Blob
    const response = await fetch(imageUrl)
    const imageBuffer = await response.arrayBuffer()
    const blob = await put(`card-finetuned-${Date.now()}.png`, imageBuffer, {
      access: "public",
      contentType: "image/png",
    })

return NextResponse.json({
      imageUrl: blob.url,
      title: `${occasion} Card (Fine-tuned)`,
    })
  } catch (error) {
    console.error("[v0] Fine-tune error:", error)
    return NextResponse.json({ error: "Failed to fine-tune card" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/test-prodigi/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createProdigiOrder, GREETING_CARD_SKU } from "@/lib/prodigi"
import { generatePrintTemplate } from "@/lib/prodigi-template"

export async function POST(request: Request) {
  try {
    const { cardImageUrl } = await request.json()

if (!cardImageUrl) {
      return NextResponse.json({ error: "cardImageUrl is required" }, { status: 400 })
    }

console.log("[v0] 🧪 Testing Prodigi integration...")
    console.log("[v0] Card image URL:", cardImageUrl)

// Generate print template
    console.log("[v0] Generating print template...")
    const { pngUrl: printTemplateUrl } = await generatePrintTemplate(cardImageUrl)
    console.log("[v0] Print template PNG URL:", printTemplateUrl)

// Create test order
    const testOrder = {
      merchantReference: `test-${Date.now()}`,
      shippingMethod: "Standard" as const,
      recipient: {
        name: "Test Recipient",
        email: "test@stiffpaper.co.uk",
        address: {
          line1: "123 Test Street",
          postalOrZipCode: "SW1A 1AA",
          countryCode: "GB",
          townOrCity: "London",
        },
      },
      items: [
        {
          merchantReference: `test-card-${Date.now()}`,
          sku: GREETING_CARD_SKU,
          copies: 1,
          sizing: "fillPrintArea" as const,
          assets: [
            {
              printArea: "default",
              url: printTemplateUrl,
            },
          ],
        },
      ],
      metadata: {
        test: true,
        source: "stiffpaper.co.uk-test",
      },
    }

console.log("[v0] Sending test order to Prodigi...")
    const prodigiResponse = await createProdigiOrder(testOrder)

console.log("[v0] ✅ Test order created successfully!")
    console.log("[v0] Prodigi Order ID:", prodigiResponse.order?.id)
    console.log("[v0] Prodigi Order Status:", prodigiResponse.order?.status)

return NextResponse.json({
      success: true,
      prodigiOrderId: prodigiResponse.order?.id,
      prodigiStatus: prodigiResponse.order?.status,
      printTemplateUrl,
      testOrderData: testOrder,
      fullResponse: prodigiResponse,
    })
  } catch (error) {
    console.error("[v0] ❌ Test order failed:", error)
    return NextResponse.json(
      {
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
        details: error,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/test-prodigi/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"

export default function TestProdigiPage() {
  const [cardImageUrl, setCardImageUrl] = useState("")
  const [loading, setLoading] = useState(false)
  const [result, setResult] = useState<any>(null)

const handleTest = async () => {
    setLoading(true)
    setResult(null)

try {
      const response = await fetch("/api/test-prodigi", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl }),
      })

const data = await response.json()
      setResult(data)
    } catch (error) {
      setResult({ error: "Failed to send test order" })
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="container mx-auto py-12 px-4">
      <Card className="max-w-2xl mx-auto">
        <CardHeader>
          <CardTitle>Test Prodigi Integration</CardTitle>
          <CardDescription>Send a test order to Prodigi with a card image URL from your library</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="cardImageUrl">Card Image URL</Label>
            <Input
              id="cardImageUrl"
              placeholder="https://..."
              value={cardImageUrl}
              onChange={(e) => setCardImageUrl(e.target.value)}
            />
          </div>

<Button onClick={handleTest} disabled={loading || !cardImageUrl} className="w-full">
            {loading ? "Sending Test Order..." : "Send Test Order to Prodigi"}
          </Button>

{result && (
            <div className="mt-6">
              <h3 className="font-semibold mb-2">
                {result.success ? "✅ Test Order Successful" : "❌ Test Order Failed"}
              </h3>
              <pre className="bg-muted p-4 rounded-lg overflow-auto text-xs">{JSON.stringify(result, null, 2)}</pre>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/templates/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TemplateViewerPage() {
  const [cardInput, setCardInput] = useState("")
  const [prodigiPngUrl, setProdigiPngUrl] = useState("")
  const [homePrintPngUrl, setHomePrintPngUrl] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

const handleGenerate = async () => {
    if (!cardInput) {
      setError("Please enter a card URL or image URL")
      return
    }

setLoading(true)
    setError("")
    setProdigiPngUrl("")
    setHomePrintPngUrl("")

try {
      let imageUrl = cardInput

// Generate Prodigi template
      const prodigiResponse = await fetch("/api/generate-prodigi-png", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl: imageUrl }),
      })

if (!prodigiResponse.ok) {
        throw new Error("Failed to generate Prodigi template")
      }

const prodigiData = await prodigiResponse.json()
      setProdigiPngUrl(prodigiData.url)

// Generate Home Print template
      const homePrintResponse = await fetch("/api/generate-home-print", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl: imageUrl }),
      })

if (!homePrintResponse.ok) {
        throw new Error("Failed to generate Home Print template")
      }

const homePrintData = await homePrintResponse.json()
      setHomePrintPngUrl(homePrintData.url)
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="min-h-screen bg-background p-4 md:p-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <div>
          <h1 className="text-3xl font-bold mb-2">Print Template Viewer</h1>
          <p className="text-muted-foreground">Generate and preview both Prodigi and Home Print templates</p>
        </div>

<div className="space-y-4 max-w-xl">
          <div>
            <Label htmlFor="cardUrl">Card URL or Image URL</Label>
            <Input
              id="cardUrl"
              type="text"
              placeholder="https://stiffpaper.co.uk/card/... or direct image URL"
              value={cardInput}
              onChange={(e) => setCardInput(e.target.value)}
              className="mt-2"
            />
            <p className="text-xs text-muted-foreground mt-1">
              Paste a card URL from your library or a direct image URL
            </p>
          </div>

<Button onClick={handleGenerate} disabled={loading} className="w-full md:w-auto">
            {loading ? "Generating Templates..." : "Generate Templates"}
          </Button>

{error && <div className="p-4 bg-destructive/10 text-destructive rounded-lg text-sm">{error}</div>}
        </div>

{(prodigiPngUrl || homePrintPngUrl) && (
          <Tabs defaultValue="prodigi" className="w-full">
            <TabsList className="grid w-full max-w-md grid-cols-2">
              <TabsTrigger value="prodigi">Prodigi Template</TabsTrigger>
              <TabsTrigger value="home">Home Print</TabsTrigger>
            </TabsList>

<TabsContent value="prodigi" className="space-y-4">
              {prodigiPngUrl && (
                <>
                  <div className="p-4 bg-muted rounded-lg">
                    <p className="text-sm font-medium mb-2">Prodigi Template (6732 x 1713 px)</p>
                    <p className="text-xs text-muted-foreground mb-2">
                      4 panels: [Blank Back] [Outside Front] [Inside Left] [Inside Right]
                    </p>
                    <a
                      href={prodigiPngUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-primary hover:underline break-all"
                    >
                      {prodigiPngUrl}
                    </a>
                  </div>

<p className="text-sm text-muted-foreground">
                    Scroll horizontally to view all 4 panels of the template
                  </p>
                </>
              )}
            </TabsContent>

<TabsContent value="home" className="space-y-4">
              {homePrintPngUrl && (
                <>
                  <div className="p-4 bg-muted rounded-lg">
                    <p className="text-sm font-medium mb-2">Home Print Template (3426 x 1713 px)</p>
                    <p className="text-xs text-muted-foreground mb-2">
                      2 panels: [Card Back with Branding] [Card Front]
                    </p>
                    <a
                      href={homePrintPngUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-primary hover:underline break-all"
                    >
                      {homePrintPngUrl}
                    </a>
                  </div>

<p className="text-sm text-muted-foreground">
                    Print this on 11" x 6" paper and fold in half to create your card
                  </p>
                </>
              )}
            </TabsContent>
          </Tabs>
        )}
      </div>
    </div>
  )
}
[V0_FILE]jpg:file="public/social/instagram-post-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social/instagram-post-1-o1LBkdKEekFfDHPlJs17K45RxkJ3I5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/social/instagram-post-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social/instagram-post-2-yf2Gna3mOLQFLwrGqG68mJildfGgPe.jpg" isMerged="true"
[V0_FILE]jpg:file="public/social/tiktok-video-thumbnail.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social/tiktok-video-thumbnail-qRxcWwOXblmFZAXAU8sJVmIGe2I73Y.jpg" isMerged="true"
[V0_FILE]jpg:file="public/social/instagram-story.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/social/instagram-story-aHIy3PbSE5WJ8mro7wTbxnj98lUQdb.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/social-mockup/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="lib/prodigi.ts" isMerged="true"
// Prodigi Print-on-Demand API Client
const PRODIGI_API_URL =
  process.env.PRODIGI_USE_PRODUCTION === "true"
    ? "https://api.prodigi.com/v4.0"
    : "https://api.sandbox.prodigi.com/v4.0"

interface ProdigiAddress {
  line1: string
  line2?: string
  postalOrZipCode: string
  countryCode: string
  townOrCity: string
  stateOrCounty?: string
}

interface ProdigiRecipient {
  name: string
  email?: string
  phoneNumber?: string
  address: ProdigiAddress
}

interface ProdigiAsset {
  printArea: string
  url: string
}

interface ProdigiItem {
  merchantReference?: string
  sku: string
  copies: number
  sizing: "fillPrintArea" | "fitPrintArea" | "stretchToPrintArea"
  assets: ProdigiAsset[]
  recipientCost?: {
    amount: string
    currency: string
  }
}

interface ProdigiOrder {
  merchantReference?: string
  shippingMethod: "Budget" | "Standard" | "Express" | "Overnight"
  recipient: ProdigiRecipient
  items: ProdigiItem[]
  metadata?: Record<string, unknown>
  callbackUrl?: string // Added for webhook notifications
}

export async function createProdigiOrder(order: ProdigiOrder) {
  const apiKey = process.env.PRODIGI_API_KEY

if (!apiKey) {
    throw new Error("PRODIGI_API_KEY environment variable is not set")
  }

console.log("[v0] Prodigi API URL:", PRODIGI_API_URL)
  console.log("[v0] Prodigi API Key exists:", !!apiKey)
  console.log("[v0] Prodigi API Key length:", apiKey.length)
  console.log("[v0] Prodigi Order:", JSON.stringify(order, null, 2))

const response = await fetch(`${PRODIGI_API_URL}/Orders`, {
    method: "POST",
    headers: {
      "X-API-Key": apiKey,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(order),
  })

const data = await response.json()

console.log("[v0] Prodigi Response Status:", response.status)
  console.log("[v0] Prodigi Response:", JSON.stringify(data, null, 2))

if (!response.ok) {
    console.error("[v0] ❌❌❌ PRODIGI API ERROR ❌❌❌")
    console.error("[v0] Status Code:", response.status)
    console.error("[v0] Full Error Response:", JSON.stringify(data, null, 2))
    console.error("[v0] Error Outcome:", data.outcome)
    console.error("[v0] Error Message:", data.message)
    console.error("[v0] Error Issues:", data.issues)
    throw new Error(`Prodigi API error: ${data.outcome || "Unknown error"}. Details: ${JSON.stringify(data.issues || data.message || data)}`)
  }

return data
}

export async function getProdigiOrder(orderId: string) {
  const apiKey = process.env.PRODIGI_API_KEY

if (!apiKey) {
    throw new Error("PRODIGI_API_KEY environment variable is not set")
  }

const response = await fetch(`${PRODIGI_API_URL}/Orders/${orderId}`, {
    method: "GET",
    headers: {
      "X-API-Key": apiKey,
    },
  })

const data = await response.json()

if (!response.ok) {
    throw new Error(`Prodigi API error: ${data.outcome || "Unknown error"}`)
  }

return data
}

// Square greeting card SKU for Prodigi (5.5"x5.5" gloss coated)
export const GREETING_CARD_SKU = "GLOBAL-GRE-GLOS-6X6-BLA"
[V0_FILE]typescript:file="app/api/generate-print-template/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generatePrintTemplate } from "@/lib/prodigi-template"
import { put } from "@vercel/blob"

export async function GET(request: NextRequest) {
  const imageUrl = request.nextUrl.searchParams.get("imageUrl")

if (!imageUrl) {
    return NextResponse.json({ error: "imageUrl query param required" }, { status: 400 })
  }

try {
    const { buffer } = await generatePrintTemplate(imageUrl)

return new NextResponse(buffer, {
      headers: {
        "Content-Type": "image/png",
        "Content-Disposition": "attachment; filename=print-template.png",
        "Cache-Control": "no-cache",
      },
    })
  } catch (error) {
    console.error("Error generating print template:", error)
    return NextResponse.json({ error: "Failed to generate print template" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const { frontImageUrl } = await request.json()

if (!frontImageUrl) {
      return NextResponse.json({ error: "Front image URL required" }, { status: 400 })
    }

console.log("[v0] Generating Prodigi print template for preview...")
    const { buffer, url } = await generatePrintTemplate(frontImageUrl)

console.log("[v0] Template generated, returning URL:", url)
    return NextResponse.json({ url })
  } catch (error) {
    console.error("[v0] Error generating print template:", error)
    return NextResponse.json({ 
      error: "Failed to generate print template",
      details: error instanceof Error ? error.message : String(error)
    }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/generate-prodigi-png/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { generatePrintTemplate } from "@/lib/prodigi-template"

export async function POST(request: NextRequest) {
  try {
    console.log("[v0] Generating Prodigi PNG...")
    const { cardImageUrl, fitMode } = await request.json()
    console.log("[v0] Card image URL:", cardImageUrl)
    console.log("[v0] Fit mode:", fitMode || "native")

if (!cardImageUrl) {
      return NextResponse.json({ error: "Card image URL is required" }, { status: 400 })
    }

console.log("[v0] Calling generatePrintTemplate...")
    const result = await generatePrintTemplate(cardImageUrl, fitMode)
    console.log("[v0] Result:", result)

if (!result || !result.pngUrl) {
      console.error("[v0] No PNG URL returned")
      return NextResponse.json({ error: "Failed to generate PNG URL" }, { status: 500 })
    }

console.log("[v0] PNG URL generated:", result.pngUrl)
    return NextResponse.json({ url: result.pngUrl })
  } catch (error) {
    console.error("[v0] Error generating Prodigi PNG:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Failed to generate PNG" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="app/api/manual-prodigi-order/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import { createProdigiOrder, GREETING_CARD_SKU } from "@/lib/prodigi"

export async function POST(req: Request) {
  try {
    const body = await req.json()
    const {
      cardImageUrl,
      recipientName,
      addressLine1,
      addressLine2,
      city,
      postcode,
    } = body

console.log("[v0] Manual Prodigi order API called")

if (!cardImageUrl || !recipientName || !addressLine1 || !city || !postcode) {
      console.log("[v0] Missing required fields")
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

console.log("[v0] Creating Prodigi order manually for:", recipientName)

// Generate print template with cover fit (for legacy/backdated orders)
    const printTemplateResponse = await fetch(
      `${process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"}/api/generate-prodigi-png`,
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl, fitMode: "cover" }),
      }
    )

if (!printTemplateResponse.ok) {
      throw new Error("Failed to generate print template")
    }

const { url: printTemplateUrl } = await printTemplateResponse.json()
    console.log("[v0] Print template generated:", printTemplateUrl)

// Create Prodigi order
    const merchantRef = `MANUAL-${Date.now()}`
    const prodigiOrderPayload = {
      merchantReference: merchantRef,
      shippingMethod: "Standard",
      recipient: {
        name: recipientName,
        address: {
          line1: addressLine1,
          line2: addressLine2 || undefined,
          postalOrZipCode: postcode,
          townOrCity: city,
          countryCode: "GB",
        },
      },
      items: [
        {
          merchantReference: `card-${merchantRef}`,
          sku: GREETING_CARD_SKU,
          copies: 1,
          sizing: "fillPrintArea",
          assets: [
            {
              printArea: "default",
              url: printTemplateUrl,
            },
          ],
          recipientCost: {
            amount: "5.99",
            currency: "GBP",
          },
        },
      ],
      metadata: {
        source: "manual-resend",
        resendDate: new Date().toISOString(),
      },
    }

console.log("[v0] ========================================")
    console.log("[v0] MANUAL PRODIGI ORDER CREATION")
    console.log("[v0] ========================================")
    console.log("[v0] Payload:", JSON.stringify(prodigiOrderPayload, null, 2))

const prodigiOrder = await createProdigiOrder(prodigiOrderPayload)

console.log("[v0] ✅ Manual Prodigi order created successfully!")
    console.log("[v0] Prodigi order ID:", prodigiOrder.order?.id)
    console.log("[v0] Prodigi order status:", prodigiOrder.order?.status)

return NextResponse.json({
      success: true,
      prodigiOrderId: prodigiOrder.order?.id,
      status: prodigiOrder.order?.status,
    })
  } catch (error) {
    console.error("[v0] ❌ Manual Prodigi order failed:", error)
    return NextResponse.json(
      { error: "Failed to create Prodigi order", details: error instanceof Error ? error.message : String(error) },
      { status: 500 }
    )
  }
}
[V0_FILE]typescript:file="app/api/webhooks/stripe/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { stripe } from "@/lib/stripe"
import { createProdigiOrder, GREETING_CARD_SKU } from "@/lib/prodigi"
import type Stripe from "stripe"
import { put } from "@vercel/blob"
import { resend } from "@/lib/resend"
import { OrderConfirmationEmail } from "@/components/emails/order-confirmation"
import { generatePrintTemplate } from "@/lib/prodigi-template"

export async function POST(request: NextRequest) {
  console.log("[v0] ============================================")
  console.log("[v0] Stripe webhook received at:", new Date().toISOString())
  console.log("[v0] ============================================")

const body = await request.text()
  const signature = request.headers.get("stripe-signature")

console.log("[v0] Request body length:", body.length)
  console.log("[v0] Stripe signature present:", !!signature)
  console.log("[v0] Webhook secret configured:", !!process.env.STRIPE_WEBHOOK_SECRET)

if (!signature) {
    console.error("[v0] ERROR: Missing stripe-signature header")
    return NextResponse.json({ error: "Missing stripe-signature header" }, { status: 400 })
  }

if (!process.env.STRIPE_WEBHOOK_SECRET) {
    console.error("[v0] ERROR: STRIPE_WEBHOOK_SECRET environment variable not set")
    return NextResponse.json({ error: "Webhook secret not configured" }, { status: 500 })
  }

let event: Stripe.Event

try {
    event = stripe.webhooks.constructEvent(body, signature, process.env.STRIPE_WEBHOOK_SECRET!)
    console.log("[v0] ✅ Webhook signature verified successfully")
    console.log("[v0] Event type:", event.type)
    console.log("[v0] Event ID:", event.id)
  } catch (err) {
    console.error("[v0] ❌ Webhook signature verification failed:", err)
    return NextResponse.json({ error: "Invalid signature" }, { status: 400 })
  }

if (event.type === "checkout.session.completed") {
    console.log("[v0] 🎉 Processing checkout.session.completed event")
    const session = event.data.object as Stripe.Checkout.Session

try {
      const cardImageUrl = session.metadata?.cardImageUrl
      const recipientName = session.metadata?.recipientName
      const customerEmail = session.customer_details?.email
      const customerName = session.customer_details?.name || "Customer"

console.log("[v0] Stripe session ID:", session.id)
      console.log("[v0] Stripe metadata:", session.metadata)
      console.log("[v0] Card image URL:", cardImageUrl)
      console.log("[v0] Recipient name:", recipientName)

const rawSession = event.data.object as Record<string, unknown>
      const collectedInfo = rawSession.collected_information as Record<string, unknown> | undefined
      const collectedShipping = collectedInfo?.shipping_details as
        | {
            name?: string
            address?: {
              line1?: string
              line2?: string
              city?: string
              state?: string
              postal_code?: string
              country?: string
            }
          }
        | undefined

const shipping = session.shipping_details || collectedShipping
      const customerDetails = session.customer_details
      const address = shipping?.address || customerDetails?.address
      const recipientNameFinal = shipping?.name || customerDetails?.name || recipientName || "Customer"

if (!cardImageUrl || !address) {
        console.error("Missing required order data:", { cardImageUrl, address, shipping, customerDetails })
        return NextResponse.json({ error: "Missing order data" }, { status: 400 })
      }

console.log("[v0] Generating print template for Prodigi...")
      const { pngUrl: printTemplateUrl } = await generatePrintTemplate(cardImageUrl)
      console.log("[v0] Print template JPEG URL:", printTemplateUrl)

// Also save original image for email confirmation
      console.log("[v0] Downloading original image for email:", cardImageUrl)
      const imageResponse = await fetch(cardImageUrl)

if (!imageResponse.ok) {
        throw new Error(`Failed to download image: ${imageResponse.statusText}`)
      }

const imageBlob = await imageResponse.blob()
      const timestamp = Date.now()
      const filename = `prodigi-cards/${session.id}-${timestamp}.png`

console.log("[v0] Uploading original image to Vercel Blob:", filename)
      const blob = await put(filename, imageBlob, {
        access: "public",
        contentType: "image/png",
      })

const publicImageUrl = blob.url
      console.log("[v0] Public image URL for email:", publicImageUrl)

const prodigiOrderPayload = {
        merchantReference: session.id,
        shippingMethod: "Standard",
        callbackUrl: `${process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"}/api/webhooks/prodigi`,
        recipient: {
          name: recipientNameFinal,
          email: customerEmail || undefined,
          address: {
            line1: address.line1 || "",
            line2: address.line2 || undefined,
            postalOrZipCode: address.postal_code || "",
            countryCode: address.country || "GB",
            townOrCity: address.city || "",
            stateOrCounty: address.state || undefined,
          },
        },
        items: [
          {
            merchantReference: `card-${session.id}`,
            sku: GREETING_CARD_SKU,
            copies: 1,
            sizing: "fillPrintArea",
            assets: [
              {
                printArea: "default",
                url: printTemplateUrl,
              },
            ],
            recipientCost: {
              amount: "5.99",
              currency: "GBP",
            },
          },
        ],
        metadata: {
          stripeSessionId: session.id,
          recipientName: recipientName || "",
          source: "stiffpaper.co.uk",
        },
      }

console.log("[v0] ========================================")
      console.log("[v0] CREATING PRODIGI ORDER")
      console.log("[v0] ========================================")
      console.log("[v0] PRODIGI_USE_PRODUCTION:", process.env.PRODIGI_USE_PRODUCTION)
      console.log("[v0] PRODIGI_API_KEY exists:", !!process.env.PRODIGI_API_KEY)
      console.log("[v0] PRODIGI_API_KEY (first 10 chars):", process.env.PRODIGI_API_KEY?.substring(0, 10))
      console.log("[v0] Creating Prodigi order with payload:", JSON.stringify(prodigiOrderPayload, null, 2))
      console.log("[v0] Print template being sent to Prodigi:", printTemplateUrl)
      console.log("[v0] SKU:", GREETING_CARD_SKU)

let prodigiOrder
      try {
        prodigiOrder = await createProdigiOrder(prodigiOrderPayload)
      } catch (prodigiError) {
        console.error("[v0] ❌❌❌ PRODIGI ORDER FAILED ❌❌❌")
        console.error("[v0] Prodigi error:", prodigiError)
        console.error("[v0] Prodigi error message:", prodigiError instanceof Error ? prodigiError.message : String(prodigiError))
        throw prodigiError
      }

console.log("[v0] ✅✅✅ Prodigi order created successfully!")
      console.log("[v0] Prodigi order ID:", prodigiOrder.order?.id)
      console.log("[v0] Prodigi order status:", prodigiOrder.order?.status)
      console.log("[v0] Full Prodigi response:", JSON.stringify(prodigiOrder, null, 2))

if (customerEmail) {
        console.log("[v0] Sending order confirmation email to:", customerEmail)

try {
          const emailResult = await resend.emails.send({
            from: "Stiff Paper <orders@stiffpaper.co.uk>",
            to: customerEmail,
            subject: "Your Stiff Paper Card is on its way!",
            react: OrderConfirmationEmail({
              customerName: customerName,
              recipientName: recipientNameFinal,
              // Use original image for email, not the template
              cardImageUrl: publicImageUrl,
              shippingAddress: {
                line1: address.line1 || "",
                line2: address.line2 || undefined,
                city: address.city || "",
                postalCode: address.postal_code || "",
                country: address.country || "GB",
              },
              orderDate: new Date().toLocaleDateString("en-GB", {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric",
              }),
            }),
          })

console.log("[v0] Order confirmation email sent successfully:", emailResult)
        } catch (emailError) {
          console.error("[v0] Failed to send order confirmation email:", emailError)
        }
      } else {
        console.log("[v0] No customer email available, skipping confirmation email")
      }

return NextResponse.json({
        success: true,
        prodigiOrderId: prodigiOrder.order?.id,
      })
    } catch (error) {
      console.error("[v0] ❌ Error creating Prodigi order:", error)
      if (error instanceof Error) {
        console.error("[v0] Error message:", error.message)
        console.error("[v0] Error stack:", error.stack)
      }
      return NextResponse.json({
        success: false,
        error: error instanceof Error ? error.message : "Unknown error",
      })
    }
  } else {
    console.log("[v0] ℹ️ Received non-checkout event:", event.type)
  }

return NextResponse.json({ received: true })
}
[V0_FILE]jpg:file="public/images/card-back-panel.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/card-back-panel-VMT4dQJJusLk2NmdVZDSnH0l08505D.jpg" isMerged="true"
[V0_FILE]png:file="public/images/card-back-text.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/card-back-text-GG8WXx8ikw5ni5LacoDDuys6rWfxVq.png" isMerged="true"
[V0_FILE]javascript:file="scripts/create-card-back.mjs" isMerged="true"
import sharp from 'sharp'
import { readFileSync } from 'fs'
import { join } from 'path'

async function createCardBack() {
  // Read the original logo
  const logoPath = join(process.cwd(), 'public/images/df0b1560-8350-45b8-9aea.jpeg')
  const logoBuffer = readFileSync(logoPath)
  
  // Get logo dimensions
  const logoMeta = await sharp(logoBuffer).metadata()
  const logoWidth = logoMeta.width
  const logoHeight = logoMeta.height
  
  console.log('Original logo dimensions:', logoWidth, 'x', logoHeight)
  
  // Create a canvas that's double the height
  const canvasWidth = logoWidth
  const canvasHeight = logoHeight * 2
  
  console.log('New canvas dimensions:', canvasWidth, 'x', canvasHeight)
  
  // Create text elements as PNG overlays (no SVG)
  // We'll use a simple approach - create colored rectangles with space for text
  // Since Sharp doesn't easily do text, we'll create a white space and you can add text manually
  
  const textAreaHeight = logoHeight
  const textArea = await sharp({
    create: {
      width: canvasWidth,
      height: textAreaHeight,
      channels: 3,
      background: { r: 255, g: 255, b: 255 }
    }
  }).png().toBuffer()
  
  // Composite logo at top, white space at bottom
  const finalImage = await sharp({
    create: {
      width: canvasWidth,
      height: canvasHeight,
      channels: 3,
      background: { r: 255, g: 255, b: 255 }
    }
  })
    .composite([
      { input: logoBuffer, top: 0, left: 0 },
      { input: textArea, top: logoHeight, left: 0 }
    ])
    .png()
    .toFile(join(process.cwd(), 'public/images/card-back-extended.png'))
  
  console.log('Created extended card back at public/images/card-back-extended.png')
  console.log('Dimensions:', finalImage.width, 'x', finalImage.height)
}

createCardBack().catch(console.error)
[V0_FILE]png:file="public/images/back-text-panel.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/back-text-panel-Kvln5EWEdQRKul84UbUssyUnjKOiIJ.png" isMerged="true"
[V0_FILE]jpeg:file="public/images/df0b1560-8350-45b8-9aea.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/df0b1560-8350-45b8-9aea-4Xdwnek6qLr6ofEOoCv9yRKlg0vI6j.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="lib/prodigi-template.tsx" isMerged="true"
// Prodigi Print Template Generator
// Creates a 6732x1713 PNG template for folded greeting cards
// Layout: [Branded Back] [Outside Front] [Inside Left] [Inside Right]

import { put } from "@vercel/blob"
import { Buffer } from "buffer"
import sharp from "sharp"

const TEMPLATE_WIDTH = 6732
const TEMPLATE_HEIGHT = 1713
const PANEL_WIDTH = Math.floor(TEMPLATE_WIDTH / 4) // ~1683px per panel

const logoBuffer = Buffer.from("dummy logo data"); // Dummy data for illustration purposes

export async function generatePrintTemplate(
  frontImageUrl: string,
  fitMode: "cover" | "native" = "native",
): Promise<{ buffer: Buffer; url: string; svg: string; pngUrl: string }> {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://stiffpaper.co.uk"
  const textPanelBuffer = Buffer.from("dummy text panel data"); // Dummy data for illustration purposes

try {
    console.log("[v0] Starting template generation...")
    console.log("[v0] Front image URL:", frontImageUrl)

console.log("[v0] Fetching card front image...")
    const frontResponse = await fetch(frontImageUrl)
    console.log("[v0] Front response status:", frontResponse.status)
    console.log("[v0] Front response content-type:", frontResponse.headers.get("content-type"))

if (!frontResponse.ok) {
      throw new Error(`Failed to fetch front image: ${frontResponse.status} ${frontResponse.statusText}`)
    }

const frontBuffer = Buffer.from(await frontResponse.arrayBuffer())
    console.log("[v0] Front buffer size:", frontBuffer.length, "bytes")
    console.log("[v0] Front buffer first 100 bytes:", frontBuffer.slice(0, 100).toString("hex"))

// Validate the front image with Sharp
    console.log("[v0] Validating front image with Sharp...")
    try {
      const frontMetadata = await sharp(frontBuffer).metadata()
      console.log("[v0] Front image metadata:", frontMetadata)
    } catch (frontError) {
      console.error("[v0] Front image validation failed:", frontError)
      throw new Error(`Invalid front image: ${frontError}`)
    }

// Fetch complete card back design (logo + text + flag + copyright)
    console.log("[v0] Fetching complete card back design...")
    const cardBackUrl = `${baseUrl}/images/card-back-complete.png`
    console.log("[v0] Card back URL:", cardBackUrl)
    
    const cardBackResponse = await fetch(cardBackUrl)
    if (!cardBackResponse.ok) {
      throw new Error(`Failed to fetch card back: ${cardBackResponse.statusText}`)
    }
    const cardBackBuffer = Buffer.from(await cardBackResponse.arrayBuffer())
    console.log("[v0] Card back loaded, size:", cardBackBuffer.length, "bytes")

console.log("[v0] Building PNG template with sharp...")

// Create white background (6732x1713)
    let background
    try {
      console.log("[v0] Creating white background...")
      background = await sharp({
        create: {
          width: TEMPLATE_WIDTH,
          height: TEMPLATE_HEIGHT,
          channels: 3,
          background: { r: 255, g: 255, b: 255 },
        },
      })
        .png()
        .toBuffer()
      console.log("[v0] Background created successfully")
    } catch (bgError) {
      console.error("[v0] Background creation failed:", bgError)
      throw new Error(`Failed to create background: ${bgError}`)
    }

// ALWAYS resize front image to exact panel dimensions
    console.log("[v0] Resizing front image to EXACT panel dimensions...")
    const frontMetadata = await sharp(frontBuffer).metadata()
    console.log("[v0] Original front image dimensions:", frontMetadata.width, "x", frontMetadata.height)
    console.log("[v0] Target panel dimensions:", PANEL_WIDTH, "x", TEMPLATE_HEIGHT)
    
    // Force resize to exact dimensions - use fill to stretch/squash if needed
    const resizedFront = await sharp(frontBuffer)
      .resize({
        width: PANEL_WIDTH,
        height: TEMPLATE_HEIGHT,
        fit: sharp.fit.fill,
      })
      .toBuffer()
    
    const resizedMetadata = await sharp(resizedFront).metadata()
    console.log("[v0] Resized front image dimensions:", resizedMetadata.width, "x", resizedMetadata.height)

// Resize complete card back to 75% of original size
    console.log("[v0] Resizing card back to 75% size...")
    const resizedBackPanel = await sharp(cardBackBuffer).resize(450, null).toBuffer()
    const backPanelMeta = await sharp(resizedBackPanel).metadata()
    const backPanelHeight = backPanelMeta.height || 0
    const backPanelWidth = backPanelMeta.width || 0
    console.log("[v0] Back panel dimensions:", backPanelWidth, "x", backPanelHeight)

console.log("[v0] Compositing template...")
    console.log("[v0] Template dimensions:", TEMPLATE_WIDTH, "x", TEMPLATE_HEIGHT)
    console.log("[v0] Panel width:", PANEL_WIDTH)

// Verify resized front dimensions before compositing
    const verifyFrontMeta = await sharp(resizedFront).metadata()
    console.log("[v0] ⚠️ VERIFY - Resized front before composite:", verifyFrontMeta.width, "x", verifyFrontMeta.height)
    console.log("[v0] ⚠️ EXPECTED DIMENSIONS:", PANEL_WIDTH, "x", TEMPLATE_HEIGHT)

const backPanelLeft = Math.floor((PANEL_WIDTH - backPanelWidth) / 2)
    const backPanelTop = TEMPLATE_HEIGHT - backPanelHeight - 100
    const frontLeft = PANEL_WIDTH

console.log("[v0] Back panel position (centered bottom): left", backPanelLeft, "top", backPanelTop)
    console.log("[v0] Front position: left", frontLeft, "top 0")

let pngBuffer
    try {
      pngBuffer = await sharp(background)
        .composite([
          // Panel 1: Back panel (logo, text, flag, copyright)
          {
            input: resizedBackPanel,
            left: backPanelLeft,
            top: backPanelTop,
          },
          // Panel 2: Front card image - MUST be exactly PANEL_WIDTH x TEMPLATE_HEIGHT
          { input: resizedFront, left: frontLeft, top: 0 },
          // Panel 3 & 4: Blank (white background)
        ])
        .png()
        .toBuffer()
      console.log("[v0] Composite successful")
      
      const finalMeta = await sharp(pngBuffer).metadata()
      console.log("[v0] ⚠️ FINAL TEMPLATE:", finalMeta.width, "x", finalMeta.height)
    } catch (compositeError) {
      console.error("[v0] Composite failed:", compositeError)
      throw new Error(`Failed to composite template: ${compositeError}`)
    }

console.log("[v0] PNG template created, size:", pngBuffer.length, "bytes")

const timestamp = Date.now()
    const filename = `print-template-${timestamp}.png`
    console.log("[v0] Uploading to blob storage:", filename)
    
    const pngBlob = await put(filename, pngBuffer, {
      access: "public",
      contentType: "image/png",
    })

console.log("[v0] Generated print template (PNG):", pngBlob.url)

// Also create SVG version for reference
    const frontBase64 = frontBuffer.toString("base64")
    const frontDataUrl = `data:image/png;base64,${frontBase64}`

const svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${TEMPLATE_WIDTH}" height="${TEMPLATE_HEIGHT}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect width="100%" height="100%" fill="#FFFFFF"/>
  <image href="${frontDataUrl}" x="${PANEL_WIDTH}" y="0" width="${PANEL_WIDTH}" height="${TEMPLATE_HEIGHT}"/>
</svg>`

const svgBuffer = Buffer.from(svg)

return { buffer: svgBuffer, url: pngBlob.url, svg, pngUrl: pngBlob.url }
  } catch (error) {
    console.error("[v0] Error generating template:", error)
    throw error
  }
}
[V0_FILE]png:file="public/images/card-back-complete.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0cc53902-5ba6-476c-8929-a358c56470bb.jpeg" isMerged="true"
[V0_FILE]typescript:file="app/api/generate-card-images/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import * as fal from "@fal-ai/serverless-client"
import { put } from "@vercel/blob"

const falKey = process.env.FAL_KEY_OVERRIDE || process.env.FAL_KEY
console.log("[v0] Using fal.ai key:", falKey ? `Key available (${falKey.length} chars)` : "No key found")

fal.config({
  credentials: falKey,
})

export async function POST(req: NextRequest) {
  const totalStartTime = Date.now()

const { occasion, keywords, cardType, artStyle, recipientName, model } = await req.json()

const variations = [
    "vibrant colors with dynamic composition",
    "elegant and sophisticated with refined details",
    "playful and whimsical with energetic elements",
  ]

const generateSingleCard = async (index: number) => {
    const cardStartTime = Date.now()

const nameText = recipientName ? ` ${recipientName}` : ""
    const occasionText =
      occasion === "Birthday"
        ? `Happy Birthday${nameText}`
        : occasion === "Christmas"
          ? `Merry Christmas${nameText}`
          : occasion === "Valentines"
            ? `Happy Valentine's Day${nameText}`
            : `${occasion}${nameText}`

const textRestriction =
      occasion === "Christmas"
        ? `IMPORTANT: Use EXACTLY "Merry Christmas" - do NOT substitute with "Happy Holidays", "Season's Greetings", or any other variation. The word "Christmas" MUST appear.`
        : ""

const prompt = `Create a beautiful ${artStyle.toLowerCase()} style greeting card artwork that fills the ENTIRE canvas edge-to-edge.

CRITICAL COVERAGE REQUIREMENT: The artwork must extend to ALL edges of the image. NO white space, NO borders, NO card frames, NO envelope. This is artwork TO BE PRINTED, not a picture OF a card.

REQUIRED VISUAL ELEMENTS: The design MUST include ALL of these: ${keywords.join(", ")}. Each element should be clearly visible in the composition.

Style: ${variations[index]}, ${cardType.toLowerCase()} mood.
Art style: ${artStyle.toLowerCase()} - ${
      artStyle === "Cartoon"
        ? "bold lines, exaggerated features, bright colors"
        : artStyle === "Illustration"
          ? "detailed hand-drawn style, artistic rendering"
          : artStyle === "Realistic"
            ? "photorealistic, lifelike details, natural lighting"
            : "soft watercolor washes, flowing colors, artistic brushstrokes"
    }.

Create a cohesive, edge-to-edge composition with "${occasionText}" as prominent, beautiful typography integrated into the design.`

try {
      console.log(`[v0] Card ${index + 1}: Starting generation with model: ${model}`)
      const falStartTime = Date.now()

const falModel = model === "nano-banana-pro" ? "fal-ai/nano-banana-pro" : "fal-ai/flux/schnell"

const result: any = await fal.subscribe(falModel, {
        input: {
          prompt: prompt,
          image_size: "custom",
          width: 1683,
          height: 1713,
          num_inference_steps: model === "nano-banana-pro" ? 40 : 4,
          num_images: 1,
        },
        logs: true,
      })

const falEndTime = Date.now()
      console.log(`[v0] Card ${index + 1}: fal.ai generation took ${(falEndTime - falStartTime) / 1000}s`)

const imageUrl = result.images?.[0]?.url

if (!imageUrl) {
        throw new Error("No image URL returned from fal.ai")
      }

const finalImageUrl = imageUrl

const blobStartTime = Date.now()
      const response = await fetch(finalImageUrl)
      const imageBuffer = await response.arrayBuffer()
      
      // Check actual image dimensions
      const sharp = (await import("sharp")).default
      const metadata = await sharp(Buffer.from(imageBuffer)).metadata()
      console.log(`[v0] Card ${index + 1}: ⚠️ ACTUAL IMAGE DIMENSIONS: ${metadata.width} x ${metadata.height}`)
      console.log(`[v0] Card ${index + 1}: Expected dimensions: 1683 x 1713`)
      
      const blob = await put(`card-${Date.now()}-${index}.png`, imageBuffer, {
        access: "public",
        contentType: "image/png",
      })
      const blobEndTime = Date.now()
      console.log(`[v0] Card ${index + 1}: Blob upload took ${(blobEndTime - blobStartTime) / 1000}s`)

const cardEndTime = Date.now()
      console.log(`[v0] Card ${index + 1}: Total time ${(cardEndTime - cardStartTime) / 1000}s`)

return {
        id: index + 1,
        imageUrl: blob.url,
        title: `${occasion} Card ${index + 1}`,
        variation: variations[index],
      }
    } catch (error) {
      console.error(`[v0] Card ${index + 1}: Error after ${(Date.now() - cardStartTime) / 1000}s:`, error)
      console.error(`[v0] Error details:`, JSON.stringify(error, null, 2))
      throw error
    }
  }

try {
    console.log("[v0] Starting: Generating 3 cards concurrently with fal.ai")

const cards = await Promise.all([generateSingleCard(0), generateSingleCard(1), generateSingleCard(2)])

const totalEndTime = Date.now()
    console.log(`[v0] TOTAL API TIME: ${(totalEndTime - totalStartTime) / 1000}s`)

return NextResponse.json({ cards })
  } catch (error) {
    console.error(`[v0] Error after ${(Date.now() - totalStartTime) / 1000}s:`, error)
    return NextResponse.json({ error: "Failed to generate cards" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/social-promo/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/single-card-view.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Share2, CreditCard, X, Sparkles, ArrowLeft, Plus, Download, Loader2, ImageIcon, Send } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import Checkout from "@/components/checkout"
import type { Card } from "@/app/actions/cards"

interface SingleCardViewProps {
  card: Card
}

export function SingleCardView({ card }: SingleCardViewProps) {
  const [showCheckout, setShowCheckout] = useState(false)
  const [shareText, setShareText] = useState("Share")
  const [isDownloading, setIsDownloading] = useState(false)
  const [isDownloadingHomePrint, setIsDownloadingHomePrint] = useState(false)
  const [showManualResend, setShowManualResend] = useState(false)
  const [isResending, setIsResending] = useState(false)
  const [showProdigiPreview, setShowProdigiPreview] = useState(false)
  const [prodigiPreviewUrl, setProdigiPreviewUrl] = useState<string | null>(null)
  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
  const [isAdminUnlocked, setIsAdminUnlocked] = useState(false)
  const [showAdminAuth, setShowAdminAuth] = useState(false)
  const [adminPassword, setAdminPassword] = useState("")
  const [resendForm, setResendForm] = useState({
    recipientName: card.recipient_name || "",
    addressLine1: "",
    addressLine2: "",
    city: "",
    postcode: "",
  })

const handleAdminAuth = () => {
    const correctPassword = process.env.NEXT_PUBLIC_ADMIN_PASSWORD || "admin123"
    if (adminPassword === correctPassword) {
      setIsAdminUnlocked(true)
      setShowAdminAuth(false)
      setAdminPassword("")
    } else {
      alert("Incorrect password")
      setAdminPassword("")
    }
  }

const handleShare = async () => {
    const shareUrl = typeof window !== "undefined" ? window.location.href : ""

try {
      await navigator.clipboard.writeText(shareUrl)
      setShareText("✓ Link copied!")
      setTimeout(() => setShareText("Share"), 2000)
    } catch (err) {
      console.error("Error copying link:", err)
    }
  }

const handleDownloadTemplate = async () => {
    if (!card.image_url) return

setIsDownloading(true)
    try {
      const response = await fetch("/api/generate-prodigi-png", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl: card.image_url }),
      })

if (!response.ok) {
        throw new Error("Failed to generate PNG")
      }

const { url: pngUrl } = await response.json()

if (!pngUrl) {
        throw new Error("No PNG URL returned")
      }

const pngResponse = await fetch(pngUrl)
      const blob = await pngResponse.blob()
      const downloadUrl = URL.createObjectURL(blob)

const a = document.createElement("a")
      a.href = downloadUrl
      a.download = `stiffpaper-template-${card.id}.png`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(downloadUrl)
    } catch (error) {
      console.error("Error downloading template:", error)
      alert("Failed to generate PNG template. Please try again.")
    } finally {
      setIsDownloading(false)
    }
  }

const handleDownloadHomePrint = async () => {
    if (!card.image_url) return

setIsDownloadingHomePrint(true)
    try {
      const response = await fetch("/api/generate-home-print", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ cardImageUrl: card.image_url }),
      })

if (!response.ok) {
        throw new Error("Failed to generate home print template")
      }

const { url: homePrintUrl } = await response.json()

if (!homePrintUrl) {
        throw new Error("No home print URL returned")
      }

const pngResponse = await fetch(homePrintUrl)
      const blob = await pngResponse.blob()
      const downloadUrl = URL.createObjectURL(blob)

const a = document.createElement("a")
      a.href = downloadUrl
      a.download = `stiffpaper-home-print-${card.id}.png`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(downloadUrl)
    } catch (error) {
      console.error("Error downloading home print:", error)
      alert("Failed to generate home print template. Please try again.")
    } finally {
      setIsDownloadingHomePrint(false)
    }
  }

const handleManualResend = async () => {
    if (!card.image_url) return

setIsResending(true)
    try {
      console.log("[v0] Sending manual Prodigi order...")
      const response = await fetch("/api/manual-prodigi-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          cardImageUrl: card.image_url,
          ...resendForm,
        }),
      })

const data = await response.json()

if (!response.ok) {
        throw new Error(data.details || data.error || "Failed to send order to Prodigi")
      }

console.log("[v0] Manual Prodigi order successful:", data)
      alert(`✅ Order sent to Prodigi successfully!\n\nProdigi Order ID: ${data.prodigiOrderId}\nStatus: ${data.status}`)
      setShowManualResend(false)
      setResendForm({
        recipientName: card.recipient_name || "",
        addressLine1: "",
        addressLine2: "",
        city: "",
        postcode: "",
      })
    } catch (error) {
      console.error("[v0] Manual Prodigi order failed:", error)
      alert(`❌ Failed to send order to Prodigi:\n${error instanceof Error ? error.message : String(error)}`)
    } finally {
      setIsResending(false)
    }
  }

const handleProdigiPreview = async () => {
    if (!card.image_url) return

setIsLoadingPreview(true)
    setShowProdigiPreview(true)
    try {
      console.log("[v0] Generating Prodigi print preview...")
      const response = await fetch("/api/generate-print-template", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          frontImageUrl: card.image_url,
        }),
      })

if (!response.ok) {
        const data = await response.json()
        throw new Error(data.error || "Failed to generate preview")
      }

const data = await response.json()
      console.log("[v0] Prodigi preview generated:", data.url)
      setProdigiPreviewUrl(data.url)
    } catch (error) {
      console.error("[v0] Prodigi preview failed:", error)
      alert(`❌ Failed to generate preview:\n${error instanceof Error ? error.message : String(error)}`)
      setShowProdigiPreview(false)
    } finally {
      setIsLoadingPreview(false)
    }
  }

return (
    <div className="max-w-md mx-auto space-y-4">
      {/* Back button */}
      <Link href="/library">
        <Button variant="ghost" size="sm" className="gap-2 -ml-2">
          <ArrowLeft className="h-4 w-4" />
          Back to Gallery
        </Button>
      </Link>

{/* Card info */}
      <div className="flex flex-wrap gap-2 justify-center">
        {card.occasion && (
          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium">
            <Sparkles className="h-3 w-3" />
            {card.occasion}
          </span>
        )}
        {card.art_style && (
          <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full bg-muted text-muted-foreground text-sm">
            {card.art_style}
          </span>
        )}
      </div>

{/* Main card image */}
      <div className="relative aspect-square bg-muted rounded-lg overflow-hidden">
        <Image src={card.image_url || "/placeholder.svg"} alt={card.occasion || "Card"} fill className="object-contain" />
      </div>

{/* Action buttons */}
      <div className="flex gap-2 justify-center flex-wrap">
        <Button
          variant="outline"
          size="sm"
          className="gap-1 h-8 text-xs bg-black hover:bg-zinc-800 text-white hover:text-white border-black px-3 rounded-full cursor-pointer w-[120px] flex-shrink-0"
          onClick={handleShare}
        >
          <Share2 className="h-3 w-3 flex-shrink-0" />
          <span className="flex-1 text-center">{shareText}</span>
        </Button>
        <Link href="/">
          <Button
            variant="outline"
            size="sm"
            className="gap-1 h-8 text-xs bg-black hover:bg-zinc-800 text-white hover:text-white border-black px-3 rounded-full cursor-pointer flex-shrink-0"
          >
            <Plus className="h-3 w-3 flex-shrink-0" />
            Create Another
          </Button>
        </Link>
        <Button
          size="sm"
          className="gap-1 h-8 text-xs bg-primary hover:bg-primary/90 px-3 rounded-full cursor-pointer flex-shrink-0"
          onClick={() => setShowCheckout(true)}
        >
          <CreditCard className="h-3 w-3 flex-shrink-0" />
          Pay & Post - £5.99
        </Button>
      </div>

{/* Admin Options - Hidden behind lock */}
      {!isAdminUnlocked ? (
        <div className="flex justify-center pt-2">
          <Button
            variant="outline"
            size="sm"
            className="gap-2 h-8 text-xs px-4 rounded-full bg-white/5 hover:bg-white/10 border-white/10"
            onClick={() => setShowAdminAuth(true)}
          >
            🔒 Admin Options
          </Button>
        </div>
      ) : (
        <div className="flex flex-col gap-2 pt-2">
          <div className="flex justify-center">
            <Button
              variant="destructive"
              size="sm"
              className="gap-2 h-8 text-xs px-4 rounded-full"
              onClick={() => setShowManualResend(true)}
            >
              <Send className="h-3 w-3" />
              Resend to Prodigi (Admin)
            </Button>
          </div>
          <div className="flex justify-center">
            <Button
              variant="outline"
              size="sm"
              className="gap-2 h-8 text-xs px-4 rounded-full bg-transparent"
              onClick={handleProdigiPreview}
            >
              <ImageIcon className="h-3 w-3" />
              Prodigi Print Preview
            </Button>
          </div>
          <div className="flex justify-center">
            <Link href={`/social-mockup?cardUrl=${encodeURIComponent(card.image_url || '')}`}>
              <Button
                variant="outline"
                size="sm"
                className="gap-2 h-8 text-xs px-4 rounded-full bg-transparent"
              >
                <ImageIcon className="h-3 w-3" />
                Create Social Mockup
              </Button>
            </Link>
          </div>
          <div className="flex justify-center">
            <Button
              variant="outline"
              size="sm"
              className="gap-2 h-8 text-xs px-4 rounded-full bg-transparent"
              onClick={handleDownloadTemplate}
              disabled={isDownloading}
            >
              {isDownloading ? <Loader2 className="h-3 w-3 animate-spin" /> : <Download className="h-3 w-3" />}
              {isDownloading ? "Generating..." : "Download Print Template"}
            </Button>
          </div>
          <div className="flex justify-center">
            <Button
              variant="outline"
              size="sm"
              className="gap-2 h-8 text-xs px-4 rounded-full bg-transparent"
              onClick={handleDownloadHomePrint}
              disabled={isDownloadingHomePrint}
            >
              {isDownloadingHomePrint ? <Loader2 className="h-3 w-3 animate-spin" /> : <Download className="h-3 w-3" />}
              {isDownloadingHomePrint ? "Generating..." : "Download Home Print (145mm)"}
            </Button>
          </div>
        </div>
      )}

{/* Admin Authentication Modal */}
      {showAdminAuth && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-md p-4">
          <div className="relative bg-[#141414] rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl border border-white/5">
            <button
              onClick={() => {
                setShowAdminAuth(false)
                setAdminPassword("")
              }}
              className="absolute top-3 right-3 z-10 h-7 w-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
            >
              <X className="h-3.5 w-3.5 text-white" />
            </button>

<div className="p-6 space-y-4">
              <div className="text-center space-y-1">
                <h3 className="font-semibold text-white text-lg">Admin Access Required</h3>
                <p className="text-sm text-white/50">Enter password to unlock admin options</p>
              </div>

<div className="space-y-3">
                <Input
                  type="password"
                  placeholder="Enter admin password"
                  value={adminPassword}
                  onChange={(e) => setAdminPassword(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleAdminAuth()
                    }
                  }}
                  className="bg-white/5 border-white/10 text-white"
                  autoFocus
                />
              </div>

<Button onClick={handleAdminAuth} className="w-full gap-2">
                🔓 Unlock Admin Options
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Checkout modal */}
      {showCheckout && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-md p-4">
          <div className="relative bg-[#141414] rounded-3xl w-full max-w-[280px] overflow-hidden shadow-2xl border border-white/5">
            <button
              onClick={() => setShowCheckout(false)}
              className="absolute top-3 right-3 z-10 h-7 w-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
            >
              <X className="h-3.5 w-3.5 text-white" />
            </button>

<div className="p-4 pt-2 space-y-3">
              <div className="text-center space-y-0.5">
                <h3 className="font-semibold text-white text-sm">
                  {card.recipient_name ? `Card for ${card.recipient_name}` : "Your Card"}
                </h3>
                <p className="text-[10px] text-white/50">Printed & posted to UK</p>
                <p className="text-xl font-bold text-primary pt-1">£5.99</p>
              </div>

<Checkout
                productId="stiff-paper-card"
                cardImageUrl={card.image_url}
                recipientName={card.recipient_name || undefined}
              />
            </div>
          </div>
        </div>
      )}

{/* Manual Resend to Prodigi Modal */}
      {showManualResend && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-md p-4">
          <div className="relative bg-[#141414] rounded-3xl w-full max-w-md overflow-hidden shadow-2xl border border-white/5">
            <button
              onClick={() => setShowManualResend(false)}
              className="absolute top-3 right-3 z-10 h-7 w-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
            >
              <X className="h-3.5 w-3.5 text-white" />
            </button>

<div className="p-6 space-y-4">
              <div className="text-center space-y-1">
                <h3 className="font-semibold text-white text-lg">Resend Order to Prodigi</h3>
                <p className="text-sm text-white/50">Admin Only - Enter shipping details</p>
              </div>

<div className="space-y-3">
                <div>
                  <label className="text-xs text-white/70 mb-1 block">Recipient Name</label>
                  <Input
                    type="text"
                    placeholder="John Smith"
                    value={resendForm.recipientName}
                    onChange={(e) => setResendForm({ ...resendForm, recipientName: e.target.value })}
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>

<div>
                  <label className="text-xs text-white/70 mb-1 block">Address Line 1</label>
                  <Input
                    type="text"
                    placeholder="123 Main Street"
                    value={resendForm.addressLine1}
                    onChange={(e) => setResendForm({ ...resendForm, addressLine1: e.target.value })}
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>

<div>
                  <label className="text-xs text-white/70 mb-1 block">Address Line 2 (Optional)</label>
                  <Input
                    type="text"
                    placeholder="Apartment 4B"
                    value={resendForm.addressLine2}
                    onChange={(e) => setResendForm({ ...resendForm, addressLine2: e.target.value })}
                    className="bg-white/5 border-white/10 text-white"
                  />
                </div>

<div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="text-xs text-white/70 mb-1 block">City</label>
                    <Input
                      type="text"
                      placeholder="London"
                      value={resendForm.city}
                      onChange={(e) => setResendForm({ ...resendForm, city: e.target.value })}
                      className="bg-white/5 border-white/10 text-white"
                    />
                  </div>
                  <div>
                    <label className="text-xs text-white/70 mb-1 block">Postcode</label>
                    <Input
                      type="text"
                      placeholder="SW1A 1AA"
                      value={resendForm.postcode}
                      onChange={(e) => setResendForm({ ...resendForm, postcode: e.target.value })}
                      className="bg-white/5 border-white/10 text-white"
                    />
                  </div>
                </div>
              </div>

<Button
                onClick={handleManualResend}
                disabled={isResending || !resendForm.recipientName || !resendForm.addressLine1 || !resendForm.city || !resendForm.postcode}
                className="w-full gap-2"
              >
                {isResending ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Sending to Prodigi...
                  </>
                ) : (
                  <>
                    <Send className="h-4 w-4" />
                    Send to Prodigi
                  </>
                )}
              </Button>
            </div>
          </div>
        </div>
      )}

{/* Prodigi Print Preview Modal */}
      {showProdigiPreview && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/95 backdrop-blur-md p-4">
          <div className="relative bg-[#141414] rounded-3xl w-full max-w-6xl overflow-hidden shadow-2xl border border-white/5">
            <button
              onClick={() => {
                setShowProdigiPreview(false)
                setProdigiPreviewUrl(null)
              }}
              className="absolute top-3 right-3 z-10 h-7 w-7 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors"
            >
              <X className="h-3.5 w-3.5 text-white" />
            </button>

<div className="p-6 space-y-4">
              <div className="text-center space-y-1">
                <h3 className="font-semibold text-white text-lg">Prodigi Print Template Preview</h3>
                <p className="text-sm text-white/50">This is what will be sent to Prodigi for printing (6732x1713px)</p>
              </div>

<div className="bg-black/30 rounded-lg p-4 overflow-auto max-h-[70vh]">
                {isLoadingPreview ? (
                  <div className="flex items-center justify-center h-64">
                    <Loader2 className="h-8 w-8 animate-spin text-primary" />
                  </div>
                ) : prodigiPreviewUrl ? (
                  <div className="flex justify-center">
                    <img
                      src={prodigiPreviewUrl || "/placeholder.svg"}
                      alt="Prodigi print template"
                      className="max-w-full h-auto"
                    />
                  </div>
                ) : (
                  <div className="flex items-center justify-center h-64 text-white/50">
                    Failed to load preview
                  </div>
                )}
              </div>

{prodigiPreviewUrl && (
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    className="flex-1 bg-transparent"
                    onClick={() => window.open(prodigiPreviewUrl, '_blank')}
                  >
                    Open in New Tab
                  </Button>
                  <Button
                    variant="outline"
                    className="flex-1 bg-transparent"
                    onClick={() => {
                      const a = document.createElement('a')
                      a.href = prodigiPreviewUrl
                      a.download = `prodigi-template-${card.id}.png`
                      a.click()
                    }}
                  >
                    <Download className="h-4 w-4 mr-2" />
                    Download Template
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/card-creation-form.tsx" isMerged="true"
"use client"

import React from "react"
import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Sparkles, ArrowRight, Plus } from "lucide-react"
import { CardCarousel } from "./card-carousel"
import { saveGeneration } from "@/lib/card-storage"
import { saveCardToGallery } from "@/app/actions/cards"

interface GeneratedCard {
  id: string // Changed from number to string to support database UUIDs
  imageUrl: string
  title: string
}

interface CardCarouselProps {
  cards: GeneratedCard[]
  occasion: string
  cardType: string
  artStyle: string
  recipientName?: string
  isGenerating?: boolean
  generatingIndex?: number | null
  totalCards?: number
  revealingCard?: number | null
  onCreateAnother?: () => void
  onFineTune?: (cardIndex: number, fineTunePrompt: string) => void
}

const occasions = [
  { name: "Birthday", emoji: "🎂" },
  { name: "Christmas", emoji: "🎄" },
  { name: "Valentines", emoji: "❤️" },
]
const cardTypes = [
  { name: "Funny", emoji: "😂" },
  { name: "Romantic", emoji: "💕" },
  { name: "Heartfelt", emoji: "🥹" },
  { name: "Professional", emoji: "💼" },
  { name: "Casual", emoji: "😎" },
  { name: "Inspirational", emoji: "✨" },
]
const artStyles = [
  { name: "Cartoon", emoji: "🖍️" },
  { name: "Illustration", emoji: "🎨" },
  { name: "Realistic", emoji: "📸" },
  { name: "Watercolor", emoji: "💧" },
]

export function CardCreationForm({ id }: { id?: string }) {
  const [step, setStep] = useState(1)
  const [step2SubPage, setStep2SubPage] = useState(1) // 1 = name + appearance, 2 = keywords
  const formRef = useRef<HTMLDivElement>(null)
  const hasMounted = useRef(false)
  const [occasion, setOccasion] = useState("")
  const [customOccasion, setCustomOccasion] = useState("")
  const [keywords, setKeywords] = useState<string[]>(["", "", "", ""]) // Updated to 4 keywords to match new form layout
  const [cardType, setCardType] = useState("")
  const [artStyle, setArtStyle] = useState("")
  const [recipientName, setRecipientName] = useState("")
  const [isGenerating, setIsGenerating] = useState(false)
  const [loadingProgress, setLoadingProgress] = useState(0)
  const [generatedCards, setGeneratedCards] = useState<Array<{ id: string; imageUrl: string; title: string }> | null>(
    // Changed id type from number to string
    null,
  )
  const [visibleCardCount, setVisibleCardCount] = useState(0)
  const [showCardPopup, setShowCardPopup] = useState<number | null>(null)
  const [revealingCard, setRevealingCard] = useState<number | null>(null)
  const [recipientImage, setRecipientImage] = useState<string | null>(null) // Declare recipientImage

useEffect(() => {
    if (!hasMounted.current) {
      hasMounted.current = true
      return
    }

if (formRef.current) {
      const yOffset = -120
      const element = formRef.current
      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset
      window.scrollTo({ top: y, behavior: "smooth" })
    }
  }, [step, step2SubPage]) // Added step2SubPage to trigger scroll when changing sub-pages

const updateKeyword = (index: number, value: string) => {
    const newKeywords = [...keywords]
    newKeywords[index] = value
    setKeywords(newKeywords)
  }

const addKeyword = () => {
    setKeywords([...keywords, ""])
  }

const removeKeyword = (index: number) => {
    if (keywords.length > 1) {
      const newKeywords = keywords.filter((_, i) => i !== index)
      setKeywords(newKeywords)
    }
  }

const generateCards = async () => {
    console.log("[v0] Generate cards clicked - starting generation")
    console.log("[v0] isGenerating state:", isGenerating)

if (isGenerating) {
      console.log("[v0] Already generating, returning early")
      return
    }

console.log("[v0] Setting isGenerating to true")
    setIsGenerating(true)
    setGeneratedCards(null)
    setVisibleCardCount(0)
    setRevealingCard(null)
    setLoadingProgress(0)

// Fake loading bar animation - simulates progress over ~60 seconds
    const progressInterval = setInterval(() => {
      setLoadingProgress((prev) => {
        if (prev >= 95) {
          clearInterval(progressInterval)
          return 95 // Stop at 95% until actual completion
        }
        // Slower progress as we get higher
        const increment = prev < 50 ? 2 : prev < 80 ? 1 : 0.5
        return Math.min(prev + increment, 95)
      })
    }, 800) // Update every 800ms

const requestBody: Record<string, unknown> = {
    occasion: customOccasion || occasion,
    keywords: keywords.filter((k) => k.trim() !== ""),
    cardType,
    artStyle,
    recipientName: recipientName.trim(),
    model: "nano-banana-pro",
  }

console.log("[v0] Request body:", JSON.stringify(requestBody))

try {
      console.log("[v0] Starting fetch to /api/generate-card-images")
      const startTime = Date.now()
      const response = await fetch("/api/generate-card-images", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(requestBody),
      })
      
      clearInterval(progressInterval)

console.log("[v0] Fetch completed in:", Date.now() - startTime, "ms")
      console.log("[v0] Fetch response status:", response.status)
      console.log("[v0] Response ok:", response.ok)

if (!response.ok) {
        const errorText = await response.text()
        console.log("[v0] Error response:", errorText)
        throw new Error("Failed to generate cards")
      }

console.log("[v0] Parsing response JSON")
      const data = await response.json()
      console.log("[v0] Response data:", JSON.stringify(data))
      const { cards } = data
      console.log("[v0] Cards received:", cards?.length)
      console.log("[v0] Cards data:", JSON.stringify(cards))

const cardsWithDbIds = []
      console.log("[v0] Starting to save cards to database")
      for (let i = 0; i < cards.length; i++) {
        const card = cards[i]
        console.log(`[v0] Saving card ${i + 1} to gallery...`)
        try {
          const result = await saveCardToGallery(
            card.imageUrl,
            customOccasion || occasion,
            artStyle,
            recipientName.trim(),
            keywords.filter((k) => k.trim() !== "").join(", "),
            true,
          )
          console.log(`[v0] Card ${i + 1} save result:`, JSON.stringify(result))

if (result.success && result.card) {
            cardsWithDbIds.push({
              id: result.card.id,
              imageUrl: card.imageUrl,
              title: card.title,
            })
            console.log(`[v0] Card ${i + 1} added with DB ID:`, result.card.id)
          } else {
            console.log(`[v0] Card ${i + 1} save failed or no card returned`)
          }
        } catch (saveError) {
          console.error(`[v0] Error saving card ${i + 1}:`, saveError)
        }
      }

console.log("[v0] All cards saved. Total with DB IDs:", cardsWithDbIds.length)
      console.log("[v0] Setting generatedCards state")
      setGeneratedCards(cardsWithDbIds)
      setLoadingProgress(100) // Complete the loading bar
      console.log("[v0] Setting isGenerating to false")
      setIsGenerating(false)

console.log("[v0] Starting card reveal sequence")
      setVisibleCardCount(1)
      setShowCardPopup(0)
      setTimeout(() => setShowCardPopup(null), 2000)

setTimeout(() => {
        setRevealingCard(1)
      }, 4000)

setTimeout(() => {
        setVisibleCardCount(2)
        setRevealingCard(null)
        setShowCardPopup(1)
        setTimeout(() => setShowCardPopup(null), 2000)
      }, 5000)

setTimeout(() => {
        setRevealingCard(2)
      }, 9000)

setTimeout(async () => {
        setVisibleCardCount(3)
        setRevealingCard(null)
        setShowCardPopup(2)
        setTimeout(() => setShowCardPopup(null), 2000)

saveGeneration({
          occasion: customOccasion || occasion,
          keywords: keywords.filter((k) => k.trim() !== ""),
          cardType,
          artStyle,
          recipientName: recipientName.trim(),
          hasReferenceImage: false,
          cards: cardsWithDbIds, // Use cards with database IDs
        })
      }, 10000)
    } catch (error) {
      console.error("[v0] Error generating cards:", error)
      setIsGenerating(false)
      setLoadingProgress(0)
    }
  }

const handleFineTune = async (cardIndex: number, fineTunePrompt: string) => {
    console.log("[v0] Fine tuning card at index:", cardIndex, "with prompt:", fineTunePrompt)

if (!generatedCards) return

try {
      const response = await fetch("/api/fine-tune-card", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          occasion: customOccasion || occasion,
          keywords: keywords.filter((k) => k.trim() !== ""),
          cardType,
          artStyle,
          recipientName: recipientName.trim(),
          model: "nano-banana-pro",
          fineTunePrompt,
        }),
      })

if (!response.ok) {
        throw new Error("Failed to fine-tune card")
      }

const data = await response.json()
      console.log("[v0] Fine-tuned card response:", data)

// Save the fine-tuned card to database
      const result = await saveCardToGallery(
        data.imageUrl,
        customOccasion || occasion,
        artStyle,
        recipientName.trim(),
        keywords.filter((k) => k.trim() !== "").join(", "),
        true,
      )

if (result.success && result.card) {
        // Replace the card at the current index with the fine-tuned version
        const updatedCards = [...generatedCards]
        updatedCards[cardIndex] = {
          id: result.card.id,
          imageUrl: data.imageUrl,
          title: data.title,
        }
        setGeneratedCards(updatedCards)
        console.log("[v0] Fine-tuned card replaced at index:", cardIndex)
      }
    } catch (error) {
      console.error("[v0] Fine-tune error:", error)
      throw error
    }
  }

const handleGoBackToKeywords = () => {
    // Reset to step 2 (keywords page) with sub-page 2
    // This preserves all form values so user can edit keywords
    setStep(2)
    setStep2SubPage(2)
    setGeneratedCards(null)
    setVisibleCardCount(0)
    setIsGenerating(false)
  }

const canProceed = () => {
    switch (step) {
      case 1:
        return occasion !== "" || customOccasion !== ""
      case 2:
        if (step2SubPage === 1) {
          return keywords[0]?.trim() !== ""
        }
        const filledKeywords = keywords.slice(1).filter((k) => k.trim() !== "")
        return filledKeywords.length >= 2
      case 3:
        return cardType !== ""
      case 4:
        return artStyle !== ""
      default:
        return false
    }
  }

const nextStep = () => {
    if (step === 2 && step2SubPage === 1) {
      setStep2SubPage(2)
      return
    }
    if (canProceed() && step < 4) {
      setStep(step + 1)
      if (step + 1 !== 2) {
        setStep2SubPage(1) // Reset sub-page when leaving step 2
      }
    }
  }

const prevStep = () => {
    if (step === 2 && step2SubPage === 2) {
      setStep2SubPage(1)
      return
    }
    if (step > 1) {
      setIsGenerating(false)
      setStep(step - 1)
      if (step - 1 === 2) {
        setStep2SubPage(2) // Go to last sub-page when going back to step 2
      }
    }
  }

const resetForm = () => {
    setGeneratedCards(null)
    setStep(1)
    setStep2SubPage(1) // Reset sub-page
    setOccasion("")
    setCustomOccasion("")
    setKeywords(["", "", "", ""])
    setCardType("")
    setArtStyle("")
    setRecipientName("")
    setRecipientImage(null) // Reset recipientImage
    setIsGenerating(false)
    setVisibleCardCount(0)
    setRevealingCard(null)
  }

if (generatedCards && generatedCards.length > 0) {
    const visibleCards = generatedCards.slice(0, visibleCardCount)
    const isRevealing = visibleCardCount < 3

return (
      <div className="w-full max-w-5xl mx-auto space-y-6">
        {showCardPopup !== null && (
          <div className="fixed top-20 left-1/2 -translate-x-1/2 z-50 animate-in fade-in zoom-in-95 slide-in-from-top-4 duration-500">
            <div className="bg-primary text-primary-foreground px-6 py-3 rounded-full shadow-2xl flex items-center gap-3 border-2 border-primary-foreground/20">
              <Sparkles className="h-5 w-5 animate-pulse" />
              <span className="font-semibold">Card {showCardPopup + 1} ready!</span>
            </div>
          </div>
        )}

<CardCarousel
          cards={visibleCards}
          occasion={customOccasion || occasion}
          cardType={cardType}
          artStyle={artStyle}
          recipientName={recipientName}
          isGenerating={isRevealing}
          generatingIndex={isRevealing ? visibleCardCount : null}
          totalCards={3}
          revealingCard={revealingCard}
          onCreateAnother={resetForm}
          onFineTune={handleFineTune}
          onGoBack={handleGoBackToKeywords}
        />
      </div>
    )
  }

return (
    <Card ref={formRef} id={id} className="w-full max-w-2xl mx-auto shadow-lg bg-zinc-900 border-white/10">
      <CardHeader className="space-y-1 pb-3 pt-4 px-4 md:px-6">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl md:text-2xl font-bold text-white">
            {step === 2
              ? "Describe Recipient"
              : step === 3
                ? "What's the Tone of Your Card?"
                : step === 4
                  ? "Choose an Art Style"
                  : "Create Your Card"}
          </CardTitle>
          <div className="flex items-center gap-1">
            <Sparkles className="h-4 w-4 text-primary" />
            <span className="text-xs text-muted-foreground">Step {step} of 4</span>
          </div>
        </div>
        <CardDescription className="text-sm text-gray-400">
          Answer a few questions and let AI design the perfect card for you
        </CardDescription>
      </CardHeader>

<CardContent className="px-4 md:px-6 pb-4">
        <div className="space-y-4">
          {step === 1 && (
            <div key="step-1" className="space-y-3 animate-in fade-in slide-in-from-bottom-4 duration-300">
              <Label htmlFor="occasion" className="text-sm font-semibold text-white">
                What's the occasion?
              </Label>
              <div className="flex flex-col gap-2">
                {occasions.map((occ) => (
                  <button
                    key={occ.name}
                    type="button"
                    onClick={() => {
                      setOccasion(occ.name)
                      setCustomOccasion("")
                    }}
                    className={`p-3 rounded-lg border-2 transition-all text-left flex items-center gap-3 ${
                      occasion === occ.name && !customOccasion
                        ? "border-primary bg-primary/10 text-foreground"
                        : "border-border hover:border-primary/50 text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <span className="text-2xl">{occ.emoji}</span>
                    <span className="font-medium text-sm">{occ.name}</span>
                  </button>
                ))}
                <div
                  className={`p-3 rounded-lg border-2 transition-all ${
                    customOccasion ? "border-primary bg-primary/10" : "border-border hover:border-primary/50"
                  }`}
                >
                  <div className="flex items-center gap-3">
                    <span className="text-2xl">✏️</span>
                    <span
                      className={`font-medium text-sm ${customOccasion ? "text-foreground" : "text-muted-foreground"}`}
                    >
                      Other
                    </span>
                  </div>
                  <Input
                    placeholder="Type your occasion..."
                    value={customOccasion}
                    onChange={(e) => {
                      setCustomOccasion(e.target.value)
                      setOccasion(e.target.value)
                    }}
                    className="mt-2 h-9 text-sm"
                    onFocus={() => {
                      if (!customOccasion) {
                        setOccasion("")
                      }
                    }}
                  />
                </div>
              </div>
            </div>
          )}

{step === 2 && step2SubPage === 1 && (
            <div key="step-2-1" className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
              <div className="space-y-2">
                <Label className="text-sm font-semibold text-white">Who is this card for? 🎁</Label>
                <Input
                  placeholder="e.g. John, Mom, Sarah"
                  value={recipientName}
                  onChange={(e) => setRecipientName(e.target.value)}
                  className="h-10 text-base"
                />
                <p className="text-xs text-gray-400">
                  The name will appear on the card. Leave blank for a generic card.
                </p>
              </div>

<div className="space-y-2 pt-2 border-t border-border/50">
                <Label className="text-sm font-semibold text-white">What do they look like? 📸</Label>
                <Input
                  placeholder="e.g. Short Blonde Female with Tanned Skin"
                  value={keywords[0] || ""}
                  onChange={(e) => updateKeyword(0, e.target.value)}
                  className="h-10 text-base"
                />
                <p className="text-xs text-gray-400">The more specific your description, the better the result.</p>
              </div>
            </div>
          )}

{step === 2 && step2SubPage === 2 && (
            <div key="step-2-2" className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
              <div className="space-y-2">
                <Label className="text-sm font-semibold text-white">What else describes them? ✨</Label>
                <div className="space-y-2">
                  {keywords.slice(1).map((keyword, idx) => {
                    const placeholders = [
                      "e.g. Padel",
                      "e.g. Lilac French Bulldog with a Blue Collar",
                      "e.g. Miami Beach with a Sunset",
                      "e.g. Red Ferrari 488",
                      "e.g. Cosy Log Cabin in the Mountains",
                      "e.g. Vintage Vinyl Record Collection",
                      "e.g. Golden Retriever Puppy",
                      "e.g. Japanese Cherry Blossom Garden",
                      "e.g. Espresso Martini Cocktail",
                      "e.g. Ski Resort in the Alps",
                    ]
                    return (
                      <Input
                        key={idx + 1}
                        placeholder={placeholders[idx] || `e.g. Keyword ${idx + 1}`}
                        value={keyword}
                        onChange={(e) => updateKeyword(idx + 1, e.target.value)}
                        className="h-10 text-base"
                      />
                    )
                  })}
                </div>
                <p className="text-xs text-gray-400">The better the description, the better the results.</p>
                <Button
                  type="button"
                  variant="outline"
                  onClick={addKeyword}
                  className="w-full gap-2 bg-transparent h-9 text-sm"
                >
                  <Plus className="h-4 w-4" />
                  Add Keyword
                </Button>
              </div>
            </div>
          )}

{step === 3 && (
            <div key="step-3" className="space-y-3 animate-in fade-in slide-in-from-bottom-4 duration-300">
              <Label htmlFor="cardType" className="text-sm font-semibold text-white">
                What's the Tone of Your Card?
              </Label>
              <div className="grid grid-cols-2 gap-2">
                {cardTypes.map((type) => (
                  <button
                    key={type.name}
                    type="button"
                    onClick={() => setCardType(type.name)}
                    className={`p-3 rounded-lg border-2 transition-all text-left flex items-center gap-2 ${
                      cardType === type.name
                        ? "border-primary bg-primary/10 text-foreground"
                        : "border-border hover:border-primary/50 text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <span className="text-lg">{type.emoji}</span>
                    <span className="font-medium text-sm">{type.name}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

{step === 4 && (
            <div key="step-4" className="space-y-3 animate-in fade-in slide-in-from-bottom-4 duration-300">
              <Label htmlFor="artStyle" className="text-sm font-semibold text-white">
                Choose an Art Style
              </Label>
              <div className="grid grid-cols-2 gap-2">
                {artStyles.map((style) => (
                  <button
                    key={style.name}
                    type="button"
                    onClick={() => setArtStyle(style.name)}
                    className={`p-3 rounded-lg border-2 transition-all text-left flex items-center gap-2 ${
                      artStyle === style.name
                        ? "border-primary bg-primary/10 text-foreground"
                        : "border-border hover:border-primary/50 text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <span className="text-lg">{style.emoji}</span>
                    <span className="font-medium text-sm">{style.name}</span>
                  </button>
                ))}
              </div>
            </div>
          )}

<div className="flex gap-2 pt-2">
            {(step > 1 || (step === 2 && step2SubPage === 2)) && (
              <Button variant="outline" onClick={prevStep} className="flex-1 bg-transparent">
                Back
              </Button>
            )}
            {step < 4 || (step === 2 && step2SubPage === 1) ? (
              <Button onClick={nextStep} disabled={!canProceed()} className="flex-1 gap-2">
                Continue
                <ArrowRight className="h-4 w-4" />
              </Button>
            ) : (
              <Button onClick={generateCards} disabled={isGenerating || !canProceed()} className="flex-1 gap-2">
                {isGenerating ? (
                  <>
                    <Sparkles className="h-4 w-4 animate-spin" />
                    Generating...
                  </>
                ) : (
                  <>
                    <Sparkles className="h-4 w-4" />
                    Generate Cards
                  </>
                )}
              </Button>
            )}
          </div>

{/* Loading Progress Bar */}
          {isGenerating && (
            <div className="mt-4 space-y-2 animate-in fade-in duration-300">
              <div className="flex justify-between text-xs text-muted-foreground">
                <span>Creating your cards...</span>
                <span>{Math.round(loadingProgress)}%</span>
              </div>
              <div className="h-2 bg-muted rounded-full overflow-hidden">
                <div
                  className="h-full bg-primary transition-all duration-500 ease-out rounded-full"
                  style={{ width: `${loadingProgress}%` }}
                />
              </div>
              <p className="text-xs text-center text-muted-foreground">
                {loadingProgress < 30 && "Generating AI artwork..."}
                {loadingProgress >= 30 && loadingProgress < 70 && "Adding details and colors..."}
                {loadingProgress >= 70 && loadingProgress < 95 && "Finalizing your cards..."}
                {loadingProgress >= 95 && "Almost done!"}
              </p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/social-promo/page.tsx" isMerged="true"
'use client'

import { useState, useRef, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { toPng } from 'html-to-image'
import { Download } from 'lucide-react'

type FormatType = 'tiktok' | 'instagram-story' | 'instagram-post'

interface FormatConfig {
  width: number
  height: number
  label: string
}

interface Card {
  id: string
  image_url: string
  recipient_name: string
  occasion: string
}

const formats: Record<FormatType, FormatConfig> = {
  tiktok: { width: 1080, height: 1920, label: 'TikTok' },
  'instagram-story': { width: 1080, height: 1920, label: 'Instagram Story' },
  'instagram-post': { width: 1080, height: 1080, label: 'Instagram Post' },
}

export default function SocialPromoPage() {
  const searchParams = useSearchParams()
  const [cardUrl, setCardUrl] = useState('')
  const [selectedFormat, setSelectedFormat] = useState<FormatType>('instagram-story')
  const [isDownloading, setIsDownloading] = useState(false)
  const [imageLoaded, setImageLoaded] = useState(false)
  const [libraryCards, setLibraryCards] = useState<Card[]>([])
  const [selectedCardIds, setSelectedCardIds] = useState<string[]>([])
  const [isLoadingCards, setIsLoadingCards] = useState(true)
  const mockupRef = useRef<HTMLDivElement>(null)

const config = formats[selectedFormat]
  const aspectRatio = config.width / config.height

// Load card URL from query parameters
  useEffect(() => {
    const urlParam = searchParams.get('cardUrl')
    if (urlParam) {
      setCardUrl(decodeURIComponent(urlParam))
    }
  }, [searchParams])

// Fetch library cards
  useEffect(() => {
    const fetchCards = async () => {
      try {
        const response = await fetch('/api/get-cards')
        if (response.ok) {
          const data = await response.json()
          setLibraryCards(data.cards || [])
        }
      } catch (error) {
        console.error('[v0] Failed to fetch library cards:', error)
      } finally {
        setIsLoadingCards(false)
      }
    }
    fetchCards()
  }, [])

const toggleCardSelection = (cardId: string, cardUrl: string) => {
    setSelectedCardIds(prev => {
      if (prev.includes(cardId)) {
        return prev.filter(id => id !== cardId)
      }
      if (prev.length >= 3) {
        return prev
      }
      return [...prev, cardId]
    })
  }

const getSelectedCardUrls = () => {
    return selectedCardIds.map(id => {
      const card = libraryCards.find(c => c.id === id)
      return card?.image_url || ''
    }).filter(url => url)
  }

const downloadImage = async () => {
    if (!mockupRef.current) {
      console.log('[v0] No mockup ref')
      return
    }

const selectedUrls = getSelectedCardUrls()
    if (!cardUrl && selectedUrls.length !== 3) {
      alert('Please select 3 cards from the library or enter a card URL')
      return
    }

console.log('[v0] Starting download...')
    setIsDownloading(true)
    
    try {
      await new Promise(resolve => setTimeout(resolve, 500))
      
      const dataUrl = await toPng(mockupRef.current, {
        quality: 1,
        pixelRatio: 2,
        width: config.width,
        height: config.height,
        skipFonts: true,
        cacheBust: true,
      })

console.log('[v0] Image generated successfully')
      const link = document.createElement('a')
      link.download = `stiffpaper-promo-${selectedFormat}-${Date.now()}.png`
      link.href = dataUrl
      link.click()
    } catch (err) {
      console.error('[v0] Failed to generate image:', err)
      alert(`Failed to download image: ${err}`)
    } finally {
      setIsDownloading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4 md:p-8">
      <div className="w-full max-w-7xl">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
            Social Media Promo Generator
          </h1>
          <p className="text-gray-400 text-sm md:text-base">
            Create branded promotional content for your social media
          </p>
        </div>

{/* Card Library Selection */}
        <div className="mb-8 p-6 bg-gray-800 rounded-lg">
          <h2 className="text-xl font-bold text-white mb-4">
            Select 3 Cards from Library
            {selectedCardIds.length > 0 && (
              <span className="text-sm font-normal text-gray-400 ml-2">
                ({selectedCardIds.length}/3 selected)
              </span>
            )}
          </h2>
          {isLoadingCards ? (
            <div className="text-gray-400 text-center py-8">Loading cards...</div>
          ) : libraryCards.length === 0 ? (
            <div className="text-gray-400 text-center py-8">No cards in library</div>
          ) : (
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3">
              {libraryCards.map((card) => (
                <button
                  key={card.id}
                  type="button"
                  onClick={() => toggleCardSelection(card.id, card.image_url)}
                  className={`relative aspect-[3/4] rounded-lg overflow-hidden transition-all ${
                    selectedCardIds.includes(card.id)
                      ? 'ring-4 ring-primary scale-95'
                      : 'hover:scale-105 opacity-60 hover:opacity-100'
                  }`}
                >
                  <img
                    src={card.image_url || "/placeholder.svg"}
                    alt={card.recipient_name || 'Card'}
                    className="w-full h-full object-cover"
                  />
                  {selectedCardIds.includes(card.id) && (
                    <div className="absolute inset-0 bg-primary/20 flex items-center justify-center">
                      <div className="bg-primary text-black rounded-full w-8 h-8 flex items-center justify-center font-bold">
                        {selectedCardIds.indexOf(card.id) + 1}
                      </div>
                    </div>
                  )}
                </button>
              ))}
            </div>
          )}
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {/* Controls */}
          <div className="space-y-6">
            <div>
              <label htmlFor="cardUrl" className="block text-sm font-medium text-white mb-2">
                Or Enter Card Image URL
              </label>
              <input
                id="cardUrl"
                type="text"
                value={cardUrl}
                onChange={(e) => setCardUrl(e.target.value)}
                placeholder="Paste your card image URL here..."
                className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
              />
            </div>

<div>
              <label className="block text-sm font-medium text-white mb-3">Format</label>
              <div className="grid grid-cols-3 gap-3">
                {Object.entries(formats).map(([format, config]) => (
                  <button
                    type="button"
                    key={format}
                    onClick={() => setSelectedFormat(format as FormatType)}
                    className={`p-4 rounded-lg border-2 transition-all ${
                      selectedFormat === format
                        ? 'border-primary bg-primary/10 text-primary'
                        : 'border-gray-700 bg-gray-900 text-gray-400 hover:border-gray-600'
                    }`}
                  >
                    <div className="text-xs font-semibold mb-1">{config.label}</div>
                    <div className="text-[10px] text-gray-500">
                      {config.width}x{config.height}
                    </div>
                  </button>
                ))}
              </div>
            </div>

<button
              onClick={downloadImage}
              disabled={isDownloading || (!cardUrl && selectedCardIds.length !== 3)}
              className="w-full bg-primary text-black px-6 py-4 rounded-lg font-semibold hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg"
            >
              <Download className="w-5 h-5" />
              {isDownloading ? 'Generating...' : 'Download Image'}
            </button>
          </div>

{/* Preview */}
          <div className="flex flex-col items-center justify-center">
            <div className="text-sm text-gray-400 mb-4">Preview</div>
            <div 
              className="relative shadow-2xl"
              style={{
                width: '100%',
                maxWidth: selectedFormat === 'instagram-post' ? '400px' : '300px',
                aspectRatio: aspectRatio,
              }}
            >
              <div
                ref={mockupRef}
                className="rounded-xl overflow-hidden shadow-2xl relative bg-gradient-to-br from-[#FFE5A0] via-[#FFF9E6] to-white"
                style={{
                  aspectRatio: aspectRatio,
                  width: '100%',
                  height: '100%',
                }}
              >
                {/* Content Layout */}
                <div className="flex flex-col h-full py-8">
                  {/* Promotional Text - Top */}
                  <div className="flex flex-col items-center justify-center px-8 pt-4 pb-8 text-center">
                    <h2 className="font-sans text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-4 leading-tight text-balance">
                      Create your own card in 30 seconds
                    </h2>
                    <div className="flex items-center gap-3">
                      <img 
                        src="/logo.jpeg" 
                        alt="Stiff Paper" 
                        className="h-12 w-auto"
                      />
                      <span className="font-sans text-xl sm:text-2xl lg:text-3xl font-bold text-black">
                        StiffPaper.co.uk
                      </span>
                    </div>
                  </div>

{/* 3 Stacked Cards */}
                  <div className="flex-1 flex items-center justify-center px-8 pb-8">
                    {(() => {
                      const selectedUrls = getSelectedCardUrls()
                      const displayUrls = selectedUrls.length === 3 ? selectedUrls : cardUrl ? [cardUrl, cardUrl, cardUrl] : []
                      
                      if (displayUrls.length === 0) {
                        return (
                          <div className="text-center text-black/40 text-sm py-20 px-32">
                            Select 3 cards from library or enter a URL
                          </div>
                        )
                      }
                      
                      return (
                        <div className="relative w-full max-w-6xl h-full flex items-center justify-center gap-4">
                          {/* Card 1 - Left */}
                          <div className="w-[40%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] rotate-[-5deg] z-10 -mr-20">
                            <img
                              src={displayUrls[0] || "/placeholder.svg"}
                              alt="Card 1"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                              onError={(e) => {
                                console.log('[v0] Card image failed to load:', displayUrls[0])
                                setImageLoaded(false)
                              }}
                              onLoad={() => {
                                console.log('[v0] Card image loaded successfully:', displayUrls[0])
                                setImageLoaded(true)
                              }}
                            />
                          </div>
                          
                          {/* Card 2 - Center */}
                          <div className="w-[48%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] z-30">
                            <img
                              src={displayUrls[1] || "/placeholder.svg"}
                              alt="Card 2"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                            />
                          </div>
                          
                          {/* Card 3 - Right */}
                          <div className="w-[40%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] rotate-[5deg] z-20 -ml-20">
                            <img
                              src={displayUrls[2] || "/placeholder.svg"}
                              alt="Card 3"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                            />
                          </div>
                        </div>
                      )
                    })()}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/social-mockup/page.tsx" isMerged="true"
'use client'

import { useState, useRef, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { toPng } from 'html-to-image'
import { Download } from 'lucide-react'
import { Suspense } from 'react'
import Loading from './loading'

type FormatType = 'tiktok' | 'instagram-story' | 'instagram-post'

interface FormatConfig {
  width: number
  height: number
  label: string
  phoneWidth: number
  phoneHeight: number
}

const formats: Record<FormatType, FormatConfig> = {
  tiktok: { width: 1080, height: 1920, label: 'TikTok', phoneWidth: 340, phoneHeight: 680 },
  'instagram-story': {
    width: 1080,
    height: 1920,
    label: 'Instagram Story',
    phoneWidth: 340,
    phoneHeight: 680,
  },
  'instagram-post': {
    width: 1080,
    height: 1080,
    label: 'Instagram Post',
    phoneWidth: 300,
    phoneHeight: 600,
  },
}

export default function SocialMockupPage() {
  const searchParams = useSearchParams()
  const [cardUrl, setCardUrl] = useState('')
  const [selectedFormat, setSelectedFormat] = useState<FormatType>('instagram-story')
  const [isDownloading, setIsDownloading] = useState(false)
  const [imageLoaded, setImageLoaded] = useState(false)
  const mockupRef = useRef<HTMLDivElement>(null)

const config = formats[selectedFormat]
  const aspectRatio = config.width / config.height

const downloadImage = async () => {
    if (!mockupRef.current) {
      console.log('[v0] No mockup ref')
      return
    }

if (!cardUrl) {
      alert('Please enter a card image URL first')
      return
    }

console.log('[v0] Starting download...')
    setIsDownloading(true)
    
    try {
      // Wait a bit to ensure images are fully rendered
      await new Promise(resolve => setTimeout(resolve, 500))
      
      const dataUrl = await toPng(mockupRef.current, {
        quality: 1,
        pixelRatio: 2,
        width: config.width,
        height: config.height,
        skipFonts: true,
        cacheBust: true,
      })

console.log('[v0] Image generated successfully')
      const link = document.createElement('a')
      link.download = `stiffpaper-${selectedFormat}-${Date.now()}.png`
      link.href = dataUrl
      link.click()
    } catch (err) {
      console.error('[v0] Failed to generate image:', err)
      alert(`Failed to download image: ${err}`)
    } finally {
      setIsDownloading(false)
    }
  }

return (
    <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4 md:p-8">
      <div className="w-full max-w-7xl">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
            Social Media Mockup Generator
          </h1>
          <p className="text-gray-400">Create professional mockups for your Stiff Paper cards</p>
        </div>

{/* Controls */}
        <div className="mb-8 bg-gray-800 rounded-xl p-6 shadow-2xl border border-gray-700">
          <div className="mb-6">
            <label className="block text-sm font-semibold text-white mb-3">Card Image URL</label>
            <input
              type="text"
              value={cardUrl}
              onChange={(e) => setCardUrl(e.target.value)}
              className="w-full px-4 py-3 bg-gray-900 border border-gray-700 rounded-lg text-white focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
              placeholder="Paste card image URL from your library"
            />
            <p className="mt-2 text-xs text-gray-500">
              Paste any card image URL from your Stiff Paper library
            </p>
          </div>

{/* Format Selection */}
          <div>
            <label className="block text-sm font-semibold text-white mb-3">
              Export Format
            </label>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {(Object.keys(formats) as FormatType[]).map((format) => (
                <button
                  key={format}
                  onClick={() => setSelectedFormat(format)}
                  className={`p-4 rounded-lg border-2 transition-all ${
                    selectedFormat === format
                      ? 'border-primary bg-primary/10 text-primary'
                      : 'border-gray-700 bg-gray-900 text-gray-400 hover:border-gray-600'
                  }`}
                >
                  <div className="font-semibold mb-1">{formats[format].label}</div>
                  <div className="text-xs opacity-70">
                    {formats[format].width} × {formats[format].height}
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>

{/* Preview and Mockup */}
        <Suspense fallback={<Loading />}>
          <div className="flex flex-col lg:flex-row gap-8 items-start">
            {/* Live Preview */}
            <div className="flex-1 w-full">
              <h2 className="text-xl font-semibold text-white mb-4">Live Preview</h2>
              <div
                ref={mockupRef}
                className="rounded-xl overflow-hidden shadow-2xl relative bg-gradient-to-br from-[#FFE5A0] via-[#FFF9E6] to-white"
                style={{
                  aspectRatio: aspectRatio,
                  width: '100%',
                  maxWidth: selectedFormat === 'instagram-post' ? '600px' : '400px',
                  margin: '0 auto',
                }}
              >
                {/* Stiff Paper Logo - Top Left */}
                <div className="absolute top-4 left-4 z-10 flex items-center gap-2">
                  <img 
                    src="/logo.jpeg" 
                    alt="Stiff Paper Logo" 
                    className="w-10 h-10 rounded-lg object-contain"
                    crossOrigin="anonymous"
                  />
                  <span className="text-[#1a1a1a] font-bold text-xl tracking-tight">Stiff Paper</span>
                </div>

{/* iPhone 17 Mockup */}
                <div className="flex items-center justify-center h-full pt-16 pb-4">
                  <div className="relative" style={{ width: '70%', maxHeight: '85%' }}>
                    {/* Phone Frame */}
                    <div 
                      className="relative rounded-[45px] border-[6px] border-[#1a1a1a] overflow-hidden"
                      style={{ 
                        backgroundColor: '#0a0a0a',
                        aspectRatio: '400/800',
                        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 50px 100px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05)'
                      }}
                    >
                      {/* Dynamic Island */}
                      <div 
                        className="absolute top-2 left-1/2 -translate-x-1/2 bg-[#0a0a0a] rounded-full"
                        style={{ width: '30%', height: '3.5%' }}
                      />
                      
                      {/* Screen Content */}
                      <div 
                        className="absolute inset-0 m-2 rounded-[38px] overflow-hidden flex flex-col"
                        style={{ backgroundColor: '#0a0a0a' }}
                      >
                        {/* Navigation Bar */}
                        <div className="flex items-center justify-between px-4 pt-5 pb-3 border-b border-white/10 bg-[#0a0a0a]/95 backdrop-blur-sm">
                          <div className="flex items-center gap-2">
                            <img 
                              src="/logo.jpeg" 
                              alt="Logo" 
                              className="w-6 h-6 rounded object-contain"
                              crossOrigin="anonymous"
                            />
                            <span className="text-white text-[11px] font-bold leading-none">Stiff Paper</span>
                          </div>
                          <div className="flex items-center gap-3">
                            <span className="text-white/70 text-[10px] leading-none">Home</span>
                            <span className="text-white/50 text-[10px] leading-none">Library</span>
                          </div>
                        </div>

{/* Card Display Area - Scaled 150% and moved to top */}
                        <div className="flex-1 flex flex-col pt-3">
                          <div className="flex items-start justify-center">
                            {cardUrl ? (
                              <div className="w-[120%] max-w-[420px] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a]">
                                <img
                                  src={cardUrl || "/placeholder.svg"}
                                  alt="Card preview"
                                  className="w-full h-auto block"
                                  crossOrigin="anonymous"
                                  onError={(e) => {
                                    console.log('[v0] Card image failed to load:', cardUrl)
                                    setImageLoaded(false)
                                  }}
                                  onLoad={() => {
                                    console.log('[v0] Card image loaded successfully:', cardUrl)
                                    setImageLoaded(true)
                                  }}
                                />
                              </div>
                            ) : (
                              <div className="text-gray-500 text-center">
                                <p className="text-xs font-medium">No card selected</p>
                                <p className="text-[10px] mt-1">Paste a URL above</p>
                              </div>
                            )}
                          </div>

{/* Action Buttons - Visual only */}
                          {cardUrl && (
                            <div className="flex flex-col gap-2 px-4 mt-4">
                              <div className="flex gap-2">
                                <button className="flex-1 flex items-center justify-center gap-1.5 bg-white/10 hover:bg-white/15 text-white text-[10px] font-medium py-2 px-3 rounded-lg transition-colors">
                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                  </svg>
                                  Share
                                </button>
                                <button className="flex-1 flex items-center justify-center gap-1 bg-black/80 backdrop-blur-sm text-white text-[10px] font-medium py-2 px-3 rounded-lg hover:bg-black/70 transition-colors border border-white/10">
                                  <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
                                  </svg>
                                  <span className="font-normal">Pay</span>
                                </button>
                              </div>
                              <button className="w-full flex items-center justify-center gap-1.5 bg-primary text-black text-[10px] font-semibold py-2 px-3 rounded-lg hover:bg-primary/90 transition-colors">
                                <span className="text-sm text-black" style={{ filter: 'grayscale(1) brightness(0)' }}>✨</span>
                                Create another card
                              </button>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Download Section */}
            <div className="w-full lg:w-80">
              <h2 className="text-xl font-semibold text-white mb-4">Export</h2>
              <div className="bg-gray-800 rounded-xl p-6 border border-gray-700">
                <div className="mb-4">
                  <div className="text-sm text-gray-400 mb-1">Selected Format:</div>
                  <div className="text-lg font-semibold text-white">{config.label}</div>
                  <div className="text-sm text-gray-500">
                    {config.width} × {config.height} px
                  </div>
                </div>

<button
                  onClick={downloadImage}
                  disabled={isDownloading || !cardUrl}
                  className="w-full bg-primary text-black px-6 py-4 rounded-lg font-semibold hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg"
                >
                  <Download className="w-5 h-5" />
                  {isDownloading ? 'Generating...' : 'Download Mockup'}
                </button>

<div className="mt-6 p-4 bg-gray-900 rounded-lg">
                  <h3 className="text-sm font-semibold text-white mb-2">Tips</h3>
                  <ul className="text-xs text-gray-400 space-y-2">
                    <li>• Use high-quality card images for best results</li>
                    <li>• TikTok and Story formats are vertical (9:16)</li>
                    <li>• Post format is square (1:1)</li>
                    <li>• Downloads at 2x resolution for crisp quality</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </Suspense>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/social/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/site-footer.tsx" isMerged="true"
'use client'

import Link from "next/link"
import Image from "next/image"
import { useState } from "react"

export function SiteFooter() {
  const [isAdminUnlocked, setIsAdminUnlocked] = useState(false)
  const [showAdminPrompt, setShowAdminPrompt] = useState(false)
  const [adminPassword, setAdminPassword] = useState("")

const handleAdminAuth = () => {
    const correctPassword = process.env.NEXT_PUBLIC_ADMIN_PASSWORD || "admin123"
    if (adminPassword === correctPassword) {
      setIsAdminUnlocked(true)
      setShowAdminPrompt(false)
      setAdminPassword("")
    } else {
      alert("Incorrect password")
      setAdminPassword("")
    }
  }

return (
    <footer className="border-t border-border/40 bg-background">
      <div className="max-w-4xl lg:max-w-6xl mx-auto px-4 py-12 md:px-6 md:py-16 lg:px-8 lg:py-20">
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4 lg:gap-12">
          <div className="flex flex-col gap-4 lg:gap-6">
            <Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition-opacity">
              <div className="relative h-12 w-12 lg:h-14 lg:w-14 flex-shrink-0 bg-primary rounded-lg p-1.5">
                <Image src="/logo.jpeg" alt="Stiff Paper Logo" fill className="object-contain" />
              </div>
              <span className="text-lg lg:text-xl font-bold">Stiff Paper</span>
            </Link>
            <p className="text-sm lg:text-base text-muted-foreground leading-relaxed">
              Stunning personalised greeting cards for every occasion.
            </p>
          </div>

<div className="flex flex-col gap-3 lg:gap-4">
            <h3 className="font-semibold lg:text-lg">Product</h3>
            <Link
              href="#create"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              Create Card
            </Link>
            <Link
              href="/library"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              Card Library
            </Link>
          </div>

{isAdminUnlocked && (
            <div className="flex flex-col gap-3 lg:gap-4">
              <h3 className="font-semibold lg:text-lg flex items-center gap-2">
                Admin <span className="text-xs text-primary">🔓</span>
              </h3>
              <Link
                href="/social"
                className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
              >
                Social Media Generator
              </Link>
            </div>
          )}

<div className="flex flex-col gap-3 lg:gap-4">
            <h3 className="font-semibold lg:text-lg">Company</h3>
            <Link
              href="/about"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              About Us
            </Link>
            <Link
              href="/contact"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              Contact
            </Link>
          </div>

<div className="flex flex-col gap-3 lg:gap-4">
            <h3 className="font-semibold lg:text-lg">Legal</h3>
            <Link
              href="/privacy"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              Privacy Policy
            </Link>
            <Link
              href="/terms"
              className="text-sm lg:text-base text-muted-foreground hover:text-primary transition-colors"
            >
              Terms of Service
            </Link>
          </div>
        </div>

<div className="mt-12 lg:mt-16 pt-8 border-t border-border/40">
          <p className="text-center text-xs text-muted-foreground/70 mb-4">
            Card designs are generated using artificial intelligence. Results may vary.
          </p>
          <p className="text-center text-sm lg:text-base text-muted-foreground">
            © {new Date().getFullYear()} Stiff Paper. All rights reserved.
          </p>
          {!isAdminUnlocked && (
            <div className="mt-4 flex justify-center">
              <button
                onClick={() => setShowAdminPrompt(true)}
                className="text-xs text-muted-foreground/50 hover:text-muted-foreground transition-colors"
              >
                🔒 Admin
              </button>
            </div>
          )}
        </div>
      </div>

{/* Admin Authentication Modal */}
      {showAdminPrompt && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
          <div className="bg-background border border-border rounded-lg p-6 w-full max-w-sm space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-lg">Admin Access</h3>
              <button
                onClick={() => {
                  setShowAdminPrompt(false)
                  setAdminPassword("")
                }}
                className="text-muted-foreground hover:text-foreground"
              >
                ✕
              </button>
            </div>
            <input
              type="password"
              placeholder="Enter admin password"
              value={adminPassword}
              onChange={(e) => setAdminPassword(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === "Enter") {
                  handleAdminAuth()
                }
              }}
              className="w-full px-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white"
              autoFocus
            />
            <button
              onClick={handleAdminAuth}
              className="w-full bg-primary text-black px-4 py-2 rounded-lg font-semibold hover:bg-primary/90 transition-colors"
            >
              Unlock
            </button>
          </div>
        </div>
      )}
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import { SiteHeader } from "@/components/site-header"
import { SiteFooter } from "@/components/site-footer"
import { CardCreationForm } from "@/components/card-creation-form"
import { ProcessSteps } from "@/components/process-steps"
import { useEffect, useState } from "react"
import { getCardsByIds } from "@/app/actions/cards"
import { ArrowDown } from "lucide-react"
import { Mail } from "lucide-react" // Import Mail component

const FEATURED_CARD_IDS = [
  "874ab139-1023-42bb-a3ba-ebf7f2caff54",
  "0a92bdba-f720-4903-94c1-980d485fcfda",
  "57649665-b181-4034-adb0-aff1203d00a1",
  "8fe49d83-191b-4c75-8533-c48bd61fe926",
  "aee76a01-fd63-4625-8915-f6f6b62be611",
]

// Fisher-Yates shuffle algorithm
function shuffleArray<T>(array: T[]): T[] {
  const shuffled = [...array]
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
  }
  return shuffled
}

export default function HomePage() {
  const [libraryCards, setLibraryCards] = useState<any[]>([])

useEffect(() => {
    console.log("[v0] Fetching featured cards from database...")
    getCardsByIds(FEATURED_CARD_IDS).then((cards) => {
      console.log("[v0] Fetched cards:", cards?.length || 0, "cards")
      if (cards && cards.length > 0) {
        // Filter valid cards and randomize order
        const validCards = FEATURED_CARD_IDS.map((id) => cards.find((card) => card.id === id)).filter(
          (card) => card && card.image_url,
        )
        const randomizedCards = shuffleArray(validCards)

console.log("[v0] Featured cards found:", randomizedCards.length, "out of", FEATURED_CARD_IDS.length)
        setLibraryCards(randomizedCards)
      }
    })
  }, [])

return (
    <div className="flex min-h-screen flex-col">
      <SiteHeader />

<main className="flex-1">
        <section className="w-full px-4 py-4 md:py-6 bg-gradient-to-br from-primary/10 via-background to-primary/5 border-b border-primary/20">
          <div className="max-w-4xl mx-auto space-y-3">
            <div className="text-center space-y-1">
              <h2 className="text-xl md:text-2xl font-bold text-balance">Your Perfect Card</h2>
              <p className="text-muted-foreground text-sm md:text-base">
                Birthday cards and Valentines cards posted to your door
              </p>
            </div>

{libraryCards.length > 0 ? (
              <div className="overflow-hidden pb-4 md:pb-6">
                <div className="flex gap-3 md:gap-4 animate-scroll">
                  {[...libraryCards, ...libraryCards].map((card, index) => (
                    <div
                      key={`${card.id}-${index}`}
                      className="flex-shrink-0 w-52 md:w-44 aspect-square rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all hover:scale-105 border border-primary/20"
                    >
                      <img
                        src={card.image_url || "/placeholder.svg"}
                        alt={`${card.occasion || "Card"} for ${card.recipient_name || "someone special"}`}
                        className="w-full h-full object-cover"
                      />
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              <div className="flex justify-center gap-3 md:gap-4 pb-4 md:pb-6">
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <div
                    key={i}
                    className="flex-shrink-0 w-52 md:w-44 aspect-square rounded-xl bg-muted/50 animate-pulse"
                  />
                ))}
              </div>
            )}

<div className="flex justify-center">
              <Button
                variant="default"
                size="lg"
                className="bg-primary hover:bg-primary/90 cursor-pointer text-base md:text-sm h-12 md:h-10 px-6 md:px-4"
                onClick={() => {
                  const formElement = document.getElementById("card-form")
                  if (formElement) {
                    const isMobile = window.innerWidth < 768
                    if (isMobile) {
                      const yOffset = -80
                      const y = formElement.getBoundingClientRect().top + window.pageYOffset + yOffset
                      window.scrollTo({ top: y, behavior: "smooth" })
                    } else {
                      const yOffset = -120
                      const y = formElement.getBoundingClientRect().top + window.pageYOffset + yOffset
                      window.scrollTo({ top: y, behavior: "smooth" })
                    }
                  }
                }}
              >
                <ArrowDown className="w-5 h-5 md:w-4 md:h-4 mr-2" />
                Create a Card
              </Button>
            </div>
          </div>
        </section>

{/* HIDDEN: Process Steps Section - Can be restored if needed */}
        {false && (
          <section className="w-full px-4 py-8 md:py-12 md:px-6 bg-muted/50">
            <div className="max-w-4xl mx-auto space-y-12">
              <div className="text-center space-y-4">
                <h2 className="text-xl md:text-2xl font-bold text-balance">How It Works</h2>
                <p className="text-muted-foreground text-sm md:text-base max-w-xl mx-auto text-pretty leading-relaxed">
                  Four simple steps to create your perfect personalized card
                </p>
              </div>

<ProcessSteps />
            </div>
          </section>
        )}

<section
          id="create"
          className="w-full px-4 pt-8 md:pt-12 pb-8 md:pb-12 md:px-6 bg-white relative overflow-hidden"
        >
          {/* Explosion effect - colorful gradient blobs */}
          <div className="absolute inset-0 overflow-hidden pointer-events-none">
            {/* Pink blob - top left */}
            <div className="absolute -top-20 -left-20 w-72 h-72 md:w-96 md:h-96 bg-pink-400 rounded-full blur-3xl opacity-60 animate-pulse" />
            {/* Purple blob - top right */}
            <div
              className="absolute -top-10 -right-20 w-64 h-64 md:w-80 md:h-80 bg-purple-500 rounded-full blur-3xl opacity-50 animate-pulse"
              style={{ animationDelay: "0.5s" }}
            />
            {/* Yellow blob - bottom center */}
            <div
              className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-80 h-80 md:w-[500px] md:h-[500px] bg-yellow-400 rounded-full blur-3xl opacity-50 animate-pulse"
              style={{ animationDelay: "1s" }}
            />
            {/* Orange accent - right side */}
            <div
              className="absolute top-1/2 -right-10 w-48 h-48 md:w-64 md:h-64 bg-orange-400 rounded-full blur-3xl opacity-40 animate-pulse"
              style={{ animationDelay: "0.3s" }}
            />
            {/* Pink accent - left side */}
            <div
              className="absolute top-1/3 -left-10 w-40 h-40 md:w-56 md:h-56 bg-pink-500 rounded-full blur-3xl opacity-40 animate-pulse"
              style={{ animationDelay: "0.7s" }}
            />
            {/* Purple accent - bottom left */}
            <div
              className="absolute -bottom-10 left-10 w-56 h-56 md:w-72 md:h-72 bg-purple-400 rounded-full blur-3xl opacity-40 animate-pulse"
              style={{ animationDelay: "1.2s" }}
            />
          </div>

<div className="max-w-4xl lg:max-w-6xl mx-auto relative z-10">
            {/* HIDDEN: Pick your card header - Can be restored if needed */}
            {false && (
              <div className="flex justify-center mb-6">
                <div className="inline-block bg-black/90 backdrop-blur-sm border border-white/20 rounded-2xl px-8 py-4 text-center">
                  <h2 className="text-3xl md:text-4xl font-bold text-balance text-white">Pick your Card</h2>
                  <p className="text-white/70 text-lg text-pretty leading-relaxed">What's the occasion?</p>
                </div>
              </div>
            )}

{/* Form section */}
            <CardCreationForm id="card-form" />
          </div>
        </section>

<section className="w-full px-4 py-16 md:py-20 md:px-6 bg-muted/30">
          <div className="max-w-4xl lg:max-w-6xl mx-auto text-center space-y-6">
            <h2 className="text-3xl md:text-4xl font-bold text-balance">Ready to create something amazing?</h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto text-pretty leading-relaxed">
              Join thousands of users who've discovered the easiest way to create beautiful, personalized cards
            </p>
            <Button size="lg" className="h-12 px-8 text-base" onClick={() => {}}>
              Get Started Now
            </Button>
          </div>
        </section>
      </main>

<SiteFooter />
    </div>
  )
}
[V0_FILE]typescript:file="app/api/get-cards/route.ts" isMerged="true"
import { createClient } from "@supabase/supabase-js"
import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const search = searchParams.get("search") || ""

const supabase = createClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!)

let query = supabase
    .from("cards")
    .select("id, image_url, recipient_name, occasion")
    .order("created_at", { ascending: false })

if (search) {
    query = query.ilike("recipient_name", `%${search}%`)
  }

const { data, error } = await query

if (error) {
    return NextResponse.json({ error: error.message }, { status: 500 })
  }

return NextResponse.json({ cards: data })
}
[V0_FILE]typescriptreact:file="app/social/page.tsx" isMerged="true"
'use client'

import { useState, useRef, useEffect } from 'react'
import { toPng } from 'html-to-image'
import { Download, Search } from 'lucide-react'

interface Card {
  id: string
  image_url: string
  recipient_name: string
  occasion: string
}

type ViewMode = 'phone' | 'promo'

export default function SocialPage() {
  const [viewMode, setViewMode] = useState<ViewMode>('promo')
  const [libraryCards, setLibraryCards] = useState<Card[]>([])
  const [filteredCards, setFilteredCards] = useState<Card[]>([])
  const [selectedCardIds, setSelectedCardIds] = useState<string[]>([])
  const [isLoadingCards, setIsLoadingCards] = useState(true)
  const [searchQuery, setSearchQuery] = useState('')
  const [isDownloading, setIsDownloading] = useState(false)
  const [imageLoaded, setImageLoaded] = useState(false)
  const mockupRef = useRef<HTMLDivElement>(null)

const config = { width: 1080, height: 1920 }
  const aspectRatio = config.width / config.height

// Fetch library cards
  useEffect(() => {
    const fetchCards = async () => {
      try {
        const response = await fetch('/api/get-cards')
        if (response.ok) {
          const data = await response.json()
          console.log('[v0] Fetched cards:', data.cards?.length || 0)
          setLibraryCards(data.cards || [])
          setFilteredCards(data.cards || [])
        }
      } catch (error) {
        console.error('[v0] Failed to fetch library cards:', error)
      } finally {
        setIsLoadingCards(false)
      }
    }
    fetchCards()
  }, [])

// Filter cards based on search
  useEffect(() => {
    if (searchQuery.trim() === '') {
      console.log('[v0] No search query, showing all cards:', libraryCards.length)
      setFilteredCards(libraryCards)
    } else {
      const query = searchQuery.toLowerCase()
      const filtered = libraryCards.filter(card =>
        (card.recipient_name?.toLowerCase().includes(query)) ||
        (card.occasion?.toLowerCase().includes(query))
      )
      console.log('[v0] Search query:', query, 'filtered results:', filtered.length)
      setFilteredCards(filtered)
    }
  }, [searchQuery, libraryCards])

const toggleCardSelection = (cardId: string) => {
    setSelectedCardIds(prev => {
      if (prev.includes(cardId)) {
        return prev.filter(id => id !== cardId)
      }
      const maxCards = viewMode === 'promo' ? 3 : 1
      if (prev.length >= maxCards) {
        return prev
      }
      return [...prev, cardId]
    })
  }

const getSelectedCardUrls = () => {
    return selectedCardIds.map(id => {
      const card = libraryCards.find(c => c.id === id)
      return card?.image_url || ''
    }).filter(url => url)
  }

const downloadImage = async () => {
    if (!mockupRef.current) {
      console.log('[v0] No mockup ref')
      return
    }

const selectedUrls = getSelectedCardUrls()
    const requiredCards = viewMode === 'promo' ? 3 : 1
    if (selectedUrls.length !== requiredCards) {
      alert(`Please select ${requiredCards} card${requiredCards > 1 ? 's' : ''} from the library`)
      return
    }

console.log('[v0] Image generated successfully')
      const link = document.createElement('a')
      link.download = `stiffpaper-${viewMode}-${Date.now()}.png`
      link.href = dataUrl
      link.click()
    } catch (err) {
      console.error('[v0] Failed to generate image:', err)
      alert(`Failed to download image: ${err}`)
    } finally {
      setIsDownloading(false)
    }
  }

const selectedUrls = getSelectedCardUrls()

return (
    <div className="min-h-screen bg-gray-900 flex flex-col items-center justify-center p-4 md:p-8">
      <div className="w-full max-w-7xl">
        {/* Header */}
        <div className="text-center mb-8">
          <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
            Social Media Generator
          </h1>
          <p className="text-gray-400 text-sm md:text-base">
            Create social content for your Stiff Paper cards
          </p>
        </div>

{/* View Mode Toggle */}
        <div className="mb-6 flex justify-center">
          <div className="inline-flex bg-gray-800 rounded-lg p-1">
            <button
              onClick={() => {
                setViewMode('promo')
                setSelectedCardIds([])
              }}
              className={`px-6 py-2 rounded-md text-sm font-semibold transition-all ${
                viewMode === 'promo'
                  ? 'bg-primary text-black'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Promo Stack
            </button>
            <button
              onClick={() => {
                setViewMode('phone')
                setSelectedCardIds([])
              }}
              className={`px-6 py-2 rounded-md text-sm font-semibold transition-all ${
                viewMode === 'phone'
                  ? 'bg-primary text-black'
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              Phone Mockup
            </button>
          </div>
        </div>

{/* Card Library Selection */}
        <div className="mb-8 p-6 bg-gray-800 rounded-lg border border-gray-700">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-white">
              Select {viewMode === 'promo' ? '3 Cards' : '1 Card'} from Library
              {selectedCardIds.length > 0 && (
                <span className="text-sm font-normal text-gray-400 ml-2">
                  ({selectedCardIds.length}/{viewMode === 'promo' ? '3' : '1'} selected)
                </span>
              )}
            </h2>
            
            {/* Search Bar */}
            <div className="relative w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                type="text"
                placeholder="Search by name..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 bg-gray-900 border border-gray-700 rounded-lg text-white text-sm focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
              />
            </div>
          </div>

{isLoadingCards ? (
            <div className="text-gray-400 text-center py-8">Loading cards...</div>
          ) : filteredCards.length === 0 ? (
            <div className="text-gray-400 text-center py-8">
              {searchQuery ? 'No cards found matching your search' : 'No cards in library'}
            </div>
          ) : (
            <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3">
              {filteredCards.map((card) => (
                <button
                  key={card.id}
                  type="button"
                  onClick={() => toggleCardSelection(card.id)}
                  className={`relative aspect-[3/4] rounded-lg overflow-hidden transition-all ${
                    selectedCardIds.includes(card.id)
                      ? 'ring-4 ring-primary scale-95'
                      : 'hover:scale-105 opacity-60 hover:opacity-100'
                  }`}
                >
                  <img
                    src={card.image_url || "/placeholder.svg"}
                    alt={card.recipient_name || 'Card'}
                    className="w-full h-full object-cover"
                  />
                  {selectedCardIds.includes(card.id) && (
                    <div className="absolute inset-0 bg-primary/20 flex items-center justify-center">
                      <div className="bg-primary text-black rounded-full w-8 h-8 flex items-center justify-center font-bold">
                        {viewMode === 'promo' ? selectedCardIds.indexOf(card.id) + 1 : '✓'}
                      </div>
                    </div>
                  )}
                </button>
              ))}
            </div>
          )}
        </div>

<div className="grid md:grid-cols-2 gap-8">
          {/* Download Button */}
          <div className="space-y-6">
            <button
              onClick={downloadImage}
              disabled={isDownloading || selectedCardIds.length !== (viewMode === 'promo' ? 3 : 1)}
              className="w-full bg-primary text-black px-6 py-4 rounded-lg font-semibold hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-lg"
            >
              <Download className="w-5 h-5" />
              {isDownloading ? 'Generating...' : 'Download for Instagram Story'}
            </button>

<div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
              <h3 className="text-sm font-semibold text-white mb-2">Tips</h3>
              <ul className="text-xs text-gray-400 space-y-2">
                <li>• Promo Stack: Select 3 cards for a branded collection view</li>
                <li>• Phone Mockup: Select 1 card to show in a phone frame</li>
                <li>• Use the search bar to find cards by recipient name</li>
                <li>• Instagram Story format (1080x1920)</li>
                <li>• Downloads at 2x resolution for crisp quality</li>
              </ul>
            </div>
          </div>

{/* Preview */}
          <div className="flex flex-col items-center justify-center">
            <div className="text-sm text-gray-400 mb-4">Preview - Instagram Story</div>
            <div 
              className="relative shadow-2xl"
              style={{
                width: '100%',
                maxWidth: '300px',
                aspectRatio: aspectRatio,
              }}
            >
              <div
                ref={mockupRef}
                className="rounded-xl overflow-hidden shadow-2xl relative bg-gradient-to-br from-[#FFE5A0] via-[#FFF9E6] to-white"
                style={{
                  aspectRatio: aspectRatio,
                  width: '100%',
                  height: '100%',
                }}
              >
                {viewMode === 'promo' ? (
                  /* Promo View */
                  <div className="flex flex-col h-full py-8">
                    <div className="flex flex-col items-center justify-center px-8 pt-4 pb-8 text-center">
                      <h2 className="font-sans text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-4 leading-tight text-balance">
                        Create your own card in 30 seconds
                      </h2>
                      <div className="flex items-center gap-3">
                        <img 
                          src="/logo.jpeg" 
                          alt="Stiff Paper" 
                          className="h-12 w-auto"
                        />
                        <span className="font-sans text-xl sm:text-2xl lg:text-3xl font-bold text-black">
                          StiffPaper.co.uk
                        </span>
                      </div>
                    </div>

<div className="flex-1 flex items-center justify-center px-8 pb-8">
                      {selectedUrls.length === 3 ? (
                        <div className="relative w-full max-w-6xl h-full flex items-center justify-center gap-4">
                          <div className="w-[40%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] rotate-[-5deg] z-10 -mr-20">
                            <img
                              src={selectedUrls[0] || "/placeholder.svg"}
                              alt="Card 1"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                              onError={(e) => {
                                console.log('[v0] Card image failed to load:', selectedUrls[0])
                                setImageLoaded(false)
                              }}
                              onLoad={() => {
                                console.log('[v0] Card image loaded successfully:', selectedUrls[0])
                                setImageLoaded(true)
                              }}
                            />
                          </div>
                          
                          <div className="w-[48%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] z-30">
                            <img
                              src={selectedUrls[1] || "/placeholder.svg"}
                              alt="Card 2"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                            />
                          </div>
                          
                          <div className="w-[40%] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a] rotate-[5deg] z-20 -ml-20">
                            <img
                              src={selectedUrls[2] || "/placeholder.svg"}
                              alt="Card 3"
                              className="w-full h-auto block"
                              crossOrigin="anonymous"
                            />
                          </div>
                        </div>
                      ) : (
                        <div className="text-center text-black/40 text-sm py-20 px-32">
                          Select 3 cards from library
                        </div>
                      )}
                    </div>
                  </div>
                ) : (
                  /* Phone Mockup View */
                  <div className="h-full">
                    <div className="flex items-center justify-center h-full pt-16 pb-4">
                      <div className="relative" style={{ width: '70%', maxHeight: '85%' }}>
                        <div 
                          className="relative rounded-[45px] border-[6px] border-[#1a1a1a] overflow-hidden"
                          style={{ 
                            backgroundColor: '#0a0a0a',
                            aspectRatio: '400/800',
                            boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 50px 100px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05)'
                          }}
                        >
                          <div 
                            className="absolute top-2 left-1/2 -translate-x-1/2 bg-[#0a0a0a] rounded-full"
                            style={{ width: '30%', height: '3.5%' }}
                          />
                          
                          <div 
                            className="absolute inset-0 m-2 rounded-[38px] overflow-hidden flex flex-col"
                            style={{ backgroundColor: '#0a0a0a' }}
                          >
                            <div className="flex items-center justify-between px-4 pt-5 pb-3 border-b border-white/10 bg-[#0a0a0a]/95 backdrop-blur-sm">
                              <div className="flex items-center gap-2">
                                <img 
                                  src="/logo.jpeg" 
                                  alt="Logo" 
                                  className="w-6 h-6 rounded object-contain"
                                  crossOrigin="anonymous"
                                />
                                <span className="text-white text-[11px] font-bold leading-none">Stiff Paper</span>
                              </div>
                              <div className="flex items-center gap-3">
                                <span className="text-white/70 text-[10px] leading-none">Home</span>
                                <span className="text-white/50 text-[10px] leading-none">Library</span>
                              </div>
                            </div>

<div className="flex-1 flex flex-col pt-3">
                              <div className="flex items-start justify-center">
                                {selectedUrls.length === 1 ? (
                                  <div className="w-[120%] max-w-[420px] rounded-lg overflow-hidden shadow-2xl bg-[#1a1a1a]">
                                    <img
                                      src={selectedUrls[0] || "/placeholder.svg"}
                                      alt="Card preview"
                                      className="w-full h-auto block"
                                      crossOrigin="anonymous"
                                      onError={(e) => {
                                        console.log('[v0] Card image failed to load:', selectedUrls[0])
                                        setImageLoaded(false)
                                      }}
                                      onLoad={() => {
                                        console.log('[v0] Card image loaded successfully:', selectedUrls[0])
                                        setImageLoaded(true)
                                      }}
                                    />
                                  </div>
                                ) : (
                                  <div className="text-gray-500 text-center">
                                    <p className="text-xs font-medium">No card selected</p>
                                    <p className="text-[10px] mt-1">Select from library</p>
                                  </div>
                                )}
                              </div>

{selectedUrls.length === 1 && (
                                <div className="flex flex-col gap-2 px-4 mt-4">
                                  <div className="flex gap-2">
                                    <button className="flex-1 flex items-center justify-center gap-1.5 bg-white/10 hover:bg-white/15 text-white text-[10px] font-medium py-2 px-3 rounded-lg transition-colors">
                                      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                      </svg>
                                      Share
                                    </button>
                                    <button className="flex-1 flex items-center justify-center gap-1 bg-black/80 backdrop-blur-sm text-white text-[10px] font-medium py-2 px-3 rounded-lg hover:bg-black/70 transition-colors border border-white/10">
                                      <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
                                      </svg>
                                      <span className="font-normal">Pay</span>
                                    </button>
                                  </div>
                                  <button className="w-full flex items-center justify-center gap-1.5 bg-primary text-black text-[10px] font-semibold py-2 px-3 rounded-lg hover:bg-primary/90 transition-colors">
                                    <span className="text-sm text-black" style={{ filter: 'grayscale(1) brightness(0)' }}>✨</span>
                                    Create another card
                                  </button>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/api/cron/keep-alive/route.ts" isMerged="true"
import { createClient } from '@/lib/supabase/server'
import { NextResponse } from 'next/server'

export const dynamic = 'force-dynamic'

export async function GET(request: Request) {
  try {
    // Verify cron secret to prevent unauthorized access
    const authHeader = request.headers.get('authorization')
    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
    }

const supabase = await createClient()
    
    // Simple ping query - just count cards to keep connection alive
    const { count, error } = await supabase
      .from('cards')
      .select('*', { count: 'exact', head: true })

if (error) {
      console.error('[v0] Database ping failed:', error)
      return NextResponse.json(
        { success: false, error: error.message },
        { status: 500 }
      )
    }

console.log('[v0] Database ping successful. Cards count:', count)
    return NextResponse.json({
      success: true,
      timestamp: new Date().toISOString(),
      cardCount: count,
    })
  } catch (error: any) {
    console.error('[v0] Keep-alive cron error:', error)
    return NextResponse.json(
      { success: false, error: error.message },
      { status: 500 }
    )
  }
}
[V0_FILE]json:file="vercel.json" isMerged="true"
{
  "crons": [
    {
      "path": "/api/cron/keep-alive",
      "schedule": "0 0 */2 * *"
    }
  ]
}
[V0_FILE]typescriptreact:file="components/card-message-step.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChevronLeft, Loader2 } from "lucide-react"
import Checkout from "@/components/checkout"

interface CardMessageStepProps {
  card: {
    id: string
    imageUrl: string
    title: string
  }
  recipientName?: string
  deliveryType: "post-to-me" | "send-direct"
  onBack: () => void
}

export function CardMessageStep({ card, recipientName, deliveryType, onBack }: CardMessageStepProps) {
  const [message, setMessage] = useState("")
  const [address, setAddress] = useState({
    name: "",
    line1: "",
    line2: "",
    city: "",
    postcode: "",
  })
  const [imageLoaded, setImageLoaded] = useState(false)

const isSendDirect = deliveryType === "send-direct"
  const addressLabel = isSendDirect ? "Recipient's delivery address" : "Your delivery address"

return (
    <div className="w-full max-w-3xl mx-auto bg-black/90 backdrop-blur-sm rounded-2xl p-6 shadow-2xl border border-white/10 space-y-6">
      {/* Back button */}
      <button
        onClick={onBack}
        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
      >
        <ChevronLeft className="h-3.5 w-3.5" />
        Back to cards
      </button>

{/* Heading */}
      <div className="text-center space-y-1">
        <h3 className="font-semibold text-white text-base">Write your message</h3>
        <p className="text-xs text-white/50">
          {isSendDirect
            ? `This will be printed inside the card for ${recipientName || "the recipient"}`
            : "This will be printed inside your card"}
        </p>
      </div>

{/* Card fold preview */}
      <div className="flex gap-0 rounded-xl overflow-hidden border border-white/10 shadow-2xl">
        {/* Outside - card image */}
        <div className="relative w-1/2 aspect-square bg-black/40">
          {!imageLoaded && (
            <div className="absolute inset-0 flex items-center justify-center">
              <Loader2 className="h-6 w-6 animate-spin text-primary" />
            </div>
          )}
          <Image
            src={card.imageUrl || "/placeholder.svg"}
            alt="Card front"
            fill
            className="object-contain"
            priority
            onLoad={() => setImageLoaded(true)}
          />
          <div className="absolute bottom-2 left-0 right-0 text-center">
            <span className="text-[10px] text-white/30 uppercase tracking-widest">Front</span>
          </div>
        </div>

{/* Divider - simulates card fold */}
        <div className="w-px bg-white/10 shadow-[2px_0_8px_rgba(0,0,0,0.5)]" />

{/* Inside - message preview */}
        <div className="w-1/2 aspect-square bg-[#fdfaf3] flex flex-col items-center justify-center p-4 relative">
          <div className="absolute bottom-2 left-0 right-0 text-center">
            <span className="text-[10px] text-black/20 uppercase tracking-widest">Inside</span>
          </div>
          {message ? (
            <p
              className="text-center text-black/80 leading-relaxed break-words w-full"
              style={{
                fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
                fontSize: message.length > 120 ? "0.75rem" : message.length > 60 ? "0.875rem" : "1rem",
              }}
            >
              {message}
            </p>
          ) : (
            <p className="text-black/25 text-sm italic text-center">Your message will appear here...</p>
          )}
        </div>
      </div>

{/* Message input */}
      <div className="space-y-2">
        <Label className="text-xs text-white/70">Message</Label>
        <Textarea
          placeholder="Write your personal message here..."
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          className="resize-none h-24 bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 focus-visible:ring-primary"
          maxLength={300}
        />
        <p className="text-right text-[10px] text-white/30">{message.length}/300</p>
      </div>

{/* Address fields */}
      <div className="space-y-3">
        <Label className="text-xs text-white/70">{addressLabel}</Label>
        <div className="grid grid-cols-1 gap-2">
          <Input
            placeholder="Full name"
            value={address.name}
            onChange={(e) => setAddress((a) => ({ ...a, name: e.target.value }))}
            className="bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 h-10 focus-visible:ring-primary"
          />
          <Input
            placeholder="Address line 1"
            value={address.line1}
            onChange={(e) => setAddress((a) => ({ ...a, line1: e.target.value }))}
            className="bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 h-10 focus-visible:ring-primary"
          />
          <Input
            placeholder="Address line 2 (optional)"
            value={address.line2}
            onChange={(e) => setAddress((a) => ({ ...a, line2: e.target.value }))}
            className="bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 h-10 focus-visible:ring-primary"
          />
          <div className="grid grid-cols-2 gap-2">
            <Input
              placeholder="City"
              value={address.city}
              onChange={(e) => setAddress((a) => ({ ...a, city: e.target.value }))}
              className="bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 h-10 focus-visible:ring-primary"
            />
            <Input
              placeholder="Postcode"
              value={address.postcode}
              onChange={(e) => setAddress((a) => ({ ...a, postcode: e.target.value }))}
              className="bg-black/40 border-white/10 text-sm text-white placeholder:text-white/30 h-10 focus-visible:ring-primary"
            />
          </div>
        </div>
      </div>

{/* Checkout */}
      <div className="pt-2">
        <div className="text-center mb-3 space-y-0.5">
          <p className="text-white font-semibold text-base">£5.99</p>
          <p className="text-white/40 text-xs">Printed & posted to UK</p>
        </div>
        <Checkout
          productId="stiff-paper-card"
          cardId={card.id}
          cardImageUrl={card.imageUrl}
          recipientName={recipientName}
          cardMessage={message}
          deliveryAddress={address}
          deliveryType={deliveryType}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/card-carousel.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, Share2, Loader2, Sparkles, CreditCard, X, Wand2, Send, Home } from "lucide-react"
import Image from "next/image"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { CardMessageStep } from "@/components/card-message-step"

interface GeneratedCard {
  id: string
  imageUrl: string
  title: string
}

export function CardCarousel({
  cards,
  occasion,
  cardType,
  artStyle,
  recipientName,
  isGenerating = false,
  generatingIndex = null,
  totalCards = 3,
  revealingCard = null,
  onCreateAnother,
  onFineTune,
  onGoBack,
}: CardCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [showCheckout, setShowCheckout] = useState(false)
  const [deliveryType, setDeliveryType] = useState<"post-to-me" | "send-direct" | null>(null)
  const [shareButtonText, setShareButtonText] = useState("Share")
  const [checkoutImageLoaded, setCheckoutImageLoaded] = useState(false)
  const [reminderEnabled, setReminderEnabled] = useState(true)
  const [showFineTune, setShowFineTune] = useState(false)
  const [fineTunePrompt, setFineTunePrompt] = useState("")
  const [isFineTuning, setIsFineTuning] = useState(false)

const nextCard = () => {
    if (currentIndex < cards.length - 1) {
      setCurrentIndex((prev) => prev + 1)
    }
  }

const prevCard = () => {
    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length)
  }

const goToCard = (index: number) => {
    if (index < cards.length) {
      setCurrentIndex(index)
    }
  }

const handleShare = async () => {
    const currentCard = cards[currentIndex]
    if (!currentCard) {
      console.log("[v0] No card selected to share")
      return
    }

console.log("[v0] Sharing card:", currentCard)

const shareUrl = `${window.location.origin}/card/${currentCard.id}`

try {
      await navigator.clipboard.writeText(shareUrl)
      setShareButtonText("✓ Copied!")
      setTimeout(() => {
        setShareButtonText("Share")
      }, 2000)
      console.log("[v0] Link copied to clipboard successfully")
    } catch (err) {
      console.error("[v0] Failed to copy link:", err)
      alert(`Share this link: ${shareUrl}`)
    }
  }

const handleOpenCheckout = (type: "post-to-me" | "send-direct") => {
    setDeliveryType(type)
    setCheckoutImageLoaded(false)
    setShowCheckout(true)
  }

const handleFineTune = async () => {
    if (!fineTunePrompt.trim() || !onFineTune) return

setIsFineTuning(true)
    try {
      await onFineTune(currentIndex, fineTunePrompt.trim())
      setFineTunePrompt("")
      setShowFineTune(false)
    } catch (error) {
      console.error("[v0] Fine tune error:", error)
    } finally {
      setIsFineTuning(false)
    }
  }

const allSlots = Array.from({ length: totalCards }, (_, i) => {
    if (i < cards.length) {
      return { type: "card" as const, card: cards[i], index: i }
    } else if (i === revealingCard) {
      return { type: "revealing" as const, index: i }
    } else if (i === generatingIndex) {
      return { type: "generating" as const, index: i }
    } else {
      return { type: "pending" as const, index: i }
    }
  })

const selectedCard = cards[currentIndex]

return (
    <div className="w-full max-w-3xl mx-auto bg-black/90 backdrop-blur-sm rounded-2xl p-8 shadow-2xl border border-white/10">
      <div className="w-full max-w-lg mx-auto space-y-4">
        <div className="text-center py-1">
          <p className="text-xs font-medium">
            Card {currentIndex + 1} of {totalCards}
            {isGenerating && ` • Creating...`}
          </p>
          {isGenerating && (
            <div className="w-20 mx-auto h-1 bg-muted rounded-full overflow-hidden mt-1">
              <div
                className="h-full bg-primary transition-all duration-500 ease-out"
                style={{ width: `${(cards.length / totalCards) * 100}%` }}
              />
            </div>
          )}
        </div>

<div className="relative">
          <div className="relative aspect-square bg-muted rounded-lg overflow-hidden">
            {cards[currentIndex] ? (
              <Image
                src={cards[currentIndex].imageUrl || "/placeholder.svg"}
                alt={cards[currentIndex].title}
                fill
                className="object-contain"
                priority
                quality={100}
              />
            ) : (
              <div className="flex flex-col items-center justify-center h-full gap-2">
                <Sparkles className="h-6 w-6 animate-pulse text-primary" />
                <span className="text-xs text-muted-foreground">Revealing...</span>
              </div>
            )}
          </div>

<Button
            variant="outline"
            size="icon"
            onClick={nextCard}
            disabled={currentIndex >= cards.length - 1}
            className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 rounded-full bg-background/80 backdrop-blur-sm"
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>

<div className="flex gap-1.5 justify-center py-2">
          {allSlots.map((slot) => (
            <button
              key={slot.index}
              onClick={() => slot.type === "card" && goToCard(slot.index)}
              disabled={slot.type !== "card"}
              className={`relative flex-shrink-0 w-14 h-14 rounded overflow-hidden border-2 transition-all ${
                slot.type === "card" && slot.index === currentIndex
                  ? "border-primary ring-1 ring-primary/20"
                  : slot.type === "card"
                    ? "border-border hover:border-primary/50"
                    : slot.type === "revealing"
                      ? "border-primary/50 bg-primary/10 animate-pulse"
                      : "border-border/50 bg-muted/50"
              }`}
            >
              {slot.type === "card" ? (
                <Image
                  src={slot.card.imageUrl || "/placeholder.svg"}
                  alt={`Card ${slot.index + 1}`}
                  fill
                  className="object-contain"
                  sizes="56px"
                  quality={90}
                />
              ) : slot.type === "revealing" ? (
                <div className="flex items-center justify-center h-full">
                  <Sparkles className="h-3 w-3 animate-pulse text-primary" />
                </div>
              ) : slot.type === "generating" ? (
                <div className="flex items-center justify-center h-full">
                  <Loader2 className="h-3 w-3 animate-spin text-primary" />
                </div>
              ) : (
                <div className="flex items-center justify-center h-full">
                  <span className="text-xs text-muted-foreground">{slot.index + 1}</span>
                </div>
              )}
            </button>
          ))}
        </div>

<div className="flex flex-col gap-2">
          <div className="flex gap-2 justify-center flex-wrap">
            <Button
              variant="outline"
              size="sm"
              className="gap-1 h-9 text-sm bg-black hover:bg-zinc-800 text-white hover:text-white border-white/20 px-4 rounded-full cursor-pointer flex-shrink-0"
              disabled={isGenerating || cards.length === 0}
              onClick={handleShare}
            >
              <Share2 className="h-3.5 w-3.5 flex-shrink-0" />
              <span>{shareButtonText}</span>
            </Button>
            <Button
              size="sm"
              className="gap-1 h-9 text-sm bg-primary hover:bg-primary/90 text-primary-foreground px-4 rounded-full cursor-pointer flex-shrink-0"
              disabled={isGenerating || cards.length === 0}
              onClick={() => handleOpenCheckout("post-to-me")}
            >
              <Home className="h-3.5 w-3.5" />
              Post to Me
            </Button>
            <Button
              size="sm"
              className="gap-1 h-9 text-sm bg-white/10 hover:bg-white/20 text-white border border-white/20 px-4 rounded-full cursor-pointer flex-shrink-0"
              disabled={isGenerating || cards.length === 0}
              onClick={() => handleOpenCheckout("send-direct")}
            >
              <Send className="h-3.5 w-3.5" />
              Send Direct
            </Button>
          </div>

{onGoBack && (
            <div className="flex justify-center">
              <Button
                variant="ghost"
                size="sm"
                onClick={onGoBack}
                disabled={isGenerating}
                className="gap-2 text-xs text-muted-foreground hover:text-foreground"
              >
                <ChevronLeft className="h-3.5 w-3.5" />
                Edit Keywords & Regenerate
              </Button>
            </div>
          )}
        </div>

{!showFineTune && onFineTune && (
          <div className="flex justify-center">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => setShowFineTune(true)}
              disabled={isGenerating || cards.length === 0}
              className="gap-2 text-xs text-muted-foreground hover:text-foreground"
            >
              <Wand2 className="h-3.5 w-3.5" />
              Fine Tune This Card
            </Button>
          </div>
        )}

{showFineTune && (
          <div className="space-y-2 p-4 rounded-lg bg-black/40 border border-white/10">
            <div className="flex items-center justify-between">
              <Label className="text-xs font-medium">Fine Tune Adjustments</Label>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => {
                  setShowFineTune(false)
                  setFineTunePrompt("")
                }}
                className="h-6 w-6 p-0"
              >
                <X className="h-3 w-3" />
              </Button>
            </div>
            <Textarea
              placeholder="E.g., 'make the colors brighter', 'add more flowers', 'make the text larger'..."
              value={fineTunePrompt}
              onChange={(e) => setFineTunePrompt(e.target.value)}
              className="text-sm h-20 resize-none bg-black/40 border-white/10"
              disabled={isFineTuning}
            />
            <Button
              size="sm"
              onClick={handleFineTune}
              disabled={!fineTunePrompt.trim() || isFineTuning}
              className="w-full gap-2"
            >
              {isFineTuning ? (
                <>
                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
                  Regenerating...
                </>
              ) : (
                <>
                  <Wand2 className="h-3.5 w-3.5" />
                  Regenerate Card
                </>
              )}
            </Button>
          </div>
        )}

<div className="flex items-center justify-center gap-2 pt-2 pb-1">
          <Switch id="reminder-switch" checked={reminderEnabled} onCheckedChange={setReminderEnabled} />
          <Label htmlFor="reminder-switch" className="text-xs text-muted-foreground cursor-pointer select-none">
            Remind me of this occasion
          </Label>
        </div>

{onCreateAnother && (
          <div className="flex justify-center pt-2">
            <Button
              variant="outline"
              onClick={onCreateAnother}
              className="gap-2 bg-black text-white border-white/20 hover:bg-zinc-800 hover:text-white cursor-pointer"
              disabled={isGenerating}
            >
              <Sparkles className="h-4 w-4" />
              {isGenerating ? `Revealing cards... (${cards.length}/${totalCards})` : "Create Another Card"}
            </Button>
          </div>
        )}

{showCheckout && selectedCard && deliveryType && (
          <div className="fixed inset-0 z-50 overflow-y-auto bg-black/70 backdrop-blur-md p-4">
            <div className="min-h-full flex items-start justify-center py-8">
              <CardMessageStep
                card={selectedCard}
                recipientName={recipientName}
                deliveryType={deliveryType}
                onBack={() => {
                  setShowCheckout(false)
                  setDeliveryType(null)
                }}
              />
            </div>
          </div>
        )}
      </div>
    </div>
  )
}</article></body></html>