"use client";

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

const styles = StyleSheet.create({
    section: { marginBottom: 24 },
    moduleLabel: {
        fontSize: FONT_SIZES.LABEL,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
        letterSpacing: 0.5,
        marginBottom: 4,
    },
    moduleDesc: {
        fontSize: FONT_SIZES.SMALL,
        color: COLORS.TEXT_DIM,
        lineHeight: 1.5,
    },
    ledgerRow: {
        paddingVertical: 14,
        borderBottomWidth: 1,
        borderBottomColor: COLORS.GRID,
        flexDirection: "row",
        alignItems: "flex-start",
    },
    ledgerPrice: {
        fontSize: FONT_SIZES.BODY,
        fontWeight: "bold",
        color: COLORS.CHARCOAL,
    },
    ledgerUnit: {
        fontSize: FONT_SIZES.TINY,
        color: COLORS.TEXT_LIGHT,
        marginLeft: 2,
    },
});

export const ClosingModule = () => (
    <>
        <DocumentTitle title="Abschluss & Kontakt" isHero={true} />
        <PDFView style={styles.section}>
            <PDFText
                style={[
                    styles.moduleLabel,
                    { fontSize: FONT_SIZES.HEADING, marginBottom: 12 },
                ]}
            >
                Vielen Dank für Ihr Interesse!
            </PDFText>
            <PDFText style={styles.moduleDesc}>
                Die aufgeführten Positionen stellen eine detaillierte Schätzung auf
                Basis unseres aktuellen Stands dar. Sollten sich Anforderungen ändern
                oder Sie Fragen zu einzelnen Details haben, lassen Sie uns die
                Positionen gerne gemeinsam besprechen.
            </PDFText>
            <PDFView
                style={{
                    marginTop: 24,
                    padding: 16,
                    backgroundColor: COLORS.GRID,
                    borderLeftWidth: 2,
                    borderLeftColor: COLORS.DIVIDER,
                }}
            >
                <PDFText style={[styles.moduleLabel, { marginBottom: 8 }]}>
                    Haben Sie Fragen?
                </PDFText>
                <PDFText style={styles.moduleDesc}>
                    Ich erkläre Ihnen gerne noch einmal persönlich, was die technische
                    Umsetzung für Ihr Projekt bedeutet und wie wir die nächsten Schritte
                    gemeinsam gehen können.
                </PDFText>
                <PDFView style={{ marginTop: 16 }}>
                    <PDFText style={styles.moduleLabel}>Kontakt:</PDFText>
                    <PDFText
                        style={[
                            styles.moduleDesc,
                            { color: COLORS.CHARCOAL, fontWeight: "bold" },
                        ]}
                    >
                        Marc Mintel – marc@mintel.me
                    </PDFText>
                </PDFView>
            </PDFView>
        </PDFView>
    </>
);