import { Head, Link } from '@inertiajs/react';
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
    Code2, Globe, ArrowRight, Zap, 
    ChevronRight, Binary, Database, Cpu,
    Layers, Share2, Server, Github, Shield,
    User, Clock, Box, Rocket, Monitor, Workflow,
    CheckCircle2, AppWindow, Command, Braces,
    Layout, Smartphone, Terminal, Eye, Sparkles, Lock,
    Activity, Heart
} from 'lucide-react';
import axios from 'axios';
import PublicLayout from '@/Layouts/PublicLayout';
import useProjectStore from '@/Stores/useProjectStore';
import MonacoWrapper from '@/Components/Editor/MonacoWrapper';

// Fully Functional "Neural_Sandbox" Editor for the Home Page
const HomeEditor = () => {
    const [html, setHtml] = useState(`<div class="neural-substrate">\n  <canvas id="neural-canvas"></canvas>\n  <div class="ui-overlay">\n    <div class="status-bar">\n      <span class="pulse"></span>\n      <span>NODE_STATUS: OPTIMIZED</span>\n    </div>\n    <div class="telemetry">\n      <h1>NEURAL_CORE_v2</h1>\n      <p>INTERACTIVE_PARTICLE_MATRIX</p>\n    </div>\n    <div class="footer-stats">\n      <div class="stat">CORES: 128</div>\n      <div class="stat">LATENCY: 0.02ms</div>\n    </div>\n  </div>\n</div>`);
    
    const [css, setCss] = useState(`body {\n  background: #050505 !important;\n  margin: 0; overflow: hidden;\n  font-family: 'Inter', sans-serif;\n}\n\n.neural-substrate {\n  position: relative;\n  width: 100vw; height: 100vh;\n}\n\n#neural-canvas {\n  position: absolute;\n  inset: 0; z-index: 1;\n}\n\n.ui-overlay {\n  position: relative;\n  z-index: 2; height: 100%;\n  display: flex; flex-direction: column;\n  justify-content: space-between;\n  padding: 40px; pointer-events: none;\n}\n\n.status-bar {\n  display: flex; items-center: center; gap: 10px;\n  color: #06b6d4; font-size: 10px; font-weight: 900;\n  letter-spacing: 2px;\n}\n\n.pulse {\n  width: 8px; height: 8px; background: #06b6d4;\n  border-radius: 50%; animation: glow 2s infinite;\n}\n\nh1 {\n  color: white; font-size: 4rem; font-weight: 900;\n  margin: 0; letter-spacing: -2px; font-style: italic;\n  text-shadow: 0 0 30px rgba(6,182,212,0.3);\n}\n\np {\n  color: #475569; font-size: 12px; font-weight: 800;\n  letter-spacing: 5px; margin-top: 5px;\n}\n\n.footer-stats {\n  display: flex; gap: 40px;\n  color: #1e293b; font-size: 9px; font-weight: 900;\n  letter-spacing: 2px; border-top: 1px solid #1e293b;\n  padding-top: 20px;\n}\n\n@keyframes glow {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.3; transform: scale(1.5); }\n}`);

    const [js, setJs] = useState(`const canvas = document.getElementById('neural-canvas');\nconst ctx = canvas.getContext('2d');\nlet particles = [];\nconst mouse = { x: null, y: null, radius: 150 };\n\nwindow.addEventListener('resize', resize);\nwindow.addEventListener('mousemove', (e) => { mouse.x = e.x; mouse.y = e.y; });\n\nfunction resize() {\n  canvas.width = window.innerWidth;\n  canvas.height = window.innerHeight;\n}\n\nclass Particle {\n  constructor() {\n    this.x = Math.random() * canvas.width;\n    this.y = Math.random() * canvas.height;\n    this.size = Math.random() * 2 + 1;\n    this.vx = (Math.random() - 0.5) * 2;\n    this.vy = (Math.random() - 0.5) * 2;\n  }\n  update() {\n    this.x += this.vx; this.y += this.vy;\n    if (this.x > canvas.width || this.x < 0) this.vx *= -1;\n    if (this.y > canvas.height || this.y < 0) this.vy *= -1;\n    \n    let dx = mouse.x - this.x; let dy = mouse.y - this.y;\n    let dist = Math.sqrt(dx*dx + dy*dy);\n    if (dist < mouse.radius) {\n      this.x -= dx/20; this.y -= dy/20;\n    }\n  }\n  draw() {\n    ctx.fillStyle = 'rgba(6,182,212,0.8)';\n    ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2);\n    ctx.fill();\n  }\n}\n\nfunction init() {\n  particles = [];\n  for (let i=0; i<100; i++) particles.push(new Particle());\n}\n\nfunction animate() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  particles.forEach(p => {\n    p.update(); p.draw();\n    particles.forEach(other => {\n      let dx = p.x - other.x; let dy = p.y - other.y;\n      let dist = Math.sqrt(dx*dx + dy*dy);\n      if (dist < 100) {\n        ctx.strokeStyle = \`rgba(6, 182, 212, \${1 - dist/100})\`;\n        ctx.lineWidth = 0.5;\n        ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(other.x, other.y);\n        ctx.stroke();\n      }\n    });\n  });\n  requestAnimationFrame(animate);\n}\n\nresize(); init(); animate();\nconsole.log("Handshake_Successful: Neural Matrix Active.");`);
    const [activeTab, setActiveTab] = useState('html');
    const [previewContent, setPreviewContent] = useState('');
    const [logs, setLogs] = useState([]);

    const compile = async () => {
        let compiledCss = css;
        let compiledJs = js;

        // Simplified compiler logic for the home page sandbox
        if (window.Sass && (css.includes('$') || css.includes('{'))) {
            window.Sass.compile(css, (result) => {
                if (result.text) compiledCss = result.text;
            });
        }

        const content = `
            <!DOCTYPE html>
            <html>
            <head>
                <style>
                    body { background: #050505; color: white; margin: 0; padding: 0; min-height: 100vh; display: flex; flex-direction: column; }
                    ${compiledCss}
                </style>
                <script>
                    console.log = (...args) => {
                        window.parent.postMessage({ type: 'LOG', content: args.join(' ') }, '*');
                    };
                </script>
            </head>
            <body>${html}<script>${compiledJs}</script></body>
            </html>
        `;
        setPreviewContent(content);
    };

    useEffect(() => {
        const handleMessage = (e) => {
            if (e.data.type === 'LOG') {
                setLogs(prev => [...prev, e.data.content].slice(-3));
            }
        };
        window.addEventListener('message', handleMessage);
        const timeout = setTimeout(compile, 800);
        return () => {
            window.removeEventListener('message', handleMessage);
            clearTimeout(timeout);
        };
    }, [html, css, js]);

    return (
        <div className="relative group max-w-6xl mx-auto text-left">
            <div className="absolute -inset-2 bg-gradient-to-r from-cyan-500/20 to-purple-600/20 rounded-[2.5rem] blur-3xl opacity-50"></div>
            <div className="relative bg-[var(--bg-surface)] border border-[var(--border)] rounded-[2rem] overflow-hidden shadow-2xl backdrop-blur-md">
                
                {/* Header / Tabs */}
                <div className="h-14 bg-[var(--bg-main)] border-b border-[var(--border)] flex items-center justify-between px-6">
                    <div className="flex items-center gap-6">
                        <div className="flex gap-1.5 mr-4">
                            <div className="w-2.5 h-2.5 rounded-full bg-rose-500/40" />
                            <div className="w-2.5 h-2.5 rounded-full bg-amber-500/40" />
                            <div className="w-2.5 h-2.5 rounded-full bg-emerald-500/40" />
                        </div>
                        <div className="flex gap-2">
                            {['html', 'css', 'js'].map(tab => (
                                <button
                                    key={tab}
                                    onClick={() => setActiveTab(tab)}
                                    className={`px-4 py-1.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all ${
                                        activeTab === tab 
                                        ? 'bg-cyan-500 text-black shadow-lg shadow-cyan-500/20' 
                                        : 'text-[var(--text-muted)] hover:text-white hover:bg-white/5'
                                    }`}
                                >
                                    {tab}
                                </button>
                            ))}
                        </div>
                    </div>
                    <div className="flex items-center gap-3">
                        <div className="flex items-center gap-2 px-3 py-1 bg-black/40 border border-white/5 rounded-full">
                            <div className="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" />
                            <span className="text-[8px] font-black uppercase text-emerald-500/80 tracking-widest">Live_Sandbox</span>
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 h-[500px]">
                    {/* Editor Side */}
                    <div className="relative border-r border-[var(--border)] bg-[#050505]">
                        <div className="h-full pt-2">
                            <MonacoWrapper 
                                language={activeTab} 
                                value={activeTab === 'html' ? html : activeTab === 'css' ? css : js}
                                onChange={(val) => {
                                    if (activeTab === 'html') setHtml(val);
                                    else if (activeTab === 'css') setCss(val);
                                    else setJs(val);
                                }}
                                fontSize={13}
                            />
                        </div>
                        
                        {/* Mini Console Overlay */}
                        <div className="absolute bottom-4 left-4 right-4 z-20">
                            <AnimatePresence>
                                {logs.length > 0 && (
                                    <motion.div 
                                        initial={{ opacity: 0, y: 10 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        className="bg-black/80 backdrop-blur-xl border border-white/10 rounded-xl p-3 shadow-2xl space-y-1"
                                    >
                                        {logs.map((log, i) => (
                                            <div key={i} className="text-[9px] font-mono text-cyan-500 flex gap-2">
                                                <span className="opacity-30">[{new Date().toLocaleTimeString([], {hour12: false, minute:'2-digit', second: '2-digit'})}]</span>
                                                <span className="truncate">{log}</span>
                                            </div>
                                        ))}
                                    </motion.div>
                                )}
                            </AnimatePresence>
                        </div>
                    </div>

                    {/* Preview Side */}
                    <div className="bg-white relative overflow-hidden">
                        <iframe 
                            srcDoc={previewContent} 
                            className="w-full h-full border-none" 
                            title="sandbox-preview"
                            sandbox="allow-scripts"
                        />
                        {/* Overlay Branding */}
                        <div className="absolute top-4 right-4 pointer-events-none opacity-10">
                            <Code2 size={100} className="text-black" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

const ProjectPreview = ({ project }) => {
    const [compiled, setCompiled] = useState({ css: '', js: '' });
    const [isCompiling, setIsCompiling] = useState(true);

    useEffect(() => {
        const compile = async () => {
            let cCss = project.code?.css || '';
            let cJs = project.code?.js || '';
            const preps = project.settings?.preprocessors || { css: 'css', js: 'js' };

            try {
                if ((preps.css === 'scss' || preps.css === 'sass') && window.Sass) {
                    window.Sass.compile(cCss, (result) => {
                        setCompiled(prev => ({ ...prev, css: result.text || cCss }));
                    });
                } else {
                    setCompiled(prev => ({ ...prev, css: cCss }));
                }

                if ((preps.js === 'babel' || preps.js === 'typescript') && window.Babel) {
                    const result = window.Babel.transform(cJs, { presets: ['env', 'react', 'typescript'] }).code;
                    setCompiled(prev => ({ ...prev, js: result }));
                } else {
                    setCompiled(prev => ({ ...prev, js: cJs }));
                }
            } catch (e) {
                console.error("Preview_Sync_Error");
            } finally {
                setIsCompiling(false);
            }
        };
        compile();
    }, [project]);

    const libs = (project.settings?.externalLibraries || []).map(lib => lib.endsWith('.css') ? `<link rel="stylesheet" href="${lib}">` : `<script src="${lib}"></script>`).join('\n');
    const srcDoc = `<!DOCTYPE html><html><head><style>body { margin: 0; overflow: hidden; background: white; font-family: sans-serif; } ${compiled.css}</style>${libs}</head><body>${project.code?.html || ''}<script>${compiled.js}</script></body></html>`;

    return (
        <Link href={route('editor', { slug: project.slug })} className="group relative bg-[var(--bg-surface)] border border-[var(--border)] rounded-2xl overflow-hidden hover:border-cyan-500/30 transition-all hover:-translate-y-1 block shadow-xl">
            <div className="aspect-video bg-white relative overflow-hidden">
                {!isCompiling ? (
                    <iframe srcDoc={srcDoc} className="w-full h-full border-none pointer-events-none scale-75 origin-top-left" style={{ width: '133.33%', height: '133.33%' }} sandbox="allow-scripts" title={`preview-${project.id}`} />
                ) : (
                    <div className="w-full h-full bg-slate-100 animate-pulse flex items-center justify-center text-[10px] font-black uppercase text-slate-300">Syncing_Node...</div>
                )}
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[2px]">
                    <div className="p-3 bg-cyan-500 text-black rounded-full shadow-xl transform scale-90 group-hover:scale-100 transition-transform"><Zap size={20} fill="currentColor" /></div>
                </div>
                <div className="absolute top-4 right-4">
                    <div className="flex items-center gap-1.5 px-2 py-1 bg-black/60 backdrop-blur-md border border-white/10 rounded-lg">
                        <div className="w-1 h-1 rounded-full bg-emerald-500 animate-pulse" /><span className="text-[8px] font-black text-white uppercase tracking-widest">Live Preview</span>
                    </div>
                </div>
            </div>
            <div className="p-6 space-y-4 text-left">
                <div className="flex justify-between items-start">
                    <h3 className="text-lg font-black text-[var(--text-main)] uppercase italic tracking-tighter truncate">{project.title}</h3>
                    <div className="px-2 py-1 rounded bg-[var(--bg-main)] border border-[var(--border)] text-[8px] font-black uppercase tracking-widest text-cyan-500">{project.settings?.preprocessors?.js || 'js'}</div>
                </div>
                <div className="flex items-center gap-4 text-[10px] text-[var(--text-muted)] font-mono">
                    <span className="flex items-center gap-1 uppercase font-bold"><User size={10} className="text-cyan-500/40" /> {project.user?.name || 'Unknown'}</span>
                    <span className="flex items-center gap-1 uppercase font-bold"><Clock size={10} className="text-cyan-500/40" /> {new Date(project.created_at).toLocaleDateString()}</span>
                </div>
            </div>
        </Link>
    );
};

import PaymentModal from '@/Components/Modals/PaymentModal';

export default function Welcome({ auth, siteSettings }) {
    const [featured, setFeatured] = useState([]);
    const [globalStats, setGlobalStats] = useState({ projects: 0, users: 0, public_projects: 0 });
    const [isPaymentModalOpen, setIsPaymentModalOpen] = useState(false);

    useEffect(() => {
        // Load Compilers for Dynamic Previews
        if (!window.Babel) {
            const script = document.createElement('script');
            script.src = "https://unpkg.com/@babel/standalone/babel.min.js";
            document.head.appendChild(script);
        }
        if (!window.Sass) {
            const script = document.createElement('script');
            script.src = "https://cdn.jsdelivr.net/npm/sass.js@0.11.1/dist/sass.sync.js";
            document.head.appendChild(script);
        }

        axios.get('/api/explore/featured').then(res => setFeatured(res.data));
        axios.get('/api/explore/stats').then(res => setGlobalStats(res.data));
    }, []);

    const getSetting = (key, defaultVal) => siteSettings?.[key] || defaultVal;

    const handleUpgrade = async () => {
        if (!auth.user) {
            window.location.href = route('login');
            return;
        }

        if (auth.user.role === 'paid-user' || auth.user.role === 'admin') {
            try {
                const res = await axios.post('/api/subscription/portal');
                if (res.data.url) window.location.href = res.data.url;
            } catch (e) {
                alert('Failed to communicate with billing node.');
            }
        } else {
            setIsPaymentModalOpen(true);
        }
    };

    return (
        <PublicLayout>
            <Head>
                <title>{getSetting('seo_meta_title', 'HOACodeLab // Technical Prototyping Node')}</title>
                <meta name="description" content={getSetting('seo_meta_description', 'High-performance cloud editor for modern web developers.')} />
                <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
            </Head>

            <section className="pt-48 pb-32 px-6">
                <div className="max-w-7xl mx-auto text-center">
                    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
                        <div className="inline-flex items-center gap-3 px-4 py-1.5 bg-cyan-500/5 border border-cyan-500/10 rounded-full mb-10">
                            <Sparkles size={12} className="text-cyan-500" />
                            <span className="text-[10px] font-black uppercase tracking-[0.4em] text-cyan-500 italic">v1.5.0 Stable Build</span>
                        </div>
                        <h1 className="text-6xl md:text-9xl font-black text-[var(--text-main)] tracking-tighter uppercase italic leading-[0.8] mb-12">Modern <br/> <span className="text-[var(--text-muted)]">Code Editor</span></h1>
                        <p className="text-[var(--text-muted)] text-sm md:text-lg max-w-2xl mx-auto font-bold uppercase tracking-[0.3em] leading-relaxed mb-20 opacity-80 italic">High-performance development substrate for modern web creators.</p>
                    </motion.div>
                    <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, duration: 1 }}>
                        <HomeEditor />
                    </motion.div>
                </div>
            </section>

            <section className="py-16 border-y border-[var(--border)] bg-[var(--bg-surface)]">
                <div className="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-12 text-left">
                    {[
                        { l: 'Active Users', v: globalStats.users, i: User },
                        { l: 'Projects Created', v: globalStats.projects, i: Database },
                        { l: 'Uptime', v: '99.9%', i: Shield },
                        { l: 'Performance', v: '0.04ms', i: Zap }
                    ].map((s, i) => (
                        <div key={i} className="flex flex-col gap-2 border-l border-[var(--border)] pl-8 first:border-0">
                            <div className="text-[9px] font-black text-[var(--text-muted)] uppercase tracking-[0.4em] flex items-center gap-3"><s.i size={14} className="text-cyan-500/40" /> {s.l}</div>
                            <div className="text-3xl font-black text-[var(--text-main)] tracking-tighter italic">{s.v}</div>
                        </div>
                    ))}
                </div>
            </section>

            <section className="py-32 px-6 border-b border-[var(--border)]">
                <div className="max-w-7xl mx-auto">
                    <div className="flex justify-between items-end mb-16">
                        <div className="space-y-2 text-left">
                            <div className="flex items-center gap-2 text-cyan-500"><Activity size={16} /><span className="text-[10px] font-black uppercase tracking-[0.3em]">Live Feed</span></div>
                            <h2 className="text-4xl md:text-5xl font-black text-[var(--text-main)] uppercase tracking-tighter italic">Featured Projects</h2>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                        {featured.length > 0 ? featured.slice(0, 3).map((project) => (
                            <ProjectPreview key={project.id} project={project} />
                        )) : [1, 2, 3].map((i) => (
                            <div key={i} className="group relative bg-[var(--bg-surface)] border border-[var(--border)] rounded-2xl overflow-hidden">
                                <div className="aspect-video bg-[var(--bg-elevated)]" />
                                <div className="p-6 space-y-4"><div className="h-4 w-2/3 bg-white/5 rounded animate-pulse" /><div className="h-3 w-1/2 bg-white/5 rounded animate-pulse" /></div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            <section id="features" className="py-48 px-6 bg-[var(--bg-main)] text-left">
                <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-16">
                    {[
                        { t: 'Cloud Based', d: 'Every line of code executed securely in your neural browser instance.', i: Globe },
                        { t: 'Instant Sync', d: 'Changes reflected instantly. Pixel-perfect rendering.', i: Zap },
                        { t: 'Secure Storage', d: 'Encrypted storage for your modules.', i: Lock }
                    ].map((p, i) => (
                        <div key={i} className="space-y-8 group">
                            <div className="w-16 h-1 bg-[var(--border)] group-hover:w-24 group-hover:bg-cyan-500 transition-all duration-500" />
                            <div className="p-4 bg-[var(--bg-surface)] border border-[var(--border)] rounded-2xl w-fit"><p.i className="text-cyan-500" size={32} /></div>
                            <h3 className="text-2xl font-black text-[var(--text-main)] uppercase tracking-tighter italic">{p.t}</h3>
                            <p className="text-[var(--text-muted)] text-xs font-bold uppercase tracking-widest leading-loose italic">{p.d}</p>
                        </div>
                    ))}
                </div>
            </section>

            <section id="pricing" className="py-32 px-6 border-y border-[var(--border)] bg-[var(--bg-surface)]">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-20 space-y-4">
                        <h2 className="text-4xl md:text-5xl font-black text-[var(--text-main)] uppercase tracking-tighter italic">Pricing Plans</h2>
                        <p className="text-[var(--text-muted)] text-xs font-bold uppercase tracking-[0.2em]">Choose your plan</p>
                    </div>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                        <div className="p-10 border border-[var(--border)] rounded-3xl bg-[var(--bg-main)] text-left">
                            <div className="text-xs font-black text-[var(--text-muted)] uppercase tracking-[0.3em] mb-2">Starter</div>
                            <div className="text-4xl font-black text-[var(--text-main)] italic mb-8">Free</div>
                            <ul className="space-y-4 mb-10 text-xs font-bold uppercase tracking-widest text-[var(--text-muted)]">
                                {['Unlimited Public Projects', 'Basic Asset Library', 'Community Support'].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3"><CheckCircle2 size={14} className="text-cyan-500" /> {item}</li>
                                ))}
                            </ul>
                            <Link href={route('register')} className="w-full py-4 flex items-center justify-center border border-[var(--border)] rounded-xl text-xs font-black uppercase tracking-[0.2em] hover:bg-[var(--text-main)] hover:text-[var(--bg-main)] transition-all">Get Started</Link>
                        </div>
                        <div className="p-10 border border-cyan-500/30 rounded-3xl bg-[var(--bg-elevated)] text-left shadow-2xl relative">
                            <Sparkles className="absolute top-6 right-6 text-cyan-500" size={24} />
                            <div className="text-xs font-black text-cyan-500 uppercase tracking-[0.3em] mb-2">Pro</div>
                            <div className="text-4xl font-black text-[var(--text-main)] italic mb-8">Pro</div>
                            <ul className="space-y-4 mb-10 text-xs font-bold uppercase tracking-widest text-[var(--text-main)]">
                                {['Private Projects', 'Priority Rendering', 'Collaboration Tools'].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3"><CheckCircle2 size={14} className="text-cyan-500" /> {item}</li>
                                ))}
                            </ul>
                            <button onClick={handleUpgrade} className="w-full py-4 bg-cyan-500 text-black font-black uppercase text-xs rounded-xl shadow-lg shadow-cyan-500/20 hover:scale-[1.02] transition-transform">
                                {(auth.user?.role === 'paid-user' || auth.user?.role === 'admin') ? 'Manage Subscription' : 'Upgrade Now'}
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <section className="py-64 px-6 text-center">
                <div className="max-w-4xl mx-auto space-y-16">
                    <Rocket className="text-cyan-500 mx-auto animate-bounce" size={48} />
                    <h2 className="text-6xl md:text-9xl font-black text-[var(--text-main)] uppercase tracking-tighter italic">Start Coding Today</h2>
                    <Link href={route('register')} className="px-16 py-6 bg-[var(--text-main)] text-[var(--bg-main)] font-black uppercase text-xs tracking-[0.5em] rounded hover:bg-cyan-500 hover:text-white transition-all shadow-2xl active:scale-95 inline-block italic">Sign Up Free</Link>
                </div>
            </section>

            <PaymentModal 
                isOpen={isPaymentModalOpen} 
                onClose={() => setIsPaymentModalOpen(false)} 
                user={auth.user}
            />
        </PublicLayout>
    );
}
