import React from 'react';
import { Link } from 'react-router-dom';

export const Welcome: React.FC = () => {
  return (
    <div className="welcome-page">
      <section className="hero-section">
        <h1 className="hero-title">Welcome to Slideshare</h1>
        <p className="hero-subtitle">
          Create beautiful presentations with customizable themes and layouts
        </p>
        <div className="hero-actions">
          <Link to="/themes" className="primary-button">
            Browse Themes
          </Link>
        </div>
      </section>

      <section className="features-section">
        <h2 className="features-title">Features</h2>
        <div className="features-grid">
          <div className="feature-card">
            <h3 className="feature-title">Theme System</h3>
            <p className="feature-description">
              Choose from professionally designed themes with customizable colors and layouts
            </p>
          </div>
          
          <div className="feature-card">
            <h3 className="feature-title">Multiple Layouts</h3>
            <p className="feature-description">
              Each theme includes various slide layouts for titles, content, images, and more
            </p>
          </div>
          
          <div className="feature-card">
            <h3 className="feature-title">No Backend Required</h3>
            <p className="feature-description">
              Works entirely in your browser with IndexDB storage - no server needed
            </p>
          </div>
          
          <div className="feature-card">
            <h3 className="feature-title">Presentation Notes</h3>
            <p className="feature-description">
              Add speaker notes to each slide for better presentation preparation
            </p>
          </div>
          
          <div className="feature-card">
            <h3 className="feature-title">Full Screen Mode</h3>
            <p className="feature-description">
              Present your slides in distraction-free full screen mode
            </p>
          </div>
          
          <div className="feature-card">
            <h3 className="feature-title">Customizable</h3>
            <p className="feature-description">
              Themes support custom CSS, fonts, colors, and images
            </p>
          </div>
        </div>
      </section>

      <section className="getting-started-section">
        <h2 className="section-title">Getting Started</h2>
        <div className="steps-list">
          <div className="step-item">
            <div className="step-number">1</div>
            <div className="step-content">
              <h3 className="step-title">Browse Themes</h3>
              <p className="step-description">
                Explore available themes and preview their layouts
              </p>
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">2</div>
            <div className="step-content">
              <h3 className="step-title">Create Presentation</h3>
              <p className="step-description">
                Start a new presentation using your chosen theme
              </p>
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">3</div>
            <div className="step-content">
              <h3 className="step-title">Add Content</h3>
              <p className="step-description">
                Fill in text, images, and other content using theme layouts
              </p>
            </div>
          </div>
          
          <div className="step-item">
            <div className="step-number">4</div>
            <div className="step-content">
              <h3 className="step-title">Present</h3>
              <p className="step-description">
                Share your presentation in full screen mode
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="cta-content">
          <h2 className="cta-title">Ready to Create?</h2>
          <p className="cta-description">
            Start building your presentation with our theme collection
          </p>
          <Link to="/themes" className="primary-button">
            Explore Themes
          </Link>
        </div>
      </section>
    </div>
  );
};