import React from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './LandingPage.module.css';

const LandingPage: React.FC = () => {
  const navigate = useNavigate();
  const isAuthenticated = !!localStorage.getItem('token');

  return (
    <div className={styles.container}>
      <header className={styles.header}>
        <h1 className={styles.logo}>MindMapX</h1>
        <div className={styles.navButtons}>
          {isAuthenticated ? (
            <button 
              className={styles.buttonPrimary}
              onClick={() => navigate('/editor')}
            >
              Go to Dashboard
            </button>
          ) : (
            <>
              <button 
                className={styles.buttonSecondary}
                onClick={() => navigate('/login')}
              >
                Login
              </button>
              <button 
                className={styles.buttonPrimary}
                onClick={() => navigate('/signup')}
              >
                Sign Up
              </button>
            </>
          )}
        </div>
      </header>

      <section className={styles.hero}>
        <h2 className={styles.title}>Create Beautiful Mind Maps</h2>
        <p className={styles.description}>
          MindMapX is a powerful tool for creating, sharing, and collaborating on mind maps.
          Organize your thoughts, plan projects, and visualize complex ideas with our intuitive interface.
        </p>
        {!isAuthenticated && (
          <button 
            className={styles.ctaButton}
            onClick={() => navigate('/signup')}
          >
            Get Started Free
          </button>
        )}
      </section>

      <section className={styles.features}>
        <div className={styles.featureCard}>
          <h3 className={styles.featureTitle}>Intuitive Interface</h3>
          <p className={styles.featureDescription}>
            Drag and drop nodes, create connections, and organize your ideas with ease.
          </p>
        </div>
        <div className={styles.featureCard}>
          <h3 className={styles.featureTitle}>Real-time Collaboration</h3>
          <p className={styles.featureDescription}>
            Work together with your team in real-time, share your mind maps, and get instant feedback.
          </p>
        </div>
        <div className={styles.featureCard}>
          <h3 className={styles.featureTitle}>Cloud Storage</h3>
          <p className={styles.featureDescription}>
            Access your mind maps from anywhere, anytime. Your work is automatically saved and synced.
          </p>
        </div>
      </section>
    </div>
  );
};

export default LandingPage;