// 🔸 MarketingAssetGenerator — Text-Only + Ingredient-Only + A5 PDF
import React, { useState, useEffect } from "react";
import { Copy, Sparkles, FileText, LayoutTemplate, Leaf, RefreshCw, Check, Printer, Download } from "lucide-react";
import jsPDF from "jspdf";
const MarketingAssetGenerator = () => {
const [brandData, setBrandData] = useState({
name: "HEALTHY QUENCH THAILAND",
product: "Herbal Wellness Tonic",
ingredients: "Fresh Ginger, Pickled Fresh Cucumber, Lemongrass, Galangal",
vibe: "luxury, clean, minimal, warm wellness",
colors: "warm golden, amber, and cream"
});
const [activeTab, setActiveTab] = useState("brochure");
const [copiedId, setCopiedId] = useState(null);
const [isDownloading, setIsDownloading] = useState(false);
// load html2canvas
useEffect(() => {
const script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
script.async = true;
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
// input handler
const handleInputChange = e => {
const { name, value } = e.target;
setBrandData(prev => ({ ...prev, [name]: value }));
};
// copy
const handleCopy = (text, id) => {
navigator.clipboard.writeText(text);
setCopiedId(id);
setTimeout(() => setCopiedId(null), 2000);
};
// download PNG
const handleDownload = async (elementId, fileName) => {
if (!window.html2canvas) return alert("โปรดรอสักครู่ แล้วลองใหม่");
setIsDownloading(true);
try {
const el = document.getElementById(elementId);
const canvas = await window.html2canvas(el, { scale: 2 });
const link = document.createElement("a");
link.download = `${fileName}.png`;
link.href = canvas.toDataURL("image/png");
link.click();
} finally {
setIsDownloading(false);
}
};
// export PDF A5
const exportPDF = async (elementId, fileName) => {
if (!window.html2canvas) return alert("โปรดรอสักครู่ แล้วลองใหม่");
const el = document.getElementById(elementId);
const canvas = await window.html2canvas(el, { scale: 2 });
const img = canvas.toDataURL("image/png");
const pdf = new jsPDF({ orientation: "portrait", unit: "mm", format: "a5" });
const pageW = 148;
const imgW = pageW;
const imgH = (canvas.height * imgW) / canvas.width;
const pageH = 210;
pdf.addImage(img, "PNG", 0, (pageH - imgH) / 2, imgW, imgH);
pdf.save(`${fileName}.pdf`);
};
// 🔹 Brand-Safe Prompts (Ingredient-Only + Text Layout)
const prompts = {
background:
`A5 text-only brochure layout, premium minimal style, thin gold border frame, white cream paper texture, elegant serif typography, large space for text, no images, no illustrations, no icons, print-ready --ar 2:3`,
botanical:
`scientific botanical illustration of fresh ginger, pickled cucumber, lemongrass and galangal, ingredients only, no fruit, no flowers, no bottle, no extra leaves, hand-drawn ink line style, clean white background, premium natural style --ar 1:1`
};
// marketing copy
const copy = {
body: `A herbal wellness tonic crafted with fresh natural ingredients. Pure recipe — no artificial coloring, no additives.`
};
return (
{/* header */}
{/* left — inputs */}
Brand Config
{/* right — preview & tabs */}
{/* TAB BUTTONS */}
{/* -------- BROCHURE PREVIEW -------- */}
{activeTab==="brochure" && (
{/* TH */}
{brandData.name}
ENERGIZE • CLEANSE • RESTORE
เครื่องดื่มสมุนไพรสูตรธรรมชาติ
สูตรบริสุทธิ์ ไม่ใส่วัตถุกันเสีย
ส่วนผสมหลัก
{brandData.ingredients}
ภูมิปัญญาสมุนไพรโบราณ สู่สุขภาพยุคใหม่
{/* EN */}
{brandData.name}
ENERGIZE • CLEANSE • RESTORE
{copy.body}
Main Ingredients
{brandData.ingredients}
Ancient herbal wisdom, crafted for modern wellness.
)}
{/* -------- PROMPTS TAB -------- */}
{activeTab==="prompts" && (
handleCopy(prompts.background,"bg")} isCopied={copiedId==="bg"} />
handleCopy(prompts.botanical,"bot")} isCopied={copiedId==="bot"} />
)}
);
};
const PromptCard = ({ title, prompt, onCopy, isCopied }) => (
{title}
{prompt}
);
export default MarketingAssetGenerator;