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



const LandingPage: React.FC = () => {
  const navigate = useNavigate();

  return (
    <div className="landing-container">
      <header className="landing-header">
        <div className="logo">LabAid AI</div>
        <nav className="landing-nav">
          <a href="#features">Features</a>
          <a href="#how-it-works">How It Works</a>
          <a href="#pricing">Pricing</a>
          <span className="lang-select">English</span>
        </nav>
      </header>
      <main className="landing-main">
        <h1>AI-Powered Lab <span className="highlight">Troubleshooting</span></h1>
        <p>Instantly diagnose and resolve equipment issues with our intelligent AI assistant. Get step-by-step solutions, maintenance tips, and expert guidance 24/7.</p>
        <button className="start-btn" onClick={() => navigate('/chat')}>Start Troubleshooting</button>
        <section className="how-it-works" id="how-it-works">
          <h2>How It Works</h2>
          <div className="steps">
            <div className="step">
              <div className="step-number">1</div>
              <h3>Describe the Issue</h3>
              <p>Simply tell our AI what's wrong with your equipment. Use natural language - no technical jargon required.</p>
            </div>
            <div className="step">
              <div className="step-number">2</div>
              <h3>Get AI Analysis</h3>
              <p>Our advanced AI analyzes your description and equipment type to provide accurate diagnosis and solutions.</p>
            </div>
            <div className="step">
              <div className="step-number">3</div>
              <h3>Follow the Steps</h3>
              <p>Receive detailed, step-by-step instructions with visual aids to resolve the issue quickly and safely.</p>
            </div>
          </div>
        </section>
        <section className="download-resources">
          <h2>Download Resources</h2>
          <div className="resources">
            <div className="resource-card">
              <h3>Equipment Manual</h3>
              <p>Complete user manual for lab equipment operation and safety guidelines.</p>
              <span>PDF · 2.4 MB</span>
              <button>Download</button>
            </div>
            <div className="resource-card">
              <h3>Troubleshooting Guide</h3>
              <p>Step-by-step solutions for common equipment issues and error codes.</p>
              <span>PDF · 1.8 MB</span>
              <button>Download</button>
            </div>
            <div className="resource-card">
              <h3>Maintenance Schedule</h3>
              <p>Recommended maintenance timeline and procedures for optimal performance.</p>
              <span>PDF · 0.9 MB</span>
              <button>Download</button>
            </div>
          </div>
          <a href="#all-documents" className="view-all">View All Documents →</a>
        </section>
      </main>
      <footer className="labassist-footer">
        <div className="footer-main-content">
          <div className="footer-column company-info">
            <div className="company-logo-section">
              
              <span>LabAid AI</span>
            </div>
            <p>Revolutionizing lab equipment troubleshooting with AI-powered solutions.</p>
            <div className="social-icons">
             
            </div>
          </div>
          <div className="footer-column">
            <h4>Product</h4>
            <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">API</a></li>
            <li><a href="#">Documentation</a></li>
            </ul>
          </div>
          <div className="footer-column">
            <h4>Support</h4>
            <ul>
            <li><a href="#">Help Center</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Status</a></li>
            <li><a href="#">Community</a></li>
            </ul>
          </div>
          <div className="footer-column">
            <h4>Company</h4>
            <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom-bar">
          <p>© 2024 LabAssist AI. All rights reserved.</p>
          <div className="footer-legal-links">
             <a href="#">Privacy Policy</a>
             <a href="#">Terms of Service</a>
          </div>
        </div>
      </footer>
    </div>


  );
};

export default LandingPage;