import { useState } from "react";

// ── Config ──────────────────────────────────────────────────────────────────
const EMAILJS_SVC = "service_rz1b50p";
const EMAILJS_TPL = "template_vg9pz5k";
const EMAILJS_KEY = "mAeazs7ro6M7DmCGW";
const OWNER_EMAIL = "yummysvenue@gmail.com";

// ── Booked Date Ranges ───────────────────────────────────────────────────────
const BOOKED = [
["2026-07-11","2026-07-11"],["2026-07-12","2026-07-21"],
["2026-07-26","2026-07-26"],["2026-07-28","2026-07-28"],
["2026-07-29","2026-07-29"],["2026-08-08","2026-08-08"],
["2026-09-03","2026-09-06"],["2026-09-19","2026-09-19"],
["2026-09-25","2026-09-26"],["2026-10-03","2026-10-03"],
["2026-10-08","2026-10-10"],["2026-10-11","2026-10-11"],
["2026-10-16","2026-10-18"],["2026-10-23","2026-10-24"],
["2026-11-05","2026-11-08"],["2026-11-14","2026-11-15"],
["2026-11-26","2026-11-29"],["2026-12-05","2026-12-05"],
["2026-12-06","2026-12-06"],["2026-12-12","2026-12-12"],
];

// ── Packages ─────────────────────────────────────────────────────────────────
const PKGS = [
{
id: "weekday", name: "Weekday Package", days: "Monday – Thursday",
eligible: [1,2,3,4], headline: "From $330", tag: null,
desc: "4-hour timeline",
inc: ["4-hour event timeline","Vintage & modern staging","Sound system, projector, stage & lighting","Custom-made signage","Kitchen prep space"],
tiers: [
{l:"Up to 35 guests – Gallery & Outdoor Veranda",p:330},
{l:"Up to 35 guests – Full Venue",p:405},
{l:"Up to 50 guests – Gallery & Outdoor Veranda",p:440},
{l:"Up to 50 guests – Full Venue",p:515},
{l:"Up to 100 guests – Full Venue",p:660},
{l:"Up to 175 guests – Full Venue",p:1050},
],
enh: [
{l:"Drink Specialist + Full Bar ($39/hr, bottomless Pepsi)",p:null,note:"$39/hr"},
{l:"Customizable Beverage Package",p:null,note:"Contact us"},
],
dn: "Half due to secure date; balance due 30 days prior.",
},
{
id: "friday", name: "Friday Package", days: "Friday",
eligible: [5], headline: "From $725", tag: null,
desc: "Access 11AM – 12AM · 6-hour timeline",
inc: ["Access 11AM – midnight","6-hour event timeline","Vintage & modern staging","Sound system, projector, stage & lighting","Custom-made signage","Kitchen prep space"],
tiers: [
{l:"Up to 35 guests – Gallery & Outdoor Veranda",p:725},
{l:"Up to 35 guests – Full Venue",p:850},
{l:"Up to 50 guests – Gallery & Outdoor Veranda",p:825},
{l:"Up to 50 guests – Full Venue",p:950},
{l:"Up to 100 guests – Full Venue",p:1200},
{l:"Up to 200 guests – Full Venue",p:1500},
],
enh: [
{l:"Drink Specialist + Full Bar ($39/hr, bottomless Pepsi)",p:null,note:"$39/hr"},
{l:"Customizable Beverage Package",p:null,note:"Contact us"},
],
dn: "Half due to secure date; balance due 30 days prior.",
},
{
id: "saturday", name: "Saturday Package", days: "Saturday",
eligible: [6], headline: "From $1,150", tag: "Popular",
desc: "Access 10AM – 12AM · 6-hour timeline",
inc: ["Access 10AM – midnight","6-hour event timeline","Vintage & modern staging","Sound system, projector, stage & lighting","Custom-made signage","Kitchen prep space"],
tiers: [
{l:"Up to 50 guests – Full Venue",p:1150},
{l:"Up to 100 guests – Full Venue",p:1400},
{l:"Up to 200 guests – Full Venue",p:1800},
],
enh: [
{l:"Drink Specialist + Full Bar ($39/hr, bottomless Pepsi)",p:null,note:"$39/hr"},
{l:"Customizable Beverage Package",p:null,note:"Contact us"},
],
dn: "Half due to secure date; balance due 30 days prior.",
},
{
id: "sunday", name: "Sunday Package", days: "Sunday",
eligible: [0], headline: "From $650", tag: null,
desc: "Access 11AM – 12AM · 6-hour timeline",
inc: ["Access 11AM – midnight","6-hour event timeline","Vintage & modern staging","Sound system, projector, stage & lighting","Custom-made signage","Kitchen prep space"],
tiers: [
{l:"Up to 35 guests – Gallery & Outdoor Veranda",p:650},
{l:"Up to 35 guests – Full Venue",p:750},
{l:"Up to 50 guests – Gallery & Outdoor Veranda",p:700},
{l:"Up to 50 guests – Full Venue",p:800},
{l:"Up to 100 guests – Full Venue",p:1000},
],
enh: [
{l:"Drink Specialist + Full Bar ($39/hr, bottomless Pepsi)",p:null,note:"$39/hr"},
{l:"Customizable Beverage Package",p:null,note:"Contact us"},
],
dn: "Half due to secure date; balance due 30 days prior.",
},
{
id: "entrepreneur", name: "Entrepreneur Package", days: "Monday – Wednesday",
eligible: [1,2,3], headline: "From $275", tag: null,
desc: "7-hour timeline incl. set-up & breakdown",
inc: ["7-hour timeline including set-up and breakdown","Adjustments accepted up to 48 hrs prior","Yummys social media share of your event","Gallery or Full Venue","Sound system, projector, stage & lighting"],
tiers: [
{l:"Gallery & Outdoor Veranda – Up to 50 guests",p:275},
{l:"Full Venue – Up to 100 guests",p:525},
],
enh: [
{l:"Drink Specialist + Full Bar ($39/hr, bottomless Pepsi)",p:null,note:"$39/hr"},
{l:"Marketing Package",p:100,note:null},
],
dn: "Half due to secure date; balance due 30 days prior.",
},
];

// ── Helpers ───────────────────────────────────────────────────────────────────
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const MS = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const DS = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
const DN = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

function fmt(n) { return n == null ? "--" : "$" + n.toLocaleString(); }
function toS(y, m, d) { return `${y}-${String(m+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`; }
function fmtD(s) { const [y,m,d] = s.split("-").map(Number); return `${MS[m-1]} ${d}, ${y}`; }
function isBkd(s) { return BOOKED.some(([a,b]) => s >= a && s <= b); }
function dU(s) { return Math.ceil((new Date(s+"T12:00:00") - new Date()) / 86400000); }

// ── Styles ────────────────────────────────────────────────────────────────────
const font = "'Cormorant Garamond',Georgia,serif";
const sans = "'DM Sans',sans-serif";
const green = "#2d6a4f";
const red = "#c0392b";
const ink = "#1a1a1a";
const muted = "#777";
const border = "#e8e5e0";
const bg = "#f9f8f6";

const card = { background:"#fff", border:`1px solid ${border}`, borderRadius:4, padding:"20px 24px", marginBottom:14 };
const btn = { background:ink, color:"#fff", border:"none", padding:"13px 28px", fontFamily:sans, fontSize:12, letterSpacing:".12em", textTransform:"uppercase", cursor:"pointer", borderRadius:2, width:"100%" };
const btnO = { background:"transparent", color:ink, border:`1px solid ${ink}`, padding:"13px 28px", fontFamily:sans, fontSize:12, letterSpacing:".12em", textTransform:"uppercase", cursor:"pointer", borderRadius:2 };
const lbl = { display:"block", fontFamily:sans, fontSize:11, letterSpacing:".16em", textTransform:"uppercase", color:"#888", marginBottom:7 };
const inp = { width:"100%", border:"none", borderBottom:`1px solid ${border}`, padding:"10px 0", fontSize:16, fontFamily:font, background:"transparent", outline:"none", color:ink, boxSizing:"border-box" };
const bbtn = { background:"none", border:"none", cursor:"pointer", fontFamily:sans, fontSize:13, color:"#888", display:"flex", alignItems:"center", gap:6, padding:0, marginBottom:22 };

// ── Main Component ────────────────────────────────────────────────────────────
export default function YummysBooking() {
const today = new Date();
const todayS = toS(today.getFullYear(), today.getMonth(), today.getDate());

const [view, setView] = useState("calendar");
const [calY, setCalY] = useState(today.getFullYear());
const [calM, setCalM] = useState(today.getMonth());
const [selDate, setSelDate] = useState(null);
const [pkg, setPkg] = useState(null);
const [tier, setTier] = useState(0);
const [enh, setEnh] = useState([]);
const [dHrs, setDHrs] = useState(3);
const [form, setForm] = useState({ name:"", email:"", phone:"", evtType:"Birthday Celebration", evtOther:"", notes:"" });
const [sig, setSig] = useState("");
const [sigC, setSigC] = useState(false);
const [payM, setPayM] = useState("card");
const [disc, setDisc] = useState({ ref:false, refName:"", vip:false, np:false, ent:false });
const [sending, setSending] = useState(false);
const [err, setErr] = useState("");

// Calendar helpers
const dim = new Date(calY, calM+1, 0).getDate();
const fd = new Date(calY, calM, 1).getDay();
function prevM() { calM === 0 ? (setCalY(y=>y-1), setCalM(11)) : setCalM(m=>m-1); }
function nextM() { calM === 11 ? (setCalY(y=>y+1), setCalM(0)) : setCalM(m=>m+1); }
function isPast(d) { return toS(calY,calM,d) < todayS; }
function isW7(d) { const du = dU(toS(calY,calM,d)); return du > 0 && du <= 7; }
function isCut(d) { return toS(calY,calM,d) >= "2027-01-01"; }
function canSel(d) { const s = toS(calY,calM,d); return !isBkd(s) && !isPast(d) && !isW7(d) && !isCut(d); }

// Pricing
const dow = selDate ? new Date(selDate+"T12:00:00").getDay() : null;
const filtPkgs = selDate ? PKGS.filter(p => p.eligible.includes(dow)) : PKGS;
const tp = pkg?.tiers[tier]?.p || 0;
const isDrink = enh.includes(0) && pkg?.enh[0]?.l.startsWith("Drink");
const dTotal = isDrink ? dHrs * 39 : 0;
const oTotal = enh.filter(i => !(i===0&&isDrink)).reduce((s,i) => s + (pkg?.enh[i]?.p||0), 0);
const discPct = (disc.ref&&disc.refName.trim()?5:0) + (disc.vip?10:0) + (disc.np?10:0) + (disc.ent?10:0);
const discAmt = Math.round(tp * discPct / 100);
const discBase = tp - discAmt;
const sub = discBase + dTotal + oTotal;
const cFee = payM === "card" ? Math.round(sub * 0.025) : 0;
const total = sub + cFee;
const w30 = selDate && dU(selDate) <= 30;
const deposit = w30 ? total : (pkg?.deposit ?? Math.round(total/2));
const balance = total - deposit;

// Form validation
const vName = form.name.trim().split(" ").length >= 2;
const vEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
const vPhone = /^\+?[\d\s\-().]{10,}$/.test(form.phone);
const vEvt = form.evtType !== "Other" || form.evtOther.trim();
const canGo = vName && vEmail && vPhone && vEvt;
const evtDisplay = form.evtType === "Other" ? (form.evtOther || "Other") : form.evtType;

function toggleEnh(i) {
setEnh(prev => prev.includes(i) ? prev.filter(x=>x!==i) : [...prev,i]);
if (!enh.includes(i) && i === 0) setDHrs(3);
}

function toggleDisc(id) {
setDisc({ ref:false, refName:"", vip:false, np:false, ent:false, [id]: !disc[id] });
}

function resetAll() {
setView("calendar"); setSelDate(null); setPkg(null); setTier(0); setEnh([]); setDHrs(3);
setForm({ name:"", email:"", phone:"", evtType:"Birthday Celebration", evtOther:"", notes:"" });
setSig(""); setSigC(false); setPayM("card");
setDisc({ ref:false, refName:"", vip:false, np:false, ent:false });
setSending(false); setErr("");
}

async function loadScript(src) {
return new Promise((res, rej) => {
const s = document.createElement("script");
s.src = src; s.onload = res; s.onerror = rej;
document.head.appendChild(s);
});
}

async function handleSubmit() {
setSending(true); setErr("");
try {
if (!window.jspdf) await loadScript("https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js");
if (!window.emailjs) await loadScript("https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js");

const { jsPDF } = window.jspdf;
const doc = new jsPDF({ unit:"pt", format:"letter" });
const W = doc.internal.pageSize.getWidth();
const mg = 48; let y = 60;

const aL = (text, size=11, bold=false, color=[30,30,30]) => {
doc.setFontSize(size);
doc.setFont("helvetica", bold ? "bold" : "normal");
doc.setTextColor(...color);
doc.splitTextToSize(String(text), W - mg*2).forEach(line => {
if (y > 720) { doc.addPage(); y = 60; }
doc.text(line, mg, y); y += size * 1.5;
});
};

aL("Yummys Venue", 22, true);
aL("210 E. Union St., Marion, IL 62959 · (618) 422-7727 · yummysvenue@gmail.com", 9, false, [120,120,120]);
y += 6; doc.setDrawColor(220,215,208); doc.line(mg, y, W-mg, y); y += 14;
aL("EVENT BOOKING AGREEMENT", 14, true); y += 6;

const fields = [
["Client", form.name], ["Email", form.email], ["Phone", form.phone||"—"],
["Event Date", fmtD(selDate)], ["Package", pkg.name], ["Option", pkg.tiers[tier]?.l],
["Event Type", evtDisplay], ["Total", fmt(total)], ["Deposit Due", fmt(deposit)],
["Payment", payM==="card"?"Credit/Debit Card":payM==="cashapp"?"CashApp $YummysVenue":"Cash or Check"],
...(form.notes ? [["Notes", form.notes]] : []),
];
fields.forEach(([l, v]) => {
if (y > 720) { doc.addPage(); y = 60; }
doc.setFontSize(10); doc.setFont("helvetica","bold"); doc.setTextColor(120,120,120);
doc.text(l+":", mg, y);
doc.setFont("helvetica","normal"); doc.setTextColor(30,30,30);
doc.text(String(v), mg+160, y); y += 16;
});

y += 14; doc.setDrawColor(220,215,208); doc.line(mg,y,W-mg,y); y += 14;
aL("ELECTRONIC SIGNATURE", 10, true); y += 4;
const sigDate = new Date().toLocaleDateString("en-US",{year:"numeric",month:"long",day:"numeric"});
[["Client Signature", sig], ["Date Signed", sigDate], ["Yummys Venue", "Padra Franks"]].forEach(([l,v]) => {
if (y > 720) { doc.addPage(); y = 60; }
doc.setFontSize(10); doc.setFont("helvetica","bold"); doc.setTextColor(120,120,120);
doc.text(l+":", mg, y);
doc.setFont("helvetica", l==="Client Signature"?"italic":"normal");
doc.setFontSize(l==="Client Signature"?13:10); doc.setTextColor(30,30,30);
doc.text(v, mg+180, y); y += 20;
});

const pdf = doc.output("datauristring");
const pmLabel = payM==="card"?"Credit/Debit Card (Stripe)":payM==="cashapp"?"CashApp $YummysVenue":"Cash or Check";

await window.emailjs.send(EMAILJS_SVC, EMAILJS_TPL, {
to_email: OWNER_EMAIL, client_email: form.email, client_name: form.name,
client_phone: form.phone||"—", event_date: fmtD(selDate),
package_name: pkg.name, package_tier: pkg.tiers[tier]?.l,
event_type: evtDisplay, subtotal: fmt(sub),
credits: discAmt > 0 ? `${discPct}% — −${fmt(discAmt)}` : "None",
total: fmt(total), deposit: fmt(deposit), notes: form.notes||"—",
signed_by: sig, payment_method: pmLabel, contract_pdf: pdf,
}, EMAILJS_KEY);

setView("confirm");
} catch(e) {
console.error(e);
setErr("Something went wrong. Please call us at (618) 422-7727.");
} finally {
setSending(false);
}
}

// Steps
const steps = ["Date","Package","Details","Info","Contract","Payment"];
const stepIdx = {calendar:0,packages:1,detail:2,form:3,contract:4,summary:5,confirm:5}[view] ?? 0;

return (
<div style={{ fontFamily:font, minHeight:"100vh", background:bg, color:ink }}>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet"/>

{/* Header */}
<header onClick={() => setView("calendar")} style={{ background:ink, padding:"20px 32px", display:"flex", alignItems:"center", justifyContent:"space-between", cursor:"pointer" }}>
<div>
<div style={{ fontSize:28, fontWeight:300, letterSpacing:".1em", color:"#fff" }}>Yummy's</div>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".2em", color:"#aaa", textTransform:"uppercase", marginTop:2 }}>Private Bookings · Marion, IL</div>
</div>
<div style={{ fontFamily:sans, fontSize:11, color:"#aaa" }}>(618) 422-7727</div>
</header>

{/* Steps */}
{view !== "confirm" && (
<div style={{ background:"#fff", borderBottom:`1px solid ${border}`, padding:"0 28px", display:"flex", overflowX:"auto" }}>
{steps.map((s,i) => (
<div key={s} style={{ padding:"13px 14px 11px", fontFamily:sans, fontSize:11, letterSpacing:".12em", textTransform:"uppercase", color: i===stepIdx ? ink : "#bbb", borderBottom: i===stepIdx ? `2px solid ${ink}` : "2px solid transparent", whiteSpace:"nowrap" }}>
{i+1} {s}
</div>
))}
</div>
)}

<main style={{ maxWidth:800, margin:"0 auto", padding:"36px 18px 80px" }}>

{/* ── CALENDAR ── */}
{view === "calendar" && (
<>
<div style={{ textAlign:"center", marginBottom:28 }}>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em" }}>Request a Private Booking</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginTop:8 }}>Select an available date to get started.</p>
</div>

<div style={{ display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", marginBottom:18, fontFamily:sans, fontSize:12, color:muted }}>
{[["#c0392b","Booked",false],["#c97d2b","Call (<7 Days)",false],["#2d6a4f","Available",false],["#2d6a4f","Selected",true]].map(([c,l,ring]) => (
<span key={l} style={{ display:"flex", alignItems:"center", gap:5 }}>
<span style={{ width:9, height:9, borderRadius:"50%", background:ring?"transparent":c, border:ring?`2px solid ${c}`:"none", display:"inline-block" }}/>
{l}
</span>
))}
</div>

<div style={{ ...card, padding:0, overflow:"hidden" }}>
<div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", padding:"15px 22px", borderBottom:`1px solid ${border}` }}>
<button onClick={prevM} style={{ background:"none", border:"none", cursor:"pointer", fontSize:22, color:"#555", padding:"2px 10px" }}>‹</button>
<span style={{ fontSize:17, fontWeight:400 }}>{MONTHS[calM]} {calY}</span>
<button onClick={nextM} style={{ background:"none", border:"none", cursor:"pointer", fontSize:22, color:"#555", padding:"2px 10px" }}>›</button>
</div>
<div style={{ display:"grid", gridTemplateColumns:"repeat(7,1fr)", borderBottom:`1px solid ${border}` }}>
{DS.map(d => <div key={d} style={{ textAlign:"center", padding:"9px 0", fontFamily:sans, fontSize:10, letterSpacing:".12em", color:"#bbb", textTransform:"uppercase" }}>{d}</div>)}
</div>
<div style={{ display:"grid", gridTemplateColumns:"repeat(7,1fr)" }}>
{Array.from({length:fd}).map((_,i) => <div key={`e${i}`} style={{ minHeight:50 }}/>)}
{Array.from({length:dim}).map((_,i) => {
const d = i+1;
const s = toS(calY,calM,d);
const bkd = isBkd(s), past = isPast(d), w7 = isW7(d), cut = isCut(d);
const sel = selDate === s, isToday = s === todayS;
const ok = canSel(d);
let bg2="transparent", fc=ink, fw=300, td="none";
if (bkd) { bg2="#fdf0ef"; fc=red; }
else if (w7) { bg2="#fdf6ee"; fc="#c97d2b"; }
else if (sel) { bg2=green; fc="#fff"; fw=500; }
else if (past||cut) { fc="#ccc"; td="line-through"; }
else if (isToday) { fc=green; }
return (
<div key={d} onClick={() => ok && setSelDate(s)} style={{ minHeight:50, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", cursor:ok?"pointer":"default", borderTop:`1px solid #f0ede8`, background:sel?"#f0f7f4":"transparent" }}>
<div style={{ width:34, height:34, borderRadius:"50%", display:"flex", alignItems:"center", justifyContent:"center", fontSize:13, fontFamily:sans, fontWeight:fw, background:bg2, color:fc, textDecoration:td, border:isToday&&!sel&&!bkd&&!w7?`1px solid ${green}`:"none" }}>
{d}
</div>
{bkd && <div style={{ width:4, height:4, borderRadius:"50%", background:red, marginTop:2 }}/>}
{w7 && !bkd && <div style={{ width:4, height:4, borderRadius:"50%", background:"#c97d2b", marginTop:2 }}/>}
</div>
);
})}
</div>
</div>

{selDate && (
<div style={{ ...card, display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:12, marginTop:14 }}>
<div>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#aaa", marginBottom:4 }}>Selected Date</div>
<div style={{ fontSize:22, fontWeight:300 }}>{fmtD(selDate)}</div>
<div style={{ fontFamily:sans, fontSize:12, color:green, marginTop:3 }}>✓ Available</div>
</div>
<button onClick={() => setView("packages")} style={{ ...btn, width:"auto" }}>Choose a Package →</button>
</div>
)}

<div style={{ padding:"13px 18px", borderRadius:4, background:"#fdf6ee", border:"1px solid #f0dfc0", fontFamily:sans, fontSize:13, color:"#7a4f1a", lineHeight:1.7, marginTop:12 }}>
<strong>Less than 7 days until your event?</strong> Call or email us directly.<br/>
📞 <a href="tel:6184227727" style={{ color:"#7a4f1a" }}>(618) 422-7727</a> · ✉ <a href="mailto:yummysvenue@gmail.com" style={{ color:"#7a4f1a" }}>yummysvenue@gmail.com</a>
</div>
<div style={{ padding:"12px 18px", borderRadius:4, background:"#f5f3ff", border:"1px solid #d9d4f5", fontFamily:sans, fontSize:13, color:"#4a3d8a", lineHeight:1.7, marginTop:10 }}>
📅 Online booking available through <strong>December 31, 2026</strong>. For 2027 events please contact us directly.
</div>
<div style={{ padding:"12px 18px", borderRadius:4, background:"#fdf9f4", border:`1px solid ${border}`, fontFamily:sans, fontSize:12, color:muted, lineHeight:1.7, marginTop:10 }}>
<span style={{ color:red }}>●</span> Dates in red are already reserved.
</div>
</>
)}

{/* ── PACKAGES ── */}
{view === "packages" && (
<>
<button onClick={() => setView("calendar")} style={bbtn}>← Back to Calendar</button>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:4 }}>Choose a Package</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginBottom:24 }}>{fmtD(selDate)} · {DN[dow]} — packages available for this day</p>

{filtPkgs.map(p => (
<div key={p.id} onClick={() => { setPkg(p); setTier(0); setEnh([]); setDHrs(3); setView("detail"); }} style={{ ...card, cursor:"pointer", display:"flex", alignItems:"center", justifyContent:"space-between", gap:16 }}>
<div style={{ flex:1 }}>
<div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:4 }}>
<span style={{ fontSize:18, fontWeight:400 }}>{p.name}</span>
{p.tag && <span style={{ fontFamily:sans, fontSize:10, letterSpacing:".12em", textTransform:"uppercase", background:"#eef3fb", color:"#1a3d5c", padding:"3px 10px", borderRadius:20 }}>{p.tag}</span>}
</div>
<div style={{ fontFamily:sans, fontSize:12, color:muted }}>{p.days} · {p.desc}</div>
</div>
<div style={{ textAlign:"right", flexShrink:0 }}>
<div style={{ fontSize:19, fontWeight:300 }}>{p.headline}</div>
<div style={{ fontFamily:sans, fontSize:11, color:"#bbb", marginTop:2 }}>Select →</div>
</div>
</div>
))}

<div style={{ ...card, display:"flex", alignItems:"center", justifyContent:"space-between", flexWrap:"wrap", gap:14 }}>
<div>
<div style={{ fontSize:17, fontWeight:400, marginBottom:4 }}>Planning a Wedding?</div>
<div style={{ fontFamily:sans, fontSize:12, color:muted, lineHeight:1.7 }}>Wedding bookings are handled personally by our team.</div>
</div>
<div style={{ display:"flex", gap:10 }}>
<a href="tel:6184227727" style={{ ...btn, width:"auto", textDecoration:"none", fontSize:12, padding:"10px 18px" }}>📞 (618) 422-7727</a>
<a href="mailto:yummysvenue@gmail.com" style={{ ...btnO, textDecoration:"none", fontSize:12, padding:"10px 18px" }}>✉ Email Us</a>
</div>
</div>
</>
)}

{/* ── DETAIL ── */}
{view === "detail" && pkg && (
<>
<button onClick={() => setView("packages")} style={bbtn}>← Back to Packages</button>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:4 }}>{pkg.name}</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginBottom:24 }}>{fmtD(selDate)} · {pkg.days}</p>

<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:12 }}>What's Included</div>
<ul style={{ listStyle:"none", padding:0, margin:0 }}>
{pkg.inc.map(x => (
<li key={x} style={{ fontFamily:sans, fontSize:13, color:"#555", padding:"5px 0", borderBottom:`1px solid #f5f3ef`, display:"flex", gap:8 }}>
<span style={{ color:green }}>✓</span>{x}
</li>
))}
</ul>
</div>

<div style={card}>
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:12 }}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb" }}>Guest Count & Space</div>
<div style={{ fontFamily:sans, fontSize:11, color:"#c97d2b" }}>⏱ Upgrades up to 30 days prior</div>
</div>
{pkg.tiers.map((t,i) => (
<div key={i} onClick={() => setTier(i)} style={{ border:`1px solid ${tier===i?green:border}`, borderRadius:3, padding:"11px 15px", cursor:"pointer", display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:8, background:tier===i?"#f0f7f4":"transparent" }}>
<span style={{ fontFamily:sans, fontSize:13 }}>{t.l}</span>
<span style={{ fontSize:16, fontWeight:300, color:tier===i?green:ink }}>{fmt(t.p)}</span>
</div>
))}
</div>

{pkg.enh.length > 0 && (
<div style={card}>
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:12 }}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb" }}>Add-On Enhancements</div>
<div style={{ fontFamily:sans, fontSize:11, color:"#c97d2b" }}>⏱ Upgrades up to 30 days prior</div>
</div>
{pkg.enh.map((e,i) => {
const isDr = e.l.startsWith("Drink");
const sel = enh.includes(i);
return (
<div key={i}>
<div onClick={() => toggleEnh(i)} style={{ border:`1px solid ${sel?green:border}`, borderRadius:3, padding:"11px 15px", cursor:"pointer", display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:8, background:sel?"#f0f7f4":"transparent" }}>
<div>
<div style={{ fontFamily:sans, fontSize:13 }}>{e.l}</div>
{isDr && <div style={{ fontFamily:sans, fontSize:11, color:muted, marginTop:2 }}>3-hour minimum · $39/hr</div>}
</div>
<span style={{ fontFamily:sans, fontSize:13, color:sel?green:muted }}>
{isDr ? (sel ? `$${dHrs*39}` : "$39/hr") : e.p != null ? `+${fmt(e.p)}` : e.note}
</span>
</div>
{isDr && sel && (
<div style={{ border:`1px solid ${green}`, borderTop:"none", borderRadius:"0 0 3px 3px", padding:"12px 15px", background:"#f7fbf9", marginBottom:8 }}>
<div style={{ fontFamily:sans, fontSize:10, textTransform:"uppercase", letterSpacing:".12em", color:"#888", marginBottom:10 }}>Select Hours (min 3)</div>
<div style={{ display:"flex", alignItems:"center", gap:12 }}>
<button onClick={() => setDHrs(h=>Math.max(3,h-1))} style={{ width:32, height:32, borderRadius:"50%", border:`1px solid ${border}`, background:"#fff", cursor:dHrs<=3?"not-allowed":"pointer", fontSize:18, color:dHrs<=3?"#ccc":ink }}>−</button>
<div style={{ textAlign:"center", minWidth:56 }}>
<div style={{ fontSize:22, fontWeight:300 }}>{dHrs}</div>
<div style={{ fontFamily:sans, fontSize:11, color:muted }}>hrs</div>
</div>
<button onClick={() => setDHrs(h=>Math.min(12,h+1))} style={{ width:32, height:32, borderRadius:"50%", border:`1px solid ${border}`, background:"#fff", cursor:"pointer", fontSize:18, color:ink }}>+</button>
<div style={{ fontFamily:sans, fontSize:13, color:green, fontWeight:500 }}>{dHrs} × $39 = ${dHrs*39}</div>
</div>
</div>
)}
</div>
);
})}
</div>
)}

{/* Cart */}
<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:12 }}>🛒 Your Cart</div>
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"9px 0", borderBottom:`1px solid #f5f3ef` }}>
<div>
<div style={{ fontFamily:sans, fontSize:13 }}>{pkg.name}</div>
<div style={{ fontFamily:sans, fontSize:11, color:muted, marginTop:2 }}>{pkg.tiers[tier]?.l}</div>
</div>
<span style={{ fontSize:16, fontWeight:300 }}>{fmt(tp)}</span>
</div>
{discAmt > 0 && (
<div style={{ display:"flex", justifyContent:"space-between", padding:"9px 0", borderBottom:`1px solid #f5f3ef` }}>
<span style={{ fontFamily:sans, fontSize:13, color:green }}>Credits ({discPct}%)</span>
<span style={{ fontSize:16, fontWeight:300, color:green }}>−{fmt(discAmt)}</span>
</div>
)}
{enh.map(i => {
const e = pkg.enh[i]; if (!e) return null;
const isDr = e.l.startsWith("Drink");
const lt = isDr ? dTotal : (e.p || null);
return (
<div key={i} style={{ display:"flex", justifyContent:"space-between", padding:"9px 0", borderBottom:`1px solid #f5f3ef` }}>
<div>
<div style={{ fontFamily:sans, fontSize:13 }}>{isDr ? `Drink Specialist (${dHrs} hrs)` : e.l}</div>
{isDr && <div style={{ fontFamily:sans, fontSize:11, color:muted, marginTop:2 }}>{dHrs} × $39/hr</div>}
</div>
<span style={{ fontSize:16, fontWeight:300, color:green }}>{lt != null ? `+${fmt(lt)}` : "Contact us"}</span>
</div>
);
})}
{enh.length === 0 && <div style={{ fontFamily:sans, fontSize:12, color:"#ccc", padding:"9px 0", borderBottom:`1px solid #f5f3ef`, fontStyle:"italic" }}>No add-ons selected</div>}
<div style={{ display:"flex", justifyContent:"space-between", padding:"11px 0 4px", fontFamily:sans, fontSize:14, fontWeight:500 }}>
<span style={{ color:"#555" }}>Subtotal</span>
<span>{fmt(sub)}</span>
</div>
<div style={{ fontFamily:sans, fontSize:11, color:muted, marginBottom:16 }}>
{w30 ? "⚠️ Event within 30 days — full payment required." : `Deposit to secure: ${fmt(Math.round(sub/2))}`}
</div>
<button onClick={() => setView("form")} style={btn}>Continue →</button>
</div>
<div style={{ fontFamily:sans, fontSize:12, color:"#bbb", lineHeight:1.7 }}>{pkg.dn}</div>
</>
)}

{/* ── FORM ── */}
{view === "form" && (
<>
<button onClick={() => setView("detail")} style={bbtn}>← Back</button>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:4 }}>Your Information</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginBottom:24 }}>{fmtD(selDate)} · {pkg?.name}</p>

<div style={card}>
<button onClick={() => setView("detail")} style={{ ...bbtn, marginBottom:18 }}>← Back to Package Details</button>

<div style={{ marginBottom:20 }}>
<label style={lbl}>Full Name *</label>
<input type="text" placeholder="First and last name" value={form.name} onChange={e=>setForm(f=>({...f,name:e.target.value}))} style={{ ...inp, borderBottomColor: form.name.trim()&&!vName?red:border }}/>
{form.name.trim() && !vName && <div style={{ fontFamily:sans, fontSize:11, color:red, marginTop:4 }}>Please enter your first and last name.</div>}
</div>
<div style={{ marginBottom:20 }}>
<label style={lbl}>Email Address *</label>
<input type="email" placeholder="your@email.com" value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))} style={{ ...inp, borderBottomColor: form.email&&!vEmail?red:border }}/>
{form.email && !vEmail && <div style={{ fontFamily:sans, fontSize:11, color:red, marginTop:4 }}>Please enter a valid email address.</div>}
</div>
<div style={{ marginBottom:20 }}>
<label style={lbl}>Cell Phone *</label>
<input type="tel" placeholder="(618) 000-0000" value={form.phone} onChange={e=>setForm(f=>({...f,phone:e.target.value}))} style={{ ...inp, borderBottomColor: form.phone&&!vPhone?red:border }}/>
{form.phone && !vPhone && <div style={{ fontFamily:sans, fontSize:11, color:red, marginTop:4 }}>Please enter a valid 10-digit phone number.</div>}
</div>
<div style={{ marginBottom:20 }}>
<label style={lbl}>Event Type</label>
<select value={form.evtType} onChange={e=>setForm(f=>({...f,evtType:e.target.value,evtOther:""}))} style={{ ...inp, appearance:"none" }}>
{["Birthday Celebration","Graduation","Rehearsal Celebration","Corporate Event","Holiday Celebration","Reunion","Entrepreneur Package (Class, Workshop, Photoshoot, Show, Dance, Trivia Night, etc.)","Other"].map(t=><option key={t}>{t}</option>)}
</select>
{form.evtType === "Other" && (
<div style={{ marginTop:12 }}>
<label style={lbl}>Please describe your event *</label>
<input type="text" placeholder="Tell us about your event…" value={form.evtOther} onChange={e=>setForm(f=>({...f,evtOther:e.target.value}))} style={inp}/>
</div>
)}
</div>
<div style={{ marginBottom:28 }}>
<label style={lbl}>Additional Notes</label>
<textarea rows={3} placeholder="Special requests or details…" value={form.notes} onChange={e=>setForm(f=>({...f,notes:e.target.value}))} style={{ ...inp, resize:"none" }}/>
</div>
<button onClick={() => canGo && setView("contract")} disabled={!canGo} style={{ ...btn, opacity:canGo?1:.4 }}>Continue to Contract →</button>
</div>
</>
)}

{/* ── CONTRACT ── */}
{view === "contract" && (
<>
<button onClick={() => setView("form")} style={bbtn}>← Back</button>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:4 }}>Event Policy Agreement</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginBottom:20 }}>Please read and sign before proceeding to payment.</p>

<div style={{ ...card, maxHeight:440, overflowY:"auto" }}>
{[
["Reservation Process","A rental contract must be signed and the appropriate deposit submitted to confirm your booking. Reservations are confirmed only when the contract is signed and funds are received."],
["Payment Policy","Half of the total is due to secure the date; remaining balance due 30 days prior. Payments accepted: card (+2.5%), CashApp $YummysVenue, check, money order, or cash."],
["Late Payments","Balances unpaid 72 hours after the due date may incur a $20/day late fee. After 10 days, the reservation may be canceled without refund."],
["Cancellations","Payments are non-refundable. Payments may be applied as credit toward a rescheduled event within 6 months."],
["Date Changes","Email us as soon as possible. We will transfer your event to an available future date of equal value."],
["Emergencies","If the Venue cannot host due to circumstances beyond our control, we will reschedule without penalty or hold payments as credit for up to 12 months."],
["Alcohol Service","Alcohol permitted only through Yummys licensed Drink Specialist/Bartender. No outside alcohol. IDs checked for guests appearing under 30. Client assumes all liability."],
["Prohibited Items","No fireworks, sparklers, open flames, confetti, glitter, fog machines, or bubbles. Smoking outdoors only, 15+ feet from entrances."],
["Decorations","Approved adhesives only (tape, sticky tack, command strips). No damage to finished walls."],
["Cleanup","Remove all decor and personal items. Return venue in same condition. All guests exit, trash bagged, lights out, doors locked by contracted time."],
["Liability","Client is responsible for the conduct of guests and vendors. Client holds Yummys Venue harmless from all claims arising from the event."],
["Vendors","All third-party vendors must carry $1,000,000+ liability insurance and list Yummys Venue as additional insured."],
["Event Support","We will contact you about 30 days before your event. A Virtual Hostess is available during your event for support."],
["Governing Law","This Agreement is governed by Illinois law. Williamson County has exclusive jurisdiction."],
].map(([h,b]) => (
<div key={h} style={{ marginBottom:16 }}>
<div style={{ fontFamily:sans, fontSize:10, fontWeight:500, letterSpacing:".1em", textTransform:"uppercase", color:ink, marginBottom:4 }}>{h}</div>
<p style={{ fontFamily:sans, fontSize:13, color:"#555", lineHeight:1.75, margin:0 }}>{b}</p>
</div>
))}
<div style={{ borderTop:`1px solid ${border}`, paddingTop:14, marginTop:8 }}>
<div style={{ fontFamily:sans, fontSize:10, fontWeight:500, letterSpacing:".1em", textTransform:"uppercase", color:ink, marginBottom:6 }}>Event Policy Agreement</div>
<p style={{ fontFamily:sans, fontSize:13, color:"#555", lineHeight:1.75, margin:0 }}>We have read and understand the policies. We agree to uphold them and ensure all contractors and members of the event party will abide by the policies.</p>
</div>
</div>

<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:16 }}>Electronic Signature</div>
<div style={{ marginBottom:18 }}>
<label style={lbl}>Type your full legal name *</label>
<input type="text" placeholder={form.name||"Your full name"} value={sig} onChange={e=>setSig(e.target.value)} style={{ ...inp, fontStyle:"italic", fontSize:18 }}/>
<div style={{ fontFamily:sans, fontSize:11, color:"#bbb", marginTop:6 }}>Booking for: {fmtD(selDate)} · {pkg?.name}</div>
</div>
<div style={{ display:"flex", alignItems:"flex-start", gap:12, marginBottom:20 }}>
<input type="checkbox" id="sc" checked={sigC} onChange={e=>setSigC(e.target.checked)} style={{ marginTop:3, accentColor:green, width:16, height:16, flexShrink:0 }}/>
<label htmlFor="sc" style={{ fontFamily:sans, fontSize:13, color:"#555", lineHeight:1.7, cursor:"pointer" }}>
I have read and agree to all Yummys Venue policies. Typing my name constitutes a legally binding electronic signature.
</label>
</div>
<button onClick={() => sig.trim()&&sigC&&setView("summary")} disabled={!sig.trim()||!sigC} style={{ ...btn, opacity:sig.trim()&&sigC?1:.4 }}>
I Agree — Continue to Payment →
</button>
</div>
</>
)}

{/* ── SUMMARY ── */}
{view === "summary" && (
<>
<button onClick={() => setView("contract")} style={bbtn}>← Back</button>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:4 }}>Review & Pay</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, marginBottom:24 }}>Confirm your details and secure your date.</p>

{/* Booking Summary */}
<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:12 }}>Booking Summary</div>
{[["Date",fmtD(selDate)],["Package",pkg?.name],["Option",pkg?.tiers[tier]?.l],["Event Type",evtDisplay],["Name",form.name],["Email",form.email],form.phone?["Phone",form.phone]:null].filter(Boolean).map(([l,v])=>(
<div key={l} style={{ display:"flex", justifyContent:"space-between", fontFamily:sans, fontSize:13, padding:"7px 0", borderBottom:`1px solid #f5f3ef` }}>
<span style={{ color:"#aaa" }}>{l}</span>
<span style={{ color:ink, textAlign:"right", maxWidth:"60%" }}>{v}</span>
</div>
))}
</div>

{/* Credits */}
<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:6 }}>Credits & Discounts</div>
<div style={{ fontFamily:sans, fontSize:12, color:muted, marginBottom:16, lineHeight:1.6 }}>Select any credits that apply. Only one credit per booking. Subject to verification.</div>
{[
{id:"ref",label:"Referral Credit",sub:"",pct:"5% off",hasName:true},
{id:"vip",label:"VIP Repeat Client",sub:"Returning Yummys client",pct:"10% off"},
{id:"np",label:"Non-Profit Credit",sub:"Registered 501(c)(3)",pct:"10% off"},
{id:"ent",label:"Entrepreneur Credit",sub:"Business owners & entrepreneurs",pct:"10% off"},
].map(c => {
const chk = disc[c.id];
return (
<div key={c.id} onClick={()=>toggleDisc(c.id)} style={{ border:`1px solid ${chk?green:border}`, borderRadius:3, padding:"11px 15px", cursor:"pointer", marginBottom:10, background:chk?"#f0f7f4":"transparent" }}>
<div style={{ display:"flex", alignItems:"center", justifyContent:"space-between" }}>
<div style={{ display:"flex", alignItems:"center", gap:10 }}>
<input type="checkbox" checked={chk} onClick={e=>e.stopPropagation()} onChange={()=>toggleDisc(c.id)} style={{ accentColor:green, width:15, height:15 }}/>
<div>
<div style={{ fontFamily:sans, fontSize:13 }}>{c.label}</div>
{c.sub && <div style={{ fontFamily:sans, fontSize:11, color:muted }}>{c.sub}</div>}
</div>
</div>
<span style={{ fontFamily:sans, fontSize:13, color:chk?green:muted, fontWeight:500 }}>{c.pct}</span>
</div>
{c.hasName && chk && (
<div style={{ marginTop:10, marginLeft:25 }} onClick={e=>e.stopPropagation()}>
<label style={{ ...lbl, fontSize:10, marginBottom:4 }}>Who referred you? *</label>
<input type="text" placeholder="Referral name" value={disc.refName} onChange={e=>setDisc(d=>({...d,refName:e.target.value}))} style={{ ...inp, fontSize:14, paddingTop:4, paddingBottom:4 }}/>
</div>
)}
</div>
);
})}
{discAmt > 0 && (
<div style={{ display:"flex", justifyContent:"space-between", padding:"10px 13px", background:"#f0f7f4", borderRadius:3, fontFamily:sans, fontSize:13, color:green }}>
<span>Total Credit Applied ({discPct}%)</span>
<strong>−{fmt(discAmt)}</strong>
</div>
)}
</div>

{/* Payment Breakdown */}
<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:12 }}>Payment Breakdown</div>
{[
["Package Base", fmt(tp), "#666"],
...(discAmt>0 ? [[`Credits (${discPct}%)`, `−${fmt(discAmt)}`, green]] : []),
...(discAmt>0 ? [["Discounted Base", fmt(discBase), "#666"]] : []),
...(isDrink ? [[`Drink Specialist (${dHrs} hrs × $39)`, fmt(dTotal), "#666"]] : []),
...enh.filter(i=>!(i===0&&isDrink)).map(i=>pkg.enh[i]?.p?[pkg.enh[i].l,fmt(pkg.enh[i].p),"#666"]:[]).filter(x=>x.length),
["Subtotal", fmt(sub), "#444"],
...(cFee>0 ? [["Card Processing Fee (2.5%)", `+${fmt(cFee)}`, "#666"]] : []),
["Total", fmt(total), ink],
[w30?"Payment Due in Full":"Deposit Due Today (50%)", fmt(deposit), ink],
...(!w30 ? [["Balance Due 30 Days Prior", fmt(balance), ink]] : []),
].map(([l,v,c]) => (
<div key={l} style={{ display:"flex", justifyContent:"space-between", fontFamily:sans, fontSize:13, padding:"8px 0", borderBottom:`1px solid #f5f3ef` }}>
<span style={{ color:c||"#666" }}>{l}</span>
<span style={{ color:c||ink }}>{v}</span>
</div>
))}
<div style={{ fontFamily:sans, fontSize:11, color:"#bbb", marginTop:12, lineHeight:1.7 }}>
{w30 ? "⚠️ Event within 30 days — full payment is due." : pkg?.dn}
</div>
</div>

{/* Payment Method */}
<div style={card}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:6 }}>How Would You Like to Pay?</div>
<div style={{ fontFamily:sans, fontSize:12, color:muted, marginBottom:16 }}>
{w30 ? `Full payment required: ${fmt(total)}` : `Deposit: ${fmt(deposit)} (50% to secure your date)`}
</div>
{[
{id:"card",icon:"💳",label:"Credit / Debit Card",sub:`Pay now via Stripe · 2.5% fee`,amt:total},
{id:"cashapp",icon:"📱",label:"CashApp",sub:"No fee · Send within 72 hours",amt:sub},
{id:"cash",icon:"💵",label:"Cash or Check",sub:"No fee · Arrange drop-off within 72 hours",amt:sub},
].map(o => {
const sel = payM === o.id;
return (
<div key={o.id} onClick={()=>setPayM(o.id)} style={{ border:`1px solid ${sel?green:border}`, borderRadius:3, padding:"15px 17px", cursor:"pointer", marginBottom:10, background:sel?"#f0f7f4":"transparent" }}>
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
<div style={{ display:"flex", alignItems:"center", gap:10 }}>
<span style={{ fontSize:18 }}>{o.icon}</span>
<div>
<div style={{ fontFamily:sans, fontSize:13, fontWeight:500 }}>{o.label}</div>
<div style={{ fontFamily:sans, fontSize:11, color:muted, marginTop:2 }}>{o.sub}</div>
</div>
</div>
<div style={{ fontFamily:sans, fontSize:13, color:sel?green:muted, fontWeight:500 }}>{fmt(o.amt)}</div>
</div>
{sel && o.id==="card" && <div style={{ fontFamily:sans, fontSize:11, color:"#bbb", marginTop:6 }}>🔒 Your card will be charged {fmt(deposit)} immediately. Powered by Stripe.</div>}
{sel && o.id==="cashapp" && (
<div style={{ marginTop:10, padding:"11px", background:"#fff", border:`1px solid ${border}`, borderRadius:3, fontFamily:sans, fontSize:13, color:"#555", lineHeight:1.8 }}>
✅ Date held <strong>72 hours</strong>. Send <strong>{fmt(deposit)}</strong> to <strong style={{color:green}}>$YummysVenue</strong> on CashApp within 72 hours.<br/>
<span style={{fontSize:11,color:muted}}>Include your name and event date in the note.</span>
</div>
)}
{sel && o.id==="cash" && (
<div style={{ marginTop:10, padding:"11px", background:"#fff", border:`1px solid ${border}`, borderRadius:3, fontFamily:sans, fontSize:13, color:"#555", lineHeight:1.8 }}>
✅ Date held <strong>72 hours</strong>. Call <strong>(618) 422-7727</strong> to arrange drop-off of <strong>{fmt(deposit)}</strong>.<br/>
<a href="tel:6184227727" style={{ display:"inline-block", marginTop:8, fontSize:12, color:ink, border:`1px solid ${ink}`, padding:"6px 16px", borderRadius:2, textDecoration:"none" }}>📞 Call Yummys Now</a>
</div>
)}
</div>
);
})}
<button onClick={handleSubmit} disabled={sending} style={{ ...btn, marginTop:8, opacity:sending?.6:1 }}>
{sending ? "Processing…" : payM==="card" ? `Pay ${fmt(deposit)} Now →` : "Submit Booking Request →"}
</button>
{err && <div style={{ fontFamily:sans, fontSize:12, color:red, marginTop:12, lineHeight:1.6 }}>{err}</div>}
</div>
</>
)}

{/* ── CONFIRM ── */}
{view === "confirm" && (
<div style={{ textAlign:"center", padding:"60px 0" }}>
<div style={{ width:64, height:64, borderRadius:"50%", background:"#f0f7f4", display:"flex", alignItems:"center", justifyContent:"center", margin:"0 auto 24px", fontSize:26, color:green }}>✓</div>
<h1 style={{ fontSize:30, fontWeight:300, letterSpacing:".04em", marginBottom:12 }}>
{payM==="card" ? "Booking Confirmed!" : "Request Received!"}
</h1>
<p style={{ fontFamily:sans, fontSize:14, color:muted, maxWidth:400, margin:"0 auto 12px", lineHeight:1.8 }}>
Thank you, <strong style={{color:ink}}>{form.name}</strong>!{" "}
{payM==="card" ? "Your deposit is processed and your date is secured." : "Your booking request is received."}{" "}
We'll be in touch at <strong style={{color:ink}}>{form.email}</strong>.
</p>
{payM==="cashapp" && (
<div style={{ padding:"14px 20px", background:"#fdf6ee", border:"1px solid #f0dfc0", borderRadius:4, fontFamily:sans, fontSize:13, color:"#7a4f1a", maxWidth:400, margin:"16px auto", lineHeight:1.8 }}>
📱 Send <strong>{fmt(deposit)}</strong> to <strong style={{color:green}}>$YummysVenue</strong> on CashApp within 72 hours.
</div>
)}
{payM==="cash" && (
<div style={{ padding:"14px 20px", background:"#fdf6ee", border:"1px solid #f0dfc0", borderRadius:4, fontFamily:sans, fontSize:13, color:"#7a4f1a", maxWidth:400, margin:"16px auto", lineHeight:1.8 }}>
📞 Call <strong>(618) 422-7727</strong> within 72 hours to arrange drop-off of <strong>{fmt(deposit)}</strong>.
</div>
)}
<div style={{ maxWidth:400, margin:"24px auto", textAlign:"left", ...card }}>
<div style={{ fontFamily:sans, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:"#bbb", marginBottom:12 }}>Summary</div>
{[["Date",fmtD(selDate)],["Package",pkg?.name],["Total",fmt(total)],["Deposit",fmt(deposit)],["Contact",form.email],["Signed By",sig]].map(([l,v])=>(
<div key={l} style={{ display:"flex", justifyContent:"space-between", fontFamily:sans, fontSize:13, padding:"6px 0", borderBottom:`1px solid #f5f3ef` }}>
<span style={{color:"#aaa"}}>{l}</span>
<span style={{color:ink}}>{v}</span>
</div>
))}
</div>
<div style={{ fontFamily:sans, fontSize:12, color:"#bbb", marginBottom:24 }}>
Questions? <a href="tel:6184227727" style={{color:ink}}>(618) 422-7727</a> · <a href="mailto:yummysvenue@gmail.com" style={{color:ink}}>yummysvenue@gmail.com</a>
</div>
<button onClick={resetAll} style={btnO}>Back to Calendar</button>
</div>
)}

</main>
</div>
);
}