diff --git a/src/components/Report/ReportPreview.tsx b/src/components/Report/ReportPreview.tsx
new file mode 100644
index 0000000..605dbbe
--- /dev/null
+++ b/src/components/Report/ReportPreview.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import type { ReportConfig } from './reportHelpers';
+import { formatPeriodLabel, estimatePageCount } from './reportHelpers';
+
+interface Props { config: ReportConfig; }
+
+export default function ReportPreview({ config: cfg }: Props) {
+  const color = cfg.accentColor;
+  const period = formatPeriodLabel(cfg.startDate, cfg.endDate, cfg.language);
+  const pages = estimatePageCount(cfg);
+
+  return (
+    <div className="report-preview">
+      <div className="report-preview-label">Preview · ~{pages} pages</div>
+
+      {/* Cover page mockup */}
+      <div className="rp-page">
+        <div className="rp-cover-top">
+          <span className="rp-brand">HiHala Data</span>
+          {cfg.clientLogoBase64 && (
+            <img src={cfg.clientLogoBase64} alt="Client logo" className="rp-client-logo" />
+          )}
+        </div>
+        <div className="rp-cover-body">
+          <div className="rp-cover-title">
+            {cfg.title || <span className="rp-placeholder-text">Report Title</span>}
+          </div>
+          {cfg.clientName && (
+            <div className="rp-cover-for">Prepared for: <strong>{cfg.clientName}</strong></div>
+          )}
+          {cfg.contactName && (
+            <div className="rp-cover-contact">Attention: {cfg.contactName}</div>
+          )}
+          <div className="rp-cover-period">{period}</div>
+        </div>
+        <div className="rp-cover-bar" style={{ backgroundColor: color }} />
+      </div>
+
+      {/* Content page mockup */}
+      <div className="rp-page rp-page--content">
+        <div className="rp-page-header">
+          <span className="rp-brand-small" style={{ color }}>HiHala Data</span>
+          <span className="rp-page-title-small">{cfg.title || 'Report'}</span>
+          <span className="rp-page-num">2</span>
+        </div>
+
+        {cfg.showExecutiveSummary && (
+          <div className="rp-section">
+            <div className="rp-section-heading" style={{ backgroundColor: color }}>Executive Summary</div>
+            <div className="rp-placeholder-lines">
+              <div className="rp-ph-line" style={{ width: '100%' }} />
+              <div className="rp-ph-line" style={{ width: '90%' }} />
+              <div className="rp-ph-line" style={{ width: '80%' }} />
+            </div>
+          </div>
+        )}
+
+        {cfg.showMetricsTable && (
+          <div className="rp-section">
+            <div className="rp-section-heading" style={{ backgroundColor: color }}>Key Metrics</div>
+            <div className="rp-ph-table">
+              {['Revenue', 'Visitors', 'Tickets', 'Avg Rev'].map(r => (
+                <div key={r} className="rp-ph-row">
+                  <span className="rp-ph-row-label">{r}</span>
+                  <div className="rp-ph-row-val" />
+                  {cfg.includeComparison && <div className="rp-ph-row-val rp-ph-row-val--sm" />}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {cfg.showTrendChart && (
+          <div className="rp-section">
+            <div className="rp-section-heading" style={{ backgroundColor: color }}>Trend</div>
+            <div className="rp-ph-chart" />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}