import * as React from "react";
import { Heading, Text, Section } from "@react-email/components";
import { MintelLayout } from "../layouts/MintelLayout";

export interface ProjectEstimateTemplateProps {
    companyName: string;
}

export const ProjectEstimateTemplate = ({
    companyName,
}: ProjectEstimateTemplateProps) => {
    const preview = `Ihre personalisierte Projekt-Schätzung: ${companyName}`;

    return (
        <MintelLayout preview={preview}>
            <Heading style={h1}>Ihre Projekt-Schätzung</Heading>
            <Text style={intro}>
                Hallo {companyName},<br /><br />
                vielen Dank für unser Gespräch. Wie versprochen sende ich Ihnen hiermit
                die detaillierte Schätzung für Ihre neue digitale Webpräsenz.
            </Text>

            <Section style={infoBox}>
                <Text style={infoText}>
                    Im Anhang finden Sie das PDF-Dokument mit allen Positionen,
                    Umfängen und dem strategischen Ausblick.
                </Text>
            </Section>

            <Text style={bodyText}>
                Ich freue mich auf Ihr Feedback und stehe für Rückfragen jederzeit
                zur Verfügung.
            </Text>

            <Text style={footerText}>
                Beste Grüße,<br />
                <strong>Marc Mintel</strong>
            </Text>
        </MintelLayout>
    );
};

export default ProjectEstimateTemplate;

const h1 = {
    fontSize: "28px",
    fontWeight: "900",
    margin: "0 0 24px",
    color: "#ffffff",
    letterSpacing: "-0.04em",
};

const intro = {
    fontSize: "16px",
    lineHeight: "24px",
    color: "#cccccc",
    margin: "0 0 24px",
};

const infoBox = {
    backgroundColor: "#0f172a",
    padding: "24px",
    borderLeft: "4px solid #ffffff",
    marginBottom: "32px",
};

const infoText = {
    fontSize: "15px",
    color: "#ffffff",
    margin: "0",
    lineHeight: "1.5",
};

const bodyText = {
    fontSize: "16px",
    lineHeight: "24px",
    color: "#888888",
    margin: "0 0 32px",
};

const footerText = {
    fontSize: "14px",
    color: "#666666",
    lineHeight: "20px",
    marginTop: "48px",
};
