import { FC } from 'react';
import { Link } from 'react-router-dom';
import styles from './LandingPage.module.css';
import { 
  FaGithub, 
  FaInstagram, 
  FaLinkedin,
  FaCode,
  FaRobot,
  FaPython,
  FaGamepad,
  FaCamera,
  FaHeart
} from 'react-icons/fa';

const LandingPage: FC = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <section className={styles.hero}>
          <div className={styles.profileSection}>
            <div className={styles.profileImage}>
              <img src="https://picsum.photos/400/400" alt="Jakub Kaniecki" />
            </div>
            <div className={styles.socialIcons}>
              <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.iconLink}>
                <FaGithub />
              </a>
              <a href="https://linkedin.com/in/yourusername" target="_blank" rel="noopener noreferrer" className={styles.iconLink}>
                <FaLinkedin />
              </a>
              <a href="https://instagram.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.iconLink}>
                <FaInstagram />
              </a>
            </div>
          </div>
          <div className={styles.heroContent}>
            <h1 className={styles.title}>Jakub Kaniecki</h1>
            <p className={styles.subtitle}>Automation Engineer & Tech Enthusiast</p>
            <div className={styles.socialLinks}>
              <Link to="/blog" className={styles.ctaButton}>Read My Blog</Link>
              <Link to="/contact" className={styles.ctaButton}>Get in Touch</Link>
            </div>
            <div className={styles.about}>
              <h2>About Me</h2>
              <p>
                I'm passionate about making technology work smarter. With expertise in automation,
                I help businesses streamline their processes and improve efficiency through
                modern solutions.
              </p>
            </div>
          </div>
        </section>

        <section className={styles.expertise}>
          <h2>What I Do</h2>
          <div className={styles.expertiseGrid}>
            <div className={styles.expertiseItem}>
              <div className={styles.iconWrapper}>
                <FaCode />
              </div>
              <h3>DevOps</h3>
              <p>Building and maintaining robust CI/CD pipelines, infrastructure automation, and cloud solutions.</p>
            </div>
            <div className={styles.expertiseItem}>
              <div className={styles.iconWrapper}>
                <FaRobot />
              </div>
              <h3>RPA</h3>
              <p>Automating repetitive tasks and business processes to increase productivity and reduce errors.</p>
            </div>
            <div className={styles.expertiseItem}>
              <div className={styles.iconWrapper}>
                <FaPython />
              </div>
              <h3>Python Development</h3>
              <p>Creating efficient and scalable solutions for automation and data processing needs.</p>
            </div>
          </div>
        </section>

        <section className={styles.interests}>
          <h2>Beyond Tech</h2>
          <div className={styles.interestsGrid}>
            <div className={styles.interestItem}>
              <div className={styles.iconWrapper}>
                <FaGamepad />
              </div>
              <h3>Counter-Strike</h3>
              <p>Competitive gaming enthusiast, always up for strategic team play.</p>
            </div>
            <div className={styles.interestItem}>
              <div className={styles.iconWrapper}>
                <FaCamera />
              </div>
              <h3>Photography</h3>
              <p>Capturing moments and perspectives through the lens.</p>
            </div>
            <div className={styles.interestItem}>
              <div className={styles.iconWrapper}>
                <FaHeart />
              </div>
              <h3>Open Source</h3>
              <p>Contributing to and learning from the developer community.</p>
            </div>
          </div>
        </section>
      </main>

      <footer className={styles.footer}>
        <p>&copy; 2024 knck.pl. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default LandingPage; 