import React, { FC } from 'react';
import { motion } from 'framer-motion';
import { DecorativeImage } from '../components/DecorativeImage';
import { FadeIn } from '../components/FadeIn';
import { ContactButton } from '../components/ContactButton';

interface AboutSectionProps {
  // No props needed for now, but good practice
}

/**
 * About Section component.
 */
export const AboutSection: FC<AboutSectionProps> = () => {
  const decorativeImages = [
    {
      src: "https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png",
      alt: "Moon Icon",
      className: "w-[120px] sm:w-[160px] md:w-[210px]",
      delay: 0.1,
      x: -80,
      y: 0,
    },
    {
      src: "https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png",
      alt: "3D Object",
      className: "w-[100px] sm:w-[140px] md:w-[180px]",
      delay: 0.25,
      x: -80,
      y: 0,
    },
    {
      src: "https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png",
      alt: "Lego Icon",
      className: "w-[120px] sm:w-[160px] md:w-[210px]",
      delay: 0.15,
      x: 80,
      y: 0,
    },
    {
      src: "https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png",
      alt: "3D Group",
      className: "w-[130px] sm:w-[170px] md:w-[220px]",
      delay: 0.3,
      x: 80,
      y: 0,
    },
  ];

  return (
    <section className="min-h-screen py-20 sm:py-24 md:py-32 px-5 sm:px-8 md:px-10 main-wrapper">
      <div className="relative max-w-7xl mx-auto">
        {/* Decorative Images */}
        <div className="absolute inset-0 pointer-events-none">
          {decorativeImages.map((img, index) => (
            <DecorativeImage
              key={index}
              src={img.src}
              alt={img.alt}
              className={img.className}
              delay={img.delay}
              x={img.x}
              y={img.y}
            />
          ))}
        </div>

        {/* Content */}
        <div className="relative z-10 max-w-4xl mx-auto text-center">
          {/* Heading */}
          <FadeIn
            delay={0}
            duration={1}
            initial={{ y: 40 }}
            whileInView={{ y: 0 }}
            viewport={{ once: true, amount: 0.5 }}
            className="hero-heading text-black font-black uppercase leading-none tracking-tight text-clamp-3 sm:text-clamp-12 md:text-clamp-160"
          >
            About me
          </FadeIn>

          <div className="mt-10 sm:mt-14 md:mt-16">
            {/* Animated Paragraph */}
            <div className="text-[#D7E2EA] font-medium leading-relaxed max-w-[560px] text-base sm:text-xl md:text-2xl">
              <AnimatedText text="With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!" />
            </div>
          </div>

          {/* Contact Button */}
          <div className="mt-16 sm:mt-20 md:mt-24">
            <ContactButton>
              Let's Talk
            </ContactButton>
          </div>
        </div>
      </div>
    </section>
  );
};