/**
 * Home Page Component
 * Landing page for the Personality Assessment
 */

const { useState, useRef, useEffect } = React;

// SVG Logo Component
const Logo = () => (
    <svg className="logo" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" style={{stopColor: '#667eea', stopOpacity: 1}} />
                <stop offset="100%" style={{stopColor: '#764ba2', stopOpacity: 1}} />
            </linearGradient>
        </defs>
        <rect width="200" height="200" fill="#FFFFFF" rx="20"/>
        <path d="M 50 70 L 85 70 L 100 100 L 100 130" 
            fill="none" 
            stroke="url(#grad1)" 
            strokeWidth="18" 
            strokeLinecap="round"
            strokeLinejoin="round"/>
        <path d="M 150 70 L 115 70 L 100 100 L 100 130" 
            fill="none" 
            stroke="url(#grad1)" 
            strokeWidth="18" 
            strokeLinecap="round"
            strokeLinejoin="round"/>
        <rect x="94" y="94" width="12" height="12" fill="#FFFFFF" stroke="#667eea" strokeWidth="2.5" rx="2"/>
        <circle cx="100" cy="138" r="8" fill="#764ba2" opacity="0.9"/>
    </svg>
);

// Test data
const tests = [
    {
        icon: '🌊',
        title: 'OCEAN (Big Five)',
        subtitle: 'Personality Traits',
        description: 'Discover your levels of openness, conscientiousness, extraversion, agreeableness, and neuroticism.',
        link: '/ocean'
    },
    {
        icon: '🎬',
        title: 'Friends Personality (Pilaan Exclusive)',
        subtitle: 'Character Match',
        description: 'Discover your personality type based on the Friends video and Questions.',
        link: '/personality_friends'
    },
    {
        icon: '🎬',
        title: 'General Personality (Pilaan Exclusive)',
        subtitle: 'Character Match',
        description: 'Discover your personality type based on the video and Questions.',
        link: '/personality_gen'
    },
    {
        icon: '💼',
        title: 'DISC',
        subtitle: 'Behavioral Style',
        description: 'Understand your dominance, influence, steadiness, and conscientiousness in professional settings.',
        link: '/disc'
    },
    {
        icon: '🎭',
        title: 'Enneagram',
        subtitle: 'Core Motivations',
        description: 'Explore the nine personality types and understand what truly drives you.',
        link: '/enneagram'
    },
    {
        icon: '🔍',
        title: 'Myers-Briggs',
        subtitle: 'Cognitive Functions',
        description: 'Identify your MBTI type across four dichotomies of personality preferences.',
        link: '/mbti'
    },
    {
        icon: '🧭',
        title: 'Schwartz Values',
        subtitle: 'Human Values',
        description: 'Understand your core human values such as power, achievement, benevolence, universalism, and security.',
        link: '/schwartz'
    }
];

// Steps data
const steps = [
    {
        number: '1',
        title: 'Take 1 Test',
        description: 'Complete one of the pilaan exclusive personality assessment in one sitting. Takes about 5-7 minutes.'
    },
    {
        number: '2',
        title: 'AI Analysis',
        description: 'Our advanced AI analyzes your responses across all tests for deeper insights.'
    },
    {
        number: '3',
        title: 'Get Your Report',
        description: 'Receive a comprehensive personality report combining all test results.'
    }
];

// Features data
const features = [
    {
        icon: '🎯',
        title: 'Scientifically Validated',
        description: 'All tests are based on established psychological frameworks used by professionals worldwide.'
    },
    {
        icon: '🤖',
        title: 'AI-Powered Insights',
        description: 'Advanced AI combines your results to provide unique, personalized insights you won\'t find elsewhere.'
    },
    {
        icon: '📊',
        title: 'Comprehensive Report',
        description: 'Get a detailed PDF report with visual charts, explanations, and actionable recommendations.'
    },
    {
        icon: '🔒',
        title: 'Private & Secure',
        description: 'Your data is encrypted and secure. We never share your personal information with third parties.'
    },
    {
        icon: '💡',
        title: 'Career Guidance',
        description: 'Discover ideal career paths and work environments that match your personality profile.'
    },
    {
        icon: '🤝',
        title: 'Relationship Insights',
        description: 'Learn about your communication style and how you interact with others in personal and professional settings.'
    }
];

// Testimonials data
const testimonials = [
    {
        text: 'The AI-generated report was incredibly accurate. It helped me understand patterns in my behavior I never noticed before.',
        name: 'Prashant Kumar',
        role: 'Product Manager',
        avatar: 'P'
    },
    {
        text: 'As a software engineer, the DISC insights helped me understand how I work with others and where I can improve as a team member and leader.',
        name: 'Prashant Shekhar',
        role: 'Software Engineer',
        avatar: 'P'
    },
    {
        text: 'The results helped me present myself better in interviews. I could clearly explain my strengths and working style.',
        name: 'Vivek Trivedi',
        role: 'Data Scientist',
        avatar: 'V'
    },
    {
        text: 'As a management student, this helped me understand my leadership style and decision-making approach.',
        name: 'Ananya Singh',
        role: 'MBA Student',
        avatar: 'A'
    },
    {
        text: 'I run a small business, and this assessment helped me understand my communication style with clients and employees.',
        name: 'Rahul Verma',
        role: 'Entrepreneur',
        avatar: 'R'
    }
];

// Main App Component
const App = () => {
    const [visibleElements, setVisibleElements] = useState(new Set());
    const [showTestSelector, setShowTestSelector] = useState(false);
    const observerRef = useRef(null);
    const testScrollRef = useRef(null);

    useEffect(() => {
        // Intersection Observer for scroll animations
        observerRef.current = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        setVisibleElements(prev => new Set([...prev, entry.target]));
                    }
                });
            },
            { threshold: 0.1 }
        );

        // Observe all fade-in elements
        document.querySelectorAll('.fade-in').forEach(el => {
            observerRef.current.observe(el);
        });

        return () => {
            if (observerRef.current) {
                observerRef.current.disconnect();
            }
        };
    }, []);

    useEffect(() => {
        // Add visible class to observed elements
        visibleElements.forEach(el => {
            el.classList.add('visible');
        });
    }, [visibleElements]);

    useEffect(() => {
        const slider = testScrollRef.current;
        if (!slider) return;

        let isDown = false;
        let startX = 0;
        let scrollLeft = 0;

        const onMouseDown = (e) => {
            isDown = true;
            slider.classList.add('dragging');
            startX = e.pageX - slider.offsetLeft;
            scrollLeft = slider.scrollLeft;
        };

        const onMouseUp = () => {
            isDown = false;
            slider.classList.remove('dragging');
        };

        const onMouseLeave = () => {
            isDown = false;
            slider.classList.remove('dragging');
        };

        const onMouseMove = (e) => {
            if (!isDown) return;
            e.preventDefault();
            const x = e.pageX - slider.offsetLeft;
            const walk = (x - startX) * 1.4; // speed
            slider.scrollLeft = scrollLeft - walk;
        };

        slider.addEventListener('mousedown', onMouseDown);
        slider.addEventListener('mouseleave', onMouseLeave);
        slider.addEventListener('mouseup', onMouseUp);
        slider.addEventListener('mousemove', onMouseMove);

        return () => {
            slider.removeEventListener('mousedown', onMouseDown);
            slider.removeEventListener('mouseleave', onMouseLeave);
            slider.removeEventListener('mouseup', onMouseUp);
            slider.removeEventListener('mousemove', onMouseMove);
        };
    }, []);

    const handleCTAClick = () => {
        setShowTestSelector(true);
    };

    const handleTestChoice = (type) => {
        setShowTestSelector(false);

        if (type === 'friends') {
            window.location.href = '/personality_friends';
        } else if (type === 'general') {
            window.location.href = '/personality_gen';
        }
    };

    return (
        <>
            {/* Hero Section */}
            <section className="hero">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <div className="logo-container">
                        <Logo />
                    </div>
                    <div 
                        className="pilaan-logo animate"
                        onMouseEnter={(e) => {
                            const el = e.currentTarget;
                            el.classList.remove("animate");
                            void el.offsetWidth; // force reflow
                            el.classList.add("animate");
                        }}
                    >
                        <span className="letter letter-p">P</span>
                        <span className="letter letter-i">i</span>
                        <span className="letter letter-l">l</span>
                        <span className="letter letter-a1">a</span>
                        <span className="letter letter-a2">a</span>
                        <span className="letter letter-n">n</span>
                    </div>
                    <h1 className="hero-title px-4">
                        Discover Your True Personality 🧠
                    </h1>
                    <p className="hero-subtitle px-4">
                        7 scientific tests. One powerful AI report.
                    </p>
                    <button className="cta-button mx-4" onClick={handleCTAClick}>
                        Take the Test 🚀
                    </button>
                </div>
            </section>

            {/* Test Cards Section */}
            <section className="section gradient-section">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <h2 className="section-title">
                        Seven Tests, Infinite Insights ✨
                    </h2>
                    <div ref={testScrollRef} className="test-cards horizontal-scroll">
                        {tests.map((test, index) => (
                            <a 
                                key={index} 
                                href={test.link}
                                className={`test-card fade-in ${test.link === '#' ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:scale-105'}`}
                                onClick={(e) => {
                                    if (test.link === '#') {
                                        e.preventDefault();
                                    }
                                }}
                            >
                                <span className="test-icon">{test.icon}</span>
                                <h3 className="test-title">{test.title}</h3>
                                <p className="test-subtitle">{test.subtitle}</p>
                                <p className="test-description">{test.description}</p>
                                {test.link !== '#' && (
                                    <div className="mt-4 text-purple-600 font-semibold text-sm">
                                        Start Test →
                                    </div>
                                )}
                                {test.link === '#' && (
                                    <div className="mt-4 text-gray-400 text-sm">
                                        Coming Soon
                                    </div>
                                )}
                            </a>
                        ))}
                    </div>
                </div>
            </section>

            {/* How It Works */}
            <section className="section light-section">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <h2 className="section-title">
                        How It Works 🔄
                    </h2>
                    <div className="steps">
                        {steps.map((step, index) => (
                            <div key={index} className="step fade-in">
                                <div className="step-number">{step.number}</div>
                                <h3 className="step-title">{step.title}</h3>
                                <p className="step-description">{step.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Features Section */}
            <section className="section white-section">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <h2 className="section-title">
                        What You'll Get 🎁
                    </h2>
                    <div className="features">
                        {features.map((feature, index) => (
                            <div key={index} className="feature fade-in">
                                <span className="feature-icon">{feature.icon}</span>
                                <h3 className="feature-title">{feature.title}</h3>
                                <p className="feature-description">{feature.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Social Proof */}
            <section className="section gradient-section">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <h2 className="section-title">
                        Loved by Thousands 💜
                    </h2>
                    <div className="testimonials">
                        {testimonials.map((testimonial, index) => (
                            <div key={index} className="testimonial fade-in">
                                <p className="testimonial-text">"{testimonial.text}"</p>
                                <div className="testimonial-author">
                                    <div className="testimonial-avatar">{testimonial.avatar}</div>
                                    <div className="testimonial-info">
                                        <div className="testimonial-name">{testimonial.name}</div>
                                        <div className="testimonial-role">{testimonial.role}</div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Final CTA */}
            <section className="final-cta">
                <div className="container px-4 sm:px-6 lg:px-8">
                    <h2 className="final-cta-title">
                        Ready to Know Yourself Better? 🚀
                    </h2>
                    <button className="cta-button" onClick={handleCTAClick}>
                        Take the Test Now
                    </button>
                </div>
            </section>

            {/* Test Selection Modal */}
            {showTestSelector && (
                <div className="modal-overlay">
                    <div className="modal-box">
                        <h2 className="modal-title">
                            Which test would you like to take?
                        </h2>

                        <div className="modal-options">

                            <div
                                className="modal-option"
                                onClick={() => handleTestChoice('friends')}
                            >
                                <div className="modal-icon">🎬</div>
                                <div>
                                    <div className="modal-option-title">
                                        Friends Personality
                                    </div>
                                    <div className="modal-option-desc">
                                        Based on Friends scenes and scenarios
                                    </div>
                                </div>
                            </div>

                            <div
                                className="modal-option"
                                onClick={() => handleTestChoice('general')}
                            >
                                <div className="modal-icon">🧠</div>
                                <div>
                                    <div className="modal-option-title">
                                        General Personality
                                    </div>
                                    <div className="modal-option-desc">
                                        Based on general scenarios
                                    </div>
                                </div>
                            </div>

                        </div>

                        <button
                            className="modal-close"
                            onClick={() => setShowTestSelector(false)}
                        >
                            Cancel
                        </button>
                    </div>
                </div>
            )}

        </>
    );
};

// Render the app
ReactDOM.render(<App />, document.getElementById('root'));