import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import BaseButton from '../components/BaseButton';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
import { useAppSelector } from '../stores/hooks';
import { mdiArrowRight, mdiPlayCircleOutline } from '@mdi/js';
import BaseIcon from '../components/BaseIcon';

export default function SocioLanding() {
    const textColor = useAppSelector((state) => state.style.linkColor);
    const title = 'Socio';

    return (
        <div className="min-h-screen bg-slate-50 dark:bg-dark-900 overflow-hidden">
            <Head>
                <title>{getPageTitle('Welcome to Socio')}</title>
            </Head>

            {/* Navigation */}
            <nav className="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
                <div className="flex items-center space-x-2">
                    <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center text-white font-black text-2xl italic shadow-lg shadow-indigo-500/30">
                        S
                    </div>
                    <span className="text-2xl font-black tracking-tight dark:text-white uppercase">ocio</span>
                </div>
                <div className="flex items-center space-x-6">
                    <Link href="/login" className="text-sm font-bold text-gray-600 dark:text-gray-300 hover:text-indigo-600 transition-colors">
                        Sign in
                    </Link>
                    <BaseButton
                        href="/register"
                        label="Join Socio"
                        color="info"
                        className="rounded-xl font-bold shadow-md shadow-indigo-500/20"
                    />
                </div>
            </nav>

            {/* Hero Section */}
            <main className="max-w-7xl mx-auto px-6 pt-12 lg:pt-24 flex flex-col lg:flex-row items-center">
                <div className="lg:w-1/2 space-y-8 text-center lg:text-left z-10">
                    <div className="inline-flex items-center px-4 py-2 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-full text-xs font-bold tracking-widest uppercase">
                        ✨ Connect, Share, and Discover
                    </div>
                    <h1 className="text-5xl lg:text-7xl font-black text-slate-900 dark:text-white leading-[1.1]">
                        The Social Network for <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-violet-600 italic">Tomorrow.</span>
                    </h1>
                    <p className="text-lg text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0">
                        Socio brings your friends, interests, and world together in one place. Experience the next generation of social interaction.
                    </p>
                    <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
                        <BaseButton
                            href="/register"
                            label="Start Creating"
                            color="info"
                            icon={mdiArrowRight}
                            className="w-full sm:w-auto px-8 py-4 rounded-2xl text-lg font-bold shadow-xl shadow-indigo-500/30"
                        />
                        <button className="flex items-center space-x-2 px-8 py-4 text-slate-600 dark:text-slate-300 font-bold hover:text-indigo-600 transition-colors group">
                            <BaseIcon path={mdiPlayCircleOutline} size="24" className="group-hover:scale-110 transition-transform" />
                            <span>Watch Demo</span>
                        </button>
                    </div>

                    <div className="flex items-center justify-center lg:justify-start space-x-8 pt-8 opacity-60 grayscale hover:grayscale-0 transition-all">
                        <div className="text-2xl font-black italic">FACEBOOK</div>
                        <div className="text-2xl font-black italic">INSTAGRAM</div>
                        <div className="text-2xl font-black italic">TIKTOK</div>
                    </div>
                </div>

                {/* Decorative Visuals */}
                <div className="lg:w-1/2 mt-12 lg:mt-0 relative">
                    <div className="relative z-10 transform lg:rotate-2 lg:translate-x-12 hover:rotate-0 transition-transform duration-700">
                        <div className="bg-white dark:bg-dark-800 p-4 rounded-[2.5rem] shadow-2xl shadow-indigo-500/20 border border-slate-100 dark:border-dark-700 w-full max-w-[400px] mx-auto overflow-hidden">
                            <div className="h-64 bg-slate-100 dark:bg-dark-900 rounded-[2rem] mb-4 overflow-hidden relative group">
                                <img 
                                    src="https://images.pexels.com/photos/3194521/pexels-photo-3194521.jpeg?auto=compress&cs=tinysrgb&w=800" 
                                    alt="Sample content"
                                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                                />
                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-6">
                                    <p className="text-white font-bold text-lg">Experience more together.</p>
                                </div>
                            </div>
                            <div className="flex items-center justify-between px-2 mb-4">
                                <div className="flex items-center space-x-3">
                                    <div className="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-600 font-bold">A</div>
                                    <div>
                                        <div className="h-2 w-24 bg-slate-100 dark:bg-dark-900 rounded mb-2"></div>
                                        <div className="h-2 w-16 bg-slate-100 dark:bg-dark-900 rounded"></div>
                                    </div>
                                </div>
                                <div className="w-8 h-8 rounded-full bg-rose-50 dark:bg-rose-900/20 flex items-center justify-center text-rose-500">❤️</div>
                            </div>
                        </div>
                    </div>
                    
                    {/* Background Blobs */}
                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-indigo-500/10 dark:bg-indigo-500/5 blur-[100px] rounded-full z-0"></div>
                </div>
            </main>

            {/* Footer */}
            <footer className="mt-24 border-t border-slate-100 dark:border-dark-800 py-12 px-6">
                <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between space-y-6 md:space-y-0">
                    <p className="text-slate-500 text-sm">© 2026 Socio App. All rights reserved.</p>
                    <div className="flex items-center space-x-8 text-sm font-semibold text-slate-500">
                        <Link href="/privacy-policy" className="hover:text-indigo-600 transition-colors">Privacy</Link>
                        <Link href="/terms" className="hover:text-indigo-600 transition-colors">Terms</Link>
                        <Link href="/login" className="hover:text-indigo-600 transition-colors">Login to Admin</Link>
                    </div>
                </div>
            </footer>
        </div>
    );
}

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