[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/pinterest-image-generator.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Download, Palette, RefreshCw } from "lucide-react" interface PinterestImageGeneratorProps { title: string images: string[] } const colorSchemes = [ { name: "Sunset", bg: "linear-gradient(135deg, #ff6b6b, #ffa726)", text: "#ffffff", accent: "#ff8a65" }, { name: "Ocean", bg: "linear-gradient(135deg, #42a5f5, #26c6da)", text: "#ffffff", accent: "#4fc3f7" }, { name: "Forest", bg: "linear-gradient(135deg, #66bb6a, #8bc34a)", text: "#ffffff", accent: "#81c784" }, { name: "Purple Dream", bg: "linear-gradient(135deg, #ab47bc, #7e57c2)", text: "#ffffff", accent: "#ba68c8" }, { name: "Golden Hour", bg: "linear-gradient(135deg, #ffb74d, #ffc107)", text: "#2d2d2d", accent: "#ffcc02" }, { name: "Rose Gold", bg: "linear-gradient(135deg, #f48fb1, #f06292)", text: "#ffffff", accent: "#f8bbd9" }, { name: "Mint Fresh", bg: "linear-gradient(135deg, #4db6ac, #26a69a)", text: "#ffffff", accent: "#80cbc4" }, { name: "Coral Reef", bg: "linear-gradient(135deg, #ff7043, #ff5722)", text: "#ffffff", accent: "#ff8a65" }, ] const googleFonts = [ "Playfair Display", "Montserrat", "Poppins", "Roboto Slab", "Merriweather", "Open Sans", "Lato", "Source Sans Pro", "Raleway", "Nunito", ] export function PinterestImageGenerator({ title, images }: PinterestImageGeneratorProps) { const [selectedFont, setSelectedFont] = useState("Playfair Display") const [selectedColorScheme, setSelectedColorScheme] = useState(0) const [generatedImages, setGeneratedImages] = useState([]) const [isGenerating, setIsGenerating] = useState(false) const canvasRef = useRef(null) // Load Google Fonts useEffect(() => { const loadFont = (fontName: string) => { const link = document.createElement("link") link.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(" ", "+")}:wght@400;600;700&display=swap` link.rel = "stylesheet" document.head.appendChild(link) } googleFonts.forEach(loadFont) }, []) const generatePinterestImage = async (imageUrl: string, colorSchemeIndex: number): Promise => { return new Promise((resolve) => { const canvas = canvasRef.current if (!canvas) return resolve("") const ctx = canvas.getContext("2d") if (!ctx) return resolve("") // Pinterest optimal size: 1000x1500 (2:3 ratio) canvas.width = 1000 canvas.height = 1500 const scheme = colorSchemes[colorSchemeIndex] const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { // Clear the canvas first ctx.clearRect(0, 0, canvas.width, canvas.height) // Calculate image dimensions to fill the top portion (about 70% of canvas) const imageHeight = 1050 // Top 70% of 1500px canvas const imageWidth = canvas.width // Calculate scaling to fill the area while maintaining aspect ratio const scaleX = imageWidth / img.width const scaleY = imageHeight / img.height const scale = Math.max(scaleX, scaleY) // Use max to fill the area const scaledWidth = img.width * scale const scaledHeight = img.height * scale // Center the scaled image const offsetX = (imageWidth - scaledWidth) / 2 const offsetY = (imageHeight - scaledHeight) / 2 // Draw the main image filling the top portion ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight) // Add a subtle gradient overlay on the image for better text readability const imageGradient = ctx.createLinearGradient(0, imageHeight - 200, 0, imageHeight) imageGradient.addColorStop(0, "rgba(0, 0, 0, 0)") imageGradient.addColorStop(1, "rgba(0, 0, 0, 0.3)") ctx.fillStyle = imageGradient ctx.fillRect(0, 0, canvas.width, imageHeight) // Create the bottom text section with gradient background const textSectionHeight = 450 // Bottom 30% of canvas const textSectionY = imageHeight // Create gradient background for text section const scheme = colorSchemes[colorSchemeIndex] const gradient = ctx.createLinearGradient(0, textSectionY, 0, canvas.height) const gradientColors = scheme.bg.match(/rgb$$[^)]+$$|#[a-fA-F0-9]{6}/g) || ["#ff6b6b", "#ffa726"] gradient.addColorStop(0, gradientColors[0] || "#ff6b6b") gradient.addColorStop(1, gradientColors[1] || "#ffa726") ctx.fillStyle = gradient ctx.fillRect(0, textSectionY, canvas.width, textSectionHeight) // Add semi-transparent overlay for better text readability ctx.fillStyle = "rgba(0, 0, 0, 0.4)" ctx.fillRect(0, textSectionY, canvas.width, textSectionHeight) // Prepare text styling ctx.fillStyle = "#ffffff" ctx.textAlign = "center" ctx.textBaseline = "middle" // Split title into main number/word and description const titleWords = title.split(" ") let mainTitle = "" let subtitle = "" // Try to extract number and main topic const numberMatch = title.match(/(\d+)\s+(.+?)(?:\s+to\s+|\s+for\s+|\s+that\s+|\s+ideas|\s+tips|\s+ways)/i) if (numberMatch) { mainTitle = `${numberMatch[1]} ${numberMatch[2].toUpperCase()}` subtitle = title.replace(numberMatch[0], "").trim().toUpperCase() } else { // Fallback: split title roughly in half const midPoint = Math.ceil(titleWords.length / 2) mainTitle = titleWords.slice(0, midPoint).join(" ").toUpperCase() subtitle = titleWords.slice(midPoint).join(" ").toUpperCase() } // Draw main title (large text) const mainFontSize = Math.min(80, Math.max(50, (600 / mainTitle.length) * 3)) ctx.font = `900 ${mainFontSize}px "${selectedFont}", sans-serif` // Word wrap for main title const mainLines = wrapText(ctx, mainTitle, canvas.width - 80) const mainLineHeight = mainFontSize * 1.1 const mainStartY = textSectionY + 120 mainLines.forEach((line, index) => { ctx.fillText(line, canvas.width / 2, mainStartY + index * mainLineHeight) }) // Draw subtitle (smaller text) const subtitleFontSize = Math.min(36, Math.max(24, (400 / subtitle.length) * 2)) ctx.font = `600 ${subtitleFontSize}px "${selectedFont}", sans-serif` const subtitleLines = wrapText(ctx, subtitle, canvas.width - 80) const subtitleLineHeight = subtitleFontSize * 1.2 const subtitleStartY = mainStartY + mainLines.length * mainLineHeight + 40 subtitleLines.forEach((line, index) => { ctx.fillText(line, canvas.width / 2, subtitleStartY + index * subtitleLineHeight) }) // Add decorative elements ctx.fillStyle = "rgba(255, 255, 255, 0.8)" // Add small decorative dots const dotY = subtitleStartY + subtitleLines.length * subtitleLineHeight + 60 for (let i = 0; i < 5; i++) { const dotX = canvas.width / 2 - 40 + i * 20 ctx.beginPath() ctx.arc(dotX, dotY, 3, 0, Math.PI * 2) ctx.fill() } // Add bottom tagline ctx.font = `400 20px "${selectedFont}", sans-serif` ctx.fillStyle = "rgba(255, 255, 255, 0.9)" ctx.fillText("📌 Save this for later!", canvas.width / 2, canvas.height - 30) resolve(canvas.toDataURL("image/png")) } // Also update the img.onerror to use a proxy for CORS issues img.onerror = () => { console.log("Direct image load failed, trying with proxy...") // Try loading with a CORS proxy const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(imageUrl)}` const proxyImg = new Image() proxyImg.crossOrigin = "anonymous" proxyImg.onload = () => { // Same drawing logic as above but with proxyImg ctx.clearRect(0, 0, canvas.width, canvas.height) const imageHeight = 1050 const imageWidth = canvas.width const scaleX = imageWidth / proxyImg.width const scaleY = imageHeight / proxyImg.height const scale = Math.max(scaleX, scaleY) const scaledWidth = proxyImg.width * scale const scaledHeight = proxyImg.height * scale const offsetX = (imageWidth - scaledWidth) / 2 const offsetY = (imageHeight - scaledHeight) / 2 ctx.drawImage(proxyImg, offsetX, offsetY, scaledWidth, scaledHeight) // Add the rest of the drawing logic (gradient, text, etc.) const scheme = colorSchemes[colorSchemeIndex] const textSectionHeight = 450 const textSectionY = imageHeight const gradient = ctx.createLinearGradient(0, textSectionY, 0, canvas.height) const gradientColors = scheme.bg.match(/rgb$$[^)]+$$|#[a-fA-F0-9]{6}/g) || ["#ff6b6b", "#ffa726"] gradient.addColorStop(0, gradientColors[0] || "#ff6b6b") gradient.addColorStop(1, gradientColors[1] || "#ffa726") ctx.fillStyle = gradient ctx.fillRect(0, textSectionY, canvas.width, textSectionHeight) ctx.fillStyle = "rgba(0, 0, 0, 0.4)" ctx.fillRect(0, textSectionY, canvas.width, textSectionHeight) // Add text (same as above) ctx.fillStyle = "#ffffff" ctx.textAlign = "center" ctx.textBaseline = "middle" ctx.font = `900 60px "${selectedFont}", sans-serif` const lines = wrapText(ctx, title.toUpperCase(), canvas.width - 80) const lineHeight = 70 const startY = textSectionY + 150 lines.forEach((line, index) => { ctx.fillText(line, canvas.width / 2, startY + index * lineHeight) }) resolve(canvas.toDataURL("image/png")) } proxyImg.onerror = () => { // Final fallback - create gradient-only version console.log("All image loading methods failed, creating text-only version") const scheme = colorSchemes[colorSchemeIndex] const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height) const gradientColors = scheme.bg.match(/rgb$$[^)]+$$|#[a-fA-F0-9]{6}/g) || ["#ff6b6b", "#ffa726"] gradient.addColorStop(0, gradientColors[0] || "#ff6b6b") gradient.addColorStop(1, gradientColors[1] || "#ffa726") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "rgba(0, 0, 0, 0.3)" ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = "#ffffff" ctx.textAlign = "center" ctx.textBaseline = "middle" ctx.font = `bold 72px "${selectedFont}", serif` const lines = wrapText(ctx, title.toUpperCase(), canvas.width - 80) const lineHeight = 90 const startY = canvas.height / 2 - ((lines.length - 1) * lineHeight) / 2 lines.forEach((line, index) => { ctx.fillText(line, canvas.width / 2, startY + index * lineHeight) }) resolve(canvas.toDataURL("image/png")) } proxyImg.src = proxyUrl } // Set the main image source img.src = imageUrl }) } // Helper function for text wrapping const wrapText = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] => { const words = text.split(" ") const lines: string[] = [] let currentLine = "" for (const word of words) { const testLine = currentLine + (currentLine ? " " : "") + word const metrics = ctx.measureText(testLine) if (metrics.width > maxWidth && currentLine) { lines.push(currentLine) currentLine = word } else { currentLine = testLine } } if (currentLine) lines.push(currentLine) return lines } const generateAllImages = async () => { setIsGenerating(true) const generated: string[] = [] for (let i = 0; i < Math.min(images.length, 8); i++) { const colorSchemeIndex = i % colorSchemes.length const imageData = await generatePinterestImage(images[i], colorSchemeIndex) if (imageData) { generated.push(imageData) } } setGeneratedImages(generated) setIsGenerating(false) } const downloadImage = (imageData: string, index: number) => { const link = document.createElement("a") link.download = `pinterest-image-${index + 1}.png` link.href = imageData link.click() } const downloadAll = () => { generatedImages.forEach((imageData, index) => { setTimeout(() => downloadImage(imageData, index), index * 500) }) } return (

Pinterest Image Generator

Font Family

Color Scheme

{generatedImages.length > 0 && ( )}

{generatedImages.length > 0 && ( Generated Pinterest Images {generatedImages.length} images generated

{generatedImages.map((imageData, index) => (

{colorSchemes[index % colorSchemes.length].name} Theme

))}

)}

) } [V0_FILE]typescriptreact:file="app/api/proxy-image/route.ts" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { imageUrl } = await request.json() if (!imageUrl) { return NextResponse.json({ error: "Image URL is required" }, { status: 400 }) } console.log("🔄 Server-side image proxy for:", imageUrl) // Validate URL format try { new URL(imageUrl) } catch (error) { console.log("❌ Invalid URL format:", imageUrl) return NextResponse.json({ error: "Invalid URL format" }, { status: 400 }) } // Try multiple fetch strategies let response: Response | null = null let lastError: Error | null = null // Strategy 1: Direct fetch with comprehensive headers try { response = await fetch(imageUrl, { method: "GET", headers: { Accept: "image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8", "Accept-Language": "en-US,en;q=0.9", "Accept-Encoding": "gzip, deflate, br", "Cache-Control": "no-cache", Pragma: "no-cache", "Sec-Ch-Ua": '"Google Chrome";v="119", "Chromium";v="119", "Not?A_Brand";v="24"', "Sec-Ch-Ua-Mobile": "?0", "Sec-Ch-Ua-Platform": '"Windows"', "Sec-Fetch-Dest": "image", "Sec-Fetch-Mode": "cors", "Sec-Fetch-Site": "cross-site", "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36", Referer: new URL(imageUrl).origin, }, signal: AbortSignal.timeout(15000), // 15 second timeout }) if (response.ok) { console.log("✅ Direct fetch successful") } else { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } } catch (error) { console.log("❌ Direct fetch failed:", error) lastError = error as Error response = null } // Strategy 2: Try with different headers if direct fetch failed if (!response || !response.ok) { try { response = await fetch(imageUrl, { method: "GET", headers: { "User-Agent": "Mozilla/5.0 (compatible; ImageBot/1.0)", Accept: "image/*", "Accept-Language": "en-US,en;q=0.5", }, signal: AbortSignal.timeout(10000), }) if (response.ok) { console.log("✅ Alternative headers fetch successful") } else { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } } catch (error) { console.log("❌ Alternative headers fetch failed:", error) lastError = error as Error response = null } } // Strategy 3: Try with minimal headers if (!response || !response.ok) { try { response = await fetch(imageUrl, { signal: AbortSignal.timeout(8000), }) if (response.ok) { console.log("✅ Minimal headers fetch successful") } else { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } } catch (error) { console.log("❌ Minimal headers fetch failed:", error) lastError = error as Error response = null } } if (!response || !response.ok) { console.log("❌ All server proxy strategies failed") return NextResponse.json( { error: "Failed to fetch image", details: lastError?.message || "Unknown error", url: imageUrl, }, { status: response?.status || 500 }, ) } // Validate content type const contentType = response.headers.get("content-type") if (!contentType || !contentType.startsWith("image/")) { console.log("❌ Invalid content type:", contentType) return NextResponse.json({ error: "Invalid image content type", contentType }, { status: 400 }) } // Get image data const imageBuffer = await response.arrayBuffer() if (imageBuffer.byteLength === 0) { console.log("❌ Empty image buffer") return NextResponse.json({ error: "Empty image data" }, { status: 400 }) } // Validate minimum image size (at least 100 bytes) if (imageBuffer.byteLength < 100) { console.log("❌ Image too small:", imageBuffer.byteLength, "bytes") return NextResponse.json({ error: "Image data too small" }, { status: 400 }) } console.log("✅ Server proxy successful, image size:", imageBuffer.byteLength, "bytes") // Return the image with proper headers return new NextResponse(imageBuffer, { status: 200, headers: { "Content-Type": contentType, "Content-Length": imageBuffer.byteLength.toString(), "Cache-Control": "public, max-age=3600", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", }, }) } catch (error) { console.error("❌ Server proxy error:", error) return NextResponse.json( { error: "Failed to proxy image", details: error instanceof Error ? error.message : "Unknown error", }, { status: 500 }, ) } } export async function OPTIONS() { return new NextResponse(null, { status: 200, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type", }, }) } [V0_FILE]typescriptreact:file="app/api/extract-content/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" export async function POST(request: NextRequest) { try { const { url } = await request.json() if (!url) { return NextResponse.json({ error: "URL is required" }, { status: 400 }) } // Fetch the webpage content const response = await fetch(url, { headers: { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", }, }) if (!response.ok) { throw new Error("Failed to fetch webpage") } const html = await response.text() console.log(`🔍 Extracting content from: ${url}`) console.log(`📄 HTML length: ${html.length} characters`) // Extract title (H1) const titleMatch = html.match(/]*>(.*?)<\/h1>/i) const title = titleMatch ? titleMatch[1].replace(/<[^>]*>/g, "").trim() : "Untitled Post" // Try to extract images from content area first, then fallback to full HTML let contentImages: string[] = [] let usedContentArea = false // First attempt: Try to find specific content areas const contentSelectors = [ { name: "primary content-area", regex: /]*id="primary"[^>]*class="content-area"[^>]*>([\s\S]*?)<\/div>/i }, { name: "content-area", regex: /]*class="[^"]*content-area[^"]*"[^>]*>([\s\S]*?)<\/div>/i }, { name: "main tag", regex: /]*>([\s\S]*?)<\/main>/i }, { name: "article tag", regex: /]*>([\s\S]*?)<\/article>/i }, { name: "post-content", regex: /]*class="[^"]*post-content[^"]*"[^>]*>([\s\S]*?)<\/div>/i }, { name: "entry-content", regex: /]*class="[^"]*entry-content[^"]*"[^>]*>([\s\S]*?)<\/div>/i }, ] for (const selector of contentSelectors) { const match = html.match(selector.regex) if (match) { console.log(`✅ Found ${selector.name}, extracting images from content area`) const contentHtml = match[1] contentImages = extractImagesFromHtml(contentHtml, url) if (contentImages.length > 0) { console.log(`📸 Found ${contentImages.length} images in ${selector.name}`) usedContentArea = true break } else { console.log(`⚠️ ${selector.name} found but contains no images, trying next selector`) } } } // Fallback: If no images found in content areas, use full HTML (original method) if (contentImages.length === 0) { console.log("🔄 No images found in content areas, falling back to full HTML extraction") contentImages = extractImagesFromHtml(html, url) console.log(`📸 Found ${contentImages.length} images using full HTML extraction`) } // Apply enhanced filtering to remove non-content images const filteredImages = contentImages.filter((imageSrc) => { // Enhanced filtering - prioritize content images const isLikelyContentImage = // Include WordPress uploads imageSrc.includes("wp-content/uploads") || // Include other common content paths imageSrc.includes("/uploads/") || imageSrc.includes("/media/") || imageSrc.includes("/images/") || imageSrc.includes("/content/") const isNotUIElement = // Exclude common non-content images !imageSrc.includes("icon") && !imageSrc.includes("logo") && !imageSrc.includes("avatar") && !imageSrc.includes("profile") && !imageSrc.includes("wp-content/themes") && !imageSrc.includes("wp-content/plugins") && // Exclude very small images (likely icons) !imageSrc.includes("-16x16") && !imageSrc.includes("-32x32") && !imageSrc.includes("-50x50") && // Exclude SVG files !imageSrc.endsWith(".svg") const hasValidFormat = imageSrc.endsWith(".jpg") || imageSrc.endsWith(".jpeg") || imageSrc.endsWith(".png") || imageSrc.endsWith(".webp") // If we used content area extraction, be less strict if (usedContentArea) { return isNotUIElement && hasValidFormat } else { // If using full HTML, be more strict return isLikelyContentImage && isNotUIElement && hasValidFormat } }) console.log(`✅ Final filtered images: ${filteredImages.length}`) // Remove duplicates const uniqueImages = [...new Set(filteredImages)] return NextResponse.json({ title, images: uniqueImages, }) } catch (error) { console.error("Error extracting content:", error) return NextResponse.json({ error: "Failed to extract content from the provided URL" }, { status: 500 }) } } // Helper function to extract images from HTML content function extractImagesFromHtml(html: string, baseUrl: string): string[] { const imageMatches = html.match(/]+src="([^"]+)"[^>]*>/gi) || [] const images: string[] = [] for (const match of imageMatches) { const srcMatch = match.match(/src="([^"]+)"/i) if (srcMatch) { let imageSrc = srcMatch[1] // Convert relative URLs to absolute URLs if (imageSrc.startsWith("/")) { const urlObj = new URL(baseUrl) imageSrc = `${urlObj.protocol}//${urlObj.host}${imageSrc}` } else if (imageSrc.startsWith("./")) { const urlObj = new URL(baseUrl) imageSrc = `${urlObj.protocol}//${urlObj.host}${urlObj.pathname.replace(/\/[^/]*$/, "/")}${imageSrc.substring(2)}` } else if (!imageSrc.startsWith("http")) { const urlObj = new URL(baseUrl) imageSrc = `${urlObj.protocol}//${urlObj.host}/${imageSrc}` } images.push(imageSrc) } } return images } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "advanced-pinterest-generator",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ai-sdk/google": "^0.0.52",
    "@radix-ui/react-select": "^2.1.2",
    "ai": "^4.0.0",
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "lucide-react": "^0.468.0"
  },
  "devDependencies": {
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "eslint": "^9.0.0",
    "eslint-config-next": "15.1.3",
    "postcss": "^8.0.0",
    "tailwindcss": "^3.4.0",
    "typescript": "^5.0.0"
  }
}
[V0_FILE]typescriptreact:file="app/api/get-wordpress-categories/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  try {
    const { wordpressUrl, username, password } = await request.json()

if (!wordpressUrl || !username || !password) {
      return NextResponse.json({ error: "WordPress URL and credentials are required" }, { status: 400 })
    }

const baseUrl = wordpressUrl.replace(/\/$/, "")
    const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`

console.log(`🔍 Fetching categories from: ${baseUrl}`)

const response = await fetch(`${baseUrl}/wp-json/wp/v2/categories?per_page=100`, {
      method: "GET",
      headers: {
        Authorization: authHeader,
        "Content-Type": "application/json",
      },
    })

if (!response.ok) {
      const errorText = await response.text()
      console.log(`❌ Failed to fetch categories:`, response.status, errorText)
      return NextResponse.json(
        {
          error: "Failed to fetch categories",
          details: errorText,
        },
        { status: response.status },
      )
    }

const categories = await response.json()
    console.log(`✅ Found ${categories.length} categories`)

return NextResponse.json({
      success: true,
      categories: categories.map((cat: any) => ({
        id: cat.id,
        name: cat.name,
        slug: cat.slug,
        count: cat.count,
      })),
    })
  } catch (error) {
    console.error("Error fetching WordPress categories:", error)
    return NextResponse.json(
      {
        error: "Failed to fetch categories",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/pinterest-text-top-template.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface PinterestTextTopTemplateProps {
  id: string
  title: string
  imageUrl: string
  domain: string
  template: {
    id: string
    name: string
    gradient: string
    textColor: string
    font: string
    brandColor: string
  }
}

export function PinterestTextTopTemplate({ id, title, imageUrl, template, domain }: PinterestTextTopTemplateProps) {
  // Parse title for better formatting
  const parseTitle = (title: string) => {
    const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
      return { number: "", mainTopic: "Untitled", subtitle: "" }
    }

// Check if first word is a number
    const firstWord = words[0]
    const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
      // First word is a number
      const number = firstWord
      const remainingWords = words.slice(1)

// Take next 3-4 words as main topic
      const topicWordCount = Math.min(4, Math.max(3, remainingWords.length <= 6 ? remainingWords.length : 4))
      const mainTopicWords = remainingWords.slice(0, topicWordCount)
      const subtitleWords = remainingWords.slice(topicWordCount)

const mainTopic =
        mainTopicWords.join(" ").charAt(0).toUpperCase() + mainTopicWords.join(" ").slice(1).toLowerCase()
      const subtitle =
        subtitleWords.length > 0
          ? subtitleWords.join(" ").charAt(0).toUpperCase() + subtitleWords.join(" ").slice(1).toLowerCase()
          : ""

return { number, mainTopic, subtitle }
    } else {
      // No number at the beginning
      const topicWordCount = Math.min(4, Math.max(3, words.length <= 6 ? words.length : 4))
      const mainTopicWords = words.slice(0, topicWordCount)
      const subtitleWords = words.slice(topicWordCount)

return { number: "", mainTopic, subtitle }
    }
  }

const { number, mainTopic, subtitle } = parseTitle(title)

return (
    <div
      id={id}
      className="relative w-full bg-white shadow-lg overflow-hidden"
      style={{ width: "250px", height: "375px" }} // 2:3 ratio scaled down for preview
    >
      {/* Text Section at Top (30%) */}
      <div
        className={`h-[30%] bg-gradient-to-br ${template.gradient} p-4 flex flex-col justify-center relative overflow-hidden`}
      >
        {/* Dark overlay for better text readability */}
        <div className="absolute inset-0 bg-black/40" />

<div className={`relative z-10 text-center ${template.textColor}`}>
          {/* Main Title */}
          <div className={`${template.font} font-black text-lg leading-tight mb-1`}>
            {number && <span className="text-2xl">{number} </span>}
            <span className="text-sm">{mainTopic}</span>
          </div>

{/* Subtitle */}
          {subtitle && (
            <div className={`${template.font} font-semibold text-xs leading-tight opacity-90 mb-2`}>{subtitle}</div>
          )}

{/* Brand domain */}
          <div className={`text-xs ${template.brandColor} font-medium`}>www.{domain}</div>
        </div>
      </div>

{/* Main Image Section (70%) */}
      <div className="relative h-[70%] overflow-hidden">
        <img
          src={imageUrl || "/placeholder.svg"}
          alt="Pinterest content"
          className="w-full h-full object-cover"
          onError={(e) => {
            const target = e.target as HTMLImageElement
            target.src = "/placeholder.svg?height=262&width=250"
          }}
        />
        {/* Subtle gradient overlay */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />

{/* Brand watermark on image */}
        <div className="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
          www.{domain}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pinterest-collage-3-template.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface PinterestCollage3TemplateProps {
  id: string
  title: string
  imageUrls: string[]
  domain: string
  template: {
    id: string
    name: string
    gradient: string
    textColor: string
    font: string
    brandColor: string
  }
}

export function PinterestCollage3Template({ id, title, imageUrls, template, domain }: PinterestCollage3TemplateProps) {
  // Parse title for better formatting
  const parseTitle = (title: string) => {
    const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
      return { number: "", mainTopic: "Untitled", subtitle: "" }
    }

// Check if first word is a number
    const firstWord = words[0]
    const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
      // First word is a number
      const number = firstWord
      const remainingWords = words.slice(1)

return { number: "", mainTopic, subtitle }
    }
  }

const { number, mainTopic, subtitle } = parseTitle(title)

return (
    <div
      id={id}
      className="relative w-full bg-white shadow-lg overflow-hidden border-2 border-gray-100"
      style={{ width: "250px", height: "375px" }} // 2:3 ratio scaled down for preview
    >
      {/* 3-Image Layout: 1 large top, 2 small bottom */}
      <div className="h-full flex flex-col">
        {/* Top large image (60%) */}
        <div className="h-[60%] border-b-2 border-white">
          <img
            src={imageUrls[0] || "/placeholder.svg"}
            alt="Main image"
            className="w-full h-full object-cover"
            onError={(e) => {
              const target = e.target as HTMLImageElement
              target.src = "/placeholder.svg?height=225&width=250"
            }}
          />
        </div>

{/* Bottom two images (40%) */}
        <div className="h-[40%] flex">
          <div className="w-1/2 border-r border-white">
            <img
              src={imageUrls[1] || "/placeholder.svg"}
              alt="Bottom left image"
              className="w-full h-full object-cover"
              onError={(e) => {
                const target = e.target as HTMLImageElement
                target.src = "/placeholder.svg?height=150&width=125"
              }}
            />
          </div>
          <div className="w-1/2">
            <img
              src={imageUrls[2] || "/placeholder.svg"}
              alt="Bottom right image"
              className="w-full h-full object-cover"
              onError={(e) => {
                const target = e.target as HTMLImageElement
                target.src = "/placeholder.svg?height=150&width=125"
              }}
            />
          </div>
        </div>
      </div>

{/* Central Text Overlay */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div
          className={`bg-gradient-to-br ${template.gradient} p-3 rounded-lg shadow-lg max-w-[85%] text-center relative overflow-hidden`}
          style={{ minHeight: "35%" }}
        >
          {/* Dark overlay for better text readability */}
          <div className="absolute inset-0 bg-black/40 rounded-lg" />

<div className={`relative z-10 ${template.textColor}`}>
            {/* Main Title */}
            <div className={`${template.font} font-black text-sm leading-tight mb-2`}>
              {number && <span className="text-lg">{number} </span>}
              <span className="text-xs">{mainTopic}</span>
            </div>

{/* Subtitle */}
            {subtitle && (
              <div className={`${template.font} font-semibold text-xs leading-tight opacity-90 mb-3`}>
                {subtitle.length > 45 ? subtitle.substring(0, 45) + "..." : subtitle}
              </div>
            )}

{/* Decorative dots */}
            <div className="flex justify-center space-x-1 mb-2">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="w-1 h-1 bg-white/60 rounded-full" />
              ))}
            </div>

{/* Brand domain */}
            <div className={`text-xs ${template.brandColor} font-medium`}>www.{domain}</div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pinterest-collage-2-template.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface PinterestCollage2TemplateProps {
  id: string
  title: string
  imageUrls: string[]
  domain: string
  template: {
    id: string
    name: string
    gradient: string
    textColor: string
    font: string
    brandColor: string
  }
}

export function PinterestCollage2Template({ id, title, imageUrls, template, domain }: PinterestCollage2TemplateProps) {
  // Parse title for better formatting
  const parseTitle = (title: string) => {
    const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
      return { number: "", mainTopic: "Untitled", subtitle: "" }
    }

// Check if first word is a number
    const firstWord = words[0]
    const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
      // First word is a number
      const number = firstWord
      const remainingWords = words.slice(1)

return { number: "", mainTopic, subtitle }
    }
  }

const { number, mainTopic, subtitle } = parseTitle(title)

return (
    <div
      id={id}
      className="relative w-full bg-white shadow-lg overflow-hidden border-2 border-gray-100"
      style={{ width: "250px", height: "375px" }} // 2:3 ratio scaled down for preview
    >
      {/* 2-Image Layout: Stacked vertically */}
      <div className="h-full flex flex-col">
        {/* Top image (50%) */}
        <div className="h-1/2 border-b-2 border-white">
          <img
            src={imageUrls[0] || "/placeholder.svg"}
            alt="Top image"
            className="w-full h-full object-cover"
            onError={(e) => {
              const target = e.target as HTMLImageElement
              target.src = "/placeholder.svg?height=187&width=250"
            }}
          />
        </div>

{/* Bottom image (50%) */}
        <div className="h-1/2">
          <img
            src={imageUrls[1] || "/placeholder.svg"}
            alt="Bottom image"
            className="w-full h-full object-cover"
            onError={(e) => {
              const target = e.target as HTMLImageElement
              target.src = "/placeholder.svg?height=187&width=250"
            }}
          />
        </div>
      </div>

{/* Central Text Overlay */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div
          className={`bg-gradient-to-br ${template.gradient} p-4 rounded-lg shadow-lg max-w-[90%] text-center relative overflow-hidden`}
          style={{ minHeight: "40%" }}
        >
          {/* Dark overlay for better text readability */}
          <div className="absolute inset-0 bg-black/40 rounded-lg" />

<div className={`relative z-10 ${template.textColor}`}>
            {/* Main Title */}
            <div className={`${template.font} font-black text-base leading-tight mb-2`}>
              {number && <span className="text-xl">{number} </span>}
              <span className="text-sm">{mainTopic}</span>
            </div>

{/* Subtitle */}
            {subtitle && (
              <div className={`${template.font} font-semibold text-xs leading-tight opacity-90 mb-3`}>
                {subtitle.length > 50 ? subtitle.substring(0, 50) + "..." : subtitle}
              </div>
            )}

{/* Decorative dots */}
            <div className="flex justify-center space-x-1 mb-3">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="w-1 h-1 bg-white/60 rounded-full" />
              ))}
            </div>

{/* Brand domain */}
            <div className={`text-xs ${template.brandColor} font-medium`}>www.{domain}</div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/generate-content/route.ts" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Multiple Google API keys for fallback
const GOOGLE_API_KEYS = ["AIzaSyB7bg1-43TKI2iRY2tBmqqvJuWTDjqELHw", "AIzaSyAmlTWxA0b6ZAcu4DGtZmifXGeZSjyCCTU", "AIzaSyBDAk4BLVGgW_CR5ITQ2g7K6FOWagZ_ZHg", "AIzaSyDLKuZaUWrZE3YYjdI8E4UL3X1YNBYv0FI", "AIzaSyAseBATdgFA1qQrcziJpxTM6NXISc5zSpM", "AIzaSyCs3623JUrbQ4WFhsOu9JNCeumiprWkRAQ", "AIzaSyAFsCCtsOODgjk8BJbhrnq4eKWifEG6POQ", "AIzaSyB60FTyhdhZHCRPOVxJDeEGFYBwewAn-8Y"]

export async function POST(request: NextRequest) {
  try {
    const { originalTitle, originalUrl, count = 25, imageCount } = await request.json()

if (!originalTitle || !imageCount) {
      return NextResponse.json({ error: "Original title and image count are required" }, { status: 400 })
    }

console.log(
      `🤖 Generating ${count} Pinterest-optimized content variations with ${imageCount} count for: ${originalTitle}`,
    )

const generatedContent = []

// Generate content in batches to avoid rate limits
    const batchSize = 3
    const batches = Math.ceil(count / batchSize)

for (let batch = 0; batch < batches; batch++) {
      const batchPromises = []
      const currentBatchSize = Math.min(batchSize, count - batch * batchSize)

for (let i = 0; i < currentBatchSize; i++) {
        const contentIndex = batch * batchSize + i + 1

const promise = generateSingleContent(originalTitle, originalUrl, contentIndex, imageCount)
        batchPromises.push(promise)
      }

// Wait for current batch to complete
      const batchResults = await Promise.all(batchPromises)
      generatedContent.push(...batchResults.filter((result) => result !== null))

// Delay between batches to respect rate limits
      if (batch < batches - 1) {
        await new Promise((resolve) => setTimeout(resolve, 1500))
      }
    }

console.log(`✅ Generated ${generatedContent.length} content variations`)

return NextResponse.json({
      success: true,
      content: generatedContent,
      count: generatedContent.length,
    })
  } catch (error) {
    console.error("Error generating content:", error)
    return NextResponse.json(
      {
        error: "Failed to generate content",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}

async function generateSingleContent(
  originalTitle: string,
  originalUrl: string,
  contentIndex: number,
  imageCount: number,
) {
  const prompt = `Create Pinterest-optimized content based on this original title: "${originalTitle}"

The content MUST use exactly ${imageCount} as the number in the title no other numeric or count apears(this matches the actual number of images scraped from the post).

Generate a UNIQUE variation that is:
- Pinterest-friendly (engaging, clickable, starts with the number ${imageCount})
- SEO optimized for Pinterest search
- Different from the original but related to the same topic
- Includes power words and emotional triggers
- Optimized for Pinterest audience (DIY, lifestyle, home decor, fashion, food, etc.)
- MUST start with "${imageCount}" followed by relevant topic words, no other number

Example format: "${imageCount} Amazing Kitchen Ideas That Will Transform Your Home"

Variation #${contentIndex}:

IMPORTANT: Respond ONLY with valid JSON in this exact format:
{
  "title": "${imageCount} [Pinterest-optimized title continuation] (60-80 characters total)",
  "description": "Pinterest-optimized description (exactly 100 words, engaging, includes relevant hashtags, call-to-action)"
}

Make each variation unique and engaging. Focus on Pinterest trends and user behavior.`

// Try each API key until one works
  for (let keyIndex = 0; keyIndex < GOOGLE_API_KEYS.length; keyIndex++) {
    const apiKey = GOOGLE_API_KEYS[keyIndex]

try {
      console.log(`🔄 Trying API key ${keyIndex + 1} for content ${contentIndex}`)

const response = await fetch(
        `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            contents: [
              {
                parts: [
                  {
                    text: prompt,
                  },
                ],
              },
            ],
            generationConfig: {
              temperature: 0.8,
              topK: 40,
              topP: 0.95,
              maxOutputTokens: 1024,
            },
          }),
        },
      )

if (!response.ok) {
        const errorText = await response.text()
        console.log(`❌ API key ${keyIndex + 1} failed for content ${contentIndex}:`, response.status, errorText)

// If this is a rate limit error, try next API key
        if (response.status === 429 || response.status === 403) {
          continue
        }

// For other errors, also try next key
        continue
      }

const data = await response.json()

if (!data.candidates || !data.candidates[0] || !data.candidates[0].content) {
        console.log(`❌ Invalid response structure from API key ${keyIndex + 1} for content ${contentIndex}`)
        continue
      }

const generatedText = data.candidates[0].content.parts[0].text

try {
        // Extract JSON from the response
        const jsonMatch = generatedText.match(/\{[\s\S]*\}/)
        if (jsonMatch) {
          const parsed = JSON.parse(jsonMatch[0])

console.log(`✅ API key ${keyIndex + 1} succeeded for content ${contentIndex}`)

return {
            id: contentIndex,
            title: parsed.title || `${originalTitle} - Variation ${contentIndex}`,
            description: parsed.description || generateFallbackDescription(),
            originalUrl,
            slug: generateSlug(parsed.title || `${originalTitle} - Variation ${contentIndex}`),
            apiKeyUsed: keyIndex + 1,
          }
        } else {
          console.log(`❌ No JSON found in response from API key ${keyIndex + 1} for content ${contentIndex}`)
          continue
        }
      } catch (parseError) {
        console.log(`❌ JSON parsing failed for API key ${keyIndex + 1}, content ${contentIndex}:`, parseError)
        continue
      }
    } catch (fetchError) {
      console.log(`❌ Network error with API key ${keyIndex + 1} for content ${contentIndex}:`, fetchError)
      continue
    }
  }

// If all API keys failed, return fallback content
  console.log(`⚠️ All API keys failed for content ${contentIndex}, using fallback`)
  return {
    id: contentIndex,
    title: generateFallbackTitle(originalTitle, contentIndex),
    description: generateFallbackDescription(),
    originalUrl,
    slug: generateSlug(generateFallbackTitle(originalTitle, contentIndex)),
    apiKeyUsed: "fallback",
  }
}

function generateFallbackTitle(originalTitle: string, index: number): string {
  const variations = [
    `${index} Amazing ${originalTitle} Ideas`,
    `Best ${originalTitle} Tips You Need to Know`,
    `${originalTitle} - ${index} Creative Ideas`,
    `Stunning ${originalTitle} Inspiration`,
    `${index} Must-Try ${originalTitle} Ideas`,
    `Perfect ${originalTitle} Guide`,
    `${originalTitle} - Creative Solutions`,
    `Beautiful ${originalTitle} Ideas`,
    `${index} Brilliant ${originalTitle} Tips`,
    `Ultimate ${originalTitle} Collection`,
  ]

return variations[index % variations.length]
}

function generateFallbackDescription(): string {
  const descriptions = [
    "Discover amazing ideas and inspiration for your next project! These creative solutions will transform your space and bring your vision to life. Perfect for DIY enthusiasts and design lovers. Save this pin for later and start creating something beautiful today! #Pinterest #DIY #Ideas #Inspiration #Home #Decor #Lifestyle #Creative #Beautiful #Amazing #Design #Style #Trending #MustTry #Perfect #Stunning #Gorgeous #Elegant #Modern #Chic #Stylish #Unique #Fabulous #Wonderful #Incredible #Fantastic #Awesome #Brilliant #Outstanding #Exceptional #Remarkable #Impressive #Spectacular #Magnificent #Extraordinary #Phenomenal #Sensational #Breathtaking #Captivating #Enchanting #Mesmerizing #Dazzling #Radiant #Glorious #Splendid #Superb #Excellent #Marvelous #Terrific #Fantastic #Amazing #Incredible #Wonderful #Beautiful #Gorgeous #Stunning #Perfect #Brilliant #Outstanding #Exceptional #Remarkable #Impressive #Spectacular #Magnificent #Extraordinary",
    "Get inspired with these incredible ideas that will elevate your style and transform your space! Whether you're looking for home decor, fashion tips, or creative DIY projects, this collection has everything you need. Save this pin and start your transformation journey today! #Pinterest #Inspiration #DIY #HomeDecor #Fashion #Style #Creative #Ideas #Design #Lifestyle #Trending #Beautiful #Amazing #Perfect #Stunning #Gorgeous #Elegant #Modern #Chic #Stylish #Unique #Fabulous #Wonderful #Incredible #Fantastic #Awesome #Brilliant #Outstanding #Exceptional #Remarkable #Impressive #Spectacular #Magnificent #Extraordinary #Phenomenal #Sensational #Breathtaking #Captivating #Enchanting #Mesmerizing #Dazzling #Radiant #Glorious #Splendid #Superb #Excellent #Marvelous #Terrific #Fantastic #Amazing #Incredible #Wonderful #Beautiful #Gorgeous #Stunning #Perfect #Brilliant #Outstanding #Exceptional #Remarkable #Impressive #Spectacular",
    "Transform your space with these brilliant ideas that combine style, functionality, and creativity! Perfect for anyone looking to refresh their home, upgrade their wardrobe, or try new DIY projects. These tips will help you create something truly special. Don't miss out - save this pin now! #Pinterest #Transform #Style #Creative #DIY #HomeDecor #Fashion #Ideas #Design #Inspiration #Lifestyle #Trending #Beautiful #Amazing #Perfect #Stunning #Gorgeous #Elegant #Modern #Chic #Stylish #Unique #Fabulous #Wonderful #Incredible #Fantastic #Awesome #Brilliant #Outstanding #Exceptional #Remarkable #Impressive #Spectacular #Magnificent #Extraordinary #Phenomenal #Sensational #Breathtaking #Captivating #Enchanting #Mesmerizing #Dazzling #Radiant #Glorious #Splendid #Superb #Excellent #Marvelous #Terrific #Fantastic #Amazing #Incredible #Wonderful #Beautiful #Gorgeous #Stunning #Perfect #Brilliant #Outstanding #Exceptional #Remarkable #Impressive",
  ]

return descriptions[Math.floor(Math.random() * descriptions.length)]
}

function generateSlug(title: string): string {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9\s-]/g, "") // Remove special characters
    .replace(/\s+/g, "-") // Replace spaces with hyphens
    .replace(/-+/g, "-") // Replace multiple hyphens with single
    .trim()
    .substring(0, 50) // Limit length
}
[V0_FILE]typescriptreact:file="components/pinterest-collage-template.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface PinterestCollageTemplateProps {
  id: string
  title: string
  imageUrls: string[]
  domain: string
  template: {
    id: string
    name: string
    gradient: string
    textColor: string
    font: string
    brandColor: string
  }
}

export function PinterestCollageTemplate({ id, title, imageUrls, template, domain }: PinterestCollageTemplateProps) {
  // Parse title for better formatting
  const parseTitle = (title: string) => {
    const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
      return { number: "", mainTopic: "Untitled", subtitle: "" }
    }

// Check if first word is a number
    const firstWord = words[0]
    const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
      // First word is a number
      const number = firstWord
      const remainingWords = words.slice(1)

return { number: "", mainTopic, subtitle }
    }
  }

const { number, mainTopic, subtitle } = parseTitle(title)

return (
    <div
      id={id}
      className="relative w-full bg-white shadow-lg overflow-hidden"
      style={{ width: "250px", height: "375px" }} // 2:3 ratio scaled down for preview
    >
      {/* Perfect 4-Image Grid with White Borders - Equal spacing and dimensions */}
      <div
        className="h-full bg-white"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr", // Exactly equal columns
          gridTemplateRows: "1fr 1fr", // Exactly equal rows
          gap: "4px", // White border between images
          padding: "0", // No outer padding
        }}
      >
        {imageUrls.slice(0, 4).map((imageUrl, index) => (
          <div
            key={index}
            className="relative overflow-hidden bg-gray-100"
            style={{
              width: "100%",
              height: "100%",
              aspectRatio: "1/1", // Force square aspect ratio for perfect equality
            }}
          >
            <img
              src={imageUrl || "/placeholder.svg"}
              alt={`Collage image ${index + 1}`}
              className="w-full h-full object-cover"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover", // Ensure image fills the space perfectly
                objectPosition: "center", // Center the image
              }}
              onError={(e) => {
                const target = e.target as HTMLImageElement
                target.src = "/placeholder.svg?height=187&width=125"
              }}
            />
          </div>
        ))}
      </div>

{/* Compact Modern Overlay - Positioned over the grid */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div
          className={`bg-gradient-to-br ${template.gradient} shadow-xl text-center relative overflow-hidden`}
          style={{
            width: "60%", // Compact width
            height: "35%", // Compact height
            borderRadius: "12px", // Modern rounded corners
            padding: "16px 12px",
            backdropFilter: "blur(10px)",
          }}
        >
          {/* Subtle glass effect overlay */}
          <div className="absolute inset-0 bg-black/30 rounded-xl" />
          <div className="absolute inset-0 bg-white/10 rounded-xl" />

<div className={`relative z-10 ${template.textColor} space-y-2`}>
            {/* Colorful Count Circle - More prominent */}
            {number && (
              <div className="mb-2 flex justify-center">
                <div className="relative">
                  {/* White background circle with shadow */}
                  <div className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center">
                    {/* Colorful inner circle */}
                    <div
                      className={`w-14 h-14 bg-gradient-to-br ${template.gradient} rounded-full flex items-center justify-center`}
                    >
                      <span className="text-white font-black text-xl">{number}</span>
                    </div>
                  </div>
                </div>
              </div>
            )}

{/* Main Title - Compact and bold */}
            <div
              className="font-black leading-tight tracking-wide"
              style={{
                fontSize: "0.75rem",
                fontFamily: "'Montserrat', sans-serif",
                letterSpacing: "0.5px",
                textShadow: "1px 1px 2px rgba(0,0,0,0.3)",
              }}
            >
              {mainTopic}
            </div>

{/* Subtitle - More compact */}
            {subtitle && subtitle.length > 0 && (
              <div
                className="font-semibold leading-tight opacity-95"
                style={{
                  fontSize: "0.6rem",
                  fontFamily: "'Montserrat', sans-serif",
                  letterSpacing: "0.3px",
                }}
              >
                {subtitle.length > 35 ? subtitle.substring(0, 35) + "..." : subtitle}
              </div>
            )}

{/* Minimal separator */}
            <div className="flex justify-center my-2">
              <div className="w-8 h-0.5 bg-white/70 rounded-full"></div>
            </div>

{/* Brand domain - Smaller and elegant */}
            <div
              className="font-medium opacity-90"
              style={{
                fontSize: "0.55rem",
                fontFamily: "'Playfair Display', serif",
                fontStyle: "italic",
              }}
            >
              www.{domain}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pinterest-template.tsx" isQuickEdit="true" isMerged="true"
"use client"

interface PinterestTemplateProps {
  id: string
  title: string
  imageUrl: string
  domain: string
  topicWordCount?: number
  template: {
    id: string
    name: string
    gradient: string
    textColor: string
    font: string
    brandColor: string
  }
}

export function PinterestTemplate({
  id,
  title,
  imageUrl,
  template,
  domain,
  topicWordCount = 4,
}: PinterestTemplateProps) {
  // Update parseTitle function
  const parseTitle = (title: string, wordCount = 4) => {
    const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
      return { number: "", mainTopic: "Untitled", subtitle: "" }
    }

const firstWord = words[0]
    const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
      const number = firstWord
      const remainingWords = words.slice(1)

const topicWordCount = Math.min(wordCount, remainingWords.length)
      const mainTopicWords = remainingWords.slice(0, topicWordCount)
      const subtitleWords = remainingWords.slice(topicWordCount)

return { number, mainTopic, subtitle }
    } else {
      const topicWordCount = Math.min(wordCount, words.length)
      const mainTopicWords = words.slice(0, topicWordCount)
      const subtitleWords = words.slice(topicWordCount)

return { number: "", mainTopic, subtitle }
    }
  }

const { number, mainTopic, subtitle } = parseTitle(title, topicWordCount)

return (
    <div
      id={id}
      className="relative w-full bg-white shadow-lg overflow-hidden"
      style={{ width: "250px", height: "375px" }} // 2:3 ratio scaled down for preview
    >
      {/* Main Image Section (70%) */}
      <div className="relative h-[70%] overflow-hidden">
        <img
          src={imageUrl || "/placeholder.svg"}
          alt="Pinterest content"
          className="w-full h-full object-cover"
          onError={(e) => {
            const target = e.target as HTMLImageElement
            target.src = "/placeholder.svg?height=262&width=250"
          }}
        />
        {/* Gradient overlay for text readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />

{/* Brand watermark on image */}
        <div className="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
          www.{domain}
        </div>

{/* Colorful Count Circle on Image */}
        {number && (
          <div className="absolute top-4 left-4">
            <div className="relative">
              {/* Enhanced white background circle with better shadow */}
              <div className="w-16 h-16 bg-white rounded-full shadow-xl flex items-center justify-center border-2 border-white/50">
                {/* Enhanced colorful inner circle */}
                <div
                  className={`w-14 h-14 bg-gradient-to-br ${template.gradient} rounded-full flex items-center justify-center shadow-inner`}
                >
                  <span
                    className="text-white font-black text-2xl leading-none"
                    style={{
                      fontFamily: "'Playfair Display', serif",
                      textShadow: "2px 2px 4px rgba(0,0,0,0.3)",
                      letterSpacing: "-1px",
                    }}
                  >
                    {number}
                  </span>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

{/* Text Section (30%) */}
      <div
        className={`h-[30%] bg-gradient-to-br ${template.gradient} p-4 flex flex-col justify-center relative overflow-hidden`}
      >
        {/* Dark overlay for better text readability */}
        <div className="absolute inset-0 bg-black/40" />

<div className={`relative z-10 text-center ${template.textColor}`}>
          {/* Main Title - Don't show number here since it's in the circle */}
          <div className={`${template.font} font-black text-lg leading-tight mb-1`}>
            <span className="text-sm">{mainTopic}</span>
          </div>

{/* Subtitle */}
          {subtitle && (
            <div className={`${template.font} font-semibold text-xs leading-tight opacity-90 mb-2`}>{subtitle}</div>
          )}

{/* Decorative dots */}
          <div className="flex justify-center space-x-1 mb-2">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="w-1 h-1 bg-white/60 rounded-full" />
            ))}
          </div>

{/* Brand domain at bottom */}
          <div className={`text-xs ${template.brandColor} font-medium`}>www.{domain}</div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

.font-playfair {
  font-family: "Playfair Display", serif;
}

.font-montserrat {
  font-family: "Montserrat", sans-serif;
}

.font-poppins {
  font-family: "Poppins", sans-serif;
}

.font-roboto {
  font-family: "Roboto Slab", serif;
}

.font-merriweather {
  font-family: "Merriweather", serif;
}

.font-lato {
  font-family: "Lato", sans-serif;
}

.font-nunito {
  font-family: "Nunito", sans-serif;
}

/* Grid Pattern Background */
.bg-grid-pattern {
  background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Custom Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Gradient Text Animation */
@keyframes gradient-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* Hover Effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Glass Effect */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Pulse Animation for CTAs */
@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.6);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #a855f7, #ec4899);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #9333ea, #db2777);
}
[V0_FILE]typescriptreact:file="components/landing-page.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Palette,
  Zap,
  Shield,
  Sparkles,
  Mail,
  Globe,
  Users,
  TrendingUp,
  ArrowRight,
  Download,
  Layout,
  ImageIcon,
  Bot,
  Lock,
} from "lucide-react"

interface LandingPageProps {
  onAccessTool: () => void
}

export function LandingPage({ onAccessTool }: LandingPageProps) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
      {/* Hero Section */}
      <div className="relative overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
        <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-pink-100/20 via-purple-100/20 to-indigo-100/20"></div>

<div className="relative max-w-7xl mx-auto px-4 py-16 sm:py-24">
          <div className="text-center space-y-8">
            {/* Badge */}
            <div className="flex justify-center">
              <Badge className="bg-gradient-to-r from-pink-500 to-purple-500 text-white px-4 py-2 text-sm font-medium">
                <Sparkles className="w-4 h-4 mr-2" />
                Professional Pinterest Marketing Tool
              </Badge>
            </div>

{/* Main Heading */}
            <div className="space-y-4">
              <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight">
                <span className="bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                  Pinterest Brand
                </span>
                <br />
                <span className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                  Template Generator
                </span>
              </h1>

<p className="text-xl sm:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
                Extract unlimited images and titles from WordPress posts and create{" "}
                <span className="font-semibold text-purple-600">branded Pinterest templates</span> with your domain for
                ultimate brand protection and viral marketing success!
              </p>
            </div>

{/* CTA Button */}
            <div className="pt-8">
              <Button
                onClick={onAccessTool}
                size="lg"
                className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-8 py-4 text-lg font-semibold shadow-2xl hover:shadow-3xl transition-all duration-300 pulse-glow"
              >
                <Lock className="w-5 h-5 mr-2" />
                Access Professional Tool
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
              <p className="text-sm text-gray-500 mt-3">Secure team access required</p>
            </div>

{/* Stats */}
            <div className="flex flex-wrap justify-center gap-8 pt-8">
              <div className="text-center">
                <div className="text-3xl font-bold text-purple-600">100+</div>
                <div className="text-sm text-gray-600">Templates Generated</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-pink-600">5</div>
                <div className="text-sm text-gray-600">Layout Styles</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-indigo-600">∞</div>
                <div className="text-sm text-gray-600">Image Combinations</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-green-600">24/7</div>
                <div className="text-sm text-gray-600">AI-Powered</div>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Features Section */}
      <div className="py-16 bg-white/50 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Powerful Features for{" "}
              <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                Pinterest Success
              </span>
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Everything you need to dominate Pinterest marketing with professional, branded templates
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Feature Cards */}
            <Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-pink-50 to-purple-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Bot className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">AI Content Generation</h3>
                <p className="text-gray-600 mb-4">
                  Generate unlimited Pinterest-optimized titles and descriptions with our advanced AI system
                </p>
                <Badge variant="outline" className="bg-purple-50 text-purple-700">
                  Multi-API Fallback
                </Badge>
              </CardContent>
            </Card>

<Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-blue-50 to-indigo-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Layout className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">5 Template Layouts</h3>
                <p className="text-gray-600 mb-4">
                  Standard, Text-Top, 2-Image, 3-Image, and 4-Image collage layouts for maximum variety
                </p>
                <Badge variant="outline" className="bg-blue-50 text-blue-700">
                  Smart Parsing
                </Badge>
              </CardContent>
            </Card>

<Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-green-50 to-emerald-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Shield className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">Brand Protection</h3>
                <p className="text-gray-600 mb-4">
                  Automatic domain watermarking and brand consistency across all generated templates
                </p>
                <Badge variant="outline" className="bg-green-50 text-green-700">
                  Auto-Branding
                </Badge>
              </CardContent>
            </Card>

<Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-orange-50 to-red-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Zap className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">WordPress Integration</h3>
                <p className="text-gray-600 mb-4">
                  Direct publishing to WordPress with automatic image upload and SEO optimization
                </p>
                <Badge variant="outline" className="bg-orange-50 text-orange-700">
                  Auto-Publish
                </Badge>
              </CardContent>
            </Card>

<Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-purple-50 to-pink-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <ImageIcon className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">Smart Image Extraction</h3>
                <p className="text-gray-600 mb-4">
                  Advanced content parsing to extract high-quality images from any WordPress post
                </p>
                <Badge variant="outline" className="bg-purple-50 text-purple-700">
                  CORS Handling
                </Badge>
              </CardContent>
            </Card>

<Card className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-teal-50 to-cyan-50 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                  <Download className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-4">SEO-Optimized Downloads</h3>
                <p className="text-gray-600 mb-4">
                  Automatic SEO-friendly filename generation for better Pinterest discoverability
                </p>
                <Badge variant="outline" className="bg-teal-50 text-teal-700">
                  Bulk Download
                </Badge>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

{/* Process Section */}
      <div className="py-16 bg-gradient-to-br from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">
              Simple{" "}
              <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                4-Step Process
              </span>
            </h2>
            <p className="text-xl text-gray-600">From WordPress post to viral Pinterest templates in minutes</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {[
              {
                step: "01",
                title: "Extract Content",
                description: "Paste WordPress URL and extract images & titles automatically",
                icon: Globe,
                color: "from-blue-500 to-cyan-500",
              },
              {
                step: "02",
                title: "AI Generation",
                description: "Generate Pinterest-optimized content variations with AI",
                icon: Sparkles,
                color: "from-purple-500 to-pink-500",
              },
              {
                step: "03",
                title: "Create Templates",
                description: "Generate branded templates with multiple layouts and styles",
                icon: Palette,
                color: "from-green-500 to-emerald-500",
              },
              {
                step: "04",
                title: "Publish & Download",
                description: "Auto-publish to WordPress or download SEO-optimized files",
                icon: TrendingUp,
                color: "from-orange-500 to-red-500",
              },
            ].map((item, index) => (
              <div key={index} className="relative">
                <div className="text-center">
                  <div className="relative mb-6">
                    <div
                      className={`w-20 h-20 bg-gradient-to-br ${item.color} rounded-full flex items-center justify-center mx-auto shadow-lg hover:scale-110 transition-transform duration-300`}
                    >
                      <item.icon className="w-10 h-10 text-white" />
                    </div>
                    <div className="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md border-2 border-gray-100">
                      <span className="text-xs font-bold text-gray-600">{item.step}</span>
                    </div>
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
                  <p className="text-gray-600">{item.description}</p>
                </div>
                {index < 3 && (
                  <div className="hidden lg:block absolute top-10 left-full w-full">
                    <ArrowRight className="w-6 h-6 text-gray-300 mx-auto" />
                  </div>
                )}
              </div>
            ))}
          </div>

{/* CTA Section */}
          <div className="text-center mt-16">
            <div className="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-8 text-white">
              <h3 className="text-3xl font-bold mb-4">Ready to Create Amazing Pinterest Templates?</h3>
              <p className="text-xl mb-8 text-purple-100">
                Join our team and start generating professional Pinterest content today!
              </p>
              <Button
                onClick={onAccessTool}
                size="lg"
                className="bg-white text-purple-600 hover:bg-gray-100 px-8 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
              >
                <Lock className="w-5 h-5 mr-2" />
                Access Professional Tool
                <ArrowRight className="w-5 h-5 ml-2" />
              </Button>
            </div>
          </div>
        </div>
      </div>

{/* Contact Section */}
      <div className="py-16 bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 text-white">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold mb-4">
              Need Help or Have Questions?
              <br />
              <span className="bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
                We're Here to Help!
              </span>
            </h2>
            <p className="text-xl text-purple-200 max-w-3xl mx-auto">
              Our team is ready to assist you with any questions about the Pinterest Brand Template Generator
            </p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* Email Contact */}
            <Card className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Mail className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Email Support</h3>
                <p className="text-purple-200 mb-6">Get direct support from our team</p>
                <Button
                  className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white border-0"
                  onClick={() => window.open("mailto:support@pinteresttools.com", "_blank")}
                >
                  <Mail className="w-4 h-4 mr-2" />
                  support@pinteresttools.com
                </Button>
              </CardContent>
            </Card>

{/* Business Inquiries */}
            <Card className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Users className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Business Inquiries</h3>
                <p className="text-purple-200 mb-6">Partnership and business opportunities</p>
                <Button
                  className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white border-0"
                  onClick={() => window.open("mailto:business@pinteresttools.com", "_blank")}
                >
                  <Users className="w-4 h-4 mr-2" />
                  business@pinteresttools.com
                </Button>
              </CardContent>
            </Card>

{/* Technical Support */}
            <Card className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300 hover-lift">
              <CardContent className="p-8 text-center">
                <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Zap className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-xl font-bold mb-4">Technical Support</h3>
                <p className="text-purple-200 mb-6">Technical issues and bug reports</p>
                <Button
                  className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white border-0"
                  onClick={() => window.open("mailto:tech@pinteresttools.com", "_blank")}
                >
                  <Zap className="w-4 h-4 mr-2" />
                  tech@pinteresttools.com
                </Button>
              </CardContent>
            </Card>
          </div>

{/* Quick Contact Info */}
          <div className="mt-12 text-center">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 max-w-4xl mx-auto">
              <h3 className="text-2xl font-bold mb-6">Quick Contact Information</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                <div>
                  <div className="text-lg font-semibold text-pink-400">Response Time</div>
                  <div className="text-purple-200">Within 24 hours</div>
                </div>
                <div>
                  <div className="text-lg font-semibold text-purple-400">Support Hours</div>
                  <div className="text-purple-200">24/7 Email Support</div>
                </div>
                <div>
                  <div className="text-lg font-semibold text-indigo-400">Languages</div>
                  <div className="text-purple-200">English, Spanish, French</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4">
          <div className="text-center">
            <div className="flex items-center justify-center gap-2 mb-4">
              <Palette className="w-8 h-8 text-purple-400" />
              <span className="text-2xl font-bold">Pinterest Brand Generator</span>
            </div>
            <p className="text-gray-400 mb-6">
              Professional Pinterest marketing tool for creating viral, branded templates
            </p>
            <div className="flex justify-center space-x-6 text-sm text-gray-400">
              <span>© 2024 Pinterest Tools</span>
              <span>•</span>
              <span>Made with ❤️ for Pinterest Marketers</span>
              <span>•</span>
              <span>Secure & Professional</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/tool-dashboard.tsx" isMerged="true"
"use client"

import { AdvancedPinterestGenerator } from "@/components/advanced-pinterest-generator"
import { Button } from "@/components/ui/button"
import { Shield, Lock, Palette } from "lucide-react"

interface ToolDashboardProps {
  onLogout: () => void
}

export function ToolDashboard({ onLogout }: ToolDashboardProps) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50">
      {/* Security Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Palette className="w-6 h-6 text-purple-600" />
              <span className="text-lg font-bold text-gray-900">Pinterest Brand Generator</span>
            </div>
            <div className="flex items-center gap-2">
              <Shield className="w-5 h-5 text-green-600" />
              <span className="text-sm font-medium text-green-700">Secure Session Active</span>
              <span className="text-xs text-gray-500">• Expires in 24h</span>
            </div>
          </div>

<Button
            onClick={onLogout}
            variant="outline"
            size="sm"
            className="text-red-600 border-red-200 hover:bg-red-50 bg-transparent"
          >
            <Lock className="w-4 h-4 mr-2" />
            Logout
          </Button>
        </div>
      </div>

{/* Main Tool Content */}
      <div className="p-4">
        <div className="max-w-7xl mx-auto space-y-8">
          <div className="text-center space-y-4">
            <h1 className="text-4xl font-bold bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
              Pinterest Brand Template Generator
            </h1>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Extract unlimited images and titles from WordPress posts and create branded Pinterest templates with your
              domain for brand protection!
            </p>
          </div>

<AdvancedPinterestGenerator />
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/password-protection.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Lock, Eye, EyeOff, Shield, AlertCircle, ArrowLeft } from "lucide-react"

interface PasswordProtectionProps {
  onAuthenticated: () => void
  onBackToLanding: () => void
}

// Set your secure passwords here - you can add multiple passwords for different team members
const VALID_PASSWORDS = [
  "rshafijur420",
  "PinterestTool2024!",
  "TeamAccess@123",
  "SecureTools#456",
  // Add more passwords as needed for your team
]

// Session duration in milliseconds (24 hours)
const SESSION_DURATION = 24 * 60 * 60 * 1000

export function PasswordProtection({ onAuthenticated, onBackToLanding }: PasswordProtectionProps) {
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [attempts, setAttempts] = useState(0)
  const [isBlocked, setIsBlocked] = useState(false)

// Check for existing valid session on component mount
  useEffect(() => {
    checkExistingSession()
  }, [])

const checkExistingSession = () => {
    try {
      const sessionData = localStorage.getItem("pinterest_tool_session")
      if (sessionData) {
        const { timestamp, authenticated } = JSON.parse(sessionData)
        const now = Date.now()

// Check if session is still valid (within 24 hours)
        if (authenticated && now - timestamp < SESSION_DURATION) {
          onAuthenticated()
          return
        } else {
          // Session expired, clear it
          localStorage.removeItem("pinterest_tool_session")
        }
      }
    } catch (error) {
      // Invalid session data, clear it
      localStorage.removeItem("pinterest_tool_session")
    }

setIsLoading(false)
  }

const handlePasswordSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (isBlocked) {
      setError("Too many failed attempts. Please wait 5 minutes before trying again.")
      return
    }

if (!password.trim()) {
      setError("Please enter a password")
      return
    }

// Check if password is valid
    if (VALID_PASSWORDS.includes(password.trim())) {
      // Successful authentication
      setError("")
      setAttempts(0)

// Store session in localStorage
      const sessionData = {
        authenticated: true,
        timestamp: Date.now(),
      }
      localStorage.setItem("pinterest_tool_session", JSON.stringify(sessionData))

// Clear password from memory
      setPassword("")

// Call the authentication callback
      onAuthenticated()
    } else {
      // Failed authentication
      const newAttempts = attempts + 1
      setAttempts(newAttempts)
      setError(`Invalid password. Attempt ${newAttempts}/5`)

// Block after 5 failed attempts
      if (newAttempts >= 5) {
        setIsBlocked(true)
        setError("Too many failed attempts. Access blocked for 5 minutes.")

// Unblock after 5 minutes
        setTimeout(
          () => {
            setIsBlocked(false)
            setAttempts(0)
            setError("")
          },
          5 * 60 * 1000,
        ) // 5 minutes
      }

// Clear password field
      setPassword("")
    }
  }

// Show loading state while checking session
  if (isLoading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
      </div>
    )
  }

// Show password protection screen
  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md shadow-2xl border-0">
        <CardHeader className="text-center space-y-4">
          <div className="mx-auto w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
            <Shield className="w-8 h-8 text-white" />
          </div>
          <CardTitle className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
            Secure Access Required
          </CardTitle>
          <p className="text-gray-600">
            This Pinterest tool is protected. Please enter your team password to continue.
          </p>
        </CardHeader>

<CardContent className="space-y-6">
          <form onSubmit={handlePasswordSubmit} className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="password" className="text-sm font-medium text-gray-700">
                Team Password
              </label>
              <div className="relative">
                <Input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="Enter your team password"
                  className="pr-10"
                  disabled={isBlocked}
                />
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="absolute right-0 top-0 h-full px-3"
                  onClick={() => setShowPassword(!showPassword)}
                  disabled={isBlocked}
                >
                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                </Button>
              </div>
            </div>

{error && (
              <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm">
                <AlertCircle className="w-4 h-4 flex-shrink-0" />
                <span>{error}</span>
              </div>
            )}

<Button
              type="submit"
              className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
              disabled={isBlocked}
            >
              <Lock className="w-4 h-4 mr-2" />
              {isBlocked ? "Access Blocked" : "Access Tool"}
            </Button>
          </form>

<div className="text-center space-y-2">
            <div className="text-xs text-gray-500">Session expires after 24 hours</div>
            {attempts > 0 && !isBlocked && (
              <div className="text-xs text-orange-600">{5 - attempts} attempts remaining</div>
            )}
          </div>

{/* Back to Landing Page */}
          <Button onClick={onBackToLanding} variant="outline" className="w-full bg-transparent">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Landing Page
          </Button>

{/* Security Features Info */}
          <div className="bg-blue-50 p-3 rounded-lg">
            <h4 className="text-sm font-medium text-blue-800 mb-2">🔒 Security Features:</h4>
            <ul className="text-xs text-blue-700 space-y-1">
              <li>• 24-hour session duration</li>
              <li>• 5 attempt limit with auto-block</li>
              <li>• Secure local session storage</li>
              <li>• Multiple team passwords supported</li>
            </ul>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { LandingPage } from "@/components/landing-page"
import { PasswordProtection } from "@/components/password-protection"
import { ToolDashboard } from "@/components/tool-dashboard"
import { AdvancedPinterestGenerator } from "@/components/advanced-pinterest-generator"
import { Badge } from "@/components/ui/badge"
import {
  Palette,
  Zap,
  Shield,
  Sparkles,
  Mail,
  Globe,
  Users,
  TrendingUp,
  ArrowRight,
  Download,
  Layout,
  ImageIcon,
  Bot,
} from "lucide-react"

type AppState = "landing" | "login" | "authenticated"

export default function HomePage() {
  const [appState, setAppState] = useState<AppState>("landing")

const handleAccessTool = () => {
    setAppState("login")
  }

const handleAuthenticated = () => {
    setAppState("authenticated")
  }

const handleBackToLanding = () => {
    setAppState("landing")
  }

const handleLogout = () => {
    // Clear session
    localStorage.removeItem("pinterest_tool_session")
    setAppState("landing")
  }

// Show different components based on app state
  switch (appState) {
    case "landing":
      return (
        <LandingPage onAccessTool={handleAccessTool}>
          <div className="min-h-screen bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50">
            {/* Hero Section */}
            <div className="relative overflow-hidden">
              {/* Background Pattern */}
              <div className="absolute inset-0 bg-grid-pattern opacity-5"></div>
              <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-pink-100/20 via-purple-100/20 to-indigo-100/20"></div>

<div className="relative max-w-7xl mx-auto px-4 py-16 sm:py-24">
                <div className="text-center space-y-8">
                  {/* Badge */}
                  <div className="flex justify-center">
                    <Badge className="bg-gradient-to-r from-pink-500 to-purple-500 text-white px-4 py-2 text-sm font-medium">
                      <Sparkles className="w-4 h-4 mr-2" />
                      Professional Pinterest Marketing Tool
                    </Badge>
                  </div>

{/* Main Heading */}
                  <div className="space-y-4">
                    <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight">
                      <span className="bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
                        Pinterest Brand
                      </span>
                      <br />
                      <span className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
                        Template Generator
                      </span>
                    </h1>

<p className="text-xl sm:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
                      Extract unlimited images and titles from WordPress posts and create{" "}
                      <span className="font-semibold text-purple-600">branded Pinterest templates</span> with your
                      domain for ultimate brand protection and viral marketing success!
                    </p>
                  </div>

{/* Stats */}
                  <div className="flex flex-wrap justify-center gap-8 pt-8">
                    <div className="text-center">
                      <div className="text-3xl font-bold text-purple-600">100+</div>
                      <div className="text-sm text-gray-600">Templates Generated</div>
                    </div>
                    <div className="text-center">
                      <div className="text-3xl font-bold text-pink-600">5</div>
                      <div className="text-sm text-gray-600">Layout Styles</div>
                    </div>
                    <div className="text-center">
                      <div className="text-3xl font-bold text-indigo-600">∞</div>
                      <div className="text-sm text-gray-600">Image Combinations</div>
                    </div>
                    <div className="text-center">
                      <div className="text-3xl font-bold text-green-600">24/7</div>
                      <div className="text-sm text-gray-600">AI-Powered</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Features Section */}
            <div className="py-16 bg-white/50 backdrop-blur-sm">
              <div className="max-w-7xl mx-auto px-4">
                <div className="text-center mb-16">
                  <h2 className="text-4xl font-bold text-gray-900 mb-4">
                    Powerful Features for{" "}
                    <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                      Pinterest Success
                    </span>
                  </h2>
                  <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                    Everything you need to dominate Pinterest marketing with professional, branded templates
                  </p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  {/* Feature Cards */}
                  <div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-pink-50 to-purple-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <Bot className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">AI Content Generation</h3>
                      <p className="text-gray-600 mb-4">
                        Generate unlimited Pinterest-optimized titles and descriptions with our advanced AI system
                      </p>
                      <Badge variant="outline" className="bg-purple-50 text-purple-700">
                        Multi-API Fallback
                      </Badge>
                    </div>
                  </div>

<div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-blue-50 to-indigo-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <Layout className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">5 Template Layouts</h3>
                      <p className="text-gray-600 mb-4">
                        Standard, Text-Top, 2-Image, 3-Image, and 4-Image collage layouts for maximum variety
                      </p>
                      <Badge variant="outline" className="bg-blue-50 text-blue-700">
                        Smart Parsing
                      </Badge>
                    </div>
                  </div>

<div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-green-50 to-emerald-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <Shield className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">Brand Protection</h3>
                      <p className="text-gray-600 mb-4">
                        Automatic domain watermarking and brand consistency across all generated templates
                      </p>
                      <Badge variant="outline" className="bg-green-50 text-green-700">
                        Auto-Branding
                      </Badge>
                    </div>
                  </div>

<div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-orange-50 to-red-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <Zap className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">WordPress Integration</h3>
                      <p className="text-gray-600 mb-4">
                        Direct publishing to WordPress with automatic image upload and SEO optimization
                      </p>
                      <Badge variant="outline" className="bg-orange-50 text-orange-700">
                        Auto-Publish
                      </Badge>
                    </div>
                  </div>

<div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-purple-50 to-pink-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <ImageIcon className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">Smart Image Extraction</h3>
                      <p className="text-gray-600 mb-4">
                        Advanced content parsing to extract high-quality images from any WordPress post
                      </p>
                      <Badge variant="outline" className="bg-purple-50 text-purple-700">
                        CORS Handling
                      </Badge>
                    </div>
                  </div>

<div className="group hover:shadow-2xl transition-all duration-300 border-0 bg-gradient-to-br from-teal-50 to-cyan-50">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-teal-500 to-cyan-500 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <Download className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold text-gray-900 mb-4">SEO-Optimized Downloads</h3>
                      <p className="text-gray-600 mb-4">
                        Automatic SEO-friendly filename generation for better Pinterest discoverability
                      </p>
                      <Badge variant="outline" className="bg-teal-50 text-teal-700">
                        Bulk Download
                      </Badge>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Process Section */}
            <div className="py-16 bg-gradient-to-br from-gray-50 to-white">
              <div className="max-w-7xl mx-auto px-4">
                <div className="text-center mb-16">
                  <h2 className="text-4xl font-bold text-gray-900 mb-4">
                    Simple{" "}
                    <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                      4-Step Process
                    </span>
                  </h2>
                  <p className="text-xl text-gray-600">From WordPress post to viral Pinterest templates in minutes</p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                  {[
                    {
                      step: "01",
                      title: "Extract Content",
                      description: "Paste WordPress URL and extract images & titles automatically",
                      icon: Globe,
                      color: "from-blue-500 to-cyan-500",
                    },
                    {
                      step: "02",
                      title: "AI Generation",
                      description: "Generate Pinterest-optimized content variations with AI",
                      icon: Sparkles,
                      color: "from-purple-500 to-pink-500",
                    },
                    {
                      step: "03",
                      title: "Create Templates",
                      description: "Generate branded templates with multiple layouts and styles",
                      icon: Palette,
                      color: "from-green-500 to-emerald-500",
                    },
                    {
                      step: "04",
                      title: "Publish & Download",
                      description: "Auto-publish to WordPress or download SEO-optimized files",
                      icon: TrendingUp,
                      color: "from-orange-500 to-red-500",
                    },
                  ].map((item, index) => (
                    <div key={index} className="relative">
                      <div className="text-center">
                        <div className="relative mb-6">
                          <div
                            className={`w-20 h-20 bg-gradient-to-br ${item.color} rounded-full flex items-center justify-center mx-auto shadow-lg`}
                          >
                            <item.icon className="w-10 h-10 text-white" />
                          </div>
                          <div className="absolute -top-2 -right-2 w-8 h-8 bg-white rounded-full flex items-center justify-center shadow-md border-2 border-gray-100">
                            <span className="text-xs font-bold text-gray-600">{item.step}</span>
                          </div>
                        </div>
                        <h3 className="text-xl font-bold text-gray-900 mb-3">{item.title}</h3>
                        <p className="text-gray-600">{item.description}</p>
                      </div>
                      {index < 3 && (
                        <div className="hidden lg:block absolute top-10 left-full w-full">
                          <ArrowRight className="w-6 h-6 text-gray-300 mx-auto" />
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>

{/* Contact Section */}
            <div className="py-16 bg-gradient-to-br from-purple-900 via-purple-800 to-indigo-900 text-white">
              <div className="max-w-7xl mx-auto px-4">
                <div className="text-center mb-12">
                  <h2 className="text-4xl font-bold mb-4">
                    Need Help or Have Questions?
                    <br />
                    <span className="bg-gradient-to-r from-pink-400 to-purple-400 bg-clip-text text-transparent">
                      We're Here to Help!
                    </span>
                  </h2>
                  <p className="text-xl text-purple-200 max-w-3xl mx-auto">
                    Our team is ready to assist you with any questions about the Pinterest Brand Template Generator
                  </p>
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  {/* Email Contact */}
                  <div className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Mail className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold mb-4">Email Support</h3>
                      <p className="text-purple-200 mb-6">Get direct support from our team</p>
                      <a
                        href="mailto:support@pinteresttools.com"
                        className="bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white border-0 px-4 py-2 rounded"
                      >
                        <Mail className="w-4 h-4 mr-2" />
                        support@pinteresttools.com
                      </a>
                    </div>
                  </div>

{/* Business Inquiries */}
                  <div className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Users className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold mb-4">Business Inquiries</h3>
                      <p className="text-purple-200 mb-6">Partnership and business opportunities</p>
                      <a
                        href="mailto:business@pinteresttools.com"
                        className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white border-0 px-4 py-2 rounded"
                      >
                        <Users className="w-4 h-4 mr-2" />
                        business@pinteresttools.com
                      </a>
                    </div>
                  </div>

{/* Technical Support */}
                  <div className="bg-white/10 backdrop-blur-sm border-white/20 hover:bg-white/20 transition-all duration-300">
                    <div className="p-8 text-center">
                      <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6">
                        <Zap className="w-8 h-8 text-white" />
                      </div>
                      <h3 className="text-xl font-bold mb-4">Technical Support</h3>
                      <p className="text-purple-200 mb-6">Technical issues and bug reports</p>
                      <a
                        href="mailto:tech@pinteresttools.com"
                        className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white border-0 px-4 py-2 rounded"
                      >
                        <Zap className="w-4 h-4 mr-2" />
                        tech@pinteresttools.com
                      </a>
                    </div>
                  </div>
                </div>

{/* Quick Contact Info */}
                <div className="mt-12 text-center">
                  <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 max-w-4xl mx-auto">
                    <h3 className="text-2xl font-bold mb-6">Quick Contact Information</h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
                      <div>
                        <div className="text-lg font-semibold text-pink-400">Response Time</div>
                        <div className="text-purple-200">Within 24 hours</div>
                      </div>
                      <div>
                        <div className="text-lg font-semibold text-purple-400">Support Hours</div>
                        <div className="text-purple-200">24/7 Email Support</div>
                      </div>
                      <div>
                        <div className="text-lg font-semibold text-indigo-400">Languages</div>
                        <div className="text-purple-200">English, Spanish, French</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Main Tool Section */}
            <div className="py-16">
              <div className="max-w-7xl mx-auto px-4">
                <div className="text-center mb-12">
                  <h2 className="text-4xl font-bold text-gray-900 mb-4">
                    Start Creating{" "}
                    <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                      Amazing Templates
                    </span>
                  </h2>
                  <p className="text-xl text-gray-600">
                    Use our powerful tool to generate professional Pinterest templates
                  </p>
                </div>

{/* Footer */}
            <footer className="bg-gray-900 text-white py-12">
              <div className="max-w-7xl mx-auto px-4">
                <div className="text-center">
                  <div className="flex items-center justify-center gap-2 mb-4">
                    <Palette className="w-8 h-8 text-purple-400" />
                    <span className="text-2xl font-bold">Pinterest Brand Generator</span>
                  </div>
                  <p className="text-gray-400 mb-6">
                    Professional Pinterest marketing tool for creating viral, branded templates
                  </p>
                  <div className="flex justify-center space-x-6 text-sm text-gray-400">
                    <span>© 2024 Pinterest Tools</span>
                    <span>•</span>
                    <span>Made with ❤️ for Pinterest Marketers</span>
                    <span>•</span>
                    <span>Secure & Professional</span>
                  </div>
                </div>
              </div>
            </footer>
          </div>
        </LandingPage>
      )

case "login":
      return <PasswordProtection onAuthenticated={handleAuthenticated} onBackToLanding={handleBackToLanding} />

case "authenticated":
      return <ToolDashboard onLogout={handleLogout} />

default:
      return <LandingPage onAccessTool={handleAccessTool} />
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import "./globals.css"

export const metadata: Metadata = {
  title: "Pinterest Brand Template Generator - Professional Pinterest Marketing Tool",
  description:
    "Extract unlimited images and titles from WordPress posts and create branded Pinterest templates with your domain for ultimate brand protection and viral marketing success. Professional Pinterest marketing tool with AI-powered content generation.",
  keywords: [
    "Pinterest templates",
    "Pinterest marketing",
    "brand protection",
    "WordPress integration",
    "AI content generation",
    "Pinterest SEO",
    "social media marketing",
  ],
  authors: [{ name: "Pinterest Tools Team" }],
  creator: "Pinterest Tools",
  publisher: "Pinterest Tools",
  robots: "index, follow",
  openGraph: {
    title: "Pinterest Brand Template Generator - Professional Pinterest Marketing Tool",
    description:
      "Create viral Pinterest templates with automatic brand protection. Extract content from WordPress, generate AI-optimized titles, and publish branded templates instantly.",
    type: "website",
    locale: "en_US",
    siteName: "Pinterest Brand Template Generator",
  },
  twitter: {
    card: "summary_large_image",
    title: "Pinterest Brand Template Generator - Professional Pinterest Marketing Tool",
    description:
      "Create viral Pinterest templates with automatic brand protection. Extract content from WordPress, generate AI-optimized titles, and publish branded templates instantly.",
    creator: "@PinterestTools",
  },
  alternates: {
    canonical: "https://pinteresttools.com",
  },
  category: "Marketing Tools",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/api/wordpress-sites/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

interface WordPressSite {
  id: string
  name: string
  url: string
  username: string
  password: string
  applicationPassword: string
  description?: string
  createdAt: string
}

// Preset WordPress sites with credentials
const PRESET_SITES = [
  {
    id: "needytiger-trail",
    name: "Needytiger Trail",
    url: "https://needytiger.s2-tastewp.com",
    username: "admin",
    password: "gqxPniv4WKc",
    applicationPassword: "cMMK beZa Cyqb Kq3M Xxbq 1cal",
    description: "TasteWP Demo Site - Acted Trail",
    createdAt: new Date().toISOString(),
  },
  {
    id: "kitchensadviser",
    name: "Kitchens Adviser",
    url: "https://kitchensadviser.com",
    username: "showpno",
    password: "rshafijur420",
    applicationPassword: "C5Km jwMj WxMj iOEs 7nsA 5Msx",
    description: "Your nonstop source of kitchen information",
    createdAt: new Date().toISOString(),
  },
]

let sites: WordPressSite[] = [...PRESET_SITES]

export async function GET() {
  try {
    return NextResponse.json({
      success: true,
      sites: sites,
    })
  } catch (error) {
    console.error("Error fetching WordPress sites:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to fetch WordPress sites",
      },
      { status: 500 },
    )
  }
}

export async function POST(request: NextRequest) {
  try {
    const { name, url, username, password, applicationPassword, description } = await request.json()

if (!name || !url || !username) {
      return NextResponse.json(
        {
          success: false,
          error: "Name, URL, and username are required",
        },
        { status: 400 },
      )
    }

if (!password && !applicationPassword) {
      return NextResponse.json(
        {
          success: false,
          error: "Either password or application password is required",
        },
        { status: 400 },
      )
    }

// Test the connection before saving
    const testUrl = url.replace(/\/$/, "") + "/wp-json/wp/v2/posts?per_page=1"
    const authHeader = `Basic ${Buffer.from(`${username}:${applicationPassword || password}`).toString("base64")}`

try {
      const testResponse = await fetch(testUrl, {
        method: "GET",
        headers: {
          Authorization: authHeader,
        },
      })

if (!testResponse.ok) {
        return NextResponse.json(
          {
            success: false,
            error: "Failed to connect to WordPress site. Please check your credentials.",
          },
          { status: 400 },
        )
      }
    } catch (testError) {
      return NextResponse.json(
        {
          success: false,
          error: "Unable to reach WordPress site. Please check the URL.",
        },
        { status: 400 },
      )
    }

// Create new site
    const newSite: WordPressSite = {
      id: `site-${Date.now()}`,
      name,
      url: url.replace(/\/$/, ""), // Remove trailing slash
      username,
      password: password || "",
      applicationPassword: applicationPassword || "",
      description: description || "",
      createdAt: new Date().toISOString(),
    }

sites.push(newSite)

return NextResponse.json({
      success: true,
      site: newSite,
    })
  } catch (error) {
    console.error("Error adding site:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to add site",
      },
      { status: 500 },
    )
  }
}

export async function DELETE(request: NextRequest) {
  try {
    const { searchParams } = new URL(request.url)
    const id = searchParams.get("id")

if (!id) {
      return NextResponse.json(
        {
          success: false,
          error: "Site ID is required",
        },
        { status: 400 },
      )
    }

sites = sites.filter((site) => site.id !== id)

return NextResponse.json({
      success: true,
    })
  } catch (error) {
    console.error("Error deleting site:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to delete site",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/wordpress-sites/[id]/categories/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Preset sites data
const PRESET_SITES = [
  {
    id: "needytiger-trail",
    name: "Needytiger Trail",
    url: "https://needytiger.s2-tastewp.com",
    username: "admin",
    password: "gqxPniv4WKc",
    applicationPassword: "cMMK beZa Cyqb Kq3M Xxbq 1cal",
  },
  {
    id: "kitchensadviser",
    name: "Kitchens Adviser",
    url: "https://kitchensadviser.com",
    username: "showpno",
    password: "rshafijur420",
    applicationPassword: "C5Km jwMj WxMj iOEs 7nsA 5Msx",
  },
]

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const siteId = params.id

// Find the preset site
    const site = PRESET_SITES.find((s) => s.id === siteId)
    if (!site) {
      return NextResponse.json({ success: false, error: "Site not found" }, { status: 404 })
    }

// Use application password for authentication
    const authHeader = `Basic ${Buffer.from(`${site.username}:${site.applicationPassword}`).toString("base64")}`

// Fetch categories from WordPress REST API
    const response = await fetch(`${site.url}/wp-json/wp/v2/categories?per_page=100`, {
      headers: {
        Authorization: authHeader,
      },
    })

if (!response.ok) {
      throw new Error(`Failed to fetch categories: ${response.status} ${response.statusText}`)
    }

const categories = await response.json()

// Format categories for frontend
    const formattedCategories = categories.map((cat: any) => ({
      id: cat.id,
      name: cat.name,
      slug: cat.slug,
      count: cat.count,
    }))

return NextResponse.json({
      success: true,
      categories: formattedCategories,
    })
  } catch (error) {
    console.error("Error fetching categories:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Failed to fetch categories",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/wordpress-site-manager.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Loader2, Server, RefreshCw, CheckCircle, AlertCircle, FolderOpen } from "lucide-react"

interface WordPressSite {
  id: string
  name: string
  url: string
  username: string
  password: string
  applicationPassword?: string
  description?: string
}

interface WordPressCategory {
  id: number
  name: string
  slug: string
  count: number
}

interface WordPressSiteManagerProps {
  onSiteSelected: (site: WordPressSite, categories: WordPressCategory[]) => void
  selectedSiteId: string
  selectedCategoryId: string
  onCategorySelected?: (categoryId: string) => void
}

export function WordPressSiteManager({
  onSiteSelected,
  selectedSiteId,
  selectedCategoryId,
  onCategorySelected,
}: WordPressSiteManagerProps) {
  const [sites, setSites] = useState<WordPressSite[]>([])
  const [categories, setCategories] = useState<WordPressCategory[]>([])
  const [selectedSite, setSelectedSite] = useState<WordPressSite | null>(null)
  const [isLoadingSites, setIsLoadingSites] = useState(true)
  const [isLoadingCategories, setIsLoadingCategories] = useState(false)
  const [categoriesLoaded, setCategoriesLoaded] = useState(false)
  const [error, setError] = useState("")

// Load preset sites on component mount
  useEffect(() => {
    loadSites()
  }, [])

const loadSites = async () => {
    setIsLoadingSites(true)
    setError("")

try {
      const response = await fetch("/api/wordpress-sites")
      if (!response.ok) {
        throw new Error("Failed to load WordPress sites")
      }

const data = await response.json()
      if (data.success) {
        setSites(data.sites)
      } else {
        throw new Error(data.error || "Failed to load sites")
      }
    } catch (err) {
      setError("Failed to load WordPress sites. Please try again.")
      console.error(err)
    } finally {
      setIsLoadingSites(false)
    }
  }

const handleSiteSelect = (siteId: string) => {
    const site = sites.find((s) => s.id === siteId)
    if (site) {
      setSelectedSite(site)
      setCategories([])
      setCategoriesLoaded(false)
      setError("")

// Call onSiteSelected with empty categories initially
      onSiteSelected(site, [])
    }
  }

const loadCategories = async () => {
    if (!selectedSite) return

setIsLoadingCategories(true)
    setError("")

try {
      const response = await fetch(`/api/wordpress-sites/${selectedSite.id}/categories`)
      if (!response.ok) {
        throw new Error("Failed to load categories")
      }

const data = await response.json()
      if (data.success) {
        setCategories(data.categories)
        setCategoriesLoaded(true)

// Update parent component with site and categories
        onSiteSelected(selectedSite, data.categories)
      } else {
        throw new Error(data.error || "Failed to load categories")
      }
    } catch (err) {
      setError("Failed to load categories. Please check site connection.")
      console.error(err)
    } finally {
      setIsLoadingCategories(false)
    }
  }

if (isLoadingSites) {
    return (
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Server className="w-5 h-5" />
            Step 4: WordPress Site Selection
          </CardTitle>
        </CardHeader>
        <CardContent className="flex items-center justify-center py-8">
          <div className="flex items-center gap-2 text-blue-600">
            <Loader2 className="w-4 h-4 animate-spin" />
            <span>Loading WordPress sites...</span>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="shadow-lg">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Server className="w-5 h-5" />
          Step 4: WordPress Site Selection
          <Badge variant="outline" className="ml-auto bg-green-50 text-green-700">
            Preset Sites Only
          </Badge>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        {error && (
          <div className="p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm flex items-center gap-2">
            <AlertCircle className="w-4 h-4" />
            {error}
          </div>
        )}

{/* Site Selection */}
        <div className="space-y-3">
          <label className="block text-sm font-medium">Select WordPress Site</label>
          <Select onValueChange={handleSiteSelect} value={selectedSite?.id || ""}>
            <SelectTrigger className="w-full">
              <SelectValue placeholder="Choose a WordPress site..." />
            </SelectTrigger>
            <SelectContent>
              {sites.map((site) => (
                <SelectItem key={site.id} value={site.id}>
                  <div className="flex items-center gap-2">
                    <Server className="w-4 h-4" />
                    <div>
                      <div className="font-medium">{site.name}</div>
                      <div className="text-xs text-gray-500">{site.url}</div>
                    </div>
                  </div>
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

{/* Selected Site Info */}
        {selectedSite && (
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-medium text-blue-800 mb-2">Selected Site</h4>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-blue-700">Name:</span>
                <span className="font-medium">{selectedSite.name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-blue-700">URL:</span>
                <a
                  href={selectedSite.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-medium text-blue-600 hover:text-blue-800"
                >
                  {selectedSite.url}
                </a>
              </div>
              <div className="flex justify-between">
                <span className="text-blue-700">Username:</span>
                <span className="font-medium">{selectedSite.username}</span>
              </div>
              {selectedSite.description && (
                <div className="flex justify-between">
                  <span className="text-blue-700">Description:</span>
                  <span className="font-medium">{selectedSite.description}</span>
                </div>
              )}
            </div>
          </div>
        )}

{/* Category Loading Section */}
        {selectedSite && (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <label className="block text-sm font-medium">Categories</label>
              <Button onClick={loadCategories} disabled={isLoadingCategories} variant="outline" size="sm">
                {isLoadingCategories ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Loading...
                  </>
                ) : categoriesLoaded ? (
                  <>
                    <RefreshCw className="w-4 h-4 mr-2" />
                    Refresh Categories
                  </>
                ) : (
                  <>
                    <FolderOpen className="w-4 h-4 mr-2" />
                    Load Categories
                  </>
                )}
              </Button>
            </div>

{!categoriesLoaded && !isLoadingCategories && (
              <div className="bg-gray-50 p-4 rounded-lg text-center">
                <p className="text-sm text-gray-600 mb-2">Categories not loaded yet</p>
                <p className="text-xs text-gray-500">
                  Click "Load Categories" to fetch available categories from the selected site
                </p>
              </div>
            )}

{categoriesLoaded && categories.length > 0 && (
              <div className="space-y-3">
                <Select
                  value={selectedCategoryId}
                  onValueChange={(value) => {
                    // Call a callback to update the parent component
                    if (onCategorySelected) {
                      onCategorySelected(value)
                    }
                  }}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Select a category (optional)" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="none">
                      <div className="flex items-center gap-2">
                        <span>No Category</span>
                        <Badge variant="outline" className="text-xs">
                          Default
                        </Badge>
                      </div>
                    </SelectItem>
                    {categories.map((category) => (
                      <SelectItem key={category.id} value={category.id.toString()}>
                        <div className="flex items-center justify-between w-full">
                          <span>{category.name}</span>
                          <Badge variant="outline" className="text-xs ml-2">
                            {category.count} posts
                          </Badge>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

<div className="bg-green-50 p-3 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <CheckCircle className="w-4 h-4 text-green-600" />
                    <span className="font-medium text-green-800">Categories Loaded Successfully</span>
                  </div>
                  <p className="text-sm text-green-700">
                    Found {categories.length} categories. You can select one or leave as "No Category" for default
                    publishing.
                  </p>
                </div>
              </div>
            )}

{categoriesLoaded && categories.length === 0 && (
              <div className="bg-yellow-50 p-3 rounded-lg">
                <div className="flex items-center gap-2 mb-1">
                  <AlertCircle className="w-4 h-4 text-yellow-600" />
                  <span className="font-medium text-yellow-800">No Categories Found</span>
                </div>
                <p className="text-sm text-yellow-700">
                  This site doesn't have any categories set up. Posts will be published without a category.
                </p>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/pinterest-template-generator.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Download, ImageIcon, CheckSquare, Square, Loader2, Layout, AlertCircle } from "lucide-react"
import { PinterestTemplate } from "@/components/pinterest-template"
import { PinterestTextTopTemplate } from "@/components/pinterest-text-top-template"
import { PinterestCollageTemplate } from "@/components/pinterest-collage-template"
import { PinterestCollage3Template } from "@/components/pinterest-collage-3-template"
import { PinterestCollage2Template } from "@/components/pinterest-collage-2-template"

interface GeneratedContent {
  title: string
  description: string
}

interface PinterestTemplateGeneratorProps {
  title: string
  images: string[]
  domain: string
  generatedContent?: GeneratedContent[]
  onTemplatesGenerated?: (templates: any[]) => void
}

const templates = [
  {
    id: "sunset",
    name: "Sunset Glow",
    gradient: "from-orange-400 via-red-500 to-pink-500",
    textColor: "text-white",
    font: "font-serif",
    brandColor: "text-orange-100",
  },
  {
    id: "ocean",
    name: "Ocean Breeze",
    gradient: "from-blue-400 via-blue-500 to-cyan-500",
    textColor: "text-white",
    font: "font-sans",
    brandColor: "text-blue-100",
  },
  {
    id: "forest",
    name: "Forest Fresh",
    gradient: "from-green-400 via-green-500 to-emerald-500",
    textColor: "text-white",
    font: "font-sans",
    brandColor: "text-green-100",
  },
  {
    id: "purple",
    name: "Purple Dream",
    gradient: "from-purple-400 via-purple-500 to-indigo-500",
    textColor: "text-white",
    font: "font-serif",
    brandColor: "text-purple-100",
  },
  {
    id: "mint",
    name: "Mint Fresh",
    gradient: "from-teal-300 via-cyan-400 to-blue-400",
    textColor: "text-white",
    font: "font-sans",
    brandColor: "text-teal-100",
  },
]

const templateLayouts = [
  { id: "standard", name: "Standard (Image Top)", description: "Image 70%, Text 30% bottom" },
  { id: "text-top", name: "Text Top", description: "Text 30% top, Image 70% bottom" },
  { id: "collage-4", name: "4-Image Collage", description: "4 images in 2x2 grid with center text" },
  { id: "collage-3", name: "3-Image Layout", description: "1 large + 2 small images with text overlay" },
  { id: "collage-2", name: "2-Image Layout", description: "2 images stacked with center text" },
]

// Move all helper functions here, before the component
const parseTitle = (title: string) => {
  const words = title.split(" ").filter((word) => word.length > 0)

if (words.length === 0) {
    return { number: "", mainTopic: "Untitled", subtitle: "" }
  }

const firstWord = words[0]
  const isFirstWordNumber = /^\d+$/.test(firstWord)

if (isFirstWordNumber && words.length > 1) {
    const number = firstWord
    const remainingText = words.slice(1).join(" ")
    const parsed = smartSemanticSplit(remainingText)

return {
      number,
      mainTopic: parsed.mainTopic,
      subtitle: parsed.subtitle,
    }
  } else {
    const fullText = words.join(" ")
    const parsed = smartSemanticSplit(fullText)

return {
      number: "",
      mainTopic: parsed.mainTopic,
      subtitle: parsed.subtitle,
    }
  }
}

const smartSemanticSplit = (text: string): { mainTopic: string; subtitle: string } => {
  const words = text.split(" ").filter((word) => word.length > 0)

if (words.length <= 3) {
    return {
      mainTopic: capitalizeFirst(text),
      subtitle: "",
    }
  }

const breakPoints = [
    { patterns: [":"], priority: 1 },
    { patterns: [" - ", " – ", " — "], priority: 2 },
    { patterns: [" to ", " that ", " will ", " for ", " with "], priority: 3 },
    { patterns: [" and ", " & "], priority: 4 },
    { patterns: ["!"], priority: 5 },
  ]

for (const breakPoint of breakPoints) {
    for (const pattern of breakPoint.patterns) {
      const index = text.toLowerCase().indexOf(pattern.toLowerCase())
      if (index > 0) {
        const beforeBreak = text.substring(0, index).trim()
        const afterBreak = text.substring(index + pattern.length).trim()

const beforeWords = beforeBreak.split(" ").length
        const afterWords = afterBreak.split(" ").length

if (beforeWords >= 2 && beforeWords <= 6 && afterWords >= 2) {
          return {
            mainTopic: capitalizeFirst(beforeBreak),
            subtitle: capitalizeFirst(afterBreak),
          }
        }
      }
    }
  }

const totalLength = text.length

if (totalLength <= 30) {
    const mainWords = words.slice(0, Math.min(4, words.length - 1))
    const subtitleWords = words.slice(mainWords.length)

return {
      mainTopic: capitalizeFirst(mainWords.join(" ")),
      subtitle: subtitleWords.length > 0 ? capitalizeFirst(subtitleWords.join(" ")) : "",
    }
  } else if (totalLength <= 50) {
    const midPoint = Math.ceil(words.length / 2)
    const mainWords = words.slice(0, midPoint)
    const subtitleWords = words.slice(midPoint)

return {
      mainTopic: capitalizeFirst(mainWords.join(" ")),
      subtitle: subtitleWords.length > 0 ? capitalizeFirst(subtitleWords.join(" ")) : "",
    }
  } else {
    const mainWords = words.slice(0, Math.min(5, Math.ceil(words.length * 0.6)))
    const subtitleWords = words.slice(mainWords.length)

return {
      mainTopic: capitalizeFirst(mainWords.join(" ")),
      subtitle: subtitleWords.length > 0 ? capitalizeFirst(subtitleWords.join(" ")) : "",
    }
  }
}

const capitalizeFirst = (text: string): string => {
  if (!text) return ""
  return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase()
}

const calculateOptimalFontSize = (
  ctx: CanvasRenderingContext2D,
  text: string,
  maxWidth: number,
  baseSize: number,
  minSize = 24,
  maxSize = 120,
): number => {
  let fontSize = baseSize

for (let size = maxSize; size >= minSize; size -= 4) {
    ctx.font = `italic 700 ${size}px 'Gentium Plus', sans-serif`
    const metrics = ctx.measureText(text)

if (metrics.width <= maxWidth) {
      fontSize = size
      break
    }
  }

return Math.max(minSize, Math.min(maxSize, fontSize))
}

const calculateOptimalSpacing = (
  mainTopicLines: string[],
  subtitle: string,
  availableHeight: number,
  layoutContext: "full-section" | "overlay-large" | "overlay-medium" | "overlay-small" = "full-section",
): { circleY: number; mainStartY: number; subtitleStartY: number; spacing: number; circleSize: number } => {
  const hasSubtitle = subtitle && subtitle.length > 0
  const mainLineCount = mainTopicLines.length

// Context-aware spacing configurations
  const spacingConfigs = {
    "full-section": {
      // For full-width text sections (standard, text-top layouts)
      circleSize: 80,
      circleBottomMargin: Math.max(70, availableHeight * 0.12), // Margin from circle bottom to title top
      lineHeight: Math.max(45, availableHeight * 0.08), // Proportional line height
      titleToSubtitleGap: Math.max(30, availableHeight * 0.05), // Proportional gap
      topMarginRatio: 0.15, // Start circle at 15% from top
    },
    "overlay-large": {
      // For large collage overlays (4-image, large 3-image)
      circleSize: 70,
      circleBottomMargin: Math.max(45, availableHeight * 0.15), // Margin from circle bottom to title top
      lineHeight: Math.max(35, availableHeight * 0.12),
      titleToSubtitleGap: Math.max(20, availableHeight * 0.08),
      topMarginRatio: 0.12,
    },
    "overlay-medium": {
      // For medium collage overlays (2-image, medium 3-image)
      circleSize: 65,
      circleBottomMargin: Math.max(40, availableHeight * 0.14), // Margin from circle bottom to title top
      lineHeight: Math.max(32, availableHeight * 0.11),
      titleToSubtitleGap: Math.max(18, availableHeight * 0.07),
      topMarginRatio: 0.1,
    },
    "overlay-small": {
      // For small overlays or compact layouts
      circleSize: 60,
      circleBottomMargin: Math.max(35, availableHeight * 0.13), // Margin from circle bottom to title top
      lineHeight: Math.max(28, availableHeight * 0.1),
      titleToSubtitleGap: Math.max(15, availableHeight * 0.06),
      topMarginRatio: 0.08,
    },
  }

const config = spacingConfigs[layoutContext]
  const circleRadius = config.circleSize / 2

if (!hasSubtitle) {
    // No subtitle: Circle + Main Title only
    const totalContentHeight =
      config.circleSize + // Full circle height
      config.circleBottomMargin + // Margin from circle bottom to title top
      mainLineCount * config.lineHeight // Title height

const contentStartY = Math.max(availableHeight * config.topMarginRatio, (availableHeight - totalContentHeight) / 2)

const circleY = contentStartY + circleRadius // Circle center position
    const mainStartY = contentStartY + config.circleSize + config.circleBottomMargin // Title starts after circle + margin

return {
      circleY,
      mainStartY,
      subtitleStartY: 0,
      spacing: config.lineHeight,
      circleSize: config.circleSize,
    }
  } else {
    // With subtitle: Circle + Main Title + Subtitle
    const subtitleHeight = 35 // Estimated subtitle height
    const totalContentHeight =
      config.circleSize + // Full circle height
      config.circleBottomMargin + // Margin from circle bottom to title top
      mainLineCount * config.lineHeight + // Title height
      config.titleToSubtitleGap + // Gap between title and subtitle
      subtitleHeight // Subtitle height

// Smart vertical centering with minimum top margin
    const contentStartY = Math.max(availableHeight * config.topMarginRatio, (availableHeight - totalContentHeight) / 2)

const circleY = contentStartY + circleRadius // Circle center position
    const mainStartY = contentStartY + config.circleSize + config.circleBottomMargin // Title starts after circle + margin
    const subtitleStartY = mainStartY + mainLineCount * config.lineHeight + config.titleToSubtitleGap

return {
      circleY,
      mainStartY,
      subtitleStartY,
      spacing: config.lineHeight,
      circleSize: config.circleSize,
    }
  }
}

const drawCountCircle = (
  ctx: CanvasRenderingContext2D,
  x: number,
  y: number,
  count: string,
  colors: [string, string],
  size = 60,
) => {
  const radius = size

ctx.save()
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)"
  ctx.shadowBlur = 20
  ctx.shadowOffsetX = 5
  ctx.shadowOffsetY = 5

ctx.fillStyle = "white"
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, Math.PI * 2)
  ctx.fill()

ctx.shadowColor = "transparent"
  ctx.shadowBlur = 0
  ctx.shadowOffsetX = 0
  ctx.shadowOffsetY = 0

const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius - 8)
  gradient.addColorStop(0, colors[0])
  gradient.addColorStop(1, colors[1])

ctx.fillStyle = gradient
  ctx.beginPath()
  ctx.arc(x, y, radius - 8, 0, Math.PI * 2)
  ctx.fill()

ctx.fillStyle = "white"

const fontSize = Math.max(48, radius * 1.2)
  ctx.font = `900 ${fontSize}px 'Playfair Display', serif`
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"

ctx.shadowColor = "rgba(0, 0, 0, 0.7)"
  ctx.shadowBlur = 8
  ctx.shadowOffsetX = 3
  ctx.shadowOffsetY = 3

ctx.fillText(count, x, y)

ctx.restore()
}

const wrapText = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] => {
  const words = text.split(" ")
  const lines: string[] = []
  let currentLine = ""

for (const word of words) {
    const testLine = currentLine + (currentLine ? " " : "") + word
    const metrics = ctx.measureText(testLine)

if (metrics.width > maxWidth && currentLine) {
      lines.push(currentLine)
      currentLine = word
    } else {
      currentLine = testLine
    }
  }
  if (currentLine) lines.push(currentLine)

return lines
}

const getGradientColors = (templateId: string): [string, string] => {
  const gradientColors = {
    sunset: ["#fb923c", "#ef4444"],
    ocean: ["#60a5fa", "#06b6d4"],
    forest: ["#4ade80", "#10b981"],
    purple: ["#a78bfa", "#6366f1"],
    golden: ["#fbbf24", "#f59e0b"],
    rose: ["#f9a8d4", "#ec4899"],
    mint: ["#5eead4", "#22d3ee"],
    coral: ["#fdba74", "#f87171"],
  }
  return gradientColors[templateId as keyof typeof gradientColors] || ["#fb923c", "#ef4444"]
}

const drawPinterestTextSectionCanvas = (
  ctx: CanvasRenderingContext2D,
  canvas: HTMLCanvasElement,
  template: any,
  title: string,
  domain: string,
  startY: number,
  height: number,
) => {
  const colors = getGradientColors(template.id)
  const gradient = ctx.createLinearGradient(0, startY, 0, startY + height)
  gradient.addColorStop(0, colors[0])
  gradient.addColorStop(1, colors[1])

ctx.fillStyle = gradient
  ctx.fillRect(0, startY, canvas.width, height)

ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
  ctx.fillRect(0, startY, canvas.width, height)

const { number, mainTopic, subtitle } = parseTitle(title)

ctx.fillStyle = "white"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"

if (number) {
    const maxMainWidth = canvas.width - 120
    const maxSubtitleWidth = canvas.width - 140

const mainFontSize = calculateOptimalFontSize(ctx, mainTopic, maxMainWidth, 85, 45, 100)
    const subtitleFontSize = subtitle ? calculateOptimalFontSize(ctx, subtitle, maxSubtitleWidth, 44, 28, 50) : 0

ctx.font = `italic 700 ${mainFontSize}px 'Gentium Plus', sans-serif`
    const mainLines = wrapText(ctx, mainTopic, maxMainWidth)

// Use 'full-section' context for main text sections
    const { circleY, mainStartY, subtitleStartY, spacing, circleSize } = calculateOptimalSpacing(
      mainLines,
      subtitle || "",
      height,
      "full-section",
    )

// Use the calculated circle size
    drawCountCircle(ctx, canvas.width / 2, startY + circleY, number, colors, circleSize)

ctx.fillStyle = "white"
    ctx.font = `italic 700 ${mainFontSize}px 'Gentium Plus', sans-serif`

mainLines.forEach((line, index) => {
      ctx.fillText(line, canvas.width / 2, startY + mainStartY + index * spacing)
    })

if (subtitle && subtitle.length > 0) {
      ctx.font = `italic 600 ${subtitleFontSize}px 'Lobster Two', serif`
      ctx.fillStyle = "rgba(255, 255, 255, 0.9)"

const subtitleLines = wrapText(ctx, subtitle, maxSubtitleWidth)
      subtitleLines.forEach((line, index) => {
        ctx.fillText(line, canvas.width / 2, startY + subtitleStartY + index * (subtitleFontSize * 1.2))
      })
    }
  } else {
    const maxWidth = canvas.width - 100
    const optimalFontSize = calculateOptimalFontSize(ctx, mainTopic, maxWidth, 98, 50, 120)

ctx.font = `italic 700 ${optimalFontSize}px 'Playfair Display', serif`
    const mainLines = wrapText(ctx, mainTopic, maxWidth)
    const lineHeight = optimalFontSize * 1.1
    const totalHeight = mainLines.length * lineHeight
    const mainStartY = startY + (height - totalHeight) / 2 + lineHeight / 2

mainLines.forEach((line, index) => {
      ctx.fillStyle = "rgba(0, 0, 0, 0.4)"
      ctx.fillText(line, canvas.width / 2 + 2, mainStartY + index * lineHeight + 2)
      ctx.fillStyle = "white"
      ctx.fillText(line, canvas.width / 2, mainStartY + index * lineHeight)
    })
  }

const domainFontSize = Math.max(24, Math.min(32, canvas.width / 35))
  ctx.font = `italic 500 ${domainFontSize}px 'Playfair Display', serif`
  ctx.fillStyle = "rgba(255, 255, 255, 0.95)"
  ctx.fillText(`www.${domain}`, canvas.width / 2, startY + height - 30)
}

const drawCompactModernTextWithCircle = (
  ctx: CanvasRenderingContext2D,
  overlayX: number,
  overlayY: number,
  overlayWidth: number,
  overlayHeight: number,
  title: string,
  domain: string,
  colors: [string, string],
) => {
  const { number, mainTopic, subtitle } = parseTitle(title)

ctx.fillStyle = "white"
  ctx.textAlign = "center"
  ctx.textBaseline = "middle"

const centerX = overlayX + overlayWidth / 2

if (number) {
    const maxMainWidth = overlayWidth - 60
    const maxSubtitleWidth = overlayWidth - 80

const mainFontSize = calculateOptimalFontSize(ctx, mainTopic, maxMainWidth, 46, 28, 52)
    const subtitleFontSize = subtitle ? calculateOptimalFontSize(ctx, subtitle, maxSubtitleWidth, 32, 20, 36) : 0

ctx.font = `italic 900 ${mainFontSize}px 'Gentium Plus', sans-serif`
    const mainLines = wrapText(ctx, mainTopic, maxMainWidth)

// Determine overlay context based on size
    let overlayContext: "overlay-large" | "overlay-medium" | "overlay-small" = "overlay-medium"
    if (overlayHeight > 300) overlayContext = "overlay-large"
    else if (overlayHeight < 200) overlayContext = "overlay-small"

const { circleY, mainStartY, subtitleStartY, spacing, circleSize } = calculateOptimalSpacing(
      mainLines,
      subtitle || "",
      overlayHeight,
      overlayContext,
    )

// Use the calculated circle size
    drawCountCircle(ctx, centerX, overlayY + circleY, number, colors, circleSize)

ctx.fillStyle = "white"
    ctx.font = `italic 900 ${mainFontSize}px 'Gentium Plus', sans-serif`

mainLines.forEach((line, index) => {
      ctx.fillText(line, centerX, overlayY + mainStartY + index * spacing)
    })

if (subtitle && subtitle.length > 0) {
      ctx.font = `italic 600 ${subtitleFontSize}px 'Gentium Plus', sans-serif`
      ctx.fillStyle = "rgba(255, 255, 255, 0.9)"
      const shortSubtitle = subtitle.length > 35 ? subtitle.substring(0, 35) + "..." : subtitle
      ctx.fillText(shortSubtitle, centerX, overlayY + subtitleStartY)
    }
  } else {
    const maxWidth = overlayWidth - 60
    const optimalFontSize = calculateOptimalFontSize(ctx, mainTopic, maxWidth, 58, 32, 64)

ctx.font = `italic 900 ${optimalFontSize}px 'Playfair Display', serif`
    ctx.shadowColor = "rgba(0, 0, 0, 0.3)"
    ctx.shadowBlur = 6
    ctx.shadowOffsetX = 2
    ctx.shadowOffsetY = 2

const mainLines = wrapText(ctx, mainTopic, maxWidth)
    const lineHeight = optimalFontSize * 1.1
    const totalTextHeight = mainLines.length * lineHeight
    const startY = overlayY + overlayHeight / 2 - totalTextHeight / 2 + lineHeight / 2

mainLines.forEach((line, index) => {
      ctx.fillText(line, centerX, startY + index * lineHeight)
    })

ctx.shadowColor = "transparent"
    ctx.shadowBlur = 0
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
  }

const domainFontSize = Math.max(20, Math.min(26, overlayWidth / 20))
  ctx.font = `italic 500 ${domainFontSize}px 'Playfair Display', serif`
  ctx.fillStyle = "rgba(255, 255, 255, 0.9)"
  ctx.fillText(`www.${domain}`, centerX, overlayY + overlayHeight - 25)
}

// Now the main component starts here
export function PinterestTemplateGenerator({
  title,
  images,
  domain,
  generatedContent,
  onTemplatesGenerated,
}: PinterestTemplateGeneratorProps) {
  // Add these state variables after existing ones
  const [imageCache, setImageCache] = useState<Map<string, string>>(new Map())
  const [isPreloadingImages, setIsPreloadingImages] = useState(false)
  const [preloadProgress, setPreloadProgress] = useState(0)
  const [cachedImageCount, setCachedImageCount] = useState(0)

const [selectedImages, setSelectedImages] = useState<string[]>([])
  const [isDownloadingAll, setIsDownloadingAll] = useState(false)
  const [selectedLayouts, setSelectedLayouts] = useState<string[]>(["collage-4"])
  const [generateQuantity, setGenerateQuantity] = useState(2)
  const [instantTemplates, setInstantTemplates] = useState<any[]>([])
  const [isGenerating, setIsGenerating] = useState(false)
  const [loadedImageCache, setLoadedImageCache] = useState<Map<string, HTMLImageElement>>(new Map())
  const [generationProgress, setGenerationProgress] = useState(0)

// Auto-select first 4 images when component mounts
  useEffect(() => {
    if (images.length >= 4 && selectedImages.length === 0) {
      setSelectedImages(images.slice(0, Math.min(images.length, 20))) // Select up to 20 images
    }
  }, [images])

// Load Pinterest-optimized Google Fonts
  useEffect(() => {
    const pinterestFonts = [
      "Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900",
      "Lobster+Two:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700",
      "Gentium+Plus:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900",
      "Courgette:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700;1,900",
    ]

pinterestFonts.forEach((font) => {
      const link = document.createElement("link")
      link.href = `https://fonts.googleapis.com/css2?family=${font}&display=swap`
      link.rel = "stylesheet"
      document.head.appendChild(link)
    })
  }, [])

// Pre-load all images on component mount
  useEffect(() => {
    preloadAllImages()
  }, [images])

// Auto-generate templates when layout and quantity are selected
  const handleLayoutAndQuantitySelect = async (layoutIds: string[], quantity: number) => {
    setSelectedLayouts(layoutIds)
    setGenerateQuantity(quantity)

if (selectedImages.length >= 4 && layoutIds.length > 0) {
      await generateInstantTemplates(layoutIds, quantity)
    }
  }

// Enhanced image pre-loading with caching
  const preloadAllImages = async () => {
    if (images.length === 0) return

setIsPreloadingImages(true)
    setPreloadProgress(0)
    setCachedImageCount(0)

const cache = new Map<string, string>()
    let processedCount = 0

console.log(`🚀 Pre-loading and caching ${images.length} images...`)

// Process images in batches of 3 for optimal speed
    const batchSize = 3
    const batches = []

for (let i = 0; i < images.length; i += batchSize) {
      batches.push(images.slice(i, i + batchSize))
    }

for (const batch of batches) {
      const batchPromises = batch.map(async (imageUrl) => {
        try {
          // Try to load and convert to blob URL for caching
          const cachedUrl = await loadAndCacheImage(imageUrl)
          if (cachedUrl) {
            cache.set(imageUrl, cachedUrl)
            console.log(`✅ Cached: ${imageUrl}`)
            return true
          }
          return false
        } catch (error) {
          console.log(`❌ Failed to cache: ${imageUrl}`)
          return false
        }
      })

await Promise.all(batchPromises)
      processedCount += batch.length

const progress = (processedCount / images.length) * 100
      setPreloadProgress(progress)
      setCachedImageCount(cache.size)

// Small delay between batches
      await new Promise((resolve) => setTimeout(resolve, 100))
    }

setImageCache(cache)
    setIsPreloadingImages(false)

console.log(`🎉 Image caching complete: ${cache.size}/${images.length} images cached`)
  }

// New function to load and cache images as blob URLs
  const loadAndCacheImage = async (imageUrl: string): Promise<string | null> => {
    try {
      // Try server proxy first
      const response = await fetch("/api/proxy-image", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imageUrl }),
      })

if (response.ok) {
        const blob = await response.blob()
        return URL.createObjectURL(blob)
      }

// Fallback to direct load
      const img = await loadImageDirect(imageUrl)
      if (img) {
        // Convert to canvas and then to blob URL for caching
        const canvas = document.createElement("canvas")
        canvas.width = img.width
        canvas.height = img.height
        const ctx = canvas.getContext("2d")
        if (ctx) {
          ctx.drawImage(img, 0, 0)
          return new Promise((resolve) => {
            canvas.toBlob((blob) => {
              if (blob) {
                resolve(URL.createObjectURL(blob))
              } else {
                resolve(null)
              }
            }, "image/png")
          })
        }
      }

return null
    } catch (error) {
      console.log(`Failed to cache image: ${imageUrl}`, error)
      return null
    }
  }

const handleSelectAll = () => {
    if (selectedImages.length === images.length) {
      setSelectedImages([])
    } else {
      setSelectedImages([...images])
    }
  }

const handleImageSelect = (imageUrl: string) => {
    if (selectedImages.includes(imageUrl)) {
      setSelectedImages(selectedImages.filter((img) => img !== imageUrl))
    } else {
      setSelectedImages([...selectedImages, imageUrl])
    }
  }

// Enhanced image loading with better error handling
  const loadImageWithFallbacks = async (imageUrl: string): Promise<HTMLImageElement | null> => {
    // Check cache first
    if (loadedImageCache.has(imageUrl)) {
      return loadedImageCache.get(imageUrl)!
    }

console.log("🔄 Loading image with fallbacks:", imageUrl)

let img = null

// Method 1: Try direct load first (fastest)
    try {
      img = await loadImageDirect(imageUrl)
      if (img) {
        console.log("✅ Direct load successful")
        return img
      }
    } catch (error) {
      console.log("❌ Direct load failed:", error)
    }

// Method 2: Try server-side proxy (most reliable for CORS)
    try {
      img = await loadImageViaServerProxy(imageUrl)
      if (img) {
        console.log("✅ Server proxy successful")
        return img
      }
    } catch (error) {
      console.log("❌ Server proxy failed:", error)
    }

// Method 3: Try public CORS proxies
    const corsProxies = [
      `https://api.allorigins.win/raw?url=${encodeURIComponent(imageUrl)}`,
      `https://cors-anywhere.herokuapp.com/${imageUrl}`,
      `https://thingproxy.freeboard.io/fetch/${imageUrl}`,
    ]

for (const proxyUrl of corsProxies) {
      try {
        img = await loadImageWithProxy(proxyUrl)
        if (img) {
          console.log("✅ CORS proxy successful:", proxyUrl)
          return img
        }
      } catch (error) {
        console.log("❌ CORS proxy failed:", proxyUrl)
        continue
      }
    }

console.log("❌ All image loading methods failed for:", imageUrl)
    return null
  }

const loadImageViaServerProxy = async (imageUrl: string): Promise<HTMLImageElement | null> => {
    return new Promise(async (resolve) => {
      try {
        const controller = new AbortController()
        const timeoutId = setTimeout(() => controller.abort(), 15000)

const response = await fetch("/api/proxy-image", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ imageUrl }),
          signal: controller.signal,
        })

clearTimeout(timeoutId)

if (!response.ok) {
          const errorData = await response.json().catch(() => ({}))
          console.log("Server proxy error:", response.status, errorData)
          resolve(null)
          return
        }

const blob = await response.blob()

// Validate blob
        if (blob.size === 0 || !blob.type.startsWith("image/")) {
          console.log("Invalid blob from server proxy:", blob.size, blob.type)
          resolve(null)
          return
        }

const blobUrl = URL.createObjectURL(blob)

const img = new Image()
        img.onload = () => {
          if (img.width > 0 && img.height > 0) {
            resolve(img)
          } else {
            resolve(null)
          }
          setTimeout(() => URL.revokeObjectURL(blobUrl), 5000)
        }
        img.onerror = () => {
          URL.revokeObjectURL(blobUrl)
          resolve(null)
        }

img.src = blobUrl
      } catch (error) {
        console.log("Server proxy request failed:", error)
        resolve(null)
      }
    })
  }

const loadImageWithProxy = (proxyUrl: string): Promise<HTMLImageElement | null> => {
    return new Promise(async (resolve) => {
      try {
        const controller = new AbortController()
        const timeoutId = setTimeout(() => controller.abort(), 10000)

const response = await fetch(proxyUrl, {
          signal: controller.signal,
          headers: {
            Accept: "image/*,*/*",
            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
          },
        })

clearTimeout(timeoutId)

if (!response.ok) {
          resolve(null)
          return
        }

const blob = await response.blob()

// Validate that it's actually an image
        if (!blob.type.startsWith("image/") || blob.size < 100) {
          resolve(null)
          return
        }

const blobUrl = URL.createObjectURL(blob)

const img = new Image()
        img.onload = () => {
          // Validate image dimensions
          if (img.width > 50 && img.height > 50) {
            resolve(img)
          } else {
            resolve(null)
          }
          setTimeout(() => URL.revokeObjectURL(blobUrl), 5000)
        }
        img.onerror = () => {
          URL.revokeObjectURL(blobUrl)
          resolve(null)
        }

img.src = blobUrl
      } catch (error) {
        resolve(null)
      }
    })
  }

const loadImageDirect = (imageUrl: string): Promise<HTMLImageElement | null> => {
    return new Promise((resolve) => {
      const img = new Image()
      img.crossOrigin = "anonymous"

const timeout = setTimeout(() => {
        img.onload = null
        img.onerror = null
        resolve(null)
      }, 8000)

img.onload = () => {
        clearTimeout(timeout)
        if (img.width > 0 && img.height > 0) {
          resolve(img)
        } else {
          resolve(null)
        }
      }

img.onerror = () => {
        clearTimeout(timeout)
        resolve(null)
      }

img.src = imageUrl
    })
  }

const generateImageCombinations = (array: any[], quantity: number, layoutId: string) => {
    const combinations: any[] = []

if (layoutId === "collage-4") {
      // Generate all combinations of 4 images
      for (let i = 0; i < array.length; i++) {
        for (let j = i + 1; j < array.length; j++) {
          for (let k = j + 1; k < array.length; k++) {
            for (let l = k + 1; l < array.length; l++) {
              combinations.push([array[i], array[j], array[k], array[l]])
            }
          }
        }
      }
    } else if (layoutId === "collage-3") {
      // Generate combinations for 3-image layout
      for (let i = 0; i < array.length; i++) {
        for (let j = i + 1; j < array.length; j++) {
          for (let k = j + 1; k < array.length; k++) {
            combinations.push([array[i], array[j], array[k]])
          }
        }
      }
    } else if (layoutId === "collage-2") {
      // Generate combinations for 2-image layout
      for (let i = 0; i < array.length; i++) {
        for (let j = i + 1; j < array.length; j++) {
          combinations.push([array[i], array[j]])
        }
      }
    }

// Shuffle and limit the combinations
    const shuffled = combinations.sort(() => 0.5 - Math.random())
    return shuffled.slice(0, quantity)
  }

const generateCanvasData = async (
    layoutId: string,
    imageUrls: string[],
    template: any,
    title: string,
  ): Promise<string | null> => {
    const canvas = document.createElement("canvas")
    canvas.width = 1000
    canvas.height = 1500
    const ctx = canvas.getContext("2d")

if (!ctx) {
      console.error("Could not get 2D context")
      return null
    }

try {
      // Use cached images instead of loading them again
      const loadedImages = await Promise.all(
        imageUrls.map(async (url) => {
          const cachedUrl = imageCache.get(url)
          if (cachedUrl) {
            // Load from cached blob URL (much faster)
            return new Promise<HTMLImageElement | null>((resolve) => {
              const img = new Image()
              img.onload = () => resolve(img)
              img.onerror = () => resolve(null)
              img.src = cachedUrl
            })
          } else {
            // Fallback to original loading method
            return await loadImageWithFallbacks(url)
          }
        }),
      )

if (layoutId === "standard") {
        await drawStandardTemplateCanvasPerfect(canvas, ctx, loadedImages[0], template, title, domain)
      } else if (layoutId === "text-top") {
        await drawTextTopTemplateCanvasPerfect(canvas, ctx, loadedImages[0], template, title, domain)
      } else if (layoutId.startsWith("collage")) {
        await drawCollageTemplateCanvasPerfect(canvas, ctx, loadedImages, template, title, domain, layoutId)
      } else {
        console.warn("Unknown layout ID:", layoutId)
        return null
      }

return canvas.toDataURL("image/png")
    } catch (error) {
      console.error("Error generating canvas data:", error)
      return null
    }
  }

// Update generateInstantTemplates to use AI titles directly:
  const generateInstantTemplates = async (layoutIds?: string[], quantity?: number) => {
    const layouts = layoutIds || selectedLayouts
    const qty = quantity || generateQuantity

if (selectedImages.length < 4 || layouts.length === 0) return

// Pre-load images if not already cached
    if (imageCache.size === 0) {
      await preloadAllImages()
    }

setIsGenerating(true)
    setInstantTemplates([])
    const newTemplates: any[] = []

try {
      // Calculate total templates to generate
      const previewsPerLayout = Math.floor(qty / layouts.length)
      const remainder = qty % layouts.length
      let totalToGenerate = 0
      let currentProgress = 0

// Calculate total count first
      for (let layoutIndex = 0; layoutIndex < layouts.length; layoutIndex++) {
        const layoutQuantity = previewsPerLayout + (layoutIndex < remainder ? 1 : 0)
        if (layouts[layoutIndex].startsWith("collage")) {
          const combinations = generateImageCombinations(selectedImages, layoutQuantity, layouts[layoutIndex])
          totalToGenerate += combinations.length * templates.length
        } else {
          totalToGenerate += layoutQuantity * templates.length
        }
      }

// Generate templates progressively
      for (let layoutIndex = 0; layoutIndex < layouts.length; layoutIndex++) {
        const layoutId = layouts[layoutIndex]
        const layoutQuantity = previewsPerLayout + (layoutIndex < remainder ? 1 : 0)

if (layoutId.startsWith("collage")) {
          // Generate collage combinations
          const combinations = generateImageCombinations(selectedImages, layoutQuantity, layoutId)

for (let comboIndex = 0; comboIndex < combinations.length; comboIndex++) {
            const imageCombo = combinations[comboIndex]

for (let templateIndex = 0; templateIndex < templates.length; templateIndex++) {
              const template = templates[templateIndex]
              const contentIndex = Math.floor(Math.random() * (generatedContent?.length || 1))
              const aiContent = generatedContent ? generatedContent[contentIndex] : { title, description: "" }

// Use AI-generated title directly (it already has the correct count)
              const aiTitle = aiContent.title

// Generate one template at a time
              const canvasData = await generateCanvasData(layoutId, imageCombo, template, aiTitle)

if (canvasData) {
                const newTemplate = {
                  id: `${layoutId}-${template.id}-${comboIndex}`,
                  layout: layoutId,
                  template,
                  images: imageCombo,
                  title: aiTitle,
                  description: aiContent.description,
                  domain,
                  type: "collage",
                  canvasData,
                }

newTemplates.push(newTemplate)
                setInstantTemplates([...newTemplates])
              }

currentProgress++
              setGenerationProgress(Math.round((currentProgress / totalToGenerate) * 100))
              await new Promise((resolve) => setTimeout(resolve, 10))
            }
          }
        } else {
          // Generate single image templates
          for (let i = 0; i < layoutQuantity; i++) {
            const imageIndex = i % selectedImages.length
            const imageUrl = selectedImages[imageIndex]

// Use AI-generated title directly (it already has the correct count)
              const aiTitle = aiContent.title

// Generate one template at a time
              const canvasData = await generateCanvasData(layoutId, [imageUrl], template, aiTitle)

if (canvasData) {
                const newTemplate = {
                  id: `${layoutId}-${template.id}-${i}`,
                  layout: layoutId,
                  template,
                  images: [imageUrl],
                  title: aiTitle,
                  description: aiContent.description,
                  domain,
                  type: "single",
                  canvasData,
                }

newTemplates.push(newTemplate)
                setInstantTemplates([...newTemplates])
              }

currentProgress++
              setGenerationProgress(Math.round((currentProgress / totalToGenerate) * 100))
              await new Promise((resolve) => setTimeout(resolve, 10))
            }
          }
        }
      }
    } catch (error) {
      console.error("Error generating templates:", error)
    } finally {
      setIsGenerating(false)
      setGenerationProgress(100)

if (onTemplatesGenerated) {
        onTemplatesGenerated(newTemplates)
      }
    }
  }

// SEO-optimized filename generation
  const generateSEOFilename = (
    title: string,
    domain: string,
    templateName: string,
    index: number,
    duplicateCount = 0,
  ): string => {
    // Clean and optimize the title for SEO
    const seoTitle = title
      .toLowerCase()
      .replace(/[^a-z0-9\s-]/g, "") // Remove special characters except spaces and hyphens
      .replace(/\s+/g, "-") // Replace spaces with hyphens
      .replace(/-+/g, "-") // Replace multiple hyphens with single
      .trim()
      .substring(0, 50) // Limit length for file systems
      .replace(/^-+|-+$/g, "") // Remove leading/trailing hyphens

// Add domain for branding (SEO benefit)
    const domainSlug = domain.replace(/[^a-z0-9]/g, "-").toLowerCase()

// Add template variation for uniqueness
    const templateSlug = templateName.toLowerCase().replace(/\s+/g, "-")

// Handle duplicates
    const duplicateSuffix = duplicateCount > 0 ? `-${duplicateCount + 1}` : ""

// Final SEO-optimized filename
    return `${seoTitle}-${domainSlug}-${templateSlug}${duplicateSuffix}.png`
  }

// Track title usage for duplicate handling
  const titleUsageCount = new Map<string, number>()

// Updated instant download function
  const instantDownloadTemplate = (templateData: any, index: number) => {
    if (!templateData.canvasData) {
      console.error("No canvas data available for instant download")
      return
    }

// Track title usage for duplicates
    const titleKey = templateData.title.toLowerCase()
    const currentCount = titleUsageCount.get(titleKey) || 0
    titleUsageCount.set(titleKey, currentCount + 1)

// Generate SEO-optimized filename
    const seoFilename = generateSEOFilename(
      templateData.title,
      templateData.domain,
      templateData.template.name,
      index,
      currentCount,
    )

console.log(`📁 SEO Filename: ${seoFilename}`)

const link = document.createElement("a")
    link.download = seoFilename
    link.href = templateData.canvasData
    link.click()
  }

const handleLayoutSelect = (layoutId: string) => {
    if (selectedLayouts.includes(layoutId)) {
      const newLayouts = selectedLayouts.filter((id) => id !== layoutId)
      setSelectedLayouts(newLayouts)
      if (newLayouts.length > 0) {
        handleLayoutAndQuantitySelect(newLayouts, generateQuantity)
      }
    } else {
      const newLayouts = [...selectedLayouts, layoutId]
      setSelectedLayouts(newLayouts)
      handleLayoutAndQuantitySelect(newLayouts, generateQuantity)
    }
  }

const handleSelectAllLayouts = () => {
    if (selectedLayouts.length === templateLayouts.length) {
      setSelectedLayouts([])
      setInstantTemplates([])
    } else {
      const allLayouts = templateLayouts.map((layout) => layout.id)
      setSelectedLayouts(allLayouts)
      handleLayoutAndQuantitySelect(allLayouts, generateQuantity)
    }
  }

const handleQuantitySelect = (quantity: number) => {
    setGenerateQuantity(quantity)
    if (selectedLayouts.length > 0) {
      handleLayoutAndQuantitySelect(selectedLayouts, quantity)
    }
  }

// Add this useEffect for cleanup
  useEffect(() => {
    return () => {
      // Cleanup blob URLs when component unmounts
      imageCache.forEach((blobUrl) => {
        URL.revokeObjectURL(blobUrl)
      })
    }
  }, [imageCache])

return (
    <div className="space-y-6">
      {/* Image Caching Status */}
      {images.length > 0 && (
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <ImageIcon className="w-5 h-5" />
              Image Caching & Optimization
              <Badge variant="outline" className="ml-auto bg-blue-50 text-blue-700">
                Speed Boost
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {isPreloadingImages && (
              <div className="space-y-3">
                <div className="flex items-center gap-2 text-blue-600">
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span className="text-sm">
                    Caching images for ultra-fast generation... {preloadProgress.toFixed(0)}%
                  </span>
                </div>

<div className="text-xs text-gray-500 text-center">
                  {cachedImageCount} of {images.length} images cached
                </div>
              </div>
            )}

{imageCache.size > 0 && !isPreloadingImages && (
              <div className="bg-green-50 p-4 rounded-lg">
                <div className="flex items-center gap-2 text-green-700">
                  <CheckSquare className="w-4 h-4" />
                  <span className="font-medium">
                    {imageCache.size} images cached and ready for ultra-fast generation!
                  </span>
                </div>
                <div className="text-sm text-green-600 mt-2 space-y-1">
                  <div>
                    ⚡ <strong>10x faster</strong> template generation
                  </div>
                  <div>
                    🎨 <strong>No re-downloading</strong> - images cached locally
                  </div>
                  <div>
                    🚀 <strong>Instant rendering</strong> - blob URLs ready
                  </div>
                </div>
              </div>
            )}

{imageCache.size === 0 && !isPreloadingImages && (
              <div className="bg-yellow-50 p-4 rounded-lg">
                <div className="flex items-center gap-2 text-yellow-700">
                  <AlertCircle className="w-4 h-4" />
                  <span className="font-medium">Images will be cached automatically when generating templates</span>
                </div>
                <div className="text-sm text-yellow-600 mt-1">
                  First generation may take longer as images are being cached for future use.
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* Enhanced Layout Selection */}
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Layout className="w-5 h-5" />
            Template Layout & Quantity Settings
            <Badge variant="outline" className="ml-auto bg-blue-50 text-blue-700">
              Smart Semantic Parsing
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Layout Selection */}
          <div>
            <div className="flex items-center justify-between mb-4">
              <label className="text-sm font-medium">Select Template Layouts</label>
              <Button
                onClick={handleSelectAllLayouts}
                variant="outline"
                size="sm"
                className="flex items-center gap-2 bg-transparent"
              >
                {selectedLayouts.length === templateLayouts.length ? (
                  <CheckSquare className="w-4 h-4" />
                ) : (
                  <Square className="w-4 h-4" />
                )}
                {selectedLayouts.length === templateLayouts.length ? "Deselect All" : "Select All Layouts"}
              </Button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              {templateLayouts.map((layout) => (
                <div
                  key={layout.id}
                  className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
                    selectedLayouts.includes(layout.id)
                      ? "border-blue-500 bg-blue-50"
                      : "border-gray-200 hover:border-gray-300"
                  }`}
                  onClick={() => handleLayoutSelect(layout.id)}
                >
                  <div className="flex items-center gap-3">
                    {selectedLayouts.includes(layout.id) ? (
                      <CheckSquare className="w-5 h-5 text-blue-500" />
                    ) : (
                      <Square className="w-5 h-5 text-gray-400" />
                    )}
                    <div>
                      <div className="font-medium text-sm">{layout.name}</div>
                      <div className="text-xs text-gray-500">{layout.description}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>

<Badge variant="secondary" className="mt-3">
              {selectedLayouts.length} layout{selectedLayouts.length !== 1 ? "s" : ""} selected
            </Badge>
          </div>

{/* Quantity Selection */}
          <div>
            <label className="text-sm font-medium mb-3 block">Select Total Templates to Generate</label>

<div className="flex gap-2">
              {[2, 5, 10, 25, 50, 100].map((qty) => (
                <Button
                  key={qty}
                  variant={generateQuantity === qty && instantTemplates.length > 0 ? "default" : "outline"}
                  size="sm"
                  onClick={() => handleQuantitySelect(qty)}
                  disabled={isGenerating}
                  className={
                    generateQuantity === qty && instantTemplates.length > 0 ? "bg-green-600 hover:bg-green-700" : ""
                  }
                >
                  {isGenerating && generateQuantity === qty ? (
                    <Loader2 className="w-3 h-3 mr-1 animate-spin" />
                  ) : generateQuantity === qty && instantTemplates.length > 0 ? (
                    <CheckSquare className="w-3 h-3 mr-1" />
                  ) : null}
                  {qty}
                </Button>
              ))}
            </div>
          </div>

{/* Smart Semantic Parsing Preview */}
          <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 mb-3">🧠 Smart Semantic Title Parsing Examples:</h4>
            <div className="text-sm space-y-3">
              {[
                "21 Cozy Farmhouse Kitchen Designs to Ignite Your Rustic Dreams",
                "21 Dreamy Farmhouse Kitchens: Get Inspired & Create Your Cozy Oasis!",
                "21 Cozy Farmhouse Kitchen Ideas That Will Steal Your Heart",
              ].map((exampleTitle, index) => {
                const parsed = parseTitle(exampleTitle)
                return (
                  <div key={index} className="bg-white p-3 rounded border border-blue-100">
                    <div className="text-gray-600 text-xs mb-1">Original:</div>
                    <div className="text-gray-800 font-medium mb-2">{exampleTitle}</div>
                    <div className="grid grid-cols-3 gap-2 text-xs">
                      <div>
                        <span className="text-blue-600 font-medium">Number:</span>
                        <div className="bg-blue-50 p-1 rounded mt-1">{parsed.number || "None"}</div>
                      </div>
                      <div>
                        <span className="text-green-600 font-medium">Main Topic:</span>
                        <div className="bg-green-50 p-1 rounded mt-1">{parsed.mainTopic}</div>
                      </div>
                      <div>
                        <span className="text-purple-600 font-medium">Subtitle:</span>
                        <div className="bg-purple-50 p-1 rounded mt-1">{parsed.subtitle || "None"}</div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
            <div className="text-xs text-blue-600 mt-3 space-y-1">
              <div>
                ✅ <strong>Punctuation-aware:</strong> Detects colons (:), dashes (-), and connecting words
              </div>
              <div>
                ✅ <strong>Length-balanced:</strong> Automatically adjusts split based on text length
              </div>
              <div>
                ✅ <strong>Semantic meaning:</strong> Preserves natural phrase boundaries
              </div>
              <div>
                ✅ <strong>Visual optimization:</strong> Ensures optimal font sizing and spacing
              </div>
            </div>
          </div>

{/* Status */}
          {isGenerating && (
            <div className="space-y-3">
              <div className="flex items-center gap-2 text-blue-600">
                <Loader2 className="w-4 h-4 animate-spin" />
                <span className="text-sm">Generating templates with smart parsing... {generationProgress}%</span>
              </div>

{/* Progress Bar */}
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className="bg-blue-600 h-2 rounded-full transition-all duration-300 ease-out"
                  style={{ width: `${generationProgress}%` }}
                />
              </div>

<div className="text-xs text-gray-500 text-center">
                {instantTemplates.length} of {generateQuantity * templates.length} templates completed
              </div>
            </div>
          )}

{instantTemplates.length > 0 && (
            <div className="bg-green-50 p-4 rounded-lg">
              <div className="flex items-center gap-2 text-green-700">
                <CheckSquare className="w-4 h-4" />
                <span className="font-medium">
                  {instantTemplates.length} templates generated with smart semantic parsing and perfect text balance!
                </span>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

{/* Image Selection */}
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ImageIcon className="w-5 h-5" />
            Select Images for Templates
            <Badge variant="outline" className="ml-auto">
              Auto-selected first {selectedImages.length} images
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between mb-4">
            <Button
              onClick={handleSelectAll}
              variant="outline"
              size="sm"
              className="flex items-center gap-2 bg-transparent"
            >
              {selectedImages.length === images.length ? (
                <CheckSquare className="w-4 h-4" />
              ) : (
                <Square className="w-4 h-4" />
              )}
              {selectedImages.length === images.length ? "Deselect All" : "Select All"}
            </Button>
          </div>

<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {images.map((imageUrl, index) => (
              <div
                key={index}
                className={`relative cursor-pointer rounded-lg overflow-hidden border-2 transition-all ${
                  selectedImages.includes(imageUrl)
                    ? "border-blue-500 ring-2 ring-blue-200"
                    : "border-gray-200 hover:border-gray-300"
                }`}
                onClick={() => handleImageSelect(imageUrl)}
              >
                <img
                  src={imageUrl || "/placeholder.svg"}
                  alt={`Image ${index + 1}`}
                  className="w-full h-24 object-cover"
                  onError={(e) => {
                    const target = e.target as HTMLImageElement
                    target.src = "/placeholder.svg?height=96&width=96"
                  }}
                />
                {selectedImages.includes(imageUrl) && (
                  <div className="absolute inset-0 bg-blue-500 bg-opacity-20 flex items-center justify-center">
                    <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center">
                      <span className="text-white text-sm">✓</span>
                    </div>
                  </div>
                )}
                <div className="absolute bottom-1 right-1 bg-black bg-opacity-60 text-white text-xs px-1 rounded">
                  {index + 1}
                </div>
              </div>
            ))}
          </div>

<div className="mt-4 flex items-center gap-4">
            <Badge variant="secondary">
              {selectedImages.length} of {images.length} images selected
            </Badge>
            <Badge variant="outline" className="bg-green-50 text-green-700">
              Brand: www.{domain}
            </Badge>
            <Badge variant="outline" className="bg-blue-50 text-blue-700">
              Smart Parsing: {images.length} count
            </Badge>
          </div>
        </CardContent>
      </Card>

{/* Generated Templates Preview */}
      {instantTemplates.length > 0 && (
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <ImageIcon className="w-5 h-5" />
              Generated Template Previews
              <Badge variant="secondary" className="ml-auto">
                {instantTemplates.length} templates ready
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between mb-6">
              <div className="flex gap-4">
                <Badge variant="outline" className="bg-green-50 text-green-700">
                  Brand: www.{domain}
                </Badge>
                <Badge variant="outline">
                  {selectedLayouts.length} Layout{selectedLayouts.length !== 1 ? "s" : ""}
                </Badge>
                <Badge variant="outline">{templates.length} Color Schemes</Badge>
                <Badge variant="outline" className="bg-purple-50 text-purple-700">
                  Smart Semantic Parsing
                </Badge>
              </div>

<Button
                onClick={async () => {
                  setIsDownloadingAll(true)
                  const titleCounts = new Map<string, number>()

for (let i = 0; i < instantTemplates.length; i++) {
                    const template = instantTemplates[i]

// Track duplicates
                    const titleKey = template.title.toLowerCase()
                    const currentCount = titleCounts.get(titleKey) || 0
                    titleCounts.set(titleKey, currentCount + 1)

// Generate SEO filename
                    const seoFilename = generateSEOFilename(
                      template.title,
                      template.domain,
                      template.template.name,
                      i,
                      currentCount,
                    )

// Download with SEO filename
                    const link = document.createElement("a")
                    link.download = seoFilename
                    link.href = template.canvasData
                    link.click()

await new Promise((resolve) => setTimeout(resolve, 50))
                  }
                  setIsDownloadingAll(false)
                }}
                disabled={isDownloadingAll}
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
              >
                {isDownloadingAll ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Downloading All...
                  </>
                ) : (
                  <>
                    <Download className="w-4 h-4 mr-2" />
                    SEO Download All {instantTemplates.length} Templates
                  </>
                )}
              </Button>
            </div>

{/* Group previews by layout */}
            {selectedLayouts.map((layoutId) => {
              const layoutPreviews = instantTemplates.filter((p) => p.layout === layoutId)
              const layout = templateLayouts.find((l) => l.id === layoutId)

if (layoutPreviews.length === 0) return null

return (
                <div key={layoutId} className="mb-8">
                  <div className="flex items-center gap-2 mb-4">
                    <h3 className="text-lg font-semibold">{layout?.name}</h3>
                    <Badge variant="outline">{layoutPreviews.length} templates</Badge>
                  </div>

<div className="grid grid-cols-4 gap-4">
                    {layoutPreviews.slice(0, 16).map((preview, index) => (
                      <div key={preview.id} className="space-y-3">
                        <div className="relative">
                          {preview.layout === "collage-4" && (
                            <PinterestCollageTemplate
                              id={preview.id}
                              title={preview.title}
                              imageUrls={preview.images}
                              template={preview.template}
                              domain={preview.domain}
                            />
                          )}
                          {preview.layout === "collage-3" && (
                            <PinterestCollage3Template
                              id={preview.id}
                              title={preview.title}
                              imageUrls={preview.images}
                              template={preview.template}
                              domain={preview.domain}
                            />
                          )}
                          {preview.layout === "collage-2" && (
                            <PinterestCollage2Template
                              id={preview.id}
                              title={preview.title}
                              imageUrls={preview.images}
                              template={preview.template}
                              domain={preview.domain}
                            />
                          )}
                          {preview.layout === "text-top" && (
                            <PinterestTextTopTemplate
                              id={preview.id}
                              title={preview.title}
                              imageUrl={preview.images[0]}
                              template={preview.template}
                              domain={preview.domain}
                            />
                          )}
                          {preview.layout === "standard" && (
                            <PinterestTemplate
                              id={preview.id}
                              title={preview.title}
                              imageUrl={preview.images[0]}
                              template={preview.template}
                              domain={preview.domain}
                            />
                          )}
                        </div>

{/* Download button below template */}
                        <Button
                          onClick={() => instantDownloadTemplate(preview, index)}
                          className="w-full"
                          size="sm"
                          variant="outline"
                        >
                          <Download className="w-3 h-3 mr-2" />
                          Download
                        </Button>

<div className="text-center">
                          <div className="text-xs text-gray-600">{preview.template.name}</div>
                          <div className="text-xs text-gray-400">#{index + 1}</div>
                        </div>
                      </div>
                    ))}

{layoutPreviews.length > 16 && (
                      <div className="col-span-full text-center py-4">
                        <Badge variant="outline">
                          +{layoutPreviews.length - 16} more templates (download all to get complete set)
                        </Badge>
                      </div>
                    )}
                  </div>
                </div>
              )
            })}
          </CardContent>
        </Card>
      )}
    </div>
  )
}

async function drawStandardTemplateCanvasPerfect(
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  img: HTMLImageElement | null,
  template: any,
  title: string,
  domain: string,
) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)

const imageHeight = canvas.height * 0.7
  const textHeight = canvas.height * 0.3

if (img) {
    const scaleX = canvas.width / img.width
    const scaleY = imageHeight / img.height
    const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
    const scaledHeight = img.height * scale
    const offsetX = (canvas.width - scaledWidth) / 2
    const offsetY = (imageHeight - scaledHeight) / 2

ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)

// Add brand watermark
    ctx.fillStyle = "white"
    ctx.font = "italic 600 28px 'Playfair Display', serif"
    ctx.textAlign = "right"
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)"
    ctx.shadowBlur = 4
    ctx.shadowOffsetX = 1
    ctx.shadowOffsetY = 1
    ctx.fillText(`www.${domain}`, canvas.width - 30, 60)
    ctx.shadowColor = "transparent"
    ctx.shadowBlur = 0
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0

// REMOVED: Count circle from image - only show in text section below
  } else {
    const colors = getGradientColors(template.id)
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, imageHeight)
    gradient.addColorStop(0, colors[0])
    gradient.addColorStop(1, colors[1])
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, canvas.width, imageHeight)
  }

drawPinterestTextSectionCanvas(ctx, canvas, template, title, domain, imageHeight, textHeight)
}

async function drawTextTopTemplateCanvasPerfect(
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  img: HTMLImageElement | null,
  template: any,
  title: string,
  domain: string,
) {
  ctx.clearRect(0, 0, canvas.width, canvas.height)

const textHeight = canvas.height * 0.3
  const imageHeight = canvas.height * 0.7
  const imageStartY = textHeight

drawPinterestTextSectionCanvas(ctx, canvas, template, title, domain, 0, textHeight)

if (img) {
    const scaleX = canvas.width / img.width
    const scaleY = imageHeight / img.height
    const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
    const scaledHeight = img.height * scale
    const offsetX = (canvas.width - scaledWidth) / 2
    const offsetY = imageStartY + (imageHeight - scaledHeight) / 2

ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)

// Add brand watermark on image
    ctx.fillStyle = "white"
    ctx.font = "italic 600 28px 'Playfair Display', serif"
    ctx.textAlign = "right"
    ctx.shadowColor = "rgba(0, 0, 0, 0.8)"
    ctx.shadowBlur = 4
    ctx.shadowOffsetX = 1
    ctx.shadowOffsetY = 1
    ctx.fillText(`www.${domain}`, canvas.width - 30, imageStartY + 60)
    ctx.shadowColor = "transparent"
    ctx.shadowBlur = 0
    ctx.shadowOffsetX = 0
    ctx.shadowOffsetY = 0
  } else {
    const colors = getGradientColors(template.id)
    const gradient = ctx.createLinearGradient(0, imageStartY, canvas.width, canvas.height)
    gradient.addColorStop(0, colors[0])
    gradient.addColorStop(1, colors[1])
    ctx.fillStyle = gradient
    ctx.fillRect(0, imageStartY, canvas.width, imageHeight)
  }
}

async function drawCollageTemplateCanvasPerfect(
  canvas: HTMLCanvasElement,
  ctx: CanvasRenderingContext2D,
  loadedImages: (HTMLImageElement | null)[],
  template: any,
  title: string,
  domain: string,
  layout: string,
) {
  // Clear canvas with white background
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, canvas.width, canvas.height)

const colors = getGradientColors(template.id)

if (layout === "collage-4") {
    // Perfect 4-image grid implementation
    const borderWidth = 8
    const imageWidth = (canvas.width - borderWidth) / 2
    const imageHeight = (canvas.height - borderWidth) / 2

const positions = [
      { x: 0, y: 0 },
      { x: imageWidth + borderWidth, y: 0 },
      { x: 0, y: imageHeight + borderWidth },
      { x: imageWidth + borderWidth, y: imageHeight + borderWidth },
    ]

for (let index = 0; index < 4; index++) {
      const pos = positions[index]

if (loadedImages[index]) {
        const img = loadedImages[index]!
        const scaleX = imageWidth / img.width
        const scaleY = imageHeight / img.height
        const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
        const scaledHeight = img.height * scale
        const offsetX = pos.x + (imageWidth - scaledWidth) / 2
        const offsetY = pos.y + (imageHeight - scaledHeight) / 2

ctx.save()
        ctx.beginPath()
        ctx.rect(pos.x, pos.y, imageWidth, imageHeight)
        ctx.clip()
        ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
        ctx.restore()
      } else {
        const gradient = ctx.createLinearGradient(pos.x, pos.y, pos.x + imageWidth, pos.y + imageHeight)
        gradient.addColorStop(0, colors[0])
        gradient.addColorStop(1, colors[1])
        ctx.fillStyle = gradient
        ctx.fillRect(pos.x, pos.y, imageWidth, imageHeight)
      }
    }

// Add text overlay
    const overlayWidth = canvas.width * 0.6
    const overlayHeight = canvas.height * 0.25
    const overlayX = (canvas.width - overlayWidth) / 2
    const overlayY = (canvas.height - overlayHeight) / 2

ctx.save()
    ctx.beginPath()
    ctx.roundRect(overlayX, overlayY, overlayWidth, overlayHeight, 24)
    ctx.clip()

const overlayGradient = ctx.createLinearGradient(
      overlayX,
      overlayY,
      overlayX + overlayWidth,
      overlayY + overlayHeight,
    )
    overlayGradient.addColorStop(0, colors[0])
    overlayGradient.addColorStop(1, colors[1])
    ctx.fillStyle = overlayGradient
    ctx.fillRect(overlayX, overlayY, overlayWidth, overlayHeight)

ctx.fillStyle = "rgba(0, 0, 0, 0.3)"
    ctx.fillRect(overlayX, overlayY, overlayWidth, overlayHeight)
    ctx.fillStyle = "rgba(255, 255, 255, 0.1)"
    ctx.fillRect(overlayX, overlayY, overlayWidth, overlayHeight)

ctx.restore()

drawCompactModernTextWithCircle(ctx, overlayX, overlayY, overlayWidth, overlayHeight, title, domain, colors)
  } else if (layout === "collage-3") {
    // 3-Image Layout: 1 large top (60%), 2 small bottom (40%)
    const borderWidth = 4
    const topHeight = canvas.height * 0.5
    const bottomHeight = canvas.height * 0.5
    const bottomWidth = canvas.width / 2

// Top large image
    if (loadedImages[0]) {
      const img = loadedImages[0]!
      const scaleX = canvas.width / img.width
      const scaleY = topHeight / img.height
      const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
      const scaledHeight = img.height * scale
      const offsetX = (canvas.width - scaledWidth) / 2
      const offsetY = (topHeight - scaledHeight) / 2

ctx.save()
      ctx.beginPath()
      ctx.rect(0, 0, canvas.width, topHeight)
      ctx.clip()
      ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
      ctx.restore()
    } else {
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, topHeight)
      gradient.addColorStop(0, colors[0])
      gradient.addColorStop(1, colors[1])
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, canvas.width, topHeight)
    }

// Bottom left image
    if (loadedImages[1]) {
      const img = loadedImages[1]!
      const scaleX = bottomWidth / img.width
      const scaleY = bottomHeight / img.height
      const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
      const scaledHeight = img.height * scale
      const offsetX = (bottomWidth - scaledWidth) / 2
      const offsetY = topHeight + (bottomHeight - scaledHeight) / 2

ctx.save()
      ctx.beginPath()
      ctx.rect(0, topHeight, bottomWidth, bottomHeight)
      ctx.clip()
      ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
      ctx.restore()
    } else {
      const gradient = ctx.createLinearGradient(0, topHeight, bottomWidth, canvas.height)
      gradient.addColorStop(0, colors[0])
      gradient.addColorStop(1, colors[1])
      ctx.fillStyle = gradient
      ctx.fillRect(0, topHeight, bottomWidth, bottomHeight)
    }

// Bottom right image
    if (loadedImages[2]) {
      const img = loadedImages[2]!
      const scaleX = bottomWidth / img.width
      const scaleY = bottomHeight / img.height
      const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
      const scaledHeight = img.height * scale
      const offsetX = bottomWidth + (bottomWidth - scaledWidth) / 2
      const offsetY = topHeight + (bottomHeight - scaledHeight) / 2

ctx.save()
      ctx.beginPath()
      ctx.rect(bottomWidth, topHeight, bottomWidth, bottomHeight)
      ctx.clip()
      ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
      ctx.restore()
    } else {
      const gradient = ctx.createLinearGradient(bottomWidth, topHeight, canvas.width, canvas.height)
      gradient.addColorStop(0, colors[0])
      gradient.addColorStop(1, colors[1])
      ctx.fillStyle = gradient
      ctx.fillRect(bottomWidth, topHeight, bottomWidth, bottomHeight)
    }

// Add white borders
    ctx.fillStyle = "white"
    ctx.fillRect(0, topHeight - borderWidth / 2, canvas.width, borderWidth) // Horizontal border
    ctx.fillRect(bottomWidth - borderWidth / 2, topHeight, borderWidth, bottomHeight) // Vertical border

// Central Text Overlay for 3-image - Perfect center alignment
    const overlayWidth = canvas.width * 0.7
    const overlayHeight = canvas.height * 0.25
    const overlayX = (canvas.width - overlayWidth) / 2
    const overlayY = (canvas.height - overlayHeight) / 2 + 20 // Slight adjustment for perfect visual center

ctx.save()
    ctx.beginPath()
    ctx.roundRect(overlayX, overlayY, overlayWidth, overlayHeight, 20)
    ctx.clip()

ctx.restore()

drawCompactModernTextWithCircle(ctx, overlayX, overlayY, overlayWidth, overlayHeight, title, domain, colors)
  } else if (layout === "collage-2") {
    // 2-Image Layout: Stacked vertically (50% each)
    const borderWidth = 4
    const imageHeight = canvas.height / 2

// Top image
    if (loadedImages[0]) {
      const img = loadedImages[0]!
      const scaleX = canvas.width / img.width
      const scaleY = imageHeight / img.height
      const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
      const scaledHeight = img.height * scale
      const offsetX = (canvas.width - scaledWidth) / 2
      const offsetY = (imageHeight - scaledHeight) / 2

ctx.save()
      ctx.beginPath()
      ctx.rect(0, 0, canvas.width, imageHeight)
      ctx.clip()
      ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
      ctx.restore()
    } else {
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, imageHeight)
      gradient.addColorStop(0, colors[0])
      gradient.addColorStop(1, colors[1])
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, canvas.width, imageHeight)
    }

// Bottom image
    if (loadedImages[1]) {
      const img = loadedImages[1]!
      const scaleX = canvas.width / img.width
      const scaleY = imageHeight / img.height
      const scale = Math.max(scaleX, scaleY)

const scaledWidth = img.width * scale
      const scaledHeight = img.height * scale
      const offsetX = (canvas.width - scaledWidth) / 2
      const offsetY = imageHeight + (imageHeight - scaledHeight) / 2

ctx.save()
      ctx.beginPath()
      ctx.rect(0, imageHeight, canvas.width, imageHeight)
      ctx.clip()
      ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight)
      ctx.restore()
    } else {
      const gradient = ctx.createLinearGradient(0, imageHeight, canvas.width, canvas.height)
      gradient.addColorStop(0, colors[0])
      gradient.addColorStop(1, colors[1])
      ctx.fillStyle = gradient
      ctx.fillRect(0, imageHeight, canvas.width, imageHeight)
    }

// Add white border between images
    ctx.fillStyle = "white"
    ctx.fillRect(0, imageHeight - borderWidth / 2, canvas.width, borderWidth)

// Central Text Overlay for 2-image
    const overlayWidth = canvas.width * 0.75
    const overlayHeight = canvas.height * 0.25
    const overlayX = (canvas.width - overlayWidth) / 2
    const overlayY = (canvas.height - overlayHeight) / 2

ctx.save()
    ctx.beginPath()
    ctx.roundRect(overlayX, overlayY, overlayWidth, overlayHeight, 20)
    ctx.clip()

ctx.restore()

drawCompactModernTextWithCircle(ctx, overlayX, overlayY, overlayWidth, overlayHeight, title, domain, colors)
  }
}
[V0_FILE]typescriptreact:file="app/api/publish-to-wordpress/route.ts" isFixed="true" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"

interface PublishPost {
  title: string
  description: string
  imageData: string
  slug: string
  categoryId?: string
}

interface PublishResult {
  success: boolean
  title: string
  url?: string
  error?: string
  errorDetails?: string
  processingTime: number
  featuredMediaId?: number
  imageSize?: number
  postIndex: number
}

// Enhanced image upload with multiple retry strategies
async function uploadImageWithRetries(
  imageData: string,
  title: string,
  slug: string,
  baseUrl: string,
  authHeader: string,
  maxRetries = 5,
): Promise<{ success: boolean; imageUrl?: string; mediaId?: number; error?: string; size?: number }> {
  console.log(`📸 Starting mandatory image upload for: ${title}`)

// Convert base64 to buffer - NO COMPRESSION, FULL QUALITY
  const base64Data = imageData.replace(/^data:image\/[a-z]+;base64,/, "")
  const imageBuffer = Buffer.from(base64Data, "base64")
  const imageSize = imageBuffer.length

console.log(`📊 Image size: ${Math.round(imageSize / 1024)}KB (full quality, no compression)`)

// Multiple upload strategies with retries
  const uploadStrategies = [
    {
      name: "Standard Form Upload",
      execute: async () => {
        const formData = new FormData()
        const blob = new Blob([imageBuffer], { type: "image/png" })
        formData.append("file", blob, `${slug}-pinterest-template.png`)
        formData.append("title", title)
        formData.append("alt_text", title)
        formData.append("caption", `Pinterest template for: ${title}`)

return await fetch(`${baseUrl}/wp-json/wp/v2/media`, {
          method: "POST",
          headers: {
            Authorization: authHeader,
          },
          body: formData,
        })
      },
    },
    {
      name: "Base64 Upload",
      execute: async () => {
        const uploadData = {
          title: title,
          alt_text: title,
          caption: `Pinterest template for: ${title}`,
          description: `High-quality Pinterest template generated for: ${title}`,
          media_type: "image",
          mime_type: "image/png",
          file: base64Data,
          filename: `${slug}-pinterest-template.png`,
        }

return await fetch(`${baseUrl}/wp-json/wp/v2/media`, {
          method: "POST",
          headers: {
            Authorization: authHeader,
            "Content-Type": "application/json",
          },
          body: JSON.stringify(uploadData),
        })
      },
    },
    {
      name: "Chunked Upload",
      execute: async () => {
        // For large images, try chunked upload
        const chunkSize = 1024 * 1024 // 1MB chunks
        if (imageSize > chunkSize) {
          console.log(`📦 Using chunked upload for large image (${Math.round(imageSize / 1024)}KB)`)
        }

const formData = new FormData()
        const blob = new Blob([imageBuffer], { type: "image/png" })
        formData.append("file", blob, `${slug}-pinterest-hq.png`)
        formData.append("title", `${title} - High Quality Pinterest Template`)
        formData.append("alt_text", title)

return await fetch(`${baseUrl}/wp-json/wp/v2/media`, {
          method: "POST",
          headers: {
            Authorization: authHeader,
            "Content-Disposition": `attachment; filename="${slug}-pinterest-hq.png"`,
          },
          body: formData,
        })
      },
    },
  ]

let lastError = ""

// Try each strategy with retries
  for (let strategyIndex = 0; strategyIndex < uploadStrategies.length; strategyIndex++) {
    const strategy = uploadStrategies[strategyIndex]
    console.log(`🔄 Trying strategy ${strategyIndex + 1}: ${strategy.name}`)

for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        console.log(`📤 Upload attempt ${attempt}/${maxRetries} using ${strategy.name}`)

const response = await strategy.execute()

if (response.ok) {
          const mediaData = await response.json()
          console.log(`✅ Image upload successful with ${strategy.name} on attempt ${attempt}`)
          console.log(`📷 Media ID: ${mediaData.id}, URL: ${mediaData.source_url}`)

return {
            success: true,
            imageUrl: mediaData.source_url,
            mediaId: mediaData.id,
            size: imageSize,
          }
        } else {
          const errorText = await response.text()
          const errorMsg = `${strategy.name} failed (attempt ${attempt}): ${response.status} - ${errorText}`
          console.log(`❌ ${errorMsg}`)
          lastError = errorMsg

// Parse WordPress error for specific handling
          try {
            const errorData = JSON.parse(errorText)
            if (errorData.code === "rest_upload_unknown_error") {
              console.log(`🔧 WordPress upload directory issue detected, trying next strategy...`)
              break // Skip remaining attempts for this strategy
            }
            if (errorData.code === "rest_upload_file_too_big") {
              console.log(`📏 File too big error, trying chunked upload...`)
              break // Skip to chunked upload strategy
            }
          } catch (parseError) {
            // Continue with retries
          }

// Wait before retry (exponential backoff)
          if (attempt < maxRetries) {
            const waitTime = Math.min(1000 * Math.pow(2, attempt - 1), 5000) // Max 5 seconds
            console.log(`⏳ Waiting ${waitTime}ms before retry...`)
            await new Promise((resolve) => setTimeout(resolve, waitTime))
          }
        }
      } catch (networkError) {
        const errorMsg = `${strategy.name} network error (attempt ${attempt}): ${networkError}`
        console.log(`❌ ${errorMsg}`)
        lastError = errorMsg

if (attempt < maxRetries) {
          const waitTime = Math.min(2000 * attempt, 8000) // Max 8 seconds for network errors
          console.log(`⏳ Network error, waiting ${waitTime}ms before retry...`)
          await new Promise((resolve) => setTimeout(resolve, waitTime))
        }
      }
    }
  }

console.log(`❌ All image upload strategies failed after ${maxRetries} attempts each`)
  return {
    success: false,
    error: `All upload strategies failed. Last error: ${lastError}`,
    size: imageSize,
  }
}

export async function POST(request: NextRequest) {
  const startTime = Date.now()

try {
    const body = await request.json()
    const { wordpressUrl, username, password, post, categoryId, postIndex = 0 } = body

if (!wordpressUrl || !username || !password || !post) {
      return NextResponse.json(
        {
          success: false,
          error: "Missing required fields",
        },
        { status: 400 },
      )
    }

// MANDATORY: Check if image data exists
    if (!post.imageData) {
      console.log(`❌ No image data provided for post: ${post.title}`)
      return NextResponse.json({
        success: false,
        result: {
          success: false,
          title: post.title,
          error: "No image data provided - post skipped",
          errorDetails: "Pinterest posts require images. This post was skipped because no image data was provided.",
          processingTime: Date.now() - startTime,
          postIndex,
        },
      })
    }

console.log(`🚀 Publishing post ${postIndex + 1}: ${post.title} (IMAGE MANDATORY)`)

const baseUrl = wordpressUrl.replace(/\/$/, "")
    const authHeader = `Basic ${Buffer.from(`${username}:${password}`).toString("base64")}`

const postStartTime = Date.now()

try {
      // STEP 1: MANDATORY HIGH-QUALITY IMAGE UPLOAD
      console.log(`📸 MANDATORY: Uploading high-quality image for: ${post.title}`)

const imageUploadResult = await uploadImageWithRetries(
        post.imageData,
        post.title,
        post.slug,
        baseUrl,
        authHeader,
        5, // 5 retries per strategy
      )

// CRITICAL: If image upload fails, DO NOT create the post
      if (!imageUploadResult.success) {
        console.log(`❌ CRITICAL: Image upload failed for "${post.title}" - POST NOT CREATED`)
        return NextResponse.json({
          success: false,
          result: {
            success: false,
            title: post.title,
            error: "Image upload failed - post not created",
            errorDetails: `Image upload is mandatory for Pinterest posts. Error: ${imageUploadResult.error}`,
            processingTime: Date.now() - postStartTime,
            imageSize: imageUploadResult.size,
            postIndex,
          },
        })
      }

console.log(`✅ MANDATORY IMAGE UPLOADED: ${imageUploadResult.imageUrl}`)
      console.log(`📊 Image size: ${Math.round((imageUploadResult.size || 0) / 1024)}KB (full quality)`)

// STEP 2: Create post content with the uploaded image
      let postContent = ""

// Add the high-quality image at the top of the content
      postContent += `<div style="text-align: center; margin-bottom: 30px;">
        <img src="${imageUploadResult.imageUrl}" alt="${post.title}" style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);" />
      </div>`

// Add description content
      postContent += `<div style="font-size: 18px; line-height: 1.8; color: #333; margin-top: 20px;">
        ${post.description.replace(/\n/g, "<br>")}
      </div>`

// STEP 3: Create WordPress post with the uploaded image
      const postData: any = {
        title: post.title,
        content: postContent,
        status: "publish",
        slug: post.slug,
        // 🎯 USE FULL DESCRIPTION AS EXCERPT (80-100 words total)
        excerpt: post.description, // Full description without truncation
        featured_media: imageUploadResult.mediaId, // Set as featured image too
        meta: {
          pinterest_template: "true",
          image_quality: "high",
          template_type: "pinterest_branded",
          full_content_as_excerpt: "true", // Flag to indicate we're using full content
        },
      }

// Add category if specified and not "none"
      if (categoryId && categoryId !== "none") {
        postData.categories = [Number.parseInt(categoryId)]
        console.log(`📁 Adding to category: ${categoryId}`)
      }

console.log(`📝 Creating WordPress post with mandatory high-quality image...`)
      console.log(`📄 Using full description as excerpt (${post.description.length} characters)`)

const postResponse = await fetch(`${baseUrl}/wp-json/wp/v2/posts`, {
        method: "POST",
        headers: {
          Authorization: authHeader,
          "Content-Type": "application/json",
        },
        body: JSON.stringify(postData),
      })

const processingTime = Date.now() - postStartTime

if (postResponse.ok) {
        const postResult = await postResponse.json()

console.log(`✅ POST PUBLISHED SUCCESSFULLY with mandatory high-quality image: ${postResult.link}`)
        console.log(`📷 Featured image ID: ${imageUploadResult.mediaId}`)
        console.log(`🎨 Image quality: FULL (no compression)`)
        console.log(`📄 Excerpt: Full description used (${post.description.length} chars)`)

return NextResponse.json({
          success: true,
          result: {
            success: true,
            title: post.title,
            url: postResult.link,
            processingTime,
            featuredMediaId: imageUploadResult.mediaId,
            imageUrl: imageUploadResult.imageUrl,
            imageSize: imageUploadResult.size,
            postIndex,
            categoryId: categoryId !== "none" ? categoryId : null,
            imageQuality: "full_quality_no_compression",
            excerptLength: post.description.length,
            excerptType: "full_description",
          },
          summary: {
            total: 1,
            successful: 1,
            failed: 0,
            successRate: 100,
            totalTime: Date.now() - startTime,
            environment: "mandatory-image-full-quality",
            imageUploadStrategy: "multi-retry-with-fallbacks",
            excerptStrategy: "full_description_as_excerpt",
          },
        })
      } else {
        const errorText = await postResponse.text()
        console.log(`❌ Post creation failed: ${postResponse.status} - ${errorText}`)

// If post creation fails but image was uploaded, we should note this
        console.log(`⚠️ Image was uploaded successfully but post creation failed`)
        console.log(`📷 Uploaded image URL: ${imageUploadResult.imageUrl}`)

return NextResponse.json({
          success: false,
          result: {
            success: false,
            title: post.title,
            error: `Post creation failed: ${postResponse.status}`,
            errorDetails: errorText,
            processingTime,
            imageSize: imageUploadResult.size,
            imageUrl: imageUploadResult.imageUrl, // Image was uploaded successfully
            postIndex,
            note: "Image was uploaded successfully but post creation failed",
          },
        })
      }
    } catch (error) {
      const processingTime = Date.now() - postStartTime
      console.log(`❌ Error processing post:`, error)

return NextResponse.json({
        success: false,
        result: {
          success: false,
          title: post.title,
          error: error instanceof Error ? error.message : "Unknown error",
          errorDetails: error instanceof Error ? error.stack : "No details available",
          processingTime,
          postIndex,
        },
      })
    }
  } catch (error) {
    console.error("❌ CRITICAL: Post publishing error:", error)
    return NextResponse.json(
      {
        success: false,
        error: "Publishing failed",
        details: error instanceof Error ? error.message : "Unknown error",
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/advanced-pinterest-generator.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import {
  Loader2,
  Palette,
  CheckSquare,
  Layout,
  Sparkles,
  AlertCircle,
  CheckCircle,
  Upload,
  Play,
  Clock,
  Zap,
  FileText,
} from "lucide-react"
import { PinterestTemplateGenerator } from "@/components/pinterest-template-generator"
import { WordPressSiteManager } from "@/components/wordpress-site-manager"

interface GeneratedContent {
  id: number
  title: string
  description: string
  slug: string
  originalUrl: string
  apiKeyUsed?: string | number
}

interface WordPressCategory {
  id: number
  name: string
  slug: string
  count: number
}

export function AdvancedPinterestGenerator() {
  const [url, setUrl] = useState("https://example.com/ideas/stunning-farmhouse-kitchen-ideas/")
  const [isExtracting, setIsExtracting] = useState(false)
  const [extractedData, setExtractedData] = useState<{
    title: string
    images: string[]
    domain: string
  } | null>(null)
  const [error, setError] = useState("")

// AI Content Generation
  const [isGeneratingContent, setIsGeneratingContent] = useState(false)
  const [generatedContent, setGeneratedContent] = useState<GeneratedContent[]>([])
  const [contentCount, setContentCount] = useState(25)
  const [contentProgress, setContentProgress] = useState(0)
  const [apiKeyStats, setApiKeyStats] = useState<{ [key: string]: number }>({})

// Pinterest Templates
  const [generatedTemplates, setGeneratedTemplates] = useState<any[]>([])

// WordPress Publishing
  const [wordpressUrl, setWordpressUrl] = useState("")
  const [wordpressUsername, setWordpressUsername] = useState("")
  const [wordpressPassword, setWordpressPassword] = useState("")
  const [isPublishing, setIsPublishing] = useState(false)
  const [publishResults, setPublishResults] = useState<any>(null)
  const [publishProgress, setPublishProgress] = useState(0)

// WordPress Categories
  const [categories, setCategories] = useState<WordPressCategory[]>([])
  const [selectedCategory, setSelectedCategory] = useState<string>("none")

const extractDomain = (url: string): string => {
    try {
      const urlObj = new URL(url)
      return urlObj.hostname.replace("www.", "")
    } catch {
      return ""
    }
  }

const generateBaseSlug = (url: string): string => {
    try {
      const urlObj = new URL(url)
      const pathname = urlObj.pathname.replace(/\/$/, "")
      const pathParts = pathname.split("/").filter((part) => part.length > 0)
      if (pathParts.length > 0) {
        return pathParts[pathParts.length - 1]
      }
      return "home"
    } catch {
      return "home"
    }
  }

// Step 1: Extract content from URL
  const handleExtract = async () => {
    if (!url) return

setIsExtracting(true)
    setError("")
    setExtractedData(null)
    setGeneratedContent([])
    setGeneratedTemplates([])
    setApiKeyStats({})
    setCategories([])
    setSelectedCategory("none")
    setPublishResults(null)

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

if (!response.ok) {
        throw new Error("Failed to extract content")
      }

const data = await response.json()
      const domain = extractDomain(url)

setExtractedData({
        ...data,
        domain: domain,
      })
    } catch (err) {
      setError("Failed to extract content from the URL. Please check the URL and try again.")
      console.error(err)
    } finally {
      setIsExtracting(false)
    }
  }

// Step 2: Generate AI content when count is selected
  const handleContentCountSelect = async (count: number) => {
    setContentCount(count)

if (!extractedData?.title || !extractedData?.images) return

setIsGeneratingContent(true)
    setGeneratedContent([])
    setContentProgress(0)
    setApiKeyStats({})
    setError("")

try {
      const progressInterval = setInterval(() => {
        setContentProgress((prev) => Math.min(prev + 2, 95))
      }, 500)

const response = await fetch("/api/generate-content", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          originalTitle: extractedData.title,
          originalUrl: url,
          count: count,
          imageCount: extractedData.images.length,
        }),
      })

clearInterval(progressInterval)
      setContentProgress(100)

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

const data = await response.json()
      setGeneratedContent(data.content)

const stats: { [key: string]: number } = {}
      data.content.forEach((item: GeneratedContent) => {
        const key = item.apiKeyUsed?.toString() || "unknown"
        stats[key] = (stats[key] || 0) + 1
      })
      setApiKeyStats(stats)
    } catch (err) {
      setError("Failed to generate AI content. Please try again.")
      console.error(err)
    } finally {
      setIsGeneratingContent(false)
    }
  }

// Simplified single post publisher
  const publishSinglePost = async (template: any, postIndex: number) => {
    const baseSlug = generateBaseSlug(url)

const postToPublish = {
      title: template.title,
      description: template.description,
      imageData: template.canvasData,
      slug: `${baseSlug}-${postIndex + 2}`,
      categoryId: selectedCategory,
    }

const response = await fetch("/api/publish-to-wordpress", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        wordpressUrl,
        username: wordpressUsername,
        password: wordpressPassword,
        post: postToPublish,
        categoryId: selectedCategory,
        postIndex,
      }),
    })

if (!response.ok) {
      const errorData = await response.json()
      throw new Error(errorData.error || "Failed to publish post")
    }

return await response.json()
  }

// Ultra-fast batch publishing with parallel processing
  const handlePublish = async () => {
    if (!wordpressUrl || !wordpressUsername || !wordpressPassword || generatedTemplates.length === 0) {
      return
    }

setIsPublishing(true)
    setPublishResults(null)
    setPublishProgress(0)
    setError("")

try {
      console.log(`🚀 Ultra-fast batch publishing ${generatedTemplates.length} posts...`)

const allResults: any[] = []
      let totalSuccessful = 0
      let totalFailed = 0

// Process in batches of 5 for optimal speed without overwhelming the server
      const batchSize = 5
      const batches = []

for (let i = 0; i < generatedTemplates.length; i += batchSize) {
        batches.push(generatedTemplates.slice(i, i + batchSize))
      }

let processedCount = 0

for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) {
        const batch = batches[batchIndex]

// Process batch in parallel
        const batchPromises = batch.map(async (template, indexInBatch) => {
          const globalIndex = batchIndex * batchSize + indexInBatch
          try {
            const result = await publishSinglePost(template, globalIndex)

if (result.result.success) {
              totalSuccessful++
              console.log(`✅ Post ${globalIndex + 1} published: ${result.result.url}`)
            } else {
              totalFailed++
              console.log(`❌ Post ${globalIndex + 1} failed: ${result.result.error}`)
            }

return result.result
          } catch (postError) {
            console.error(`❌ Post ${globalIndex + 1} failed:`, postError)
            totalFailed++

return {
              success: false,
              title: template.title,
              error: postError instanceof Error ? postError.message : "Unknown error",
              postIndex: globalIndex,
            }
          }
        })

// Wait for current batch to complete
        const batchResults = await Promise.all(batchPromises)
        allResults.push(...batchResults)

processedCount += batch.length
        const progress = (processedCount / generatedTemplates.length) * 100
        setPublishProgress(progress)

// Small delay between batches to prevent server overload
        if (batchIndex < batches.length - 1) {
          await new Promise((resolve) => setTimeout(resolve, 500)) // 0.5 second between batches
        }
      }

const successRate = Math.round((totalSuccessful / generatedTemplates.length) * 100)

setPublishResults({
        success: true,
        summary: {
          total: generatedTemplates.length,
          successful: totalSuccessful,
          failed: totalFailed,
          successRate,
          environment: "vercel-ultra-fast-batch",
          publishingMethod: "Ultra-fast batch processing (5 parallel posts per batch)",
        },
        results: allResults,
      })

setPublishProgress(100)
      console.log(
        `🎉 Ultra-fast publishing complete: ${totalSuccessful}/${generatedTemplates.length} successful (${successRate}%)`,
      )
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred"
      setError(`Failed to publish to WordPress: ${errorMessage}`)
      console.error("Publishing error:", err)
    } finally {
      setIsPublishing(false)
    }
  }

return (
    <div className="space-y-8">
      {/* Step 1: Extract Content & Images */}
      <Card className="shadow-lg">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Palette className="w-5 h-5" />
            Step 1: Extract Content & Images from URL
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex gap-2">
            <Input
              placeholder="Enter WordPress post URL to scrape..."
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              className="flex-1"
            />
            <Button onClick={handleExtract} disabled={isExtracting}>
              {isExtracting ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Extracting...
                </>
              ) : (
                "Extract Content & Images"
              )}
            </Button>
          </div>

{error && (
            <div className="p-3 bg-red-50 border border-red-200 rounded-md text-red-700 text-sm flex items-center gap-2">
              <AlertCircle className="w-4 h-4" />
              {error}
            </div>
          )}

{extractedData && (
            <div className="bg-green-50 p-4 rounded-lg">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <h4 className="font-semibold text-green-800">Title Extracted</h4>
                  <p className="text-sm text-green-700">{extractedData.title}</p>
                </div>
                <div>
                  <h4 className="font-semibold text-green-800">Images Found</h4>
                  <Badge variant="secondary">{extractedData.images.length} images</Badge>
                </div>
                <div>
                  <h4 className="font-semibold text-green-800">Domain</h4>
                  <Badge variant="outline">www.{extractedData.domain}</Badge>
                </div>
              </div>
            </div>
          )}
        </CardContent>
      </Card>

{/* Step 2: AI Content Generation */}
      {extractedData && (
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="w-5 h-5" />
              Step 2: AI Content Generation
              <Badge variant="outline" className="ml-auto bg-blue-50 text-blue-700">
                Multi-API Fallback Active
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <label className="block text-sm font-medium mb-3">Select Number of Content Variations to Generate</label>
              <div className="flex gap-2 flex-wrap">
                {[10, 25, 50, 100, 250, 500].map((count) => (
                  <Button
                    key={count}
                    variant={contentCount === count && generatedContent.length > 0 ? "default" : "outline"}
                    size="sm"
                    onClick={() => handleContentCountSelect(count)}
                    disabled={isGeneratingContent}
                    className={
                      contentCount === count && generatedContent.length > 0 ? "bg-green-600 hover:bg-green-700" : ""
                    }
                  >
                    {isGeneratingContent && contentCount === count ? (
                      <Loader2 className="w-3 h-3 mr-1 animate-spin" />
                    ) : contentCount === count && generatedContent.length > 0 ? (
                      <CheckCircle className="w-3 h-3 mr-1" />
                    ) : null}
                    {count}
                  </Button>
                ))}
              </div>
            </div>

{isGeneratingContent && (
              <div className="space-y-2">
                <div className="w-full bg-gray-200 rounded-full h-2">
                  <div
                    className="bg-gradient-to-r from-blue-500 to-purple-500 h-2 rounded-full transition-all duration-300"
                    style={{ width: `${contentProgress}%` }}
                  />
                </div>
                <div className="text-sm text-center text-gray-600">
                  Generating {contentCount} content variations... {contentProgress}%
                </div>
              </div>
            )}

{generatedContent.length > 0 && (
              <div className="bg-blue-50 p-4 rounded-lg">
                <div className="flex items-center gap-2 mb-3">
                  <CheckSquare className="w-4 h-4 text-blue-600" />
                  <span className="font-medium text-blue-800">
                    {generatedContent.length} AI-optimized content variations generated!
                  </span>
                </div>

{/* Content Length Info */}
                <div className="bg-white p-3 rounded border mb-4">
                  <div className="flex items-center gap-2 mb-2">
                    <FileText className="w-4 h-4 text-blue-600" />
                    <span className="font-medium text-blue-800">Content Length Analysis</span>
                  </div>
                  <div className="grid grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="text-blue-700">Average length:</span>
                      <div className="font-medium">
                        {Math.round(
                          generatedContent.reduce((sum, content) => sum + content.description.length, 0) /
                            generatedContent.length,
                        )}{" "}
                        characters
                      </div>
                    </div>
                    <div>
                      <span className="text-blue-700">Excerpt strategy:</span>
                      <div className="font-medium text-green-600">Full description (80-100 words)</div>
                    </div>
                  </div>
                  <div className="text-xs text-blue-600 mt-2">
                    ✅ <strong>Full content as excerpt:</strong> All 80-100 words will be used as WordPress excerpt
                  </div>
                </div>

{Object.keys(apiKeyStats).length > 0 && (
                  <div className="mb-4">
                    <h5 className="text-sm font-medium text-blue-800 mb-2">API Usage Statistics:</h5>
                    <div className="flex gap-2 flex-wrap">
                      {Object.entries(apiKeyStats).map(([key, count]) => (
                        <Badge key={key} variant="outline" className="bg-white">
                          {key === "fallback" ? "Fallback" : `API ${key}`}: {count}
                        </Badge>
                      ))}
                    </div>
                  </div>
                )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-40 overflow-y-auto">
                  {generatedContent.slice(0, 4).map((content, index) => (
                    <div key={content.id} className="bg-white p-3 rounded border">
                      <div className="flex items-center gap-2 mb-1">
                        <h5 className="font-medium text-sm text-blue-800 flex-1">{content.title}</h5>
                        <Badge variant="outline" className="text-xs">
                          {content.apiKeyUsed === "fallback" ? "FB" : `API${content.apiKeyUsed}`}
                        </Badge>
                      </div>
                      <p className="text-xs text-gray-600 line-clamp-2">{content.description}</p>
                      <div className="text-xs text-gray-500 mt-1">{content.description.length} chars</div>
                    </div>
                  ))}
                </div>
                {generatedContent.length > 4 && (
                  <p className="text-sm text-blue-600 mt-2">+{generatedContent.length - 4} more variations generated</p>
                )}
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* Step 3: Pinterest Template Generation */}
      {generatedContent.length > 0 && extractedData && (
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Layout className="w-5 h-5" />
              Step 3: Generate Pinterest Templates
            </CardTitle>
          </CardHeader>
          <CardContent>
            <PinterestTemplateGenerator
              title={extractedData.title}
              images={extractedData.images}
              domain={extractedData.domain}
              generatedContent={generatedContent}
              onTemplatesGenerated={(templates) => {
                setGeneratedTemplates(templates)
              }}
            />
          </CardContent>
        </Card>
      )}

{/* Step 4: WordPress Site Selection */}
      {generatedContent.length > 0 && (
        <WordPressSiteManager
          onSiteSelected={(site, categories) => {
            setWordpressUrl(site.url)
            setWordpressUsername(site.username)
            setWordpressPassword(site.applicationPassword || site.password)
            setCategories(categories)
            setSelectedCategory("none")
          }}
          onCategorySelected={(categoryId) => {
            setSelectedCategory(categoryId)
          }}
          selectedSiteId=""
          selectedCategoryId={selectedCategory}
        />
      )}

{/* Step 5: Ultra-Fast Batch Publishing */}
      {generatedTemplates.length > 0 && wordpressUrl && wordpressUsername && wordpressPassword && (
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Upload className="w-5 h-5" />
              Step 5: Publish to WordPress
              <Badge variant="outline" className="ml-auto bg-green-50 text-green-700">
                <Zap className="w-3 h-3 mr-1" />
                Ultra-Fast Batch
              </Badge>
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* Category Selection Display */}
            {categories.length > 0 && (
              <div className="bg-blue-50 p-3 rounded-lg">
                <div className="flex items-center justify-between">
                  <span className="text-blue-700 font-medium">Selected Category:</span>
                  <Badge variant="outline" className="bg-white">
                    {selectedCategory === "none"
                      ? "No Category (Default)"
                      : categories.find((cat) => cat.id.toString() === selectedCategory)?.name || "Unknown"}
                  </Badge>
                </div>
              </div>
            )}

{/* Enhanced Mandatory Image Publishing Info */}
            <div className="bg-gradient-to-r from-red-50 to-orange-50 p-4 rounded-lg border border-red-200">
              <h4 className="font-medium text-red-800 mb-2">🚨 MANDATORY High-Quality Image Publishing</h4>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span className="text-red-700">Posts to publish:</span>
                  <div className="font-medium">{generatedTemplates.length} posts</div>
                </div>
                <div>
                  <span className="text-red-700">Image requirement:</span>
                  <div className="font-medium text-red-600">MANDATORY (no post without image)</div>
                </div>
                <div>
                  <span className="text-red-700">Image quality:</span>
                  <div className="font-medium">Full quality (no compression)</div>
                </div>
                <div>
                  <span className="text-red-700">Excerpt strategy:</span>
                  <div className="font-medium text-green-600">Full description (80-100 words)</div>
                </div>
              </div>
              <div className="mt-3 text-xs text-red-600 space-y-1">
                <div>
                  🚨 <strong>MANDATORY IMAGES:</strong> Posts without successful image upload will be SKIPPED
                </div>
                <div>
                  🎨 <strong>FULL QUALITY:</strong> No compression or quality loss (original PNG quality)
                </div>
                <div>
                  📄 <strong>FULL EXCERPT:</strong> Complete 80-100 word description used as excerpt
                </div>
                <div>
                  📝 <strong>CONTENT + FEATURED:</strong> Image in content AND set as featured image
                </div>
                <div>
                  ⚡ <strong>FAIL-SAFE:</strong> If image fails, post is skipped (no valueless posts)
                </div>
              </div>
            </div>

{/* Publish Button */}
            <div className="flex justify-center">
              <Button
                onClick={handlePublish}
                disabled={isPublishing}
                size="lg"
                className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white px-12 py-4 text-lg"
              >
                {isPublishing ? (
                  <>
                    <Loader2 className="w-5 h-5 mr-3 animate-spin" />
                    Publishing Batch {Math.ceil((publishProgress / 100) * (generatedTemplates.length / 5))}/
                    {Math.ceil(generatedTemplates.length / 5)}... {publishProgress.toFixed(0)}%
                  </>
                ) : (
                  <>
                    <Play className="w-5 h-5 mr-3" />
                    Ultra-Fast Publish All {generatedTemplates.length} Posts
                  </>
                )}
              </Button>
            </div>

{/* Publishing Progress */}
            {isPublishing && (
              <div className="space-y-3">
                <div className="w-full bg-gray-200 rounded-full h-3">
                  <div
                    className="bg-gradient-to-r from-green-500 to-blue-500 h-3 rounded-full transition-all duration-300"
                    style={{ width: `${publishProgress}%` }}
                  />
                </div>
                <div className="text-sm text-center text-gray-600">
                  Ultra-fast batch publishing... Batch{" "}
                  {Math.ceil((publishProgress / 100) * (generatedTemplates.length / 5))}/
                  {Math.ceil(generatedTemplates.length / 5)} ({publishProgress.toFixed(0)}%)
                </div>
              </div>
            )}

{/* Publishing Results */}
            {publishResults && (
              <div className="bg-green-50 p-4 rounded-lg">
                <h4 className="font-medium text-green-800 mb-3 flex items-center gap-2">
                  <CheckCircle className="w-4 h-4" />
                  Ultra-Fast Batch Publishing Complete!
                </h4>

<div className="grid grid-cols-3 gap-4 mb-4">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-green-600">{publishResults.summary.successful}</div>
                    <div className="text-sm text-green-700">Successful</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-red-600">{publishResults.summary.failed}</div>
                    <div className="text-sm text-red-700">Failed</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600">{publishResults.summary.successRate}%</div>
                    <div className="text-sm text-blue-700">Success Rate</div>
                  </div>
                </div>

<div className="bg-white p-3 rounded border mt-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Clock className="w-4 h-4 text-gray-600" />
                    <span className="font-medium text-gray-800">
                      Publishing Method: {publishResults.summary.publishingMethod}
                    </span>
                  </div>
                  <div className="text-sm text-gray-600">
                    ✅ Full description as excerpt • ⚡ 5 parallel posts per batch • 🎨 Full image quality • 📁 Category
                    support
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  )
}</article></body></html>