mintel.me/src/components/pdf/modules/CommonModules.tsx

'use client';

import * as React from 'react';
import { View as PDFView, Text as PDFText, StyleSheet, Image as PDFImage } from '@react-pdf/renderer';
import { DocumentTitle, Divider, COLORS, FONT_SIZES } from '../SharedUI';

const styles = StyleSheet.create({
    section: { marginBottom: 24 },
    pricingGrid: { marginTop: 24 },
    pricingRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.DIVIDER, paddingVertical: 10, alignItems: 'flex-start' },
    pricingTitle: { width: '30%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', color: COLORS.CHARCOAL },
    pricingDesc: { width: '55%', fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.4 },
    pricingTag: { width: '15%', fontSize: FONT_SIZES.BODY, fontWeight: 'bold', textAlign: 'right', color: COLORS.CHARCOAL },
    configLabel: { fontSize: FONT_SIZES.BLUEPRINT, color: COLORS.TEXT_LIGHT, textTransform: 'uppercase', marginBottom: 8 },
});

export const techPageModule = ({ techDetails, headerIcon }: any) => (
    <>
        <DocumentTitle title="Technische Umsetzung" />
        <PDFView style={styles.section}>
            <PDFText style={{ fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.6, marginBottom: 16 }}>Entwicklung von Websites als moderne, performante Websysteme nach industriellen Standards.</PDFText>
            <PDFView style={styles.pricingGrid}>
                {techDetails?.map((item: any, i: number) => (
                    <PDFView key={i} style={styles.pricingRow}>
                        <PDFText style={[styles.pricingTitle, { width: '35%' }]}>{item.t}</PDFText>
                        <PDFText style={[styles.pricingDesc, { width: '65%' }]}>{item.d}</PDFText>
                    </PDFView>
                ))}
            </PDFView>
        </PDFView>
    </>
);

export const TransparenzModule = ({ pricing }: any) => (
    <>
        <DocumentTitle title="Preis-Transparenz & Modell" />
        <PDFView style={styles.section}>
            <PDFText style={{ fontSize: FONT_SIZES.BODY + 1, fontWeight: 'bold', color: COLORS.CHARCOAL, marginBottom: 8 }}>Festpreise statt Stundenabrechnung</PDFText>
            <PDFText style={{ fontSize: FONT_SIZES.SUB, color: COLORS.TEXT_DIM, lineHeight: 1.6, marginBottom: 12 }}>Maximale Planungssicherheit durch ein modulares Festpreis-System. Die Abrechnung erfolgt nach Ergebnissen statt nach reinem Zeitaufwand. Versteckte Kosten sind durch die modulare Struktur ausgeschlossen.</PDFText>
            <Divider style={{ marginTop: 12 }} />
        </PDFView>
        <PDFView style={styles.section}>
            <PDFView style={styles.pricingGrid}>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>1. Das technische Fundament</PDFText>
                    <PDFText style={styles.pricingDesc}>Einrichtung der technischen Infrastruktur, Hosting-Bereitstellung, SEO-Basics sowie Bereitstellung von Test-, Staging- und produktiven Live-Umgebungen.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.BASE_WEBSITE?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>2. Individuelle Seiten</PDFText>
                    <PDFText style={styles.pricingDesc}>Entwicklung individueller Layouts und Strukturen pro Seite. Optimierung für alle Endgeräte (Responsive Design) und Browser-Kompatibilität.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.PAGE?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>3. System-Module (Features)</PDFText>
                    <PDFText style={styles.pricingDesc}>Implementierung abgeschlossener technischer Systeme (z. B. Blog, News, Produkte). Definition notwendiger Datenfelder und Pflege-Oberflächen.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.FEATURE?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>4. Logik-Funktionen</PDFText>
                    <PDFText style={styles.pricingDesc}>Programmierung technischer Logik-Einheiten wie Filter, Suchen oder Kontakt-Schnittstellen zur fehlerfreien Datenverarbeitung.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.FUNCTION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>5. Schnittstellen (API)</PDFText>
                    <PDFText style={styles.pricingDesc}>Anbindung externer Drittsysteme (CRM, ERP, Payment-Provider) zur automatisierten Datensynchronisation und Prozessoptimierung.</PDFText>
                    <PDFText style={styles.pricingTag}>ab {pricing.API_INTEGRATION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>6. Inhaltsverwaltung (CMS)</PDFText>
                    <PDFText style={styles.pricingDesc}>Bereitstellung und Konfiguration eines Content Management Systems (CMS) inkl. technischer Anbindung aller Module zur unabhängigen Datenpflege.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.CMS_SETUP?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>7. Inszenierung & Interaktion</PDFText>
                    <PDFText style={styles.pricingDesc}>Umsetzung komplexer Interaktions-Mechanismen, Konfiguratoren oder aufwendiger visueller Storytelling-Elemente zur Steigerung der Conversion.</PDFText>
                    <PDFText style={styles.pricingTag}>ab {pricing.VISUAL_STAGING?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>8. Mehrsprachigkeit</PDFText>
                    <PDFText style={styles.pricingDesc}>Skalierung der System-Architektur auf zusätzliche Sprachen. Inklusive struktureller Anpassungen und Logik für Sprachumschaltung.</PDFText>
                    <PDFText style={styles.pricingTag}>+20% / Sprache</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>9. Inhaltliche Initial-Pflege</PDFText>
                    <PDFText style={styles.pricingDesc}>Manuelle Übernahme und Aufbereitung von Datensätzen in das Zielsystem zur Sicherstellung einer initialen Inhaltsabdeckung.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.NEW_DATASET?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>10. Laufender Betrieb & Hosting</PDFText>
                    <PDFText style={styles.pricingDesc}>Laufender Betrieb, Hosting, Sicherheits-Updates sowie monatliche Backups und Monitoring zur Sicherstellung der Systemverfügbarkeit.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.HOSTING_MONTHLY?.toLocaleString('de-DE')} € / Monat</PDFText>
                </PDFView>
            </PDFView>
        </PDFView>
    </>
);

export const PrinciplesModule = ({ principles }: any) => (
    <>
        <DocumentTitle title="Prinzipien & Standards" />
        <PDFView style={styles.pricingGrid}>
            {principles?.map((item: any, i: number) => (
                <PDFView key={i} style={styles.pricingRow}>
                    <PDFText style={[styles.pricingTitle, { width: '35%' }]}>{item.t}</PDFText>
                    <PDFText style={[styles.pricingDesc, { width: '65%' }]}>{item.d}</PDFText>
                </PDFView>
            ))}
        </PDFView>
    </>
);