import Image from "next/image";
import DynamicSvgIcon from "../svg/DynamicSvgIcon";

const Bio = () => {
  const currentFavoriteTechStack = [
    { name: "NextJS", icon: "nextjs", color: "fill-header-primary" },
    { name: "React.js", icon: "react", color: "fill-[#61dbfb]" },
    { name: "TypeScript", icon: "typescript", color: "fill-[#007ACC]" },
    { name: "JavaScript", icon: "javascript", color: "fill-[#f0db4f]" },
    { name: "TailwindCSS", icon: "tailwind", color: "fill-[#3490dc]" },
    { name: "Node.js", icon: "nodejs", color: "fill-[#3c873a]" },
  ];

  return (
    <section className="max-h-full px-4 pt-4 pb-16 flex-1 overflow-auto">
      <Image
        src={"/me.webp"}
        width={160}
        height={160}
        alt="profile picture"
        className="rounded float-left mr-4 mb-1"
      />
      <div className="space-y-4">
        <p>
        Hello, I'm Abderrahmen Othman, a software engineer with a strong 
        passion for building intelligent,scalable systems. 
        With hands-on experience across full-stack development,machine learning,
        and computer vision, I specialize in transforming complex challenges
        into practical solutions.My journey in software engineering has been 
        shaped by real-world projects—from automating legal document workflows
        at Tunisia's National Office of Land Ownership 
        to optimizing backend systems at Segula Technologies
        </p>
        <p>
          I thrive on leveraging cutting-edge technologies like Django, Next.js, 
          React Native,and advanced AI models (YOLOv8, Qwen2-VL) to deliver impactful results.
          Whether it's improving OCR accuracy by 18%, reducing page load times by 40%,
          or building mobile apps from scratch, I focus on creating solutions 
          that matter. I'm driven by continuous learning, innovation, 
          and the opportunity to solve meaningful problems through code.
        </p>
      </div>
      <div className="mt-8">
        <h5 className="text-lg text-accent-primary font-semibold mb-2">
          Current favorite tech stack
        </h5>
        <div className="flex gap-4 flex-wrap">
          {currentFavoriteTechStack.map((stack) => {
            return (
              <div className="relative">
                <DynamicSvgIcon
                  name={stack.icon}
                  className={`w-10 ${stack.color}`}
                />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default Bio