pdfn 0.1.0 → 0.2.0

package/templates/inline/invoice.tsx

@@ -0,0 +1,188 @@
+import { Document, Page, Thead, PageNumber, TotalPages } from "@pdfn/react";
+
+/**
+ * Professional Invoice template using inline styles
+ *
+ * Demonstrates:
+ * - Thead with repeat for multi-page tables
+ * - PageNumber and TotalPages in footer
+ * - Configurable tax rate
+ */
+
+interface InvoiceProps {
+  number?: string;
+  date?: string;
+  dueDate?: string;
+  customer?: {
+    name: string;
+    address: string;
+    city: string;
+  };
+  items?: Array<{
+    name: string;
+    description?: string;
+    qty: number;
+    price: number;
+  }>;
+  taxRate?: number;
+  notes?: string;
+  company?: {
+    name: string;
+    address: string;
+    email: string;
+    phone: string;
+  };
+}
+
+export default function Invoice({
+  number = "INV-2025-001",
+  date = "January 15, 2025",
+  dueDate = "February 14, 2025",
+  customer = {
+    name: "Acme Corporation",
+    address: "456 Enterprise Blvd, Suite 100",
+    city: "Austin, TX 78701",
+  },
+  items = [
+    { name: "Web Development", description: "Frontend development with React", qty: 40, price: 150 },
+    { name: "API Integration", description: "REST API setup and configuration", qty: 20, price: 175 },
+    { name: "UI/UX Design", description: "User interface design", qty: 15, price: 125 },
+  ],
+  taxRate = 0.1,
+  notes = "Payment is due within 30 days. Thank you for your business!",
+  company = {
+    name: "Your Company",
+    address: "123 Business St, San Francisco, CA 94102",
+    email: "hello@yourcompany.com",
+    phone: "+1 (555) 123-4567",
+  },
+}: InvoiceProps) {
+  const subtotal = items.reduce((sum, item) => sum + item.qty * item.price, 0);
+  const tax = subtotal * taxRate;
+  const total = subtotal + tax;
+
+  const formatCurrency = (amount: number) =>
+    "$" + amount.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+  return (
+    <Document title={`Invoice ${number}`}>
+      <Page
+        size="A4"
+        margin="1in"
+        footer={
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "10px", color: "#6b7280", borderTop: "1px solid #e5e7eb", paddingTop: "12px" }}>
+            <div>
+              {company.name} • {company.email} • {company.phone}
+            </div>
+            <div>
+              Page <PageNumber /> of <TotalPages />
+            </div>
+          </div>
+        }
+      >
+        {/* Header */}
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "32px" }}>
+          <div>
+            <div style={{ fontSize: "24px", fontWeight: "bold", color: "#111827" }}>{company.name}</div>
+            <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "4px" }}>{company.address}</div>
+          </div>
+          <div style={{ textAlign: "right" }}>
+            <div style={{ fontSize: "30px", fontWeight: "bold", color: "#111827", letterSpacing: "-0.025em" }}>INVOICE</div>
+            <div style={{ fontSize: "18px", fontWeight: "600", color: "#4b5563", marginTop: "4px" }}>{number}</div>
+          </div>
+        </div>
+
+        {/* Invoice Details & Bill To */}
+        <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "32px" }}>
+          <div>
+            <div style={{ fontSize: "10px", fontWeight: "600", color: "#6b7280", textTransform: "uppercase", marginBottom: "8px" }}>Bill To</div>
+            <div style={{ fontSize: "14px", fontWeight: "600", color: "#111827" }}>{customer.name}</div>
+            <div style={{ fontSize: "14px", color: "#4b5563", marginTop: "2px" }}>{customer.address}</div>
+            <div style={{ fontSize: "14px", color: "#4b5563" }}>{customer.city}</div>
+          </div>
+          <div style={{ textAlign: "right" }}>
+            <table style={{ marginLeft: "auto", fontSize: "14px" }}>
+              <tbody>
+                <tr>
+                  <td style={{ color: "#6b7280", paddingRight: "16px", paddingTop: "2px", paddingBottom: "2px" }}>Invoice Date:</td>
+                  <td style={{ color: "#111827", paddingTop: "2px", paddingBottom: "2px" }}>{date}</td>
+                </tr>
+                <tr>
+                  <td style={{ color: "#6b7280", paddingRight: "16px", paddingTop: "2px", paddingBottom: "2px" }}>Due Date:</td>
+                  <td style={{ color: "#111827", paddingTop: "2px", paddingBottom: "2px" }}>{dueDate}</td>
+                </tr>
+                <tr>
+                  <td style={{ color: "#6b7280", paddingRight: "16px", paddingTop: "6px", paddingBottom: "6px", fontWeight: "600" }}>Amount Due:</td>
+                  <td style={{ color: "#111827", paddingTop: "6px", paddingBottom: "6px", fontWeight: "bold", fontSize: "18px" }}>{formatCurrency(total)}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Items Table */}
+        <table style={{ width: "100%", marginBottom: "24px", borderCollapse: "collapse" }}>
+          <Thead repeat>
+            <tr style={{ backgroundColor: "#1f2937", color: "white" }}>
+              <th style={{ textAlign: "left", padding: "12px 16px", fontSize: "10px", fontWeight: "600", textTransform: "uppercase" }}>Description</th>
+              <th style={{ textAlign: "center", padding: "12px 16px", fontSize: "10px", fontWeight: "600", textTransform: "uppercase", width: "64px" }}>Qty</th>
+              <th style={{ textAlign: "right", padding: "12px 16px", fontSize: "10px", fontWeight: "600", textTransform: "uppercase", width: "96px" }}>Rate</th>
+              <th style={{ textAlign: "right", padding: "12px 16px", fontSize: "10px", fontWeight: "600", textTransform: "uppercase", width: "112px" }}>Amount</th>
+            </tr>
+          </Thead>
+          <tbody>
+            {items.map((item, i) => (
+              <tr key={i} style={{ backgroundColor: i % 2 === 0 ? "white" : "#f9fafb" }}>
+                <td style={{ padding: "12px 16px", borderBottom: "1px solid #f3f4f6" }}>
+                  <div style={{ fontWeight: "500", color: "#111827", fontSize: "14px" }}>{item.name}</div>
+                  {item.description && (
+                    <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "2px" }}>{item.description}</div>
+                  )}
+                </td>
+                <td style={{ textAlign: "center", padding: "12px 16px", color: "#374151", fontSize: "14px", borderBottom: "1px solid #f3f4f6" }}>
+                  {item.qty}
+                </td>
+                <td style={{ textAlign: "right", padding: "12px 16px", color: "#374151", fontSize: "14px", borderBottom: "1px solid #f3f4f6" }}>
+                  {formatCurrency(item.price)}
+                </td>
+                <td style={{ textAlign: "right", padding: "12px 16px", fontWeight: "500", color: "#111827", fontSize: "14px", borderBottom: "1px solid #f3f4f6" }}>
+                  {formatCurrency(item.qty * item.price)}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {/* Totals */}
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "32px" }}>
+          <table style={{ width: "256px", fontSize: "14px" }}>
+            <tbody>
+              <tr>
+                <td style={{ padding: "8px 0", color: "#4b5563" }}>Subtotal</td>
+                <td style={{ padding: "8px 0", textAlign: "right", color: "#111827" }}>{formatCurrency(subtotal)}</td>
+              </tr>
+              <tr>
+                <td style={{ padding: "8px 0", color: "#4b5563" }}>Tax ({(taxRate * 100).toFixed(0)}%)</td>
+                <td style={{ padding: "8px 0", textAlign: "right", color: "#111827" }}>{formatCurrency(tax)}</td>
+              </tr>
+              <tr style={{ borderTop: "2px solid #1f2937" }}>
+                <td style={{ paddingTop: "12px", paddingBottom: "8px", fontWeight: "bold", color: "#111827", fontSize: "16px" }}>Total Due</td>
+                <td style={{ paddingTop: "12px", paddingBottom: "8px", textAlign: "right", fontWeight: "bold", color: "#111827", fontSize: "18px" }}>
+                  {formatCurrency(total)}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        {/* Notes */}
+        {notes && (
+          <div style={{ backgroundColor: "#f9fafb", padding: "16px", borderRadius: "8px" }}>
+            <div style={{ fontSize: "10px", fontWeight: "600", color: "#374151", textTransform: "uppercase", marginBottom: "4px" }}>Notes</div>
+            <div style={{ fontSize: "14px", color: "#4b5563" }}>{notes}</div>
+          </div>
+        )}
+      </Page>
+    </Document>
+  );
+}

package/templates/inline/letter.tsx

@@ -0,0 +1,129 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Business Letter template - US Letter size (inline styles)
+ *
+ * Demonstrates:
+ * - Professional letterhead
+ * - Proper business letter format
+ * - Single page layout
+ */
+
+interface LetterProps {
+  sender?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+    email: string;
+    phone: string;
+  };
+  recipient?: {
+    name: string;
+    title?: string;
+    company: string;
+    address: string;
+    city: string;
+  };
+  date?: string;
+  subject?: string;
+  body?: string[];
+  closing?: string;
+  signature?: string;
+}
+
+export default function Letter({
+  sender = {
+    name: "Alex Chen",
+    title: "Head of Partnerships",
+    company: "Your Company",
+    address: "123 Business St, Suite 100",
+    city: "San Francisco, CA 94102",
+    email: "alex@yourcompany.com",
+    phone: "+1 (555) 123-4567",
+  },
+  recipient = {
+    name: "Sarah Johnson",
+    title: "Chief Technology Officer",
+    company: "Acme Corporation",
+    address: "456 Enterprise Blvd, Suite 100",
+    city: "Austin, TX 78701",
+  },
+  date = "January 15, 2025",
+  subject = "Partnership Proposal",
+  body = [
+    "I hope this letter finds you well. Following our conversation last month, I wanted to formally present our partnership proposal for your consideration.",
+    "Our solution has helped over 500 companies streamline their workflows, reducing development time by an average of 60%. We believe our platform would be an excellent fit for your needs.",
+    "I would welcome the opportunity to schedule a technical demo with your team. Please let me know if you would be available for a call next week.",
+  ],
+  closing = "Best regards",
+  signature = "Alex Chen",
+}: LetterProps) {
+  return (
+    <Document title={`Letter - ${subject}`}>
+      <Page size="Letter" margin="1in">
+        {/* Letterhead */}
+        <div style={{ marginBottom: "24px", paddingBottom: "12px", borderBottom: "2px solid #1f2937" }}>
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
+            <div>
+              <div style={{ fontSize: "20px", fontWeight: "bold", color: "#111827" }}>{sender.company}</div>
+              <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "4px" }}>
+                {sender.address} • {sender.city}
+              </div>
+            </div>
+            <div style={{ textAlign: "right", fontSize: "10px", color: "#6b7280" }}>
+              <div>{sender.email}</div>
+              <div>{sender.phone}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Date */}
+        <div style={{ fontSize: "14px", color: "#374151", marginBottom: "24px" }}>{date}</div>
+
+        {/* Recipient Info */}
+        <div style={{ marginBottom: "24px" }}>
+          <div style={{ fontSize: "14px", fontWeight: "600", color: "#111827" }}>{recipient.name}</div>
+          {recipient.title && (
+            <div style={{ fontSize: "14px", color: "#4b5563" }}>{recipient.title}</div>
+          )}
+          <div style={{ fontSize: "14px", color: "#4b5563" }}>{recipient.company}</div>
+          <div style={{ fontSize: "14px", color: "#6b7280" }}>
+            {recipient.address}, {recipient.city}
+          </div>
+        </div>
+
+        {/* Subject Line */}
+        <div style={{ marginBottom: "16px", padding: "6px 0 6px 12px", borderLeft: "4px solid #1f2937", backgroundColor: "#f9fafb" }}>
+          <span style={{ fontSize: "14px", fontWeight: "bold", color: "#111827", textTransform: "uppercase", letterSpacing: "0.05em" }}>Re: </span>
+          <span style={{ fontSize: "14px", fontWeight: "500", color: "#1f2937" }}>{subject}</span>
+        </div>
+
+        {/* Salutation */}
+        <div style={{ fontSize: "14px", color: "#111827", marginBottom: "12px" }}>Dear {recipient.name},</div>
+
+        {/* Body */}
+        <div style={{ marginBottom: "24px" }}>
+          {body.map((paragraph, i) => (
+            <p key={i} style={{ fontSize: "14px", color: "#374151", lineHeight: "1.625", marginBottom: "12px" }}>
+              {paragraph}
+            </p>
+          ))}
+        </div>
+
+        {/* Closing & Signature */}
+        <div style={{ marginTop: "24px" }}>
+          <div style={{ fontSize: "14px", color: "#111827", marginBottom: "24px" }}>{closing},</div>
+          <div style={{ borderBottom: "1px solid #d1d5db", width: "160px", marginBottom: "4px" }}></div>
+          <div style={{ fontSize: "14px", fontWeight: "bold", color: "#111827" }}>{signature}</div>
+          {sender.title && (
+            <div style={{ fontSize: "10px", color: "#4b5563" }}>
+              {sender.title}, {sender.company}
+            </div>
+          )}
+        </div>
+      </Page>
+    </Document>
+  );
+}

package/templates/inline/poster.tsx

@@ -0,0 +1,128 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Event Poster template - Tabloid size, Landscape (inline styles)
+ *
+ * Demonstrates:
+ * - Large format (Tabloid: 17" x 11")
+ * - Landscape orientation
+ * - Full-bleed design (margin: 0)
+ * - Bold typography and visual hierarchy
+ */
+
+interface PosterProps {
+  headline?: string;
+  year?: string;
+  subheadline?: string;
+  date?: string;
+  venue?: string;
+  highlights?: string[];
+  cta?: string;
+  website?: string;
+}
+
+export default function Poster({
+  headline = "Tech Conference",
+  year = "2025",
+  subheadline = "Innovation Meets Inspiration",
+  date = "March 15-17, 2025",
+  venue = "Convention Center, San Francisco",
+  highlights = ["50+ Speakers", "Workshops", "Networking"],
+  cta = "Get Tickets",
+  website = "techconf2025.com",
+}: PosterProps) {
+  // Tabloid landscape dimensions
+  const pageHeight = "792pt"; // 11 inches
+
+  return (
+    <Document title={`Poster - ${headline}`}>
+      <Page size="Tabloid" orientation="landscape" margin="0">
+        {/* Full bleed dark background */}
+        <div
+          style={{
+            backgroundColor: "#111827",
+            color: "white",
+            padding: "48px",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: pageHeight,
+            height: pageHeight,
+          }}
+        >
+          {/* Top Section: Logo and Accent */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "16px" }}>
+            <div style={{ fontSize: "24px", fontWeight: "900", color: "white" }}>PDFN</div>
+            <div style={{ display: "flex", gap: "8px" }}>
+              <div style={{ height: "6px", width: "128px", backgroundColor: "#06b6d4", borderRadius: "9999px" }}></div>
+              <div style={{ height: "6px", width: "64px", backgroundColor: "rgba(6, 182, 212, 0.5)", borderRadius: "9999px" }}></div>
+              <div style={{ height: "6px", width: "32px", backgroundColor: "rgba(6, 182, 212, 0.25)", borderRadius: "9999px" }}></div>
+            </div>
+          </div>
+
+          {/* Main Content - Vertically Centered */}
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+            {/* Headline */}
+            <h1 style={{ fontSize: "96px", fontWeight: "900", letterSpacing: "-0.025em", lineHeight: 1, marginBottom: "24px", margin: 0 }}>
+              {headline}
+              {year && <span style={{ color: "#22d3ee" }}> {year}</span>}
+            </h1>
+
+            {subheadline && (
+              <p style={{ fontSize: "30px", color: "#9ca3af", fontWeight: "300", maxWidth: "768px", marginBottom: "48px", marginTop: "24px" }}>
+                {subheadline}
+              </p>
+            )}
+
+            {/* Event Details */}
+            <div style={{ display: "flex", gap: "80px" }}>
+              <div>
+                <div style={{ fontSize: "14px", color: "#06b6d4", textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: "bold", marginBottom: "8px" }}>
+                  Date
+                </div>
+                <div style={{ fontSize: "36px", fontWeight: "bold" }}>{date}</div>
+              </div>
+              <div>
+                <div style={{ fontSize: "14px", color: "#06b6d4", textTransform: "uppercase", letterSpacing: "0.2em", fontWeight: "bold", marginBottom: "8px" }}>
+                  Venue
+                </div>
+                <div style={{ fontSize: "36px", fontWeight: "bold" }}>{venue}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Section */}
+          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between" }}>
+            {/* Highlights/Tags */}
+            <div style={{ display: "flex", gap: "16px" }}>
+              {highlights.map((highlight, i) => (
+                <div
+                  key={i}
+                  style={{ border: "2px solid #4b5563", color: "white", padding: "12px 24px", borderRadius: "9999px", fontSize: "16px", fontWeight: "600" }}
+                >
+                  {highlight}
+                </div>
+              ))}
+            </div>
+
+            {/* CTA */}
+            <div style={{ textAlign: "right" }}>
+              <div style={{ display: "inline-block", backgroundColor: "#06b6d4", color: "#111827", fontSize: "24px", fontWeight: "900", padding: "20px 40px", borderRadius: "12px" }}>
+                {cta}
+              </div>
+              <div style={{ fontSize: "16px", color: "#6b7280", marginTop: "16px", fontFamily: "monospace", letterSpacing: "0.05em" }}>
+                {website}
+              </div>
+            </div>
+          </div>
+
+          {/* Bottom Accent */}
+          <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "32px" }}>
+            <div style={{ height: "6px", width: "32px", backgroundColor: "rgba(6, 182, 212, 0.25)", borderRadius: "9999px" }}></div>
+            <div style={{ height: "6px", width: "64px", backgroundColor: "rgba(6, 182, 212, 0.5)", borderRadius: "9999px" }}></div>
+            <div style={{ height: "6px", width: "128px", backgroundColor: "#06b6d4", borderRadius: "9999px" }}></div>
+          </div>
+        </div>
+      </Page>
+    </Document>
+  );
+}

package/templates/inline/ticket.tsx

@@ -0,0 +1,138 @@
+import { Document, Page } from "@pdfn/react";
+
+/**
+ * Event Ticket template - A5 size (inline styles)
+ *
+ * Demonstrates:
+ * - Compact page size (A5: 148mm x 210mm)
+ * - Creative visual design with banner
+ * - QR code placeholder
+ */
+
+interface TicketProps {
+  event?: string;
+  year?: string;
+  tagline?: string;
+  date?: string;
+  time?: string;
+  venue?: string;
+  venueAddress?: string;
+  attendee?: string;
+  ticketType?: string;
+  ticketNumber?: string;
+  price?: string;
+}
+
+export default function Ticket({
+  event = "Tech Conference",
+  year = "2025",
+  tagline = "Innovation Meets Inspiration",
+  date = "March 15, 2025",
+  time = "9:00 AM - 6:00 PM",
+  venue = "Convention Center",
+  venueAddress = "123 Main St, San Francisco, CA",
+  attendee = "John Smith",
+  ticketType = "VIP Access",
+  ticketNumber = "TC25-VIP-001234",
+  price = "$599.00",
+}: TicketProps) {
+  return (
+    <Document title={`Ticket - ${event}`}>
+      <Page size="A5" margin="0">
+        {/* Header Banner */}
+        <div style={{ backgroundColor: "#111827", padding: "28px 24px", textAlign: "center" }}>
+          <div style={{ fontSize: "30px", fontWeight: "900", color: "white", letterSpacing: "0.05em" }}>
+            {event}
+            {year && <span style={{ color: "#22d3ee" }}> {year}</span>}
+          </div>
+          {tagline && (
+            <div style={{ fontSize: "14px", color: "#22d3ee", marginTop: "8px", fontWeight: "500", textTransform: "uppercase", letterSpacing: "0.2em" }}>
+              {tagline}
+            </div>
+          )}
+        </div>
+
+        {/* Ticket Content */}
+        <div style={{ padding: "20px 24px" }}>
+          {/* Ticket Type Badge */}
+          <div style={{ display: "flex", justifyContent: "center", marginTop: "-40px", marginBottom: "20px" }}>
+            <div style={{ backgroundColor: "#06b6d4", color: "#111827", fontSize: "10px", fontWeight: "bold", textTransform: "uppercase", padding: "8px 20px", borderRadius: "9999px", letterSpacing: "0.2em" }}>
+              {ticketType}
+            </div>
+          </div>
+
+          {/* Event Details Grid */}
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginBottom: "20px" }}>
+            <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center" }}>
+              <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+                Date
+              </div>
+              <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{date}</div>
+            </div>
+            <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center" }}>
+              <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+                Time
+              </div>
+              <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{time}</div>
+            </div>
+          </div>
+
+          {/* Venue */}
+          <div style={{ backgroundColor: "#f9fafb", borderRadius: "8px", padding: "14px", textAlign: "center", marginBottom: "20px" }}>
+            <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500" }}>
+              Venue
+            </div>
+            <div style={{ fontSize: "16px", fontWeight: "bold", color: "#111827", marginTop: "4px" }}>{venue}</div>
+            <div style={{ fontSize: "10px", color: "#6b7280", marginTop: "4px" }}>{venueAddress}</div>
+          </div>
+
+          {/* Tear Line */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px", margin: "20px 0" }}>
+            <div style={{ flex: 1, borderTop: "2px dashed #d1d5db" }}></div>
+            <div style={{ fontSize: "14px", color: "#9ca3af" }}>✂</div>
+            <div style={{ flex: 1, borderTop: "2px dashed #d1d5db" }}></div>
+          </div>
+
+          {/* Attendee Section */}
+          <div style={{ textAlign: "center", marginBottom: "20px" }}>
+            <div style={{ fontSize: "10px", color: "#6b7280", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: "500", marginBottom: "4px" }}>
+              Admit One
+            </div>
+            <div style={{ fontSize: "36px", fontWeight: "900", color: "#111827" }}>{attendee}</div>
+          </div>
+
+          {/* QR Code Area */}
+          <div style={{ display: "flex", justifyContent: "center", marginBottom: "20px" }}>
+            <div style={{ width: "144px", height: "144px", backgroundColor: "white", border: "2px solid #111827", borderRadius: "12px", padding: "8px", display: "flex", alignItems: "center", justifyContent: "center" }}>
+              {/* Simulated QR pattern */}
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "4px", width: "100%", height: "100%" }}>
+                {[...Array(25)].map((_, i) => (
+                  <div
+                    key={i}
+                    style={{
+                      borderRadius: "2px",
+                      backgroundColor: [0, 1, 2, 4, 5, 6, 10, 12, 14, 18, 19, 20, 22, 23, 24].includes(i)
+                        ? "#111827"
+                        : "#f3f4f6"
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "14px", borderTop: "2px solid #111827", paddingTop: "12px" }}>
+            <div style={{ fontFamily: "monospace", fontSize: "10px", color: "#4b5563" }}>{ticketNumber}</div>
+            <div style={{ fontWeight: "bold", fontSize: "18px", color: "#111827" }}>{price}</div>
+          </div>
+
+          {/* Terms */}
+          <p style={{ textAlign: "center", fontSize: "10px", color: "#9ca3af", marginTop: "12px" }}>
+            Non-transferable • Non-refundable • Present at entry
+          </p>
+        </div>
+      </Page>
+    </Document>
+  );
+}