import styles from '@/styles/AboutPage.module.css';
import Link from 'next/link';
import { FaTools, FaRocket, FaCertificate, FaCodeBranch } from 'react-icons/fa';

const AboutPage = () => {
  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <header className={styles.header}>
          <h1 className={styles.title}>Ahmed Galadima</h1>
          <div className={styles.subtitle}>Senior QA Engineer & Automation Consultant</div>
          <p className={styles.tagline}>Turning quality assurance into competitive advantage</p>
        </header>

        <div className={styles.aboutContent}>
          <section className={styles.section}>
            <div className={styles.highlightCard}>
              <h2 className={styles.sectionTitle}>Value Proposition</h2>
              <p className={styles.paragraph}>
                I help startups and tech teams <span className={styles.highlight}>ship flawless software 30% faster </span> 
                through strategic test automation and CI/CD optimization. Proven track record of reducing post-launch 
                defects by 70%+ and QA costs by 40%+.
              </p>
            </div>
          </section>

          <section className={styles.section}>
            <h2 className={styles.sectionTitle}><FaRocket className={styles.icon} /> Key Achievements</h2>
            <div className={styles.grid}>
              <div className={styles.card}>
                <h3>Process Automation</h3>
                <ul className={styles.list}>
                  <li>Reduced regression testing time by 65% through Selenium frameworks</li>
                  <li>Implemented CI/CD pipelines cutting release cycles from 4 weeks to 10 days</li>
                </ul>
              </div>
              <br></br>
              <div className={styles.card}>
                <h3>Client Impact</h3>
                <ul className={styles.list}>
                  <li>$50K+ saved in remediation costs for fintech clients</li>
                  <li>Zero critical bugs in 5+ MVP launches</li>
                </ul>
              </div>
            </div>
          </section>

          <section className={styles.section}>
            <h2 className={styles.sectionTitle}><FaTools className={styles.icon} /> Technical Arsenal</h2>
            <div className={styles.techGrid}>
              <div className={styles.techItem}>
                <FaCodeBranch className={styles.techIcon} />
                <div>
                  <h3>Automation</h3>
                  <p>Selenium · Cypress · Postman · JMeter</p>
                </div>
              </div>
              <div className={styles.techItem}>
                <FaCertificate className={styles.techIcon} />
                <div>
                  <h3>CI/CD & DevOps</h3>
                  <p>Jenkins · Docker · GitLab CI · Kubernetes</p>
                </div>
              </div>
            </div>
          </section>

          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>Client Success Stories</h2>
            <div className={styles.caseStudy}>
              <h3>HealthTech Startup</h3>
              <div className={styles.challenge}>
                <span>Challenge:</span> MVP launch blocked by 100+ critical bugs
              </div>
              <div className={styles.solution}>
                <span>Solution:</span> 3-day QA audit + automated regression suite
              </div>
              <div className={styles.outcome}>
                <span>Outcome:</span> Zero critical bugs at launch · $500K seed funding secured
              </div>
            </div>
          </section>

          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>Credentials</h2>
            <div className={styles.credentials}>
              <div className={styles.badge}>
                <FaCertificate className={styles.badgeIcon} />
                ISTQB Advanced
              </div>
              <div className={styles.badge}>
                <FaCertificate className={styles.badgeIcon} />
                Certified ScrumMaster
              </div>
            </div>
          </section>

          <section className={styles.section}>
            <h2 className={styles.sectionTitle}>Testimonials</h2>
            <blockquote className={styles.testimonial}>
              Ahmed&apos;s automation framework became our secret weapon for scaling. 
              Cut our testing costs by 60% while improving coverage.
              <cite>- CTO, SaaS Platform</cite>
            </blockquote>
          </section>
        </div>

        <div className={styles.ctaSection}>
          <Link href={"./contact"} className={styles.ctaButton}>
            Let&apos;s Automate Your Quality
          </Link>
        </div>
      </div>
    </div>
  );
};

export async function getStaticProps() {
  return {
    props: { title: 'Expert QA Engineering Services' },
  };
}

export default AboutPage;