import Link from 'next/link';
import Layout from './Layout';
import { VOCAB } from '../lib/collection-vocabulary.js';

export default function PublicCardsView() {
  return (
    <Layout user={null}>
      <div className="p-6">
        <div className="max-w-7xl mx-auto">
          {/* Header with login prompt */}
          <div className="mb-8 text-center">
            <h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
            <p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
              Discover thousands of trading cards from popular TCGs
            </p>
            <div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
              <h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
              <p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
                Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
              </p>
              <div className="flex flex-col sm:flex-row gap-3 justify-center">
                <Link 
                  href="/signup"
                  className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
                  style={{ 
                    backgroundColor: 'var(--accent-ember)', 
                    color: 'white'
                  }}
                >
                  Create Free Account
                </Link>
                <Link 
                  href="/login"
                  className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
                  style={{ 
                    color: 'var(--text-primary)',
                    borderColor: 'var(--accent-ember)'
                  }}
                >
                  Sign In
                </Link>
              </div>
            </div>
          </div>
          
          {/* Basic card browser would go here - simplified version */}
          <div className="text-center py-20">
            <div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
              <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
              </svg>
            </div>
            <h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
            <p style={{ color: 'var(--text-secondary)' }}>
              Sign up now to get early access to our complete card database and list tools.
            </p>
          </div>
        </div>
      </div>
    </Layout>
  );
}