import React, { useState, useEffect, useRef, useCallback } from 'react';
import QRCode from 'qrcode';
import jsqr from 'jsqr'; // Changed import statement to lowercase 'jsqr'

// Custom Alert Modal Component
const CustomAlert = ({ message, onClose }) => {
    if (!message) return null;

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 border border-blue-500 rounded-lg shadow-xl p-6 max-w-sm w-full text-white text-center animate-fade-in-up">
                <p className="text-lg font-semibold mb-4">{message}</p>
                <button
                    onClick={onClose}
                    className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105"
                >
                    OK
                </button>
            </div>
        </div>
    );
};

// --- QRGeneratorTab Component ---
const QRGeneratorTab = ({
    content, setContent, errorLevel, setErrorLevel, qrColor, setQrColor,
    suggestIdeas, downloadQrCode, qrCanvasRef,
    isInputFocused, setIsInputFocused, currentThemeClasses,
    qrStyles, selectedStyleIndex, setSelectedStyleIndex, styleCanvasRefs, drawQrCode,
    suggestedIdea, showSuggestedIdea, setShowSuggestedIdea,
    downloadResolution, setDownloadResolution
}) => {
    // Effect to generate QR code on the main canvas (Generator Tab)
    useEffect(() => {
        // Preview canvas is always 256x256
        drawQrCode(qrCanvasRef.current, content, qrColor, errorLevel, 256);
    }, [content, qrColor, errorLevel, drawQrCode, qrCanvasRef]);

    // Effect to generate QR codes for style previews (Style Selection Panel)
    useEffect(() => {
        qrStyles.forEach((style, index) => {
            const canvas = styleCanvasRefs.current[index];
            // Use a generic sample for style previews, not actual content
            // For style previews, the 'light' color should always be black for contrast with the style's fg color
            drawQrCode(canvas, "Sample", style.fg, 'H', 80, '#000000'); 
        });
    }, [qrStyles, drawQrCode, styleCanvasRefs]);

    return (
        // Modified: Changed lg:items-stretch to lg:items-start to allow independent heights
        <div className="flex flex-col lg:flex-row p-4 md:p-6 space-y-6 lg:space-y-0 lg:space-x-6 flex-grow lg:items-start">
            {/* Left Panel: Input and Controls - Removed flex-grow as it's not needed with items-start */}
            <div className={`flex flex-col w-full lg:w-3/4 p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Enter Content:</label>
                <textarea
                    className={
                        "w-full p-3 rounded-xl border " +
                        currentThemeClasses.inputBorder + " " +
                        currentThemeClasses.inputBg + " " +
                        currentThemeClasses.text + " " +
                        "focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter " +
                        (isInputFocused ? 'ring-2 ring-blue-500 shadow-md shadow-blue-500/50' : '')
                    }
                    rows="6"
                    placeholder="Enter text or URL..."
                    value={content}
                    onChange={(e) => setContent(e.target.value)}
                    onFocus={() => setIsInputFocused(true)}
                    onBlur={() => setIsInputFocused(false)}
                ></textarea>

                <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
                    <button
                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
                        onClick={suggestIdeas}
                    >
                        <i className="fas fa-lightbulb mr-2"></i> Suggest Idea
                    </button>
                    <button
                        className={`w-full sm:w-1/2 py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
                        onClick={downloadQrCode}
                    >
                        <i className="fas fa-save mr-2"></i> Save QR Code
                    </button>
                </div>

                {/* Suggested Ideas Panel */}
                {showSuggestedIdea && suggestedIdea && (
                    <div className={`mt-4 p-4 rounded-xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-inner transition-all duration-300 overflow-hidden`}>
                        <div className="flex justify-between items-center cursor-pointer" onClick={() => setShowSuggestedIdea(!showSuggestedIdea)}>
                            <label className={`font-semibold ${currentThemeClasses.labelColor} font-inter`}>Suggested QR Idea:</label>
                            <i className={`fas ${showSuggestedIdea ? 'fa-chevron-up' : 'fa-chevron-down'} transition-transform duration-300`}></i>
                        </div>
                        <div className={`overflow-hidden transition-all duration-500 ease-in-out ${showSuggestedIdea ? 'max-h-96 opacity-100 mt-2' : 'max-h-0 opacity-0'}`}>
                            <p className={`${currentThemeClasses.text} whitespace-pre-wrap text-sm font-inter`}>{suggestedIdea}</p>
                        </div>
                    </div>
                )}

                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Error Correction Level:</label>
                <select
                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
                    value={errorLevel}
                    onChange={(e) => setErrorLevel(e.target.value)}
                >
                    <option value="L">L - Low</option>
                    <option value="M">M - Medium</option>
                    <option value="Q">Q - Quality</option>
                    <option value="H">H - High</option>
                </select>

                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Pick QR Color:</label>
                <input
                    type="color"
                    className={`w-full h-10 rounded-xl border ${currentThemeClasses.inputBorder} p-1 cursor-pointer transition-all duration-300`}
                    value={qrColor}
                    onChange={(e) => setQrColor(e.target.value)}
                />

                {/* New: Download Resolution Selector */}
                <label className={`mt-4 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Download Resolution:</label>
                <select
                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
                    value={downloadResolution}
                    onChange={(e) => setDownloadResolution(Number(e.target.value))}
                >
                    <option value={256}>256x256 (Preview Size)</option>
                    <option value={512}>512x512 (Medium)</option>
                    <option value={1024}>1024x1024 (High)</option>
                    <option value={2048}>2048x2048 (Very High)</option>
                </select>

                <label className={`mt-6 mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>QR Preview:</label>
                <div
                    className={`relative flex justify-center items-center w-full min-h-[300px] rounded-2xl border-2 ${currentThemeClasses.qrPreviewBorder} ${currentThemeClasses.qrPreviewBg} p-4 shadow-inner overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:-translate-y-1 ${currentThemeClasses.glow}`}
                >
                    <canvas ref={qrCanvasRef} width="256" height="256" className={`rounded-lg shadow-xl ${content ? '' : 'hidden'}`}></canvas>
                    {!content && (
                        <p className={`${currentThemeClasses.labelColor} text-lg font-inter absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`}>Enter content to see QR preview</p>
                    )}
                    <div className="absolute inset-0 scan-line"></div>
                </div>
            </div>

            {/* Right Panel: Style Selection - Increased max-h slightly to 800px */}
            <div className={`w-full lg:w-1/4 p-6 rounded-2xl shadow-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} ${currentThemeClasses.text} flex flex-col transform transition-all duration-500 ease-in-out max-h-[800px]`}>
                <label className={`mb-4 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Choose Style:</label>
                {/* This inner div needs to scroll if content overflows. flex-grow and overflow-y-auto */}
                <div className={`overflow-y-auto flex-grow rounded-xl p-2 ${currentThemeClasses.cardBg} custom-scrollbar`}> 
                    <div className="grid grid-cols-2 gap-4">
                        {qrStyles.map((style, index) => (
                            <div
                                key={index}
                                className={`flex flex-col items-center justify-center p-2 rounded-xl cursor-pointer transition-all duration-200 ease-in-out
                                    ${selectedStyleIndex === index ? `border-4 ${currentThemeClasses.qrPreviewBorder} shadow-lg scale-105 ${currentThemeClasses.glow}` : `border-2 ${currentThemeClasses.inputBorder} hover:border-blue-400/50 hover:scale-[1.02]`}
                                    ${currentThemeClasses.inputBg}`}
                                onClick={() => {
                                    setSelectedStyleIndex(index);
                                    setQrColor(style.fg);
                                }}
                            >
                                <canvas ref={el => styleCanvasRefs.current[index] = el} width="80" height="80" className="rounded-lg"></canvas>
                                <span className={`mt-2 text-sm font-medium ${currentThemeClasses.labelColor} font-inter`}>{style.name}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

// --- QRDecoderTab Component ---
const QRDecoderTab = ({
    decodedContent, setDecodedContent,
    isSummarizing, summarizeContent, showAlert, decodeQrCode,
    currentThemeClasses
}) => {
    return (
        // Added flex-grow to ensure it takes available vertical space
        <div className={`flex flex-col p-4 md:p-6 space-y-6 flex-grow ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
            <div
                className={`flex flex-col items-center justify-center p-10 border-2 border-dashed ${currentThemeClasses.glassBorder} rounded-2xl min-h-[200px] ${currentThemeClasses.glassBg} ${currentThemeClasses.text} transition-all duration-300 shadow-2xl ${currentThemeClasses.shadow} hover:scale-[1.01] hover:-translate-y-1`}
            >
                <p className={`text-lg ${currentThemeClasses.labelColor} mb-4 font-inter`}>Drag & Drop QR Image Here</p>
                <input
                    type="file"
                    accept="image/*"
                    className="hidden"
                    id="qr-upload-input"
                    onChange={decodeQrCode}
                />
                <label
                    htmlFor="qr-upload-input"
                    className={`cursor-pointer py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
                >
                    <i className="fas fa-upload mr-2 animate-bounce"></i> Upload QR Image to Decode
                </label>
            </div>

            <div className={`p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Decoded Content:</label>
                <textarea
                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 font-inter`}
                    rows="8"
                    value={decodedContent}
                    onChange={(e) => setDecodedContent(e.target.value)}
                    placeholder="Decoded content will appear here..."
                ></textarea>

                <button
                    className={`mt-4 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.secondaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
                    onClick={summarizeContent}
                    disabled={isSummarizing || !decodedContent.trim() || decodedContent === 'No QR code detected.'}
                >
                    {isSummarizing ? (
                        <i className="fas fa-spinner fa-spin mr-2"></i>
                    ) : (
                        <i className="fas fa-file-alt mr-2"></i>
                    )}
                    📝 {isSummarizing ? 'Summarizing Content...' : 'Summarize Content'}
                </button>
            </div>
        </div>
    );
};

// --- SettingsTab Component ---
const SettingsTab = ({ currentTheme, setCurrentTheme, currentThemeClasses, themes }) => {
    return (
        // Added flex-grow to ensure it takes available vertical space
        <div className={`flex flex-col p-4 md:p-6 space-y-6 flex-grow ${currentThemeClasses.bg} ${currentThemeClasses.text}`}>
            <div className={`p-6 rounded-2xl border ${currentThemeClasses.glassBorder} ${currentThemeClasses.glassBg} shadow-2xl ${currentThemeClasses.shadow} transform transition-all duration-500 ease-in-out`}>
                <label className={`mb-2 font-semibold ${currentThemeClasses.labelColor} font-inter`}>Select Theme:</label>
                <select
                    className={`w-full p-3 rounded-xl border ${currentThemeClasses.inputBorder} ${currentThemeClasses.inputBg} ${currentThemeClasses.text} focus:outline-none focus:ring-2 focus:ring-blue-500 appearance-none transition-all duration-300 font-inter`}
                    value={currentTheme}
                    onChange={(e) => setCurrentTheme(e.target.value)}
                >
                    {Object.keys(themes).map((themeName) => (
                        <option key={themeName} value={themeName}>
                            {themeName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
                        </option>
                    ))}
                </select>

                <button
                    className={`mt-6 w-full py-3 px-6 rounded-xl font-bold text-lg bg-gradient-to-r ${currentThemeClasses.primaryAccent} text-white shadow-lg ${currentThemeClasses.buttonGlow} transform hover:-translate-y-1 transition-all duration-300 ease-in-out flex items-center justify-center`}
                    onClick={() => setCurrentTheme('dark')}
                >
                    Reset to Dark Theme
                </button>
            </div>
        </div>
    );
};

// --- Main App component ---
const App = () => {
    const [activeTab, setActiveTab] = useState('generator');
    const [content, setContent] = useState('');
    const [errorLevel, setErrorLevel] = useState('L');
    // Default QR color set to neon cyan
    const [qrColor, setQrColor] = useState('#00FFFF'); 
    const [decodedContent, setDecodedContent] = useState('');
    const [selectedStyleIndex, setSelectedStyleIndex] = useState(0);
    const [currentTheme, setCurrentTheme] = useState('dark');
    const [isSummarizing, setIsSummarizing] = useState(false);
    const [suggestedIdea, setSuggestedIdea] = useState('');
    const [showSuggestedIdea, setShowSuggestedIdea] = useState(false);
    const [alertMessage, setAlertMessage] = useState(null);
    const [isInputFocused, setIsInputFocused] = useState(false);
    const [downloadResolution, setDownloadResolution] = useState(512);

    // Suggested ideas now directly within App.jsx
    const [allSuggestedIdeas, setAllSuggestedIdeas] = useState([
        "❤️📞 My Girlfriend's Mobile Number",
        "❤️👩 My Girlfriend's Name",
        "❤️🏠 My Girlfriend's Address",
        "🏠📍 My Home Address",
        "📞📱 My Mobile Number",
        "📧✉️ My Email Address",
        "🌐🔗 My Website URL",
        "👔🔗 My LinkedIn Profile",
        "💭✨ My Favorite Quote",
        "📡🔑 Wi-Fi Network: MyHomeWiFi; Pass: MySecretPass",
        "💰💳 UPI ID: myname@bank",
        "🎉🗓️ Event: Birthday Party, Date: 2025-12-25, Location: My House",
        "🛍️🛒 Product Link: https://www.google.com/search?q=example.com/product/xyz",
        "🗺️➡️ Directions: geo:34.0522,-118.2437?q=Los Angeles",
        "🤫✨ Secret Message: You are awesome!",
        "📇💼 My Business Card Info",
        "🎨💻 Link to my Portfolio",
        "👨‍💻🐙 My GitHub Repository",
        "🎶🎧 My Favorite Song on Spotify",
        "🤲💖 A Donation Link",
        "🚨📞 Emergency Contact: John Doe, 9876543210",
        "🏥🩸 Medical Info: Blood Type O+, Allergies: Penicillin",
        "🐾🆔 Pet's Microchip ID: 1234567890",
        "🍝📝 Favorite Recipe: Pasta Carbonara Ingredients",
        "📚💡 Book Recommendation: 'Dune' by Frank Herbert",
        "🎬🍿 Movie to Watch: 'Inception'",
        "🎮🆔 Game ID: PlayerOne#1234",
        "₿👛 Crypto Wallet Address (ETH): 0x...",
        "🖼️🔗 NFT Collection Link",
        "📜🔗 Smart Contract Address",
        "🗳️💡 DAO Proposal Link",
        "🔗✨ Web3 DApp URL",
        "🆔🌐 Decentralized Identity (DID)",
        "🔑🔒 My Public Key",
        "🗄️🔗 IPFS Hash of a Document",
        "⛓️✅ Blockchain Transaction ID",
        "🌌📍 Metaverse Coordinates: X:100, Y:200, Z:50",
        "👓🔗 VR Experience Link",
        "📸✨ AR Filter Link",
        "🎨🌐 Digital Art Gallery URL",
        "✅🗓️ Event RSVP Link",
        "📝💡 Feedback Form Link",
        "📊❓ Survey Link",
        "💬🤝 Customer Support Chat Link",
        "🍎⬇️ Download App Link (iOS)",
        "🤖⬇️ Download App Link (Android)",
        "📖🔧 Product Manual Link",
        "📄🛡️ Warranty Information",
        "↩️📜 Return Policy URL",
        "🏢📞 Company Contact Info",
        "💼✍️ Job Application Link",
        "📄⬇️ Resume Download Link",
        "🗓️🤝 Interview Schedule",
        "📅🎤 Conference Agenda",
        "🗣️📄 Speaker Bio Link",
        "✍️💡 Workshop Registration",
        "🍽️📜 Restaurant Menu",
        "🍽️🗓️ Table Reservation Link",
        "📦🚚 Delivery Order Tracking",
        "🎥🍳 Recipe Video Link",
        "💪🗓️ Workout Plan",
        "🥗🗓️ Diet Plan",
        "❤️‍🩹📊 Health Tracker Link",
        "🚨🚑 Emergency Services Number",
        "🐾🔍 Lost Pet Poster Link",
        "🔎📞 Found Item Contact",
        "📚💳 Public Library Card Number",
        "🏛️🖼️ Museum Exhibit Info",
        "🗽🗺️ Tourist Attraction Details",
        "🗓️🎉 Local Event Calendar",
        "🚌⏰ Public Transport Schedule",
        "🅿️📍 Parking Spot Locator",
        "🚗🤝 Car Share Booking Link",
        "🚲 rent Bike Rental Info",
        "🛴🔓 Scooter Share Unlock Code",
        "⚡📍 Charging Station Locator",
        "🔌🚗 Electric Vehicle Info",
        "♻️📍 Recycling Center Address",
        "🌱🗑️ Compost Drop-off Location",
        "💧💡 Water Conservation Tips",
        "💡💰 Energy Saving Advice",
        "🤝💖 Volunteer Opportunity",
        "🎁❤️ Charity Donation Link",
        "🧑‍🌾🥕 Community Garden Info",
        "🥕🗓️ Local Farmers Market Schedule",
        "🎨✍️ Art Class Registration",
        "🎶🗓️ Music Lesson Booking",
        "💃🗓️ Dance Studio Schedule",
        "🧘‍♀️🗓️ Yoga Class Info",
        "🏋️‍♀️🗓️ Fitness Class Booking",
        "⚽✍️ Sports League Sign-up",
        "🌳🗺️ Outdoor Activity Guide",
        "⛰️🗺️ Hiking Trail Map",
        "🏕️🗓️ Camping Site Reservation",
        "🎣📜 Fishing License Info",
        "🏹📜 Hunting License Info",
        "🚤📜 Boating Regulations",
        "⛷️❄️ Ski Resort Conditions",
        "🏂❄️ Snowboarding Park Info",
        "🏄‍♀️🌊 Surf Report",
        "🤿🐠 Scuba Diving Spot",
        "🪂🗓️ Paragliding Booking",
        "🎈🗓️ Hot Air Balloon Ride",
        "🪂✨ Skydiving Experience",
        "🌲🎢 Zipline Adventure",
        "🪢🤸 Bungee Jumping Spot",
        "🧗‍♀️📍 Rock Climbing Gym",
        "🔐🗓️ Escape Room Booking",
        "🎲☕ Board Game Cafe",
        "📚🗓️ Book Club Meeting Details",
        "🎤📜 Poetry Slam Event",
        "🎙️🗓️ Open Mic Night",
        "😂🎟️ Comedy Show Tickets",
        "🎭🗓️ Theater Play Schedule",
        "🎶🎟️ Concert Tickets",
        "🎨🗓️ Art Exhibition Info",
        "📸💡 Photography Workshop",
        "🍳✍️ Cooking Class Registration",
        "🍰📝 Baking Recipe",
        "🍹📝 Cocktail Recipe",
        "🍷🗓️ Wine Tasting Event",
        "🍺🏭 Beer Brewery Tour",
        "☕💳 Coffee Shop Loyalty Program",
        "🛍️🎨 Local Craft Market",
        "🛍️🕰️ Vintage Store Address",
        "👕♻️ Thrift Shop Location",
        "🏺🕰️ Antique Shop Info",
        "💿📍 Record Store Address",
        "📚🦸 Comic Book Store",
        "🎲🛍️ Board Game Store",
        "🛠️🛍️ Hobby Shop Inventory",
        "🔨💡 DIY Project Instructions",
        "🧑‍🌾💡 Gardening Tips",
        "🪴📖 Plant Care Guide",
        "💐🚚 Flower Shop Delivery",
        "🐾✂️ Pet Grooming Appointment",
        "🐶📞 Veterinarian Contact",
        "🐾❤️ Animal Shelter Donation",
        "🐕🌳 Dog Park Location",
        "🐈☕ Cat Cafe Details",
        "🐦🌳 Bird Watching Spot",
        "🦌🌳 Wildlife Sanctuary Info",
        "🐠🎟️ Aquarium Tickets",
        "🦁🎟️ Zoo Visit Booking",
        "🚜🗓️ Farm Tour Schedule",
        "🍎🗓️ Orchard Picking Season",
        "🍇🍷 Vineyard Tour & Tasting",
        "🛒🏷️ Local Market Deals",
        "💻💰 Online Store Discount Code",
        "🔑📺 Subscription Service Login",
        "💻🔑 Software License Key",
        "🎮⬇️ Game Download Code",
        "📚⬇️ E-book Download Link",
        "🎧📖 Audiobook Chapter List",
        "🎙️🔗 Podcast Series Link",
        "▶️🔗 YouTube Channel Link",
        "🎮🔴 Twitch Stream Link",
        "💬🎮 Discord Server Invite",
        "✈️💬 Telegram Group Link",
        "🟢💬 WhatsApp Group Invite",
        "🔒💬 Signal Group Link",
        "👍👥 Facebook Group Link",
        "📸👤 Instagram Profile",
        "🐦✍️ Twitter Handle",
        "🎵💃 TikTok Profile",
        "👻📸 Snapchat Username",
        "📌🖼️ Pinterest Board Link",
        "👽💬 Reddit Community",
        "❓💡 Quora Profile",
        "💻❓ Stack Overflow Profile",
        "✍️💻 Dev.to Article Link",
        "✍️📖 Medium Article Link",
        "✉️📰 Substack Newsletter",
        "💖🤝 Patreon Page",
        "☕💖 Ko-fi Link",
        "☕🎁 Buy Me a Coffee Link",
        "👕🛍️ Merchandise Store Link",
        "🎟️🗓️ Eventbrite Ticket Link",
        "💻🤝 Zoom Meeting ID",
        "💻💬 Google Meet Link",
        "💻📊 Microsoft Teams Meeting",
        "💻✍️ Webinar Registration",
        "🎓💻 Online Course Link",
        "🎥💡 Tutorial Video Link",
        "📄📖 Documentation Link",
        "🔗💻 API Endpoint URL",
        "⬆️💻 Software Update Link",
        "🐛📝 Bug Report Form",
        "✨📝 Feature Request Form",
        "🎫🤝 Support Ticket System",
        "📚💡 Knowledge Base Article",
        "❓📄 FAQ Page",
        "🛠️📖 Troubleshooting Guide",
        "📖🔧 User Manual",
        "🚀📖 Quick Start Guide",
        "⬇️🛠️ Installation Instructions",
        "💻✅ System Requirements",
        "✅🔗 Compatibility List",
        "📝✨ Release Notes",
        "📜🔄 Changelog",
        "🌳💻 Version Control Repository",
        "✅📊 Build Status Page",
        "🚀📊 Deployment Pipeline Status",
        "🖥️✅ Server Status Page",
        "🌐🗺️ Network Diagram",
        "🔒📜 Security Policy",
        "🕵️‍♀️📜 Privacy Policy",
        "📄🤝 Terms of Service",
        "🍪📜 Cookie Policy",
        "🇪🇺✅ GDPR Compliance Info",
        "♿📜 Accessibility Statement",
        "🗺️🌐 Sitemap",
        "🤖📄 Robots.txt Content",
        "💡💻 Open Source Project Page",
        "🤝📝 Contributor Guidelines",
        "🤝📜 Code of Conduct",
        "📜✅ License Information",
        "💰🐛 Bug Bounty Program",
        "🚨🔒 Security Vulnerability Report",
        "🛡️📊 Penetration Test Report",
        "✅📊 Compliance Audit Report",
        "🏆📜 Certification Details",
        "🏆✨ Awards and Recognition",
        "📰⬇️ Press Kit Download",
        "📞📰 Media Contact Info",
        "📈🤝 Investor Relations Page",
        "📊🗓️ Annual Report",
        "📞📈 Quarterly Earnings Call",
        "📈💰 Stock Information",
        "🧑‍💼👩‍💼 Board of Directors",
        "📜🕰️ Company History",
        "🎯✨ Mission Statement",
        "🔭✨ Vision Statement",
        "💖📜 Values Statement",
        "💼✨ Career Opportunities",
        "📖🧑‍💼 Employee Handbook",
        "📞👩‍💼 HR Contact Info",
        "💰🏥 Benefits Information",
        "📚💡 Training Resources",
        "📚🌐 Internal Wiki Link",
        "📊🛠️ Project Management Tool",
        "💬🤝 Team Communication Channel",
        "📝🗓️ Meeting Notes Link",
        "📁🤝 Shared Document Folder",
        "🗓️✍️ Time Off Request Form",
        "💰📝 Expense Report System",
        "🖥️🤝 IT Support Portal",
        "🏢🗺️ Office Location Map",
        "🅿️📝 Parking Instructions",
        "📡🔑 Visitor Wi-Fi Password",
        "🚨🗺️ Emergency Evacuation Plan",
        "🩹📍 First Aid Kit Location",
        "defibrillator AED Location",
        "🔥📍 Fire Extinguisher Location",
        "⚠️📜 Safety Guidelines",
        "🚪🔑 Building Access Code",
        "👮📞 Security Guard Contact",
        "🧹🗓️ Cleaning Schedule",
        "🔧📝 Maintenance Request Form",
        "📦📝 Supply Order Form",
        "☕📖 Coffee Machine Instructions",
        "🖨️📖 Printer Setup Guide",
        "🌐🛠️ Network Troubleshooting Steps",
        "💻⬇️ Software Installation Guide",
        "🔒🌐 VPN Connection Details",
        "🖥️🔗 Remote Desktop Access",
        "📞🤝 Help Desk Contact",
        "📝📊 Feedback Survey for Employees",
        "💡🗳️ Suggestion Box Link",
        "🗓️🎉 Company Event Calendar",
        "🤝🎉 Team Building Activity Info",
        "🎄🗓️ Holiday Schedule",
        "👔📜 Dress Code Policy",
        "✈️📜 Travel Policy",
        "💰📜 Expense Reimbursement Policy",
        "💻📊 IT Asset Management System",
        "💻📦 Software Inventory",
        "🖥️📦 Hardware Inventory",
        "🏷️📜 Asset Tagging Guidelines",
        "♻️💻 Disposal Procedures for Electronics",
        "💾🗓️ Data Backup Schedule",
        "🚨💾 Disaster Recovery Plan",
        "🚨📝 Incident Report Form",
        "🔄📜 Change Management Process",
        "📊📝 Project Plan Document",
        "✅📝 Task List for Project",
        "🏃‍♂️📝 Sprint Backlog",
        "📉📊 Burndown Chart Link",
        "📝💡 Retrospective Notes",
        "👥📜 Team Roster",
        "✅🧑‍💻 Onboarding Checklist",
        "✅👋 Offboarding Checklist",
        "📚🔗 Training Module Link",
        "🏆📊 Certification Tracking",
        "📝📈 Performance Review Form",
        "🎯📝 Goal Setting Worksheet",
        "🤝💡 Mentorship Program Info",
        "📈📚 Career Development Resources",
        "🌟👏 Employee Recognition Program",
        "🧘‍♀️💖 Wellness Program Details",
        "🧠💖 Mental Health Resources",
        "💪✍️ Fitness Challenge Sign-up",
        "🥗📖 Nutrition Guide",
        "🪑✅ Ergonomics Checklist",
        "🏠💻 Work From Home Policy",
        "🗓️✍️ Flexible Work Arrangement Request",
        "🚌💰 Commuter Benefits Info",
        "📰✍️ Company Newsletter Sign-up",
        "💼📢 Internal Job Postings",
        "🤝💰 Referral Program Details",
        "🌍🤝 Diversity & Inclusion Initiatives",
        "♻️📊 Sustainability Report",
        "🤝🌍 Corporate Social Responsibility",
        "📈📄 Investor Deck",
        "📰🗄️ Press Release Archive",
        "🎨📜 Brand Guidelines",
        "🖼️⬇️ Logo Download Page",
        "📚📈 Marketing Collateral Library",
        "📈📖 Sales Playbook",
        "🤝💻 Customer Relationship Management (CRM) Login",
        "📈📊 Sales Forecasting Dashboard",
        "✍️💡 Lead Generation Form",
        "🤝📜 Partnership Program Details",
        "🔗💰 Affiliate Program Info",
        "🤝✍️ Reseller Application",
        "🤝💻 Vendor Portal Login",
        "🛒📜 Procurement Policy",
        "🧾💻 Invoice Submission Portal",
        "💰✅ Payment Status Checker",
        "📊💰 Budget Tracking Spreadsheet",
        "📈📄 Financial Report Access",
        "📜📚 Legal Document Library",
        "📝🤝 Contract Review Request",
        "®️📜 Trademark Registration Info",
        "💡📜 Patent Application Status",
        "✅📚 Compliance Training Module",
        "⚠️📊 Risk Assessment Report",
        "🗓️🔎 Audit Schedule",
        "🔎📝 Internal Audit Findings",
        "📊📜 External Audit Report",
        "📜🔄 Regulatory Updates",
        "📏📖 Industry Standards Guide",
        "✨📖 Best Practices Document",
        "🔬🔗 Research Paper Link",
        "📊⬇️ Case Study Download",
        "📄💡 Whitepaper Access",
        "🎥💻 Webinar Recording",
        "🎧🔗 Podcast Series Link",
        "✍️📚 Blog Post Archive",
        "📰✨ News Article About Us",
        "🗣️🌟 Customer Testimonials",
        "⭐📝 Product Reviews",
        "💬🌐 User Forum Link",
        "🤝📜 Community Guidelines",
        "🛡️📜 Moderation Policy",
        "🚨📝 Report Abuse Form",
        "⚙️👤 Account Settings Page",
        "🔑🔄 Password Reset Link",
        "🔒📱 Two-Factor Authentication Setup",
        "🔔⚙️ Notification Preferences",
        "💳⚙️ Payment Methods Management",
        "📦📜 Order History",
        "🚚📍 Shipping Tracking",
        "↩️💰 Returns & Refunds Policy",
        "💖🛍️ Wishlist Link",
        "🛒🛍️ Shopping Cart Link",
        "📚🛍️ Product Catalog",
        "🗓️🤝 Service Booking Page",
        "🗓️✍️ Appointment Scheduling",
        "🗓️📚 Class Schedule",
        "🗓️🎉 Event Calendar",
        "🎟️🛍️ Ticket Purchase Link",
        "🗺️📍 Venue Map",
        "💺🗺️ Seating Chart",
        "➡️📍 Directions to Venue",
        "🅿️📝 Parking Information",
        "🚌🚊 Public Transport Options",
        "🏨🗓️ Hotel Booking Link",
        "✈️🗓️ Flight Information",
        "🚗🗓️ Car Rental Booking",
        "✈️🛡️ Travel Insurance Info",
        "🛂📖 Passport Renewal Guide",
        "🛂📝 Visa Application Requirements",
        "💱📊 Currency Exchange Rates",
        "🌍🤝 Local Customs Guide",
        "⚠️✈️ Travel Advisory Updates",
        "🚨📞 Emergency Travel Contacts",
        "🧳📝 Lost Luggage Report",
        "🗺️🗓️ Travel Itinerary",
        "✅🧳 Packing Checklist",
        "🏥✈️ Travel Health Information",
        "💉✅ Vaccination Requirements",
        "🛡️✈️ Travel Safety Tips",
        "🍽️🗺️ Local Cuisine Guide",
        "🍽️⭐ Restaurant Recommendations",
        "☕🗺️ Cafe Directory",
        "🍻🗺️ Bar & Pub Guide",
        "🌃🎉 Nightlife Events",
        "🛍️🗺️ Shopping Districts",
        "🛒🗺️ Local Markets",
        "🎁🗺️ Souvenir Shop Locations",
        "🏛️🖼️ Museums & Galleries",
        "📜🏛️ Historical Sites",
        "🌳🌷 Parks & Gardens",
        "🏖️🌊 Beaches & Lakes",
        "⛰️🚲 Hiking & Biking Trails",
        "🏟️⚽ Sports Facilities",
        "🎤🏟️ Concert Venues",
        "🎭📍 Theater & Performance Spaces",
        "🎬⏰ Cinema Showtimes",
        "📚📍 Library Branches",
        "✉️📍 Post Office Locations",
        "🏦🏧 Bank & ATM Locations",
        "💊🗺️ Pharmacy Directory",
        "🏥🗺️ Hospital & Clinic Finder",
        "🚓📞 Police Station Contact",
        "🚒📞 Fire Station Contact",
        "🏢🌍 Embassy/Consulate Info",
        "🏛️🤝 Local Government Services",
        "🗓️🎉 Public Holidays Calendar",
        "🏫📚 School Directory",
        "🎓📚 University Course Catalog",
        "👶🏠 Childcare Services",
        "👵🏠 Elderly Care Resources",
        "♿🤝 Disability Support Services",
        "⚖️🤝 Legal Aid Services",
        "💰🤝 Financial Advisor Contact",
        "🛡️📞 Insurance Agent Info",
        "🏠📞 Real Estate Agent Contact",
        "📦✅ Moving Checklist",
        "💡📞 Utility Provider Contacts",
        "🌐📞 Internet Service Provider Info",
        "📺📞 Cable TV Provider Info",
        "🗑️🗓️ Waste Collection Schedule",
        "♻️📜 Recycling Guidelines",
        "🛋️📝 Bulk Item Pickup Request",
        "🧹🗓️ Street Cleaning Schedule",
        "🤫📝 Noise Complaint Form",
        "🔎📝 Lost & Found Reporting",
        "👀🏠 Neighborhood Watch Info",
        "🗓️🎉 Community Events Calendar",
        "📰🌐 Local News Feed",
        "☀️☁️ Weather Forecast Link",
        "🚦🚗 Traffic Updates",
        "🚨📢 Public Safety Alerts",
        "🛡️💡 Crime Prevention Tips",
        "🚨📖 Emergency Preparedness Guide",
        "🆘🤝 Disaster Relief Resources",
        "🤝💖 Volunteer Opportunities",
        "💖🏢 Charitable Organizations",
        "🍎🥫 Food Bank Locations",
        "🏠🤝 Homeless Shelter Info",
        "🐾❤️ Animal Rescue Groups",
        "🌳🛡️ Environmental Protection Agencies",
        "🌱🤝 Conservation Programs",
        "☀️⚡ Renewable Energy Initiatives",
        "♻️🏠 Sustainable Living Tips",
        "🌱🏢 Green Building Certifications",
        "♻️🛍️ Eco-Friendly Product List",
        "🤝🛍️ Fair Trade Product Info",
        "📜🤝 Ethical Sourcing Policy",
        "Rights🤝 Human Rights Organizations",
        "⚖️🤝 Social Justice Initiatives",
        "🧠📞 Mental Health Support Hotlines",
        "🚨🤝 Crisis Intervention Services",
        "🚭🤝 Addiction Recovery Resources",
        "🤝💬 Support Groups Directory",
        "🛋️🔎 Therapist/Counselor Finder",
        "🧘‍♀️💡 Stress Management Techniques",
        "🧘‍♂️✨ Mindfulness Exercises",
        "🧘‍♀️📱 Meditation Apps",
        "😴💡 Sleep Hygiene Tips",
        "🍎📖 Healthy Eating Guide",
        "💪🗓️ Exercise Routines",
        "🏋️‍♀️📞 Personal Trainer Contact",
        "🏋️‍♀️💳 Gym Membership Info",
        "⚽🗓️ Sports Team Schedule",
        "🎟️🏟️ Game Tickets Purchase",
        "fanatic Fan Club Registration",
        "👕🛍️ Team Merchandise Store",
        "📊⛹️ Player Statistics",
        "🏆📊 League Standings",
        "🎥⚽ Match Highlights Video",
        "📰⚽ Sports News Feed",
        "🎮🏆 Fantasy Sports League",
        "🎲💰 Betting Odds",
        "🍻📍 Sports Bar Locator",
        "🏟️🗓️ Stadium Tour Booking",
        "🏅👤 Athlete Bio",
        "🧑‍🏫👥 Coaching Staff Directory",
        "📜🏆 Team History",
        "🏆✨ Hall of Fame Inductees",
        "🖼️💰 Memorabilia Auction",
        "✍️🗓️ Autograph Session Details",
        "🤝🎉 Fan Meetup Info",
        "🎟️🌟 Season Ticket Holder Benefits",
        "✨🎟️ VIP Experience Packages",
        "🤝💰 Sponsorship Opportunities",
        "📰✍️ Media Accreditation Form",
        "🎤🗓️ Press Conference Schedule",
        "🎙️🤝 Post-Game Interview Access",
        "🔄👥 Team Roster Changes",
        "🩹📊 Injury Report",
        "🔄💬 Trade Rumors",
        "📈💡 Draft Pick Analysis",
        "🔎📝 Scouting Reports",
        "👶⚽ Youth Sports Programs",
        "🧑‍🏫🏆 Coaching Certification Courses",
        "⚖️🏆 Referee Training Programs",
        "🛍️⚽ Sports Equipment Store",
        "👕🛍️ Sports Apparel Shop",
        "💊💪 Nutritional Supplements Info",
        "🏥🩹 Sports Injury Clinic",
        "🚶‍♀️🩹 Physical Therapy Services",
        "🧠💪 Sports Psychology Resources",
        "📈🧑‍🏫 Performance Coaching",
        "🏅✍️ Athlete Sponsorship Application",
        "🎓💰 Sports Scholarship Info",
        "🔬💪 Sports Science Research",
        "🔬🚶 Biomechanics Lab Access",
        "📊💻 Sports Analytics Tools",
        "⌚💪 Wearable Tech for Athletes",
        "😴🩹 Recovery Techniques",
        "💧💡 Hydration Guidelines",
        "😴✨ Sleep Optimization Tips",
        "💪⏰ Pre-Workout Routine",
        "🍽️💪 Post-Workout Meal Ideas",
        "🛡️💪 Injury Prevention Exercises",
        "🔥💪 Warm-up Drills",
        "🌬️🧘 Cool-down Stretches",
        "🔄💪 Cross-Training Ideas",
        "🏋️‍♀️🗓️ Strength Training Program",
        "🏃‍♀️🗓️ Cardio Workout Plan",
        "🤸‍♀️🧘 Flexibility Exercises",
        "⚖️🤸 Balance Training Drills",
        "⚡🏃 Agility Training Drills",
        "💨🏃 Speed Training Workouts",
        "wytrwalosc Endurance Training Tips",
        "💥💪 Plyometric Exercises",
        "💪🧘 Core Strength Workouts",
        "💪⬆️ Upper Body Workout",
        "💪⬇️ Lower Body Workout",
        "💪🌐 Full Body Workout",
        "😴🌳 Rest Day Activities",
        "🚶‍♀️🩹 Active Recovery Ideas",
        "🧘‍♀️🤸 Stretching Routine",
        "roll Foam Rolling Techniques",
        "💆‍♀️🗓️ Massage Therapy Booking",
        "❄️🩹 Cryotherapy Benefits",
        "🧖‍♀️🔥 Sauna Session Info",
        "💧🩹 Hydrotherapy Benefits",
        "📍🩹 Acupuncture Clinic",
        "🦴📞 Chiropractor Contact",
        "🚶‍♀️📞 Physical Therapist Contact",
        "🏥📞 Sports Doctor Contact",
        "🥗📞 Dietitian Consultation",
        "🍎📞 Sports Nutritionist",
        "🧠🧑‍🏫 Mental Performance Coach",
        "🧠📞 Sports Psychologist",
        "🧘‍♀️💪 Yoga for Athletes",
        "🤸‍♀️💪 Pilates for Core Strength",
        "🏋️‍♀️🗓️ CrossFit WODs",
        "⏱️💪 HIIT Workout Examples",
        "⏱️🏋️‍♀️ Tabata Training Guide",
        "🔄💪 Circuit Training Ideas",
        "🤸‍♀️💪 Bodyweight Exercises",
        "elastic Resistance Band Workouts",
        "kettlebell Kettlebell Training",
        "dumbbell Dumbbell Exercises",
        "barbell Barbell Workouts",
        "⚙️💪 Gym Machine Guide",
        "🌳💪 Outdoor Workout Spots",
        "🏃‍♀️🗺️ Running Routes",
        "🚲🗺️ Cycling Trails",
        "🏊‍♀️🗓️ Swimming Pool Schedule",
        "🏀📍 Basketball Court Locator",
        "🎾🗓️ Tennis Court Booking",
        "🏐📍 Volleyball Court Info",
        "🏸🗓️ Badminton Court Booking",
        "squash Squash Court Booking",
        "🏓📍 Table Tennis Club",
        "🎳📍 Bowling Alley Info",
        "⛸️📍 Ice Skating Rink",
        "🛼📍 Roller Skating Rink",
        "🛹📍 Skate Park Location",
        "🧗‍♀️📍 Climbing Wall Gym",
        "🧗‍♂️📍 Bouldering Gym",
        "🥋📍 Martial Arts Dojo",
        "🥊📍 Boxing Gym",
        "🤺📍 Fencing Club",
        "🏹📍 Archery Range",
        "🔫📍 Shooting Range",
        "⛳🗓️ Golf Course Booking",
        "⛳📍 Mini Golf Course",
        "🏌️‍♂️📍 Driving Range",
        "🐎🗓️ Horse Riding Lessons",
        "🐎📍 Equestrian Center"
    ]);
    // No need for isFetchingIdeas state or useEffect for fetching ideas anymore
    const [isFetchingIdeas, setIsFetchingIdeas] = useState(false); 

    const qrCanvasRef = useRef(null);
    const styleCanvasRefs = useRef(Array(12).fill(null));

    // Define QR code styles (remains in App as it's static data used by QRGeneratorTab)
    const qrStyles = [
        { name: "Classic", fg: "#FFFFFF" }, // Changed to white for visibility
        { name: "Neon Green", fg: "#39FF14" }, // Vibrant Neon Green
        { name: "Electric Blue", fg: "#00BFFF" }, // Bright Sky Blue
        { name: "Radiant Pink", fg: "#FF007F" }, // Hot Pink
        { name: "Cyber Purple", fg: "#BF00FF" }, // Bright Purple
        { name: "Gold Spark", fg: "#FFD700" }, // Gold
        { name: "Aqua Glow", fg: "#00FFFF" }, // Cyan (default)
        { name: "Fire Orange", fg: "#FF4500" }, // Orange-Red
        { name: "Lava Red", fg: "#FF2400" }, // Bright Red
        { name: "Lime Zing", fg: "#7FFF00" }, // Chartreuse
        { name: "Deep Teal", fg: "#008080" }, // Teal
        { name: "Violet Ray", fg: "#8A2BE2" }, // Blue-Violet
        { name: "Emerald", fg: "#00C957" }, // Deep Green
        { name: "Sapphire", fg: "#082567" }, // Deep Blue
        { name: "Ruby", fg: "#E0115F" }, // Deep Red
        { name: "Amethyst", fg: "#9966CC" }, // Medium Purple
        { name: "Sunshine", fg: "#FFD300" }, // Bright Yellow
        { name: "Ocean Wave", fg: "#007FFF" }, // Medium Blue
        { name: "Forest Mist", fg: "#A8C3BC" }, // Light Greenish-Gray
        { name: "Crimson Tide", fg: "#DC143C" }, // Crimson
        { name: "Midnight Blue", fg: "#191970" }, // Dark Blue
        { name: "Rose Gold", fg: "#B76E79" }, // Rose Gold
        { name: "Spring Green", fg: "#00FF7F" }, // Spring Green
        { name: "Royal Purple", fg: "#7851A9" }, // Royal Purple
        { name: "Azure", fg: "#007FFF" }, // Azure Blue
        { name: "Coral", fg: "#FF7F50" }, // Coral Orange
        { name: "Mint Green", fg: "#98FF98" }, // Light Mint Green
        { name: "Lavender", fg: "#E6E6FA" }, // Light Lavender
        { name: "Chocolate", fg: "#D2691E" }, // Chocolate Brown
        { name: "Silver", fg: "#C0C0C0" }, // Silver
        { name: "Bronze", fg: "#CD7F32" }, // Bronze
        { name: "Copper", fg: "#B87333" }, // Copper
        { name: "Plum", fg: "#8E4585" }, // Plum Purple
        { name: "Olive", fg: "#808000" }, // Olive Green
        { name: "Maroon", fg: "#800000" }, // Maroon Red
        { name: "Teal Blue", fg: "#367588" }, // Teal Blue
        { name: "Sky Blue", fg: "#87CEEB" }, // Sky Blue
        { name: "Slate Gray", fg: "#708090" }, // Slate Gray
        { name: "Dark Green", fg: "#006400" }, // Dark Green
        { name: "Dark Red", fg: "#8B0000" }, // Dark Red
        { name: "Dark Blue", fg: "#00008B" }, // Dark Blue
        { name: "Dark Cyan", fg: "#008B8B" }, // Dark Cyan
        { name: "Dark Magenta", fg: "#8B008B" }, // Dark Magenta
        { name: "Dark Yellow", fg: "#8B8B00" }, // Dark Yellow
        { name: "Light Gray", fg: "#D3D3D3" }, // Light Gray
        { name: "Light Blue", fg: "#ADD8E6" }, // Light Blue
        { name: "Light Green", fg: "#90EE90" }, // Light Green
        { name: "Light Pink", fg: "#FFB6C1" }, // Light Pink
        { name: "Light Yellow", fg: "#FFFFE0" }, // Light Yellow
        { name: "Pale Green", fg: "#98FB98" }, // Pale Green
        { name: "Pale Blue", fg: "#AFEEEE" }, // Pale Blue
        { name: "Pale Red", fg: "#F08080" }, // Pale Red
        { name: "Pale Yellow", fg: "#FFFF99" }, // Pale Yellow
        { name: "Deep Orange", fg: "#FF6600" }, // Deep Orange
        { name: "Deep Pink", fg: "#FF1493" }, // Deep Pink
        { name: "Deep Purple", fg: "#800080" }, // Deep Purple
        { name: "Deep Sky Blue", fg: "#00BFFF" }, // Deep Sky Blue
        { name: "Medium Sea Green", fg: "#3CB371" }, // Medium Sea Green
        { name: "Medium Slate Blue", fg: "#7B68EE" }, // Medium Slate Blue
        { name: "Medium Spring Green", fg: "#00FA9A" }, // Medium Spring Green
        { name: "Medium Turquoise", fg: "#48D1CC" }, // Medium Turquoise
        { name: "Medium Violet Red", fg: "#C71585" }, // Medium Violet Red
        { name: "Dark Goldenrod", fg: "#B8860B" }, // Dark Goldenrod
        { name: "Dark Orchid", fg: "#9932CC" }, // Dark Orchid
        { name: "Dark Salmon", fg: "#E9967A" }, // Dark Salmon
        { name: "Dark Sea Green", fg: "#8FBC8F" }, // Dark Sea Green
        { name: "Dark Slate Blue", fg: "#483D8B" }, // Dark Slate Blue
        { name: "Dark Slate Gray", fg: "#2F4F4F" }, // Dark Slate Gray
        { name: "Dark Turquoise", fg: "#00CED1" }, // Dark Turquoise
        { name: "Dark Violet", fg: "#9400D3" }, // Dark Violet
        { name: "Light Coral", fg: "#F08080" }, // Light Coral
        { name: "Light Cyan", fg: "#E0FFFF" }, // Light Cyan
        { name: "Light Goldenrod Yellow", fg: "#FAFAD2" }, // Light Goldenrod Yellow
        { name: "Light Green", fg: "#90EE90" }, // Light Green
        { name: "Light Pink", fg: "#FFB6C1" }, // Light Pink
        { name: "Light Salmon", fg: "#FFA07A" }, // Light Salmon
        { name: "Light Sea Green", fg: "#20B2AA" }, // Light Sea Green
        { name: "Light Sky Blue", fg: "#87CEFA" }, // Light Sky Blue
        { name: "Light Slate Gray", fg: "#778899" }, // Light Slate Gray
        { name: "Light Steel Blue", fg: "#B0C4DE" }, // Light Steel Blue
        { name: "Light Yellow", fg: "#FFFFE0" }, // Light Yellow
        { name: "Hot Pink", fg: "#FF69B4" }, // Hot Pink
        { name: "Indian Red", fg: "#CD5C5C" }, // Indian Red
        { name: "Indigo", fg: "#4B0082" }, // Indigo
        { name: "Khaki", fg: "#F0E68C" }, // Khaki
        { name: "Lavender Blush", fg: "#FFF0F5" }, // Lavender Blush
        { name: "Lemon Chiffon", fg: "#FFFACD" }, // Lemon Chiffon
        { name: "Lime Green", fg: "#32CD32" }, // Lime Green
        { name: "Linen", fg: "#FAF0E6" }, // Linen
        { name: "Medium Aqua Marine", fg: "#66CDAA" }, // Medium Aqua Marine
        { name: "Medium Blue", fg: "#0000CD" }, // Medium Blue
        { name: "Medium Orchid", fg: "#BA55D3" }, // Medium Orchid
        { name: "Medium Purple", fg: "#9370DB" }, // Medium Purple
        { name: "Medium Violet Red", fg: "#C71585" }, // Medium Violet Red
        { name: "Misty Rose", fg: "#FFE4E1" }, // Misty Rose
        { name: "Moccasin", fg: "#FFE4B5" }, // Moccasin
        { name: "Navajo White", fg: "#FFDEAD" }, // Navajo White
        { name: "Old Lace", fg: "#FDF5E6" }, // Old Lace
        { name: "Olive Drab", fg: "#6B8E23" }, // Olive Drab
        { name: "Orange Red", fg: "#FF4500" }, // Orange Red
        { name: "Orchid", fg: "#DA70D6" }, // Orchid
        { name: "Pale Goldenrod", fg: "#EEE8AA" }, // Pale Goldenrod
        { name: "Pale Turquoise", fg: "#AFEEEE" }, // Pale Turquoise
        { name: "Pale Violet Red", fg: "#DB7093" }, // Pale Violet Red
        { name: "Papaya Whip", fg: "#FFEFD5" }, // Papaya Whip
        { name: "Peach Puff", fg: "#FFDAB9" }, // Peach Puff
        { name: "Peru", fg: "#CD853F" }, // Peru
        { name: "Pink", fg: "#FFC0CB" }, // Pink
        { name: "Plum", fg: "#DDA0DD" }, // Plum
        { name: "Powder Blue", fg: "#B0E0E6" }, // Powder Blue
        { name: "Rosy Brown", fg: "#BC8F8F" }, // Rosy Brown
        { name: "Royal Blue", fg: "#4169E1" }, // Royal Blue
        { name: "Saddle Brown", fg: "#8B4513" }, // Saddle Brown
        { name: "Salmon", fg: "#FA8072" }, // Salmon
        { name: "Sandy Brown", fg: "#F4A460" }, // Sandy Brown
        { name: "Sea Green", fg: "#2E8B57" }, // Sea Green
        { name: "Sea Shell", fg: "#FFF5EE" }, // Sea Shell
        { name: "Sienna", fg: "#A0522D" }, // Sienna
        { name: "Sky Blue", fg: "#87CEEB" }, // Sky Blue
        { name: "Slate Blue", fg: "#6A5ACD" }, // Slate Blue
        { name: "Slate Gray", fg: "#708090" }, // Slate Gray
        { name: "Snow", fg: "#FFFAFA" }, // Snow
        { name: "Spring Green", fg: "#00FF7F" }, // Spring Green
        { name: "Steel Blue", fg: "#4682B4" }, // Steel Blue
        { name: "Tan", fg: "#D2B48C" }, // Tan
        { name: "Thistle", fg: "#D8BFD8" }, // Thistle
        { name: "Tomato", fg: "#FF6347" }, // Tomato
        { name: "Turquoise", fg: "#40E0D0" }, // Turquoise
        { name: "Violet", fg: "#EE82EE" }, // Violet
        { name: "Wheat", fg: "#F5DEB3" }, // Wheat
        { name: "White Smoke", fg: "#F5F5F5" }, // White Smoke
        { name: "Yellow Green", fg: "#9ACD32" }, // Yellow Green
    ];

    // Define themes (remains in App)
    const themes = {
        dark: {
            // Deeper, more consistent dark background
            bg: 'bg-gradient-to-br from-[#050505] via-[#100515] to-[#050505] animate-gradient-shift', 
            text: 'text-gray-100',
            // More vibrant neon accents
            primaryAccent: 'from-cyan-500 to-blue-600', 
            secondaryAccent: 'from-fuchsia-500 to-purple-600', 
            glassBg: 'bg-white/5 backdrop-blur-3xl',
            glassBorder: 'border-white/10',
            shadow: 'shadow-blue-500/20',
            glow: 'shadow-lg shadow-cyan-400/40', // Stronger neon glow
            buttonGlow: 'hover:shadow-xl hover:shadow-cyan-300/50', // Stronger button glow
            success: 'text-green-400',
            alert: 'text-pink-500',
            inputBg: 'bg-white/5',
            inputBorder: 'border-white/10',
            tabActive: 'bg-white/10 border-cyan-500 shadow-lg shadow-cyan-500/20', // Neon active tab
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-white/5 backdrop-blur-md',
            cardBorder: 'border-white/10',
            // Ensure QR preview background is very dark for neon contrast
            qrPreviewBorder: 'border-cyan-500/50', 
            qrPreviewBg: 'bg-gradient-to-br from-gray-950/40 to-gray-900/40 backdrop-blur-md', 
            headerGlow: 'animate-quantum-flux' 
        },
        light: {
            bg: 'bg-gradient-to-br from-[#F8F8F8] via-[#E8E8E8] to-[#F8F8F8] animate-gradient-shift-light',
            text: 'text-gray-800',
            primaryAccent: 'from-blue-400 to-purple-500',
            secondaryAccent: 'from-cyan-300 to-teal-400',
            glassBg: 'bg-white/80 backdrop-blur-3xl',
            glassBorder: 'border-gray-200',
            shadow: 'shadow-gray-400/20',
            glow: 'shadow-lg shadow-blue-300/40',
            buttonGlow: 'hover:shadow-xl hover:shadow-blue-300/50',
            success: 'text-green-600',
            alert: 'text-red-600',
            inputBg: 'bg-white/90',
            inputBorder: 'border-gray-300',
            tabActive: 'bg-white/90 border-blue-500 shadow-lg shadow-blue-300/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-white/90 backdrop-blur-md',
            cardBorder: 'border-gray-200',
            qrPreviewBorder: 'border-blue-400/50',
            qrPreviewBg: 'bg-gradient-to-br from-gray-100/60 to-gray-200/60 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux-light' 
        },
        'forest-green': {
            bg: 'bg-gradient-to-br from-[#0A2A1A] via-[#1A4A3A] to-[#0A3A2A] animate-gradient-shift',
            text: 'text-white',
            primaryAccent: 'from-green-500 to-emerald-600',
            secondaryAccent: 'from-lime-400 to-green-500',
            glassBg: 'bg-green-900/40 backdrop-blur-3xl',
            glassBorder: 'border-green-800/20',
            shadow: 'shadow-green-500/20',
            glow: 'shadow-lg shadow-green-500/40',
            buttonGlow: 'hover:shadow-xl hover:shadow-green-400/50',
            success: 'text-lime-400',
            alert: 'text-red-400',
            inputBg: 'bg-green-950/30',
            inputBorder: 'border-green-900/15',
            tabActive: 'bg-green-800/20 border-green-500 shadow-lg shadow-green-500/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-green-950/30 backdrop-blur-md',
            cardBorder: 'border-green-900/15',
            qrPreviewBorder: 'border-green-500/50',
            qrPreviewBg: 'bg-gradient-to-br from-green-900/30 to-green-800/30 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux'
        },
        'ocean-blue': {
            bg: 'bg-gradient-to-br from-[#001A33] via-[#003366] to-[#002A5A] animate-gradient-shift',
            text: 'text-white',
            primaryAccent: 'from-blue-600 to-indigo-700',
            secondaryAccent: 'from-sky-400 to-cyan-500',
            glassBg: 'bg-blue-900/40 backdrop-blur-3xl',
            glassBorder: 'border-blue-800/20',
            shadow: 'shadow-blue-600/20',
            glow: 'shadow-lg shadow-blue-600/40',
            buttonGlow: 'hover:shadow-xl hover:hover:shadow-blue-500/50',
            success: 'text-sky-400',
            alert: 'text-red-400',
            inputBg: 'bg-blue-950/30',
            inputBorder: 'border-blue-900/15',
            tabActive: 'bg-blue-800/20 border-blue-500 shadow-lg shadow-blue-600/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-blue-950/30 backdrop-blur-md',
            cardBorder: 'border-blue-900/15',
            qrPreviewBorder: 'border-blue-600/50',
            qrPreviewBg: 'bg-gradient-to-br from-blue-950/30 to-blue-900/30 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux'
        },
        'warm-grey': {
            bg: 'bg-gradient-to-br from-[#202020] via-[#404040] to-[#303030] animate-gradient-shift',
            text: 'text-gray-100',
            primaryAccent: 'from-gray-500 to-gray-700',
            secondaryAccent: 'from-yellow-400 to-orange-500',
            glassBg: 'bg-gray-700/40 backdrop-blur-3xl',
            glassBorder: 'border-gray-600/20',
            shadow: 'shadow-gray-500/20',
            glow: 'shadow-lg shadow-gray-500/40',
            buttonGlow: 'hover:shadow-xl hover:shadow-gray-400/50',
            success: 'text-lime-400',
            alert: 'text-red-400',
            inputBg: 'bg-gray-800/30',
            inputBorder: 'border-gray-700/15',
            tabActive: 'bg-gray-600/20 border-gray-500 shadow-lg shadow-gray-500/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-gray-800/30 backdrop-blur-md',
            cardBorder: 'border-gray-700/15',
            qrPreviewBorder: 'border-gray-500/50',
            qrPreviewBg: 'bg-gradient-to-br from-gray-800/30 to-gray-700/30 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux'
        },
        'deep-purple': {
            bg: 'bg-gradient-to-br from-[#100830] via-[#201040] to-[#180C38] animate-gradient-shift',
            text: 'text-white',
            primaryAccent: 'from-purple-600 to-fuchsia-700',
            secondaryAccent: 'from-pink-400 to-purple-500',
            glassBg: 'bg-purple-900/40 backdrop-blur-3xl',
            glassBorder: 'border-purple-800/20',
            shadow: 'shadow-purple-600/20',
            glow: 'shadow-lg shadow-purple-600/40',
            buttonGlow: 'hover:shadow-xl hover:hover:shadow-purple-500/50',
            success: 'text-lime-400',
            alert: 'text-red-400',
            inputBg: 'bg-purple-950/30',
            inputBorder: 'border-purple-900/15',
            tabActive: 'bg-purple-800/20 border-purple-500 shadow-lg shadow-purple-600/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-purple-950/30 backdrop-blur-md',
            cardBorder: 'border-purple-900/15',
            qrPreviewBorder: 'border-purple-600/50',
            qrPreviewBg: 'bg-gradient-to-br from-purple-950/30 to-purple-900/30 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux'
        },
        'sunrise-orange': {
            bg: 'bg-gradient-to-br from-[#A0300A] via-[#D0501A] to-[#B84012] animate-gradient-shift',
            text: 'text-white',
            primaryAccent: 'from-orange-600 to-red-700',
            secondaryAccent: 'from-yellow-400 to-orange-500',
            glassBg: 'bg-orange-800/40 backdrop-blur-3xl',
            glassBorder: 'border-orange-700/20',
            shadow: 'shadow-orange-600/20',
            glow: 'shadow-lg shadow-orange-600/40',
            buttonGlow: 'hover:shadow-xl hover:hover:shadow-orange-500/50',
            success: 'text-lime-400',
            alert: 'text-red-400',
            inputBg: 'bg-orange-900/30',
            inputBorder: 'border-orange-800/15',
            tabActive: 'bg-orange-700/20 border-orange-500 shadow-lg shadow-orange-600/20',
            tabInactive: 'bg-transparent border-transparent',
            cardBg: 'bg-orange-900/30 backdrop-blur-md',
            cardBorder: 'border-orange-800/15',
            qrPreviewBorder: 'border-orange-600/50',
            qrPreviewBg: 'bg-gradient-to-br from-orange-900/30 to-orange-800/30 backdrop-blur-md',
            headerGlow: 'animate-quantum-flux'
        },
    };

    const currentThemeClasses = themes[currentTheme];

    // Function to show custom alert
    const showAlert = (message) => {
        setAlertMessage(message);
    };

    // Callback to generate QR code on a given canvas
    // Added a new parameter `lightColorOverride` to explicitly set the light module color
    const drawQrCode = useCallback((canvas, text, color, errorLevel, size = 256, lightColorOverride = null) => {
        if (!canvas) {
            console.warn("Canvas element is null, cannot draw QR code.");
            return;
        }
        if (!QRCode) {
            console.error("QRCode library is not loaded.");
            const context = canvas.getContext('2d');
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = 'red';
            context.font = '10px Arial';
            context.fillText('QR Lib Error', 10, 20);
            return;
        }

        const context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Determine the light module color: white if QR color is black, otherwise black
        const effectiveLightColor = lightColorOverride || (color === '#000000' ? '#FFFFFF' : '#000000');

        if (text.trim() !== '') {
            QRCode.toCanvas(canvas, text, {
                errorCorrectionLevel: errorLevel,
                width: size,
                color: {
                    dark: color,
                    light: effectiveLightColor // Use the determined light color
                }
            }, function (error) {
                if (error) console.error("QR Code drawing error:", error);
            });
        }
    }, []);

    // Function to download the generated QR code
    const downloadQrCode = () => {
        if (content.trim() === '') {
            showAlert('Please enter content to generate QR code.');
            return;
        }

        // Create a temporary canvas for high-resolution download
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = downloadResolution;
        tempCanvas.height = downloadResolution;

        // Determine the light module color for download: white if QR color is black, otherwise black
        const effectiveLightColorForDownload = qrColor === '#000000' ? '#FFFFFF' : '#000000';

        QRCode.toCanvas(tempCanvas, content, {
            errorCorrectionLevel: errorLevel,
            width: downloadResolution,
            color: {
                dark: qrColor,
                light: effectiveLightColorForDownload // Use the determined light color for download
            }
        }, function (error) {
            if (error) console.error("QR Code drawing error for download:", error);
            const pngUrl = tempCanvas.toDataURL("image/png");
            const downloadLink = document.createElement('a');
            downloadLink.href = pngUrl;
            downloadLink.download = `qrcode_${downloadResolution}x${downloadResolution}.png`;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
            showAlert(`QR Code saved as ${downloadResolution}x${downloadResolution} PNG!`);
        });
    };

    // Function to decode QR code from an uploaded image
    const decodeQrCode = (event) => {
        const file = event.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                context.drawImage(img, 0, 0, img.width, img.height);

                const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

                // Use jsqr (lowercase) here
                if (jsqr) {
                    let code = jsqr(imageData.data, imageData.width, imageData.height);

                    if (!code) {
                        // Attempt to invert colors and try again
                        for (let i = 0; i < imageData.data.length; i += 4) {
                            imageData.data[i] = 255 - imageData.data[i];
                            imageData.data[i + 1] = 255 - imageData.data[i + 1];
                            imageData.data[i + 2] = 255 - imageData.data[i + 2];
                        }
                        code = jsqr(imageData.data, imageData.width, imageData.height);
                    }

                    if (code) {
                        setDecodedContent(code.data);
                        setSuggestedIdea(''); // Clear previous suggestions when new QR is decoded
                        setShowSuggestedIdea(false);
                    } else {
                        setDecodedContent('No QR code detected.');
                        setSuggestedIdea('');
                        setShowSuggestedIdea(false);
                    }
                } else {
                    showAlert('QR decoder library (jsqr) not loaded. Please try again or check internet connection.');
                    setSuggestedIdea('');
                    setShowSuggestedIdea(false);
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

    // Function to summarize content using Gemini API
    const summarizeContent = async () => {
        if (!decodedContent.trim() || decodedContent === 'No QR code detected.') {
            showAlert('Please decode a QR code first to summarize its content.');
            return;
        }

        setIsSummarizing(true);
        try {
            let chatHistory = [];
            // Prompt to handle various content types for summarization
            const prompt = `Summarize the following text concisely. If the text appears to be in XML, JSON, or another large structured format, extract the key information and present it as plain text. If it's a very long plain text, provide a brief summary. Text to summarize: "${decodedContent}"`;
            chatHistory.push({ role: "user", parts: [{ text: prompt }] });
            const payload = { contents: chatHistory };
            const apiKey = ""; // Canvas will provide this at runtime
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await response.json();

            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                const text = result.candidates[0].content.parts[0].text;
                setContent(text); // Update the generator's input field with summarized content
                showAlert('Content summarized and moved to QR Generator tab!');
            } else {
                showAlert("Failed to summarize content. Please try again.");
            }
        } catch (error) {
            console.error("Error summarizing content:", error);
            showAlert("An error occurred while summarizing content.");
        } finally {
            setIsSummarizing(false);
        }
    };

    // Function to suggest ideas for QR code generation from the local array
    const suggestIdeas = () => {
        if (allSuggestedIdeas.length > 0) {
            const randomIndex = Math.floor(Math.random() * allSuggestedIdeas.length);
            const randomIdea = allSuggestedIdeas[randomIndex];
            setSuggestedIdea(randomIdea); // Display the randomly selected idea
            setContent(randomIdea); // Set the QR content to the suggested idea
            setShowSuggestedIdea(true); // Ensure the ideas panel is shown
        } else {
            // This case should ideally not be hit if allSuggestedIdeas is hardcoded
            setSuggestedIdea("No ideas available in the local list.");
            setShowSuggestedIdea(true);
        }
    };

    return (
        // Modified: min-h-screen to allow page to grow, flex-col for vertical layout
        <div className={`min-h-screen flex flex-col font-inter antialiased ${currentThemeClasses.bg} ${currentThemeClasses.text} transition-all duration-500 ease-in-out`}>
            {/* Container for header, tabs, and tab content */}
            <div className="container mx-auto p-4 max-w-7xl flex flex-col flex-grow"> 
                <h1 className={`text-4xl lg:text-5xl font-extrabold text-center mb-8 bg-clip-text text-transparent ${currentThemeClasses.headerGlow} font-orbitron`}>
                    QuantumQR Studio
                </h1>

                {/* Tabs Navigation */}
                <div className={`flex flex-wrap justify-center mb-8 p-1 rounded-xl shadow-inner ${currentThemeClasses.cardBg} ${currentThemeClasses.cardBorder} border`}>
                    <button
                        className={`flex-1 min-w-[150px] py-3 px-6 text-lg font-semibold rounded-lg transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-md
                            ${activeTab === 'generator' ? currentThemeClasses.tabActive : currentThemeClasses.tabInactive}
                            ${activeTab === 'generator' ? currentThemeClasses.primaryAccent : currentThemeClasses.text}`}
                        onClick={() => setActiveTab('generator')}
                    >
                        <i className="fas fa-qrcode mr-2"></i> QR Generator
                    </button>
                    <button
                        className={`flex-1 min-w-[150px] py-3 px-6 text-lg font-semibold rounded-lg transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-md
                            ${activeTab === 'decoder' ? currentThemeClasses.tabActive : currentThemeClasses.tabInactive}
                            ${activeTab === 'decoder' ? currentThemeClasses.primaryAccent : currentThemeClasses.text}`}
                        onClick={() => setActiveTab('decoder')}
                    >
                        <i className="fas fa-camera mr-2"></i> QR Decoder
                    </button>
                    <button
                        className={`flex-1 min-w-[150px] py-3 px-6 text-lg font-semibold rounded-lg transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-md
                            ${activeTab === 'settings' ? currentThemeClasses.tabActive : currentThemeClasses.tabInactive}
                            ${activeTab === 'settings' ? currentThemeClasses.primaryAccent : currentThemeClasses.text}`}
                        onClick={() => setActiveTab('settings')}
                    >
                        <i className="fas fa-cog mr-2"></i> Settings
                    </button>
                </div>

                {/* Tab Content - Added flex-grow to fill remaining space */}
                <div className="tab-content flex flex-col flex-grow">
                    {activeTab === 'generator' && (
                        <QRGeneratorTab
                            content={content}
                            setContent={setContent}
                            errorLevel={errorLevel}
                            setErrorLevel={setErrorLevel}
                            qrColor={qrColor}
                            setQrColor={setQrColor}
                            suggestIdeas={suggestIdeas}
                            downloadQrCode={downloadQrCode}
                            qrCanvasRef={qrCanvasRef}
                            isInputFocused={isInputFocused}
                            setIsInputFocused={setIsInputFocused}
                            currentThemeClasses={currentThemeClasses}
                            qrStyles={qrStyles}
                            selectedStyleIndex={selectedStyleIndex}
                            setSelectedStyleIndex={setSelectedStyleIndex}
                            styleCanvasRefs={styleCanvasRefs}
                            drawQrCode={drawQrCode}
                            suggestedIdea={suggestedIdea}
                            showSuggestedIdea={setShowSuggestedIdea}
                            downloadResolution={downloadResolution}
                            setDownloadResolution={setDownloadResolution}
                        />
                    )}
                    {activeTab === 'decoder' && (
                        <QRDecoderTab
                            decodedContent={decodedContent}
                            setDecodedContent={setDecodedContent}
                            isSummarizing={isSummarizing}
                            summarizeContent={summarizeContent}
                            showAlert={showAlert}
                            decodeQrCode={decodeQrCode}
                            currentThemeClasses={currentThemeClasses}
                        />
                    )}
                    {activeTab === 'settings' && (
                        <SettingsTab
                            currentTheme={currentTheme}
                            setCurrentTheme={setCurrentTheme}
                            currentThemeClasses={currentThemeClasses}
                            themes={themes}
                        />
                    )}
                </div>
                {/* Added padding to the bottom of the container to ensure space below content */}
                <div className="pb-8"></div> 
            </div>

            {/* Custom Alert Modal */}
            <CustomAlert message={alertMessage} onClose={() => setAlertMessage(null)} />

            {/* Font Awesome for Icons */}
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"></link>
            {/* Google Fonts - Inter & Orbitron */}
            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Orbitron:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"></link>

            {/* Tailwind CSS CDN - Ensure this is loaded */}
            <script src="https://cdn.tailwindcss.com"></script>

            {/* Custom Scrollbar Styles */}
            <style>
                {`
                .custom-scrollbar::-webkit-scrollbar {
                    width: 8px;
                }

                .custom-scrollbar::-webkit-scrollbar-track {
                    background: rgba(255, 255, 255, 0.05); /* Light track for dark themes */
                    border-radius: 10px;
                }

                .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: #00BFFF; /* Electric Blue, matching a primary accent */
                    border-radius: 10px;
                    border: 2px solid rgba(255, 255, 255, 0.1); /* Slight border for depth */
                }

                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: #00FFFF; /* Lighter cyan on hover */
                }

                /* For Firefox */
                .custom-scrollbar {
                    scrollbar-width: thin;
                    scrollbar-color: #00BFFF rgba(255, 255, 255, 0.05);
                }
                `}
            </style>
        </div>
    );
};

export default App;