klz-cables.com/lib/pdf-business-card.tsx

import React from 'react';
import { Document, Page, Text, View, StyleSheet, Svg, Line, Image } from '@react-pdf/renderer';
import { KLZLogoVector } from './KLZLogoVector';

export interface PersonData {
  name: string;
  role: string;
  phone: string;
  email: string;
}

interface PDFBusinessCardProps {
  person: PersonData;
  qrCodeDataUrl: string;
}

// Mintel Aesthetics Colors
const COLORS = {
  navy: '#001a4d',
  navyLight: '#002870',
  green: '#82ed20',
  white: '#ffffff',
  grayText: '#8899aa',
  darkText: '#000000',
  lightGray: '#f0f0f0',
};

const styles = StyleSheet.create({
  pageBleed: {
    // 85x55mm + 3mm bleed on each side = 91x61mm
    width: '91mm',
    height: '61mm',
    backgroundColor: COLORS.navy,
    position: 'relative',
    fontFamily: 'Helvetica',
    overflow: 'hidden',
  },
  pageBleedBack: {
    width: '91mm',
    height: '61mm',
    backgroundColor: COLORS.white,
    position: 'relative',
    fontFamily: 'Helvetica',
    overflow: 'hidden',
  },

  // -- FRONT --
  frontContainer: {
    flex: 1,
    position: 'relative',
    padding: '8mm',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  frontLogoPos: {
    position: 'absolute',
    top: '8mm',
    right: '8mm',
  },
  frontGraphicContainer: {
    position: 'absolute',
    bottom: '-3mm',
    left: '-3mm',
    right: '-3mm',
    height: '30mm',
    backgroundColor: COLORS.navyLight,
    borderTopWidth: 2,
    borderTopColor: COLORS.green,
  },
  frontTagline: {
    position: 'absolute',
    bottom: '8mm',
    left: '8mm',
    color: COLORS.green,
    fontSize: 10,
    fontWeight: 'bold',
    letterSpacing: 1.5,
  },
  gridLine: {
    position: 'absolute',
    backgroundColor: 'rgba(255,255,255,0.05)',
  },

  // -- BACK --
  backContainer: {
    flex: 1,
    position: 'relative',
    padding: '6mm 6mm',
  },
  backLogo: {
    marginBottom: '6mm',
  },
  backMiddle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '8mm',
    width: '100%',
  },
  nameSection: {
    flexDirection: 'column',
    width: '35%',
  },
  nameText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: COLORS.navy,
    marginBottom: 2,
  },
  roleText: {
    fontSize: 7.5,
    fontWeight: 'normal',
    color: COLORS.grayText,
    letterSpacing: 0.5,
  },
  contactSection: {
    flexDirection: 'column',
    width: '45%',
    paddingLeft: '2mm',
    borderLeftWidth: 1,
    borderLeftColor: COLORS.lightGray,
  },
  contactRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  iconCircle: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: COLORS.green,
    marginRight: 5,
  },
  contactText: {
    fontSize: 6.5,
    color: COLORS.navy,
  },
  qrSection: {
    width: '20%',
    alignItems: 'flex-end',
  },
  qrCodeWrapper: {
    width: '16mm',
    height: '16mm',
    padding: 2,
    backgroundColor: COLORS.white,
    borderWidth: 1,
    borderColor: COLORS.lightGray,
  },
  qrCode: {
    width: '100%',
    height: '100%',
  },
  footer: {
    position: 'absolute',
    bottom: '5mm',
    left: '6mm',
    right: '6mm',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    borderTopWidth: 1,
    borderTopColor: COLORS.lightGray,
    paddingTop: '2mm',
  },
  footerText: {
    fontSize: 6,
    color: COLORS.grayText,
    letterSpacing: 0.5,
  },
  pipe: {
    fontSize: 6,
    color: COLORS.green,
    marginHorizontal: 4,
    fontWeight: 'bold',
  },
  greenBar: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '3mm',
    height: '61mm',
    backgroundColor: COLORS.green,
  },
});

// A simple technical grid background for the industrial aesthetic
const IndustrialGrid = () => (
  <Svg
    viewBox="0 0 910 610"
    style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, opacity: 0.1 }}
  >
    {Array.from({ length: 10 }).map((_, i) => (
      <Line
        key={`h-${i}`}
        x1="0"
        y1={i * 61}
        x2="910"
        y2={i * 61}
        stroke={COLORS.white}
        strokeWidth={1}
      />
    ))}
    {Array.from({ length: 15 }).map((_, i) => (
      <Line
        key={`v-${i}`}
        x1={i * 61}
        y1="0"
        x2={i * 61}
        y2="610"
        stroke={COLORS.white}
        strokeWidth={1}
      />
    ))}
  </Svg>
);

export const PDFBusinessCard: React.FC<PDFBusinessCardProps> = ({ person, qrCodeDataUrl }) => {
  return (
    <Document
      title={`Business Card - ${person.name}`}
      author="KLZ Cables"
      creator="KLZ React-PDF Engine"
    >
      {/* FRONT - Dark Navy Industrial */}
      <Page size={[258, 173]} style={styles.pageBleed}>
        <IndustrialGrid />

        <View style={styles.frontLogoPos}>
          <KLZLogoVector width={100} color={COLORS.white} />
        </View>

        <View style={styles.frontGraphicContainer}>
          <IndustrialGrid />
        </View>

        <Text style={styles.frontTagline}>INDUSTRIAL CABLE SOLUTIONS</Text>
      </Page>

      {/* BACK - Clean White with Green Accents */}
      <Page size={[258, 173]} style={styles.pageBleedBack}>
        <View style={styles.greenBar} />

        <View style={styles.backContainer}>
          <View style={styles.backLogo}>
            <KLZLogoVector width={80} color={COLORS.navy} />
          </View>

          <View style={styles.backMiddle}>
            <View style={styles.nameSection}>
              <Text style={styles.nameText}>{person.name}</Text>
              <Text style={styles.roleText}>{person.role.toUpperCase()}</Text>
            </View>

            <View style={styles.contactSection}>
              <View style={styles.contactRow}>
                <View style={styles.iconCircle} />
                <Text style={styles.contactText}>{person.phone}</Text>
              </View>
              <View style={styles.contactRow}>
                <View style={styles.iconCircle} />
                <Text style={styles.contactText}>{person.email}</Text>
              </View>
              <View style={styles.contactRow}>
                <View style={styles.iconCircle} />
                <Text style={styles.contactText}>klz-cables.com</Text>
              </View>
            </View>

            <View style={styles.qrSection}>
              <View style={styles.qrCodeWrapper}>
                <Image src={qrCodeDataUrl} style={styles.qrCode} />
              </View>
            </View>
          </View>

          <View style={styles.footer}>
            <Text style={styles.footerText}>KLZ Vertriebs GmbH</Text>
            <Text style={styles.pipe}>|</Text>
            <Text style={styles.footerText}>Raiffeisenstraße 22</Text>
            <Text style={styles.pipe}>|</Text>
            <Text style={styles.footerText}>73630 Remshalden</Text>
          </View>
        </View>
      </Page>
    </Document>
  );
};