// details.js

document.addEventListener("DOMContentLoaded", function() {
    const serviceDetails = {
        'seo-optimierung': {
            title: 'SEO Optimierung',
            icon: '🔍',
            description: 'Verbessern Sie Ihre Sichtbarkeit in Suchmaschinen und erreichen Sie mehr Kunden online.',
            fullDescription: 'Unsere SEO-Optimierungsdienste helfen Ihnen, in Suchmaschinen besser gefunden zu werden. Wir analysieren Ihre Website, identifizieren Optimierungspotenziale und implementieren bewährte Strategien, um Ihr Ranking zu verbessern und mehr qualifizierte Besucher anzuziehen.',
            features: [
                'Keyword-Analyse und -Recherche',
                'On-Page Optimierung',
                'Technische SEO-Audits',
                'Content-Strategie',
                'Link-Building',
                'Performance-Tracking'
            ],
            benefits: [
                'Höhere Sichtbarkeit in Suchmaschinen',
                'Mehr qualifizierte Besucher',
                'Verbesserte Conversion-Raten',
                'Langfristiger ROI'
            ]
        },
        'cloud-migration': {
            title: 'Cloud Migration',
            icon: '☁️',
            description: 'Modernisieren Sie Ihre IT-Infrastruktur mit sicheren und skalierbaren Cloud-Lösungen.',
            fullDescription: 'Wir begleiten Sie bei der Migration Ihrer IT-Systeme in die Cloud. Von der Analyse Ihrer bestehenden Infrastruktur bis zur vollständigen Implementierung sorgen wir für einen reibungslosen Übergang mit minimalem Geschäftsausfall.',
            features: [
                'Infrastruktur-Analyse',
                'Migrationsplanung',
                'Datenübertragung',
                'Sicherheit & Compliance',
                'Performance-Optimierung',
                'Schulung & Support'
            ],
            benefits: [
                'Kosteneinsparungen',
                'Bessere Skalierbarkeit',
                'Erhöhte Sicherheit',
                'Flexiblere Arbeitsweise'
            ]
        },
        'datenanalyse': {
            title: 'Datenanalyse',
            icon: '📊',
            description: 'Gewinnen Sie wertvolle Einblicke aus Ihren Daten mit unseren Analyse-Lösungen.',
            fullDescription: 'Wir helfen Ihnen, Ihre Daten in wertvolle Erkenntnisse umzuwandeln. Mit modernen Analyse-Tools und -Methoden identifizieren wir Trends, Muster und Chancen, die Ihre Geschäftsentscheidungen verbessern.',
            features: [
                'Datenerfassung & -bereinigung',
                'Statistische Analyse',
                'Visualisierung & Dashboards',
                'Predictive Analytics',
                'Berichterstellung',
                'Consulting'
            ],
            benefits: [
                'Bessere Entscheidungen',
                'Prozessoptimierung',
                'Kostensenkungen',
                'Wettbewerbsvorteile'
            ]
        }
    };

    const urlParams = new URLSearchParams(window.location.search);
    const serviceId = urlParams.get('service');
    const detailsContainer = document.getElementById('service-details');

    if (serviceId && serviceDetails[serviceId]) {
        const service = serviceDetails[serviceId];
        
        detailsContainer.innerHTML = `
            <div class="service-header">
                <div class="service-icon-large">${service.icon}</div>
                <h1 class="service-title-large">${service.title}</h1>
                <p class="service-description-large">${service.description}</p>
            </div>
            
            <div class="service-content">
                <section class="service-section">
                    <h2 class="section-title">Beschreibung</h2>
                    <p class="section-text">${service.fullDescription}</p>
                </section>
                
                <section class="service-section">
                    <h2 class="section-title">Unsere Leistungen</h2>
                    <ul class="feature-list">
                        ${service.features.map(feature => `<li>${feature}</li>`).join('')}
                    </ul>
                </section>
                
                <section class="service-section">
                    <h2 class="section-title">Ihre Vorteile</h2>
                    <ul class="benefit-list">
                        ${service.benefits.map(benefit => `<li>${benefit}</li>`).join('')}
                    </ul>
                </section>
                
                <section class="service-section">
                    <h2 class="section-title">Interesse?</h2>
                    <p class="section-text">Kontaktieren Sie uns für eine persönliche Beratung und ein maßgeschneidertes Angebot.</p>
                    <div class="cta-buttons">
                        <a href="offers.html" class="cta-btn primary">Kontakt aufnehmen</a>
                        <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
                    </div>
                </section>
            </div>
        `;
        
        // Update page title
        document.title = `Profice - ${service.title}`;
    } else {
        // Fallback if no service specified
        detailsContainer.innerHTML = `
            <div class="error-message">
                <h2>Service nicht gefunden</h2>
                <p>Der angeforderte Service konnte nicht gefunden werden.</p>
                <a href="leads.html" class="cta-btn secondary">Zurück zum Dashboard</a>
            </div>
        `;
    }
});