import React from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import * as icon from '@mdi/js';
import BaseIcon from '../components/BaseIcon';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

export default function LandingPage() {
  return (
    <div className="bg-[#0a0a0a] min-h-screen text-white selection:bg-[#0ea5e9]/30 font-sans">
      <Head>
        <title>{getPageTitle('Ultra-Premium Trading Journal')}</title>
      </Head>

      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-[#0a0a0a]/80 backdrop-blur-xl border-b border-white/10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center space-x-2">
              <div className="w-8 h-8 bg-gradient-to-br from-[#0ea5e9] to-[#3b82f6] rounded-lg flex items-center justify-center shadow-lg shadow-blue-500/20">
                <BaseIcon path={icon.mdiChartLine} size={20} className="text-white" />
              </div>
              <span className="text-xl font-bold tracking-tight">TradeLog<span className="text-[#0ea5e9]">Pro</span></span>
            </div>
            <div className="hidden md:flex items-center space-x-8 text-sm font-medium text-gray-400">
              <a href="#features" className="hover:text-white transition-colors">Features</a>
              <a href="#pricing" className="hover:text-white transition-colors">Pricing</a>
              <Link href="/login" className="hover:text-white transition-colors">Login</Link>
              <Link href="/register" className="bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-5 py-2 rounded-full transition-all shadow-lg shadow-blue-500/25">
                Get Started
              </Link>
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-4 overflow-hidden relative">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-[#0ea5e9]/10 blur-[120px] rounded-full -z-10"></div>
        <div className="max-w-5xl mx-auto text-center">
          <div className="inline-flex items-center space-x-2 bg-white/5 border border-white/10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm">
            <span className="flex h-2 w-2 rounded-full bg-[#0ea5e9] animate-pulse"></span>
            <span className="text-xs font-medium text-gray-300 tracking-wide uppercase">New: AI-Powered Trade Insights</span>
          </div>
          <h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 bg-gradient-to-b from-white to-gray-400 bg-clip-text text-transparent leading-tight">
            Master Your Edge with <br /> Precision Analytics.
          </h1>
          <p className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
            The ultra-premium trading journal designed for high-performance traders. Track performance, analyze psychology, and unlock AI insights to reach your goals.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link href="/register" className="w-full sm:w-auto bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 text-white px-8 py-4 rounded-xl font-semibold transition-all shadow-xl shadow-blue-500/25 flex items-center justify-center">
              Start Free Journaling
              <BaseIcon path={icon.mdiArrowRight} size={20} className="ml-2" />
            </Link>
            <a href="#features" className="w-full sm:w-auto bg-white/5 hover:bg-white/10 border border-white/10 px-8 py-4 rounded-xl font-semibold transition-all flex items-center justify-center">
              Explore Features
            </a>
          </div>
        </div>

        {/* Dashboard Preview */}
        <div className="max-w-6xl mx-auto mt-20 relative">
          <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent z-10"></div>
          <div className="bg-[#121212] border border-white/10 rounded-2xl p-4 shadow-2xl relative overflow-hidden group">
             <div className="flex items-center justify-between mb-8 border-b border-white/5 pb-4">
                <div className="flex items-center space-x-2">
                    <div className="w-3 h-3 rounded-full bg-red-500/50"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500/50"></div>
                    <div className="w-3 h-3 rounded-full bg-green-500/50"></div>
                </div>
                <div className="text-xs text-gray-500 font-mono">dashboard.tradelogpro.ai</div>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                {[
                  { label: 'Total PnL', value: '+$12,450.00', color: 'text-green-400', icon: icon.mdiCurrencyUsd },
                  { label: 'Win Rate', value: '68.5%', color: 'text-[#0ea5e9]', icon: icon.mdiChartPie },
                  { label: 'Profit Factor', value: '2.4', color: 'text-purple-400', icon: icon.mdiTrendingUp }
                ].map((stat, i) => (
                  <div key={i} className="bg-white/5 border border-white/5 p-6 rounded-xl">
                    <div className="flex justify-between items-start mb-2">
                      <span className="text-sm text-gray-500">{stat.label}</span>
                      <BaseIcon path={stat.icon} size={18} className="text-gray-600" />
                    </div>
                    <div className={`text-2xl font-bold ${stat.color}`}>{stat.value}</div>
                  </div>
                ))}
             </div>
             <div className="h-64 bg-white/5 rounded-xl border border-white/5 flex items-end justify-between p-6 overflow-hidden">
                {[40, 60, 45, 70, 85, 65, 90, 110, 95, 130, 150].map((h, i) => (
                  <div key={i} className="w-[6%] bg-gradient-to-t from-[#0ea5e9]/20 to-[#0ea5e9] rounded-t-sm transition-all duration-1000 group-hover:opacity-80" style={{ height: `${h}%` }}></div>
                ))}
             </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <section id="pricing" className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold mb-4">Choose Your Plan</h2>
            <p className="text-gray-400">Scale your trading with tools built for your success level.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Free Tier */}
            <div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2">Free</h3>
                <div className="text-4xl font-bold mb-4">$0<span className="text-lg text-gray-500 font-normal">/mo</span></div>
                <p className="text-gray-400 text-sm leading-relaxed">Perfect for beginners tracking their first steps in the market.</p>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {['Manual trade entry', 'Basic dashboard', 'Win Rate, PnL, Total Trades', 'Last 30 days history', 'Single account'].map((feat, i) => (
                  <li key={i} className="flex items-center text-sm text-gray-300">
                    <BaseIcon path={icon.mdiCheck} size={16} className="text-green-500 mr-2" />
                    {feat}
                  </li>
                ))}
              </ul>
              <Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
                Get Started
              </Link>
            </div>

            {/* $1 Tier */}
            <div className="bg-[#121212] border-2 border-[#0ea5e9] p-8 rounded-2xl flex flex-col relative shadow-2xl shadow-blue-500/10 scale-105">
              <div className="absolute top-0 right-8 -translate-y-1/2 bg-[#0ea5e9] text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">Most Popular</div>
              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2">Pro</h3>
                <div className="text-4xl font-bold mb-4">$1<span className="text-lg text-gray-500 font-normal">/mo</span></div>
                <p className="text-gray-400 text-sm leading-relaxed">Comprehensive analytics for serious individual traders.</p>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {['CSV bulk import', 'Full dashboard metrics', 'Equity curve visualization', 'Performance breakdowns', 'Trade duration analytics', 'Screenshot attachments', 'Mood/emotions tracker', 'Economic calendar'].map((feat, i) => (
                  <li key={i} className="flex items-center text-sm text-gray-300">
                    <BaseIcon path={icon.mdiCheck} size={16} className="text-[#0ea5e9] mr-2" />
                    {feat}
                  </li>
                ))}
              </ul>
              <Link href="/register" className="w-full bg-[#0ea5e9] hover:bg-[#0ea5e9]/90 py-3 rounded-xl font-semibold text-center transition-all shadow-lg shadow-blue-500/25 text-white">
                Go Pro Now
              </Link>
            </div>

            {/* $10 Tier */}
            <div className="bg-[#121212] border border-white/10 p-8 rounded-2xl flex flex-col hover:border-[#0ea5e9]/30 transition-all">
              <div className="mb-8">
                <h3 className="text-xl font-bold mb-2">AI Elite</h3>
                <div className="text-4xl font-bold mb-4">$10<span className="text-lg text-gray-500 font-normal">/mo</span></div>
                <p className="text-gray-400 text-sm leading-relaxed">The ultimate edge with AI pattern recognition and insights.</p>
              </div>
              <ul className="space-y-4 mb-10 flex-grow">
                {['Everything in Pro', 'AI-powered trade analysis', 'AI pattern recognition', 'Weakness identification', 'Risk size recommendations', 'Market condition classifier', 'Broker API auto-sync'].map((feat, i) => (
                  <li key={i} className="flex items-center text-sm text-gray-300">
                    <BaseIcon path={icon.mdiCheck} size={16} className="text-purple-500 mr-2" />
                    {feat}
                  </li>
                ))}
              </ul>
              <Link href="/register" className="w-full bg-white/5 hover:bg-white/10 py-3 rounded-xl font-semibold text-center transition-all text-white">
                Unlock Elite AI
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/10 py-12 px-4 bg-[#0a0a0a]">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
            <div className="flex items-center space-x-2 mb-8 md:mb-0">
              <div className="w-6 h-6 bg-[#0ea5e9] rounded flex items-center justify-center">
                <BaseIcon path={icon.mdiChartLine} size={14} className="text-white" />
              </div>
              <span className="font-bold">TradeLogPro</span>
            </div>
            <div className="flex space-x-8 text-sm text-gray-500">
              <Link href="/privacy-policy" className="hover:text-white transition-colors">Privacy</Link>
              <Link href="/terms-of-use" className="hover:text-white transition-colors">Terms</Link>
              <a href="#" className="hover:text-white transition-colors">Twitter</a>
              <a href="#" className="hover:text-white transition-colors">Support</a>
            </div>
            <div className="mt-8 md:mt-0 text-sm text-gray-600 font-mono">
              © 2026 TRADELOGPRO. ALL RIGHTS RESERVED.
            </div>
        </div>
      </footer>
    </div>
  );
}

LandingPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};