import React from 'react';
import ExpertiseSection from './ExpertiseSection';
import outputGif from '@/assets/output.gif';
import openWebUIGif from '@/assets/open-webui.gif';

const About = () => {
  return (
    <section id="about" className="about py-20 bg-gray-100">
      <div className="container mx-auto">
        <p className="text-lg mb-8">
          You have data, I have the skills to help you understand it. 
        </p>
        <ExpertiseSection
          title="Computer Vision"
          content="Expertise in developing and deploying computer vision models for various applications, including object detection, image classification, and more. Ask me about state-of-the-art real-time models for your business."
          images={[
            { url: outputGif, alt: "Video Segmentation with SAM2." },
          ]}
          viewMoreLink="/computer-vision"
          imageOnLeft={true}
        />
        <ExpertiseSection
          title="Natural Language Processing"
          content="Building NLP models for tasks such as sentiment analysis, text classification, and language generation. If you need a chatbot for your business and care about privacy, or a simple text classification algorithm to understand your data, I can help."
          images={[
            { url: openWebUIGif, alt: "Locally hosted LLM using oLLama and OpenWebUI." },
          ]}
          viewMoreLink="/nlp"
          imageOnLeft={false}
        />
      </div>
    </section>
  );
};

export default About;