/* Presentation — the full-screen, customer-facing Customer Presentation Mode. Three screens: Why Us (social proof) · Our Solution (door-style showcase) · Investment (3-tier reveal → signature → Agreed Investment → contract). All data is app-owned (window.REVIEWS, window.DOOR_STYLES, the pricing engine) — no live E31 calls happen during a pitch. */ const P = window.Ds1Threshold_e046d3; // One-time keyframe injection for the pricing-tier reveal. function ensurePresStyles() { if (document.getElementById("od-pres-anim")) return; const s = document.createElement("style"); s.id = "od-pres-anim"; s.textContent = "@keyframes odTierIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes odHeroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}"; document.head.appendChild(s); } const prefersReduced = () => window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; // ── Stars ───────────────────────────────────────────────────────────────── function StarRow({ rating = 5, size = 16 }) { const GOLD = "#E0A12C"; return ( {[0,1,2,3,4].map((i) => ( ))} ); } function ReviewCard({ r }) { return (
{r.source}

“{r.content}”

{r.name}
{r.location}
); } function ValueScreen() { const reviews = window.REVIEWS || { totalReviewsCount: 0, reviewsData: [] }; const pillars = (window.VALUE_FEATURES || []).filter((f) => f.title !== "Worry-Free Guarantee"); const guarantee = (window.VALUE_FEATURES || []).find((f) => f.title === "Worry-Free Guarantee"); return (
{/* Social proof hero */}
Trusted Across San Antonio
{reviews.totalReviewsCount.toLocaleString()} five-star reviews
{reviews.averageRating} average · verified homeowners
{/* Featured reviews */}
{reviews.reviewsData.slice(0, 3).map((r, i) => )}
{/* Value pillars */} Why One Day
{pillars.map((f) => (

{f.title}

{f.desc}

))}
{/* Worry-Free Guarantee band */} {guarantee && (

The Absolutely, Positively, Worry-Free Guarantee

{guarantee.desc}

)} {/* Press */} As Seen In
{(window.PRESS || []).map((b) => )}
); } // ── Door-slab illustration (on-brand stand-in until real photography) ─────── function StyleDoor({ variant = "shaker2", hex = "#EAE7DD", w = "100%", h = 184 }) { const lum = (() => { const c = (hex || "#eee").replace("#",""); const r=parseInt(c.slice(0,2),16),g=parseInt(c.slice(2,4),16),b=parseInt(c.slice(4,6),16); return (0.299*r+0.587*g+0.114*b); })(); const dark = lum < 140; const line = dark ? "rgba(255,255,255,0.20)" : "rgba(0,0,0,0.12)"; const inset = { borderRadius: 3, boxShadow: `inset 0 0 0 1.5px ${line}`, background: dark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.028)" }; const pad = 14, gap = 9; const body = (() => { switch (variant) { case "flat": return
; case "shaker1": return
; case "shaker2": return
; case "panel3": return
; case "panel2": return
; case "panel6": return (
{[0,1,2,3,4,5].map((i) =>
)}
); case "louver": return
{Array.from({length:7}).map((_,i)=>
)}
; case "lite": return
; case "barn": return
; default: return
; } })(); return (
{body}
); } function CoreChips({ cores, small }) { const avail = Object.keys(cores || {}).filter((k) => cores[k]); return (
{avail.map((c) => ( {c} ))}
); } function SolutionScreen() { const state = window.__OD_ACTIVE || window.DEFAULT_QUOTE_STATE; const cust = Object.assign({}, window.CUSTOMER, (state && state.customer) || {}); const doors = (state.interior || []).reduce((s, l) => s + (Number(l.qty) || 0), 0); const today = new Date().toLocaleString("en-US", { month: "long", day: "numeric", year: "numeric" }); const groups = window.DOOR_STYLES || []; const allStyles = groups.flatMap((g) => g.styles); const quoteStyle = (state.interior || [])[0] && (state.interior || [])[0].style; const defaultName = (allStyles.find((s) => quoteStyle && quoteStyle.toLowerCase().includes(s.display_name.toLowerCase())) || allStyles[0] || {}).display_name; const [selName, setSelName] = React.useState(defaultName); const sel = allStyles.find((s) => s.display_name === selName) || allStyles[0]; // paint (whites only, kept compact — full custom picker lives in the Calculator) const co = state.contractOpts || (state.contractOpts = {}); const [, force] = React.useReducer((x) => x + 1, 0); const WHITES = (window.SW_COLORS || []).filter((c) => c.std); const paintName = co.paintName || "Pure White"; const curPaint = WHITES.find((c) => c.name === paintName) || WHITES[1] || WHITES[0]; const paintHex = (curPaint && curPaint.hex) || "#EEEBE1"; return (
{/* Personalized header */}
Prepared For You

{cust.name}

{cust.address}

Your Project · {today}
{doors} interior doors · installed in one day
{/* Selected style — "here's what's going in your home" */} {sel && (
Your Selection

{sel.display_name}

{sel.description}

Material
{sel.material_type}
Texture
{sel.texture}
Finish
{paintName}
)} {/* Paint (compact whites) */} Factory Finish · Sherwin-Williams
{WHITES.map((c) => ( { co.paintName = c.name; co.paintCode = c.code; force(); }} /> ))}
{/* Gallery by category */} {groups.map((g) => (
{g.category}
{g.styles.map((s) => { const on = s.display_name === selName; return ( ); })}
))}
); } // Reused small painted-door + swatch (line items / paint chips) function Swatch({ n, c, hex, on, onClick }) { return ( ); } function PricingScreen({ phase, payment, setPayment, signed, sigName, setSigName, onSign }) { const quote = window.OneDayPricing.computeQuote(window.__OD_ACTIVE || window.DEFAULT_QUOTE_STATE, window.PRICING_CFG); const animate = !prefersReduced(); const tiers = [ { key: "retail", label: "National Fair Trade Retail", price: quote.ladder.retail, sub: "Good until 1 year from today" }, { key: "advertised", label: "Currently Advertised", price: quote.ladder.advertised, sub: "Good for 30 days from today" }, { key: "today", label: "Today's Investment", price: quote.ladder.today, sub: "Valid today only — expires at midnight" }, ]; const deposit = quote.deposit; const savings = Math.round(quote.ladder.retail - quote.ladder.today); return (
{phase === 2 ? "Today's Investment — Valid Today Only" : phase === 1 ? "Currently Advertised Investment" : "National Fair Trade Retail Investment"}
{/* Tiers — future ones never rendered; each reveal animates in */}
{tiers.map((t, idx) => { if (idx > phase) return null; const isCurrent = idx === phase; return (
); })}
{/* Payment options */} Current Payment Options

(50% Down, Balance Upon Completion)

setPayment("check")} label="Check" /> setPayment("cc")} label="Credit Card" />
50% Deposit{fmtD(deposit)}
Balance on Completion{fmtD(deposit)}
 Easy Monthly Payments
{quote.financing.map((plan) => ( setPayment(plan.id)} label={plan.label} trailing={{fmt(plan.monthly)}/mo} /> ))}
{/* Close — signature + dark-forest Agreed Investment hero */} {phase === 2 && (
Customer Authorization

By signing, I authorize this proposal at the investment shown and agree to the terms presented.

setSigName(e.target.value)} placeholder="Your name" style={{ width: "100%", boxSizing: "border-box", height: 64, padding: "0 16px", borderRadius: "var(--radius-lg)", border: `2px solid ${signed ? "var(--color-primary-deep)" : "var(--border-default)"}`, background: "var(--surface-sunken)", outline: "none", fontFamily: "var(--font-signature)", fontStyle: "italic", fontSize: 28, color: "var(--text-primary)" }} />
{new Date().toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })} {!signed ? Sign & Authorize : Authorized}
Agreed Investment
{fmtD(quote.ladder.today)}
You save {fmt(savings)} today!
50% Deposit Today{fmtD(deposit)}
Balance on Completion{fmtD(deposit)}
Prepared by One Day Doors & Closets of San Antonio · valid today only
)}
); } function Presentation({ onClose, onContract }) { React.useEffect(() => { ensurePresStyles(); }, []); const [screen, setScreen] = React.useState("value"); const [phase, setPhase] = React.useState(0); const [payment, setPayment] = React.useState("942"); const [sigName, setSigName] = React.useState(""); const [signed, setSigned] = React.useState(false); const tabs = [["value", "Why Us"], ["solution", "Our Solution"], ["pricing", "Investment"]]; const order = ["value", "solution", "pricing"]; return (
{/* Top bar */}
{tabs.map(([key, label]) => ( ))}
{screen === "pricing" && }
{/* Body */}
{screen === "value" && } {screen === "solution" && } {screen === "pricing" && setSigned(true)} />}
{/* Bottom action bar */}
{ const i = order.indexOf(screen); if (i > 0) setScreen(order[i-1]); else onClose && onClose(); }}>← Back
{screen === "pricing" && phase === 0 && setPhase(1)}>Reveal Currently Advertised →} {screen === "pricing" && phase === 1 && setPhase(2)}>Reveal Today's Investment →} {screen === "pricing" && phase === 2 && Generate Contract →}
{screen !== "pricing" ? { const i = order.indexOf(screen); if (i < 2) setScreen(order[i+1]); }}>Next → :
}
); } window.Presentation = Presentation;