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

export interface SiteAuditTemplateProps {
    companyName: string;
    auditHighlights: string[];
    websiteUrl: string;
}

export const SiteAuditTemplate = ({
    companyName,
    auditHighlights,
    websiteUrl,
}: SiteAuditTemplateProps) => {
    const preview = `Analyse Ihrer Webpräsenz: ${companyName}`;

    return (
        <MintelLayout preview={preview}>
            <Heading style={h1}>Analyse Ihrer Webpräsenz</Heading>
            <Text style={intro}>
                Hallo {companyName},<br /><br />
                ich habe mir Ihre aktuelle Website ({websiteUrl}) im Detail angeschaut und
                einige technische sowie strategische Potenziale identifiziert.
            </Text>

            <Section style={auditContainer}>
                <Heading as="h2" style={h2}>Audit Highlights</Heading>
                {auditHighlights.map((highlight, i) => (
                    <div key={i} style={highlightRow}>
                        <div style={bullet} />
                        <Text style={highlightText}>{highlight}</Text>
                    </div>
                ))}
            </Section>

            <Text style={bodyText}>
                In der heutigen digitalen Landschaft ist eine performante und strategisch
                ausgerichtete Website kein Luxus mehr, sondern das Fundament für
                nachhaltiges Wachstum.
            </Text>

            <Section style={ctaSection}>
                <Button
                    style={button}
                    href={`mailto:marc@mintel.me?subject=Feedback zum Audit: ${companyName}`}
                >
                    Audit gemeinsam besprechen
                </Button>
            </Section>

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

export default SiteAuditTemplate;

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

const h2 = {
    fontSize: "14px",
    fontWeight: "900",
    textTransform: "uppercase" as const,
    color: "#444444",
    margin: "0 0 16px",
    letterSpacing: "0.1em",
};

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

const auditContainer = {
    backgroundColor: "#151515",
    padding: "32px",
    borderRadius: "8px",
    marginBottom: "32px",
    border: "1px solid #222222",
};

const highlightRow = {
    display: "flex" as const,
    alignItems: "flex-start" as const,
    marginBottom: "12px",
};

const bullet = {
    width: "6px",
    height: "6px",
    backgroundColor: "#4CAF50",
    marginTop: "8px",
    marginRight: "12px",
    flexShrink: 0,
};

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

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

const ctaSection = {
    textAlign: "center" as const,
    marginBottom: "48px",
};

const button = {
    backgroundColor: "#ffffff",
    borderRadius: "0",
    color: "#000000",
    fontSize: "14px",
    fontWeight: "bold",
    textDecoration: "none",
    textAlign: "center" as const,
    display: "inline-block",
    padding: "16px 32px",
    textTransform: "uppercase" as const,
    letterSpacing: "0.1em",
};

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