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

export interface FollowUpTemplateProps {
    companyName: string;
}

export const FollowUpTemplate = ({
    companyName,
}: FollowUpTemplateProps) => {
    const preview = `Kurzes Follow-up: ${companyName}`;

    return (
        <MintelLayout preview={preview}>
            <Heading style={h1}>Kurzes Follow-up</Heading>
            <Text style={intro}>
                Hallo noch einmal,<br /><br />
                ich wollte mich nur kurz erkundigen, ob Sie bereits Zeit hatten,
                einen Blick auf das Audit Ihrer Website zu werfen, das ich Ihnen
                vor ein paar Tagen gesendet habe.
            </Text>

            <Text style={bodyText}>
                Vielleicht passt es ja diese Woche für ein kurzes, unverbindliches
                Telefonat, um die Punkte gemeinsam durchzugehen?
            </Text>

            <Button
                style={button}
                href="https://calendly.com/mintel-me/intro"
            >
                Treffen vereinbaren
            </Button>

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

export default FollowUpTemplate;

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 bodyText = {
    fontSize: "16px",
    lineHeight: "24px",
    color: "#888888",
    margin: "0 0 32px",
};

const button = {
    backgroundColor: "#333333",
    borderRadius: "0",
    color: "#ffffff",
    fontSize: "13px",
    fontWeight: "bold",
    textDecoration: "none",
    textAlign: "center" as const,
    display: "inline-block",
    padding: "12px 24px",
    textTransform: "uppercase" as const,
    letterSpacing: "0.1em",
    border: "1px solid #444444",
};

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