import React, { useState, useEffect } from 'react'; import { Upload, Type, Palette, Search, Menu, X, ArrowLeft, Heart, Star, ArrowRight, Wand2, Loader, MessageCircle, Mail, Phone, MapPin, Send, Info, Truck, AlertTriangle, Gift, Sparkles } from 'lucide-react'; // --- SEO HELPER FUNCTION --- const updateSEO = (title, description, structuredData) => { // Update Document Title document.title = title; // Update Meta Description let metaDesc = document.querySelector('meta[name="description"]'); if (!metaDesc) { metaDesc = document.createElement('meta'); metaDesc.name = "description"; document.head.appendChild(metaDesc); } metaDesc.content = description; // Add Google Structured Data (Schema.org JSON-LD) let scriptTag = document.getElementById('seo-structured-data'); if (!scriptTag) { scriptTag = document.createElement('script'); scriptTag.id = 'seo-structured-data'; scriptTag.type = 'application/ld+json'; document.head.appendChild(scriptTag); } if (structuredData) { scriptTag.textContent = JSON.stringify(structuredData); } }; // --- MOCK DATA --- const categories = [ "Mugs Collection", "Keychains", "Photo Gifts", "Drinkware", "Office & Desk", "T-Shirt Printing", "Accessories" ]; // Home page par dikhane ke liye category representatives const homeCategoryCards = [ { id: 'cat1', name: "Mugs Collection", desc: "Magic, Red, Metallic & More", price: 179, categoryName: "Mugs Collection", image: "https://placehold.co/400x500/2563eb/ffffff?text=Mugs", bgGradient: "from-blue-400 to-blue-600" }, { id: 'cat2', name: "Keychains", desc: "Acrylic Heart & Square", price: 89, categoryName: "Keychains", image: "https://placehold.co/400x500/db2777/ffffff?text=Keychains", bgGradient: "from-pink-400 to-pink-600" }, { id: 'cat3', name: "T-Shirt Printing", desc: "Dryfit & Collar T-Shirts", price: 299, categoryName: "T-Shirt Printing", image: "https://placehold.co/400x500/16a34a/ffffff?text=T-Shirts", bgGradient: "from-green-400 to-green-600" }, { id: 'cat4', name: "Photo Gifts", desc: "Frames & Magic Mirrors", price: 249, categoryName: "Photo Gifts", image: "https://placehold.co/400x500/eab308/ffffff?text=Photo+Gifts", bgGradient: "from-yellow-400 to-orange-500" }, { id: 'cat5', name: "Office & Desk", desc: "Pen Stands & Mousepads", price: 149, categoryName: "Office & Desk", image: "https://placehold.co/400x500/ea580c/ffffff?text=Desk+Items", bgGradient: "from-purple-400 to-indigo-600" } ]; // Sabhi products ka detail data const allProducts = [ // Mugs { id: 1, name: "Magic Mug", price: 199, category: "Mugs Collection", image: "https://placehold.co/400x400/2563eb/ffffff?text=Magic+Mug" }, { id: 2, name: "Classic Red Colour Mug 11oz", price: 179, category: "Mugs Collection", image: "https://placehold.co/400x400/dc2626/ffffff?text=Red+Mug" }, { id: 3, name: "Dual Color Magic Mug", price: 249, category: "Mugs Collection", image: "https://placehold.co/400x400/8b5cf6/ffffff?text=Dual+Color" }, { id: 4, name: "Metallic Mug 11oz", price: 299, category: "Mugs Collection", image: "https://placehold.co/400x400/fbbf24/ffffff?text=Metallic+Mug" }, // Keychains { id: 5, name: "Acrylic Heart Keychain", price: 99, category: "Keychains", image: "https://placehold.co/400x400/db2777/ffffff?text=Heart+Keychain" }, { id: 6, name: "Acrylic Square Keychain", price: 89, category: "Keychains", image: "https://placehold.co/400x400/9d174d/ffffff?text=Square+Keychain" }, // T-Shirts { id: 7, name: "Dryfit Round T-Shirt", price: 299, category: "T-Shirt Printing", image: "https://placehold.co/400x400/16a34a/ffffff?text=Round+T-Shirt" }, { id: 8, name: "Collar Dryfit T-Shirt", price: 349, category: "T-Shirt Printing", image: "https://placehold.co/400x400/15803d/ffffff?text=Collar+T-Shirt" }, // Photo Gifts { id: 9, name: "Photo Frame with Light", price: 399, category: "Photo Gifts", image: "https://placehold.co/400x400/eab308/ffffff?text=Photo+Frame" }, { id: 10, name: "Round Magic Mirror White", price: 249, category: "Photo Gifts", image: "https://placehold.co/400x400/0ea5e9/ffffff?text=Magic+Mirror" }, // Office & Desk { id: 11, name: "Ceramic Pen Stand", price: 199, category: "Office & Desk", image: "https://placehold.co/400x400/ea580c/ffffff?text=Pen+Stand" }, { id: 12, name: "Custom Mousepad", price: 149, category: "Office & Desk", image: "https://placehold.co/400x400/4f46e5/ffffff?text=Mousepad" }, ]; const testimonials = [ { id: 1, name: "Aarav Patel", review: "The print quality on the Magic Mug is absolutely stunning! Ordered it for my sister's birthday and she loved the surprise when the photo appeared.", rating: 5 }, { id: 2, name: "Priya Sharma", review: "Very fast delivery and the custom T-shirt fabric is incredibly soft. The live preview feature really helped me design exactly what I wanted.", rating: 5 }, { id: 3, name: "Vikram Singh", review: "Bought the glowing photo frame. It looks premium and the lighting adds such a beautiful touch to my desk. Highly recommended!", rating: 4 } ]; export default function App() { const [currentView, setCurrentView] = useState('home'); // 'home' | 'category' | 'product' | 'contact' | 'about' | 'shipping' | 'returns' const [selectedCategory, setSelectedCategory] = useState(null); const [selectedProduct, setSelectedProduct] = useState(null); const [prefilledQuote, setPrefilledQuote] = useState(''); // Store AI quote to pass to product page // Navigation Handlers const goToCategory = (categoryName) => { setSelectedCategory(categoryName); setCurrentView('category'); window.scrollTo(0, 0); }; const goToProduct = (product, quote = '') => { setSelectedProduct(product); setPrefilledQuote(quote); setCurrentView('product'); window.scrollTo(0, 0); }; const goHome = () => { setCurrentView('home'); setSelectedCategory(null); setSelectedProduct(null); setPrefilledQuote(''); window.scrollTo(0, 0); }; return ( ); } // ========================================== // HOME VIEW COMPONENT (Category Grid & AI Feature) // ========================================== function HomeView({ onCategoryClick, onProductClick }) { const [showAdvisor, setShowAdvisor] = useState(false); const [adviseQuery, setAdviseQuery] = useState(''); const [adviseResults, setAdviseResults] = useState([]); const [isAdvising, setIsAdvising] = useState(false); // SEO for Home Page useEffect(() => { updateSEO( "Printra.in - Custom Mugs, T-Shirts & Personalized Gifts Online", "Buy premium custom printed mugs, t-shirts, keychains, and photo gifts at Printra.in. Easy customization and fast delivery in India.", { "@context": "https://schema.org", "@type": "WebSite", "name": "Printra.in", "url": "https://www.printra.in", "potentialAction": { "@type": "SearchAction", "target": "https://www.printra.in/search?q={search_term_string}", "query-input": "required name=search_term_string" } } ); }, []); const handleAiAdvice = async () => { if (!adviseQuery.trim()) return; setIsAdvising(true); setAdviseResults([]); // Prepare a simplified product catalog for the AI to understand available options const availableProductsForAI = allProducts.map(p => ({ id: p.id, name: p.name, category: p.category })); const apiKey = ""; // Will be injected by runtime environment try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: `Gift Occasion/Recipient: ${adviseQuery}\n\nAvailable Products Catalog:\n${JSON.stringify(availableProductsForAI)}` }] }], systemInstruction: { parts: [{ text: `You are an expert AI Gift Advisor for an Indian customized gifting store named Printra.in. Analyze the user's occasion/recipient and choose exactly 2 appropriate products from the 'Available Products Catalog' provided. For each product, write a catchy, short, and sweet custom quote (max 6 words, Hinglish or English) that can be printed on it. Also provide a short 1-line reason why this product is perfect. IMPORTANT: Return ONLY a valid JSON array of objects. Do not wrap in markdown tags like \`\`\`json. Format: [{"productId": 1, "quote": "Happy Birthday Bro!", "reason": "A magic mug adds a surprise element."}]` }]}, generationConfig: { responseMimeType: "application/json" } }) }); if (!response.ok) throw new Error("API request failed"); const data = await response.json(); const text = data.candidates?.[0]?.content?.parts?.[0]?.text; if (text) { let parsed = JSON.parse(text); setAdviseResults(parsed); } } catch (error) { console.error("AI Error:", error); alert("Oops! AI network busy hai, thodi der baad try karein."); } finally { setIsAdvising(false); } }; return ( ); } // ========================================== // CATEGORY VIEW COMPONENT (Product List by Category) // ========================================== function CategoryView({ categoryName, onProductClick, onBack }) { const categoryProducts = allProducts.filter(p => p.category === categoryName); // SEO for Category Page useEffect(() => { updateSEO( `Buy Customized ${categoryName} Online | Printra.in`, `Explore our wide range of personalized ${categoryName}. Add your photos, text, and custom designs online at Printra.in. Best prices guaranteed!`, { "@context": "https://schema.org", "@type": "CollectionPage", "name": categoryName, "description": `Customized ${categoryName} available at Printra.in`, "url": `https://www.printra.in/category/${categoryName.toLowerCase().replace(/ /g, '-')}` } ); }, [categoryName]); return ( ); } // ========================================== // PRODUCT PAGE COMPONENT (Live Preview UI) // ========================================== function ProductPageView({ product, initialQuote, onBack }) { const [quantity, setQuantity] = useState(1); const [customText, setCustomText] = useState(initialQuote || ''); const [textColor, setTextColor] = useState('#ffffff'); const [uploadedImage, setUploadedImage] = useState(null); // --- Naye AI Feature ke States --- const [showAiBox, setShowAiBox] = useState(false); const [aiPrompt, setAiPrompt] = useState(''); const [isGenerating, setIsGenerating] = useState(false); const [aiQuotes, setAiQuotes] = useState([]); // Set custom text if AI initial quote changes useEffect(() => { if (initialQuote) { setCustomText(initialQuote); } }, [initialQuote]); // SEO for Individual Product Page useEffect(() => { updateSEO( `Customize ${product.name} Online - Printra.in`, `Buy personalized ${product.name} starting at just ₹${product.price}. Upload your photos, add text with our live preview tool. Fast shipping!`, { "@context": "https://schema.org/", "@type": "Product", "name": product.name, "image": product.image, "description": `Premium customized ${product.name} printed with your own design.`, "brand": { "@type": "Brand", "name": "Printra" }, "offers": { "@type": "Offer", "url": `https://www.printra.in/product/${product.id}`, "priceCurrency": "INR", "price": product.price, "availability": "https://schema.org/InStock" } } ); }, [product]); const apiKey = ""; // Gemini API Key automatically inject ho jayegi const handleGenerateQuotes = async () => { if (!aiPrompt.trim()) return; setIsGenerating(true); setAiQuotes([]); try { const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [{ text: `Occasion or Vibe: ${aiPrompt}` }] }], systemInstruction: { parts: [{ text: "You are a creative gift assistant for an Indian store. Generate 3 short, catchy quotes (max 4-6 words each) in English or Hinglish to print on a custom gift based on the user's occasion/vibe. Return ONLY a valid JSON array of 3 strings. Example: [\"Best Bro Ever\", \"Coffee First, Always\", \"Happy Bday Yaar!\"]" }]}, generationConfig: { responseMimeType: "application/json" } }) }); if (!response.ok) throw new Error("API call failed"); const data = await response.json(); const text = data.candidates?.[0]?.content?.parts?.[0]?.text; if (text) { setAiQuotes(JSON.parse(text)); } } catch (error) { console.error("Error generating quotes:", error); alert("Kuch galat ho gaya. Kripya thodi der baad try karein."); } finally { setIsGenerating(false); } }; // Handle local image upload for Live Preview const handleImageUpload = (e) => { const file = e.target.files[0]; if (file) { const imageUrl = URL.createObjectURL(file); setUploadedImage(imageUrl); } }; return ( ); } // ========================================== // CONTACT US COMPONENT // ========================================== function ContactView({ onBack }) { const [formData, setFormData] = useState({ name: '', email: '', subject: '', message: '' }); const [isSubmitted, setIsSubmitted] = useState(false); const handleSubmit = (e) => { e.preventDefault(); if (!formData.name || !formData.email || !formData.message) { alert("Please fill all required fields."); return; } // Simulate sending data setTimeout(() => { setIsSubmitted(true); }, 500); }; return ( ); } // ========================================== // ABOUT US COMPONENT // ========================================== function AboutView({ onBack }) { useEffect(() => { updateSEO("About Us - Printra.in", "Learn more about Printra.in and our passion for creating premium customized gifts."); }, []); return ( ); } // ========================================== // SHIPPING POLICY COMPONENT // ========================================== function ShippingView({ onBack }) { useEffect(() => { updateSEO("Shipping Policy - Printra.in", "Read our shipping policy. Fast and secure delivery across India for all personalized gifts."); }, []); return ( ); } // ========================================== // RETURNS POLICY COMPONENT // ========================================== function ReturnsView({ onBack }) { useEffect(() => { updateSEO("Returns Policy - Printra.in", "Check our strictly monitored return policy for damaged or defective customized products."); }, []); return ( ); }