'use client';

import React from 'react';
import {VerticalTimeline, VerticalTimelineElement} from 'react-vertical-timeline-component';
import {FaRocket, FaLightbulb, FaCode, FaPaperPlane} from 'react-icons/fa';
import 'react-vertical-timeline-component/style.min.css';
import {motion} from 'framer-motion';

const steps = [
    {
        title: 'Kick-Off & Strategie',
        description:
            'In einem gemeinsamen Auftakt klären wir deine Ziele, Zielgruppen und Herausforderungen. Daraus entsteht ein strukturierter Plan als Basis für alles Weitere.',
        icon: <FaRocket/>,
    },
    {
        title: 'Konzept & Inhalte',
        description:
            'Wir erarbeiten eine klare Struktur und passende Inhalte – abgestimmt auf deine Botschaft und deine Nutzer. So entsteht ein roter Faden für Design und Umsetzung.',
        icon: <FaLightbulb/>,
    },
    {
        title: 'Design & Entwicklung',
        description:
            'Wir gestalten ein modernes Design und setzen es technisch um. Durch regelmäßige Feedback-Schleifen bist du jederzeit im Prozess eingebunden.',
        icon: <FaCode/>,
    },
    {
        title: 'Go-Live',
        description:
            'Nach erfolgreichen Tests geht dein Projekt live. Auch danach begleiten wir dich weiter – für einen reibungslosen Betrieb und mögliche Weiterentwicklungen.',
        icon: <FaPaperPlane/>,
    },
];

const ProcessSection = () => {
    return (
        <section id="process" className="w-full py-24 bg-background text-foreground">
            <div className="max-w-6xl px-6 md:px-10 mx-auto">
                <motion.h2
                    className="text-3xl md:text-4xl font-bold mb-1"
                    initial={{opacity: 0, y: 10}}
                    whileInView={{opacity: 1, y: 0}}
                    viewport={{once: true}}
                    transition={{duration: 0.4}}
                >
                    Unser Prozess
                </motion.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}}
                />

                <VerticalTimeline
                    lineColor="#eab308"
                    animate={true}

                >
                    {steps.map((step, idx) => (
                        <VerticalTimelineElement
                            key={idx}
                            contentStyle={{
                                background: 'hsl(var(--muted))',
                                color: 'hsl(var(--foreground))',
                                border: '1px solid hsl(var(--border))',
                            }}
                            contentArrowStyle={{borderRight: '7px solid hsl(var(--muted))'}}
                            iconStyle={{
                                background: '#eab308',
                                color: '#fff',
                            }}
                            icon={step.icon}
                        >
                            <h3 className="text-xl font-semibold">{step.title}</h3>
                            <p className="text-muted-foreground mt-2">{step.description}</p>
                        </VerticalTimelineElement>
                    ))}
                </VerticalTimeline>
            </div>
        </section>
    );
};

export default ProcessSection;