import { useState, useEffect, useRef, useCallback } from "react";
// ─── Botanical SVG Ornaments ───────────────────────────────────────────────
const Leaf = ({ style }) => (
);
const FloralCorner = ({ flip, style }) => (
);
const Divider = ({ color = "#c9a84c" }) => (
);
// ─── Countdown Hook ────────────────────────────────────────────────────────
function useCountdown(targetDate) {
const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
useEffect(() => {
const calc = () => {
const diff = new Date(targetDate) - new Date();
if (diff <= 0) { setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); return; }
setTimeLeft({
days: Math.floor(diff / 86400000),
hours: Math.floor((diff % 86400000) / 3600000),
minutes: Math.floor((diff % 3600000) / 60000),
seconds: Math.floor((diff % 60000) / 1000),
});
};
calc();
const id = setInterval(calc, 1000);
return () => clearInterval(id);
}, [targetDate]);
return timeLeft;
}
// ─── Default Data ──────────────────────────────────────────────────────────
const DEFAULT_DATA = {
groomName: "Rizky Pratama",
brideName: "Salsabila Putri",
groomFull: "Rizky Pratama, S.T.",
brideFull: "Salsabila Putri Maharani, S.Psi.",
groomParents: "Putra dari Bapak H. Ahmad Fauzi & Ibu Hj. Siti Rahayu",
brideParents: "Putri dari Bapak Drs. Budi Santoso & Ibu Dra. Dewi Lestari",
weddingDate: "2025-09-13",
weddingDateDisplay: "Sabtu, 13 September 2025",
openingQuote: "Dan di antara tanda-tanda kekuasaan-Nya ialah Dia menciptakan untukmu pasangan hidup dari jenismu sendiri, supaya kamu cenderung dan merasa tenteram kepadanya.",
openingQuoteSource: "Q.S. Ar-Rum: 21",
openingText: "Dengan memohon rahmat dan ridho Allah SWT, kami mengundang Bapak/Ibu/Saudara/i untuk hadir dan memberikan doa restu dalam pernikahan kami.",
akadTime: "08.00 – 10.00 WIB",
akadVenue: "Masjid Al-Ikhlas",
akadAddress: "Jl. Merdeka No. 45, Jakarta Selatan",
akadMapsUrl: "https://maps.google.com",
resepsiTime: "11.00 – 14.00 WIB",
resepsiVenue: "Gedung Serbaguna Harmoni",
resepsiAddress: "Jl. Harmoni Raya No. 12, Jakarta Pusat",
resepsiMapsUrl: "https://maps.google.com",
giftBankName: "Bank BCA",
giftAccountNo: "1234567890",
giftAccountName: "Rizky Pratama",
giftAddress: "Jl. Merdeka No. 45, Jakarta Selatan 12345",
closingText: "Merupakan suatu kehormatan dan kebahagiaan bagi kami apabila Bapak/Ibu/Saudara/i berkenan hadir untuk memberikan doa restu. Atas kehadiran dan doa restunya, kami ucapkan terima kasih.",
hashtag: "#RizkyDanSalsa2025",
groomPhoto: null,
bridePhoto: null,
backgroundMedia: null,
backgroundType: "color", // 'color' | 'image' | 'video'
backgroundColor: "#1a2e1a",
primaryColor: "#c9a84c",
accentColor: "#f0d5c8",
musicUrl: "",
};
// ─── Photo Upload Helper ───────────────────────────────────────────────────
function PhotoUpload({ label, value, onChange, round }) {
const ref = useRef();
return (
ref.current.click()}
style={{
width: round ? 100 : "100%", height: round ? 100 : 120,
borderRadius: round ? "50%" : 8,
border: "2px dashed #c9a84c44",
background: value ? `url(${value}) center/cover` : "#1a1a1a",
cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
color: "#c9a84c88", fontSize: 12, flexShrink: 0, overflow: "hidden",
transition: "border-color .2s",
}}
>
{!value && + Upload
Photo}
{
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = ev => onChange(ev.target.result, file.type.startsWith("video") ? "video" : "image");
reader.readAsDataURL(file);
}} />
);
}
// ─── Editor Field ──────────────────────────────────────────────────────────
function Field({ label, value, onChange, type = "text", rows }) {
const style = {
width: "100%", background: "#111", border: "1px solid #333",
borderRadius: 6, color: "#eee", padding: "8px 10px", fontSize: 13,
outline: "none", fontFamily: "inherit", resize: rows ? "vertical" : "none",
boxSizing: "border-box",
};
return (
{rows
?