import React from "react";
import Image from "next/image";

const FullStack = () => {
    return (
        <div
            className="w-[95%] sm:w-[80%] mx-auto items-center grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8 mb-16 transition-theme">
            <div className="p-0"
            >
                <h1 data-aos="fade-up"
                    className="mt-4 text-xl sm:text-2xl md:text-3xl font-bold"
                    style={{color: "var(--primary-text)"}} // Dynamic text color
                >
                    💻 Full-Stack Entwicklung
                </h1>
                <div data-aos="fade-up"
                     data-aos-delay="200"
                >
                    <p
                        className="mt-4 text-sm font-medium leading-[2rem]"
                        style={{color: "var(--secondary-text)"}} // Secondary text color
                    >
                        Wir entwickeln skalierbare Backends, performante Frontends und native Apps – genau auf deine
                        Anforderungen zugeschnitten. Dabei setzen wir auf neueste und modernste Technologien, um
                        flexible
                        und zukunftssichere Lösungen zu schaffen.
                    </p>
                    {/* Technology Logos Section */}
                    <h2
                        className="mt-8 text-lg font-semibold"
                        style={{color: "var(--primary-text)"}}
                    >
                        🔧 Tech Stack
                    </h2>
                    <span
                        className="mt-4 text-sm font-medium leading-[2rem]"
                        style={{color: "var(--secondary-text)"}}
                    >
                    Programmiersprachen und Frameworks, die wir für unsere Lösungen einsetzen.
                </span>
                    <div className="mt-6 flex flex-wrap items-center gap-8">
                        {/* Tech Stack Logos */}
                        {[
                            {src: "/images/flutter_logo.png", label: "Flutter", width: 30, height: 30},
                            {src: "/images/dart_logo.png", label: "Dart", width: 40, height: 40},
                            {src: "/images/java_logo.png", label: "Java", width: 40, height: 40},
                            {src: "/images/nextjs_logo.png", label: "NextJS", width: 40, height: 40},
                        ].map(({src, label, width, height}) => (
                            <div key={label} className="flex flex-col items-center">
                                <Image src={src} alt={label} width={width} height={height} className="object-contain"/>
                                <span
                                    className="text-xs mt-2"
                                    style={{color: "var(--secondary-text)"}} // Match theme
                                >
                                {label}
                            </span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            <div data-aos="fade-up" data-aos-anchor-placement="top-center" className="justify-self-center">
                <Image
                    src="/images/software_dev.jpg"
                    alt="image"
                    width={200}
                    height={200}
                    className="object-contain"
                />
            </div>
        </div>
    );
};

export default FullStack;