'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 },
});

const CHROME_ICON = '/Users/marcmintel/Projects/mintel.me/src/assets/browser/chrome.png'; // Fallback to a placeholder if not found
const SAFARI_ICON = '/Users/marcmintel/Projects/mintel.me/src/assets/browser/safari.png';

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 }}>Ich entwickle Websites als moderne, performante Websysteme.</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 }}>Ich biete Planungssicherheit. Ich kalkuliere nach einem modularen Festpreis-System. Sie zahlen für Ergebnisse, nicht für die Zeit. Ich schließe versteckte Kosten aus.</PDFText>
            <Divider style={{ marginTop: 12 }} />
        </PDFView>
        <PDFView style={styles.section}>
            <PDFView style={styles.pricingGrid}>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>1. Das Fundament</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich richte die technische Infrastruktur ein. Ich installiere das Hosting, schaffe SEO-Basics und erstelle die Test-, Staging- und Live-Umgebungen.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.BASE_WEBSITE?.toLocaleString('de-DE')} €</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>2. Seiten</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich entwickle das individuelle Layout und die Struktur jeder Seite. Ich garantiere die korrekte Darstellung auf allen Endgeräten.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.PAGE?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>3. Features</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich erstelle abgeschlossene technische Systeme (z. B. Blog oder News). Ich definiere die Datenfelder und die 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. Funktionen</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich programmiere Logik-Module wie Filter, Suchen oder Kontakt-Schnittstellen. Ich sorge für die fehlerfreie Verarbeitung Ihrer Daten.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.FUNCTION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>5. Interaktion</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich entwerfe komplexe UI-Abläufe und Konfiguratoren. Ich optimiere die Nutzerführung für maximale Abschlüsse.</PDFText>
                    <PDFText style={styles.pricingTag}>{pricing.COMPLEX_INTERACTION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>6. Integrationen</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich binde Drittsysteme wie CRM, ERP oder Stripe an. Ich richte CMS-Schnittstellen zur unabhängigen Inhaltsverwaltung ein.</PDFText>
                    <PDFText style={styles.pricingTag}>ab {pricing.API_INTEGRATION?.toLocaleString('de-DE')} € / Stk</PDFText>
                </PDFView>
                <PDFView style={styles.pricingRow}>
                    <PDFText style={styles.pricingTitle}>7. Betrieb (12 Monate)</PDFText>
                    <PDFText style={styles.pricingDesc}>Ich betreibe das Hosting, pflege Sicherheitsupdates ein und erstelle monatliche Berichte. Ich garantiere die Verfügbarkeit für ein Jahr.</PDFText>
                    <PDFText style={styles.pricingTag}>1.440 €</PDFText>
                </PDFView>
            </PDFView>
        </PDFView>
    </>
);

export const PrinciplesModule = ({ principles }: any) => (
    <>
        <DocumentTitle title="Meine Prinzipien" />
        <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>
    </>
);