import { useEffect } from 'react'
import { motion } from 'framer-motion'
import { Card } from '../UI/Card'
import { ScrollDownArrow } from '../UI/ScrollDownArrow'

export default function Consulting() {
    useEffect(() => {
        window.scrollTo({ top: 0, behavior: "smooth" })
    }, [])

    const consultingServices = [
        {
            title: "Интегрирани Дозволи (А и Б)",
            description: "Компанијата нуди услуги поврзани со изработка на интегрирани дозволи. Ова покажува експертиза во справувањето со регулаторните рамки и обезбедување на согласност со лиценцните барања. Интегрираните дозволи се суштински за индустриските операции, што укажува на фокус на оптимизација на правните и регулаторни процеси."
        },
        {
            title: "Проценка на Влијанието врз Животната Средина",
            description: "Консултантот обезбедува услуги за проценка на влијанието врз животната средина. Ова вклучува систематска евалуација на тоа како индустриските активности можат да влијаат на околната средина. Таквите проценки се суштински за обезбедување на одржливи практики и согласност со еколошките регулативи."
        },
        {
            title: "Проектна Документација за Производствени Објекти",
            description: "ИМК нуди изработка на проектна документација специфично дизајнирана за производствени објекти, земајки ги предвид различните аспекти на дизајнирање и оптимизација на индустриските операции."
        },
        {
            title: "Проекти за Финасиска Ефикасност за Производствени Објекти",
            description: "ИМК нуди експертиза во креирање на ценовна ефикасност за производствени капацитети. Ова вклучува анализа на постоечките процеси и идентификација на можностите за оптимизација за подобрување на продуктивноста и намалување на оперативните трошоци."
        },
        {
            title: "Елаборати за Финансиска Исплатливост на Производствени Процеси",
            description: "ИМК изработува елаборати (детални извештаи) фокусирани на проценка на финансиската исплатливост на производствените процеси. Тие ги вклучуваат економските можности и оправданоста/одржливоста на проектираните или постоечките производствени процеси."
        }
    ]

    return (
        <div className="min-h-screen bg-neutral-50">
            {/* Hero Section */}
            <section className="relative bg-gradient-to-br from-primary-900 to-primary-700">
                <div className="absolute inset-0 bg-black/20" />
                <div className="relative container-base h-screen flex items-center justify-center">
                    <div className="flex flex-col items-center">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8 }}
                            className="max-w-3xl mx-auto text-center"
                        >
                            <h1 className="text-4xl md:text-5xl font-display font-bold text-white mb-6">
                                Преглед на консултантски услуги
                            </h1>
                            <div className="w-24 h-1 bg-white/30 mx-auto mb-8"></div>
                            <p className="text-xl text-neutral-100">
                                ИМК нуди низа консултантски услуги, предлагајќи комплексен пристап за поддршка на различни аспекти на индустриските операции.
                            </p>
                        </motion.div>

                        <ScrollDownArrow targetId="services-section" />
                    </div>
                </div>
            </section>

            {/* Services Section */}
            <section id="services-section" className="py-24">
                <div className="container-base">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                        {consultingServices.map((service, index) => (
                            <motion.div
                                key={index}
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.5, delay: index * 0.1 }}
                            >
                                <Card className="h-full hover:shadow-lg transition-shadow duration-300">
                                    <div className="p-6">
                                        <h3 className="text-xl font-display font-semibold text-neutral-900 mb-4">
                                            {service.title}
                                        </h3>
                                        <p className="text-neutral-600 leading-relaxed">
                                            {service.description}
                                        </p>
                                    </div>
                                </Card>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>
        </div>
    )
}