rhein-sw-website/components/About/Section/AboutProcess.tsx

'use client';

import React, {useState} from "react";
import {motion} from "framer-motion";
import {useThemeColors} from "@/utils/useThemeColors";

const processSteps = [
    {
        title: "Beratung",
        description: (
            <>
                In der <strong>Beratungsphase</strong> analysieren wir gemeinsam Ihre Anforderungen und
                Geschäftsziele. Dabei identifizieren wir Herausforderungen und definieren die Zielsetzung
                für Ihr Projekt.
            </>
        ),
    },
    {
        title: "Planung",
        description: (
            <>
                Wir erarbeiten ein <strong>technisches Konzept</strong> mit klarer Struktur, Meilensteinen und
                Ressourcenplanung. Eine solide Architektur bildet die Grundlage für ein skalierbares und wartbares
                System.
            </>
        ),
    },
    {
        title: "Entwicklung",
        description: (
            <>
                In iterativen Zyklen setzen wir das Projekt um. Regelmäßige <strong>Feedbackschleifen</strong>&nbsp;
                sorgen dafür, dass das Ergebnis Ihren Erwartungen entspricht und flexibel angepasst werden kann.
            </>
        ),
    },
    {
        title: "Test",
        description: (
            <>
                Durch umfangreiche <strong>Tests und Optimierungen</strong> stellen wir sicher, dass Ihre
                Anwendung robust, performant und benutzerfreundlich ist – noch vor dem Go-Live.
            </>
        ),
    },
    {
        title: "Go-Live",
        description: (
            <>
                Wir begleiten Sie beim <strong>produktiven Einsatz</strong> Ihrer Anwendung und unterstützen Sie
                auch nach dem Go-Live mit Support und Weiterentwicklungsmöglichkeiten.
            </>
        ),
    },
];

const AboutProcess: React.FC = () => {
    const colors = useThemeColors();
    const [activeIndex, setActiveIndex] = useState<number>(0);

    return (
        <section className="w-full px-6 sm:px-12 py-20 max-w-6xl mx-auto">
            <h2
                className="text-2xl sm:text-3xl font-bold text-left"
                style={{color: colors.primaryText}}
            >
                Unser Prozess
            </h2>
            <motion.div
                className="w-12 h-[2px] mt-2 mb-12 bg-amber-500"
                initial={{opacity: 0, x: -20}}
                whileInView={{opacity: 1, x: 0}}
                viewport={{once: true}}
                transition={{duration: 0.4, delay: 0.1}}
            />

            {/* Mobile View: Tab buttons */}
            <div className="block md:hidden mb-6">
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
                    {processSteps.map((step, idx) => (
                        <button
                            key={idx}
                            onClick={() => setActiveIndex(idx)}
                            className={`w-full px-4 py-2 text-sm border rounded-full transition-colors ${
                                activeIndex === idx
                                    ? 'bg-blue-600 text-white border-blue-600'
                                    : 'border-gray-300 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
                            }`}
                        >
                            {step.title}
                        </button>
                    ))}
                </div>
            </div>

            {/* Desktop View: 2-column layout */}
            <div className="hidden md:grid grid-cols-3 gap-8">
                {/* Left: Step List */}
                <div className="flex flex-col space-y-4">
                    {processSteps.map((step, idx) => (
                        <button
                            key={idx}
                            onClick={() => setActiveIndex(idx)}
                            className={`text-left px-4 py-3 border rounded-lg transition-colors ${
                                activeIndex === idx
                                    ? 'border-blue-600 bg-blue-50 dark:bg-gray-800'
                                    : 'border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800'
                            }`}
                            style={{color: colors.primaryText}}
                        >
                            <span className="font-semibold">{idx + 1}. {step.title}</span>
                        </button>
                    ))}
                </div>

                {/* Right: Step Content */}
                <div className="md:col-span-2 p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
                     style={{backgroundColor: colors.primaryBg}}>
                    <motion.div
                        key={activeIndex}
                        initial={{opacity: 0, y: 10}}
                        animate={{opacity: 1, y: 0}}
                        transition={{duration: 0.4}}
                    >
                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
                            {processSteps[activeIndex].title}
                        </h3>
                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
                            {processSteps[activeIndex].description}
                        </div>
                    </motion.div>
                </div>
            </div>

            {/* Mobile View: Content Below Tabs */}
            <div className="block md:hidden">
                <div className="p-6 border border-gray-300 dark:border-gray-700 rounded-lg"
                     style={{backgroundColor: colors.primaryBg}}>
                    <motion.div
                        key={activeIndex + '-mobile'}
                        initial={{opacity: 0, y: 10}}
                        animate={{opacity: 1, y: 0}}
                        transition={{duration: 0.4}}
                    >
                        <h3 className="text-xl font-bold mb-4" style={{color: colors.primaryText}}>
                            {activeIndex + 1}. {processSteps[activeIndex].title}
                        </h3>
                        <div className="text-base space-y-1" style={{color: colors.secondaryText}}>
                            {processSteps[activeIndex].description}
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
};

export default AboutProcess;