// ----- Config: links you should replace ----- const CALENDLY_LINK = "https://calendly.com/YOUR_LINK"; const QBO_PAYMENT_LINK = "https://YOUR_QBO_PAYMENT_LINK"; // hosted QuickBooks payment URL (or route from your webhook) const MSA_URL = "https://wortheartists.com/msa"; const LICENSING_URL = "https://wortheartists.com/licensing"; // ----- Pricing Configuration ----- const RATES = { photoDay: 5995, videoDayBase: 5995, storycraftDay: 7795, storycraftBaseAddon: 7500, headshotIndividual: 450, headshotPerPerson: 175, headshotGroupBaseDay: 5995, studioPerHour: 135, extraImage: 60, overtimeHour: 350, travelFee: 1975, dronePerDay: 950, btsPerDay: 1200, retouchBundle10: 600, }; const MULTIPLIERS = { weekend: 0.15, holiday: 0.25, rush: 0.10 }; // ----- Minimal UI helpers (so you don't need extra UI libs) ----- function Label({ htmlFor, className = "", children }) { return {children}; } function Input(props) { return ; } function Textarea(props) { return ; } function Button({ children, className = "", ...props }) { return <button {...props} className={className}>{children}</button>; } function Checkbox({ checked, onCheckedChange, className = "" }) { return ( <input type="checkbox" checked={!!checked} onChange={(e) => onCheckedChange?.(e.target.checked)} className={className} /> ); } // Try to get Base44 SDK (optional) const getBase44 = () => { const b = (typeof window !== "undefined" ? window.base44 : null); // Some workspaces expose at window.base44.sdk return b?.sdk || b || null; }; // Money format const formatMoney = (amt) => (typeof amt === "number" ? amt.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }) : amt); // Date helpers const isWeekend = (d) => { const day = d.getDay(); return day === 0 || day === 6; }; const lastWeekOfMonth = (d) => { const last = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(); return d.getDate() > last - 7; }; const isHoliday = (d) => { const m = d.getMonth() + 1; const day = d.getDate(); if ((m === 1 && day === 1) || (m === 7 && day === 4)) return true; if ((m === 11 || m === 12) && lastWeekOfMonth(d)) return true; return false; }; const daysUntil = (dateStr) => { if (!dateStr) return Infinity; const now = new Date(); now.setHours(0,0,0,0); const target = new Date(dateStr + "T12:00:00"); target.setHours(0,0,0,0); return Math.ceil((target - now) / 86400000); }; // ===== Component ===== export default function ProjectBuilder() { const ReactRef = (typeof React !== "undefined") ? React : null; const useState = ReactRef?.useState || (()=>{}); const useEffect = ReactRef?.useEffect || (()=>{}); const [user, setUser] = useState(null); const [step, setStep] = useState(1); const [loading, setLoading] = useState(false); const [state, setState] = useState({ clientType: "corporate", date: null, rush: false, travel: false, // Services services: [], license: "limited", // Headshots headMode: "individual", headLoc: "studio", headCount: 1, studioHours: 0, // Photo photoDays: 1, photoHours: 8, photoImages: 25, photoStudioHours: 0, extraPhotogs: 0, // Video videoDays: 1, videoHours: 8, videoDeliverables: "", // Add-ons cdBase: false, cdDays: 0, droneDays: 0, btsDays: 0, retouchBundles: 0, notes: "", // Client details clientName: "", clientEmail: "", clientPhone: "", clientCompany: "", shootLocation: "", agreeMsa: false, }); // Load user from Base44 (if available) useEffect(() => { const b44 = getBase44(); (async () => { if (!b44?.auth?.me) return; try { const me = await b44.auth.me(); setUser(me); setState((prev) => ({ ...prev, clientName: me.full_name || "", clientEmail: me.email || "", clientCompany: me.company || "", })); } catch (e) { console.warn("Base44 not authenticated (optional):", e); } })(); }, []); // compute pricing each render const computePricing = () => { let creativePhoto = 0, creativeVideo = 0, cdFee = 0, extras = 0, travel = 0, adjDelta = 0, usage = 0; const flags = []; // Headshots if (state.services.includes("headshots")) { if (state.headMode === "individual" && state.headLoc === "studio" && Number(state.headCount) === 1) { extras += RATES.headshotIndividual; } else { creativePhoto += RATES.headshotGroupBaseDay; extras += Number(state.headCount || 0) * RATES.headshotPerPerson; extras += (state.headLoc === "studio" ? Number(state.studioHours || 0) * RATES.studioPerHour : 0); } } // Photo services if (state.services.some(s => ["storyPhoto","arch","portraitCampaign"].includes(s))) { const days = Number(state.photoDays || 0); creativePhoto += days * RATES.photoDay; // Overtime per day const oh = Math.max(0, Number(state.photoHours || 0) - 8); extras += oh * RATES.overtimeHour * Math.max(1, days); // Studio extras += Number(state.photoStudioHours || 0) * RATES.studioPerHour; // Extra images const included = 25 * Math.max(1, days); const extraImgs = Math.max(0, Number(state.photoImages || 0) - included); extras += extraImgs * RATES.extraImage; // Extra photographers extras += days * Number(state.extraPhotogs || 0) * (RATES.photoDay * 0.5); } // Video services if (state.services.some(s => ["storyVideo","commVideo"].includes(s))) { const vDays = Number(state.videoDays || 0); creativeVideo += vDays * RATES.videoDayBase; const voh = Math.max(0, Number(state.videoHours || 0) - 8); extras += voh * RATES.overtimeHour * Math.max(1, vDays); if (state.videoDeliverables) flags.push("Video deliverables priced via custom quote."); flags.push("Video starts at $5,995/day — final scope/crew confirmed by producer."); } // Creative Direction if (state.cdBase) cdFee += RATES.storycraftBaseAddon; if (Number(state.cdDays) > 0) cdFee += Number(state.cdDays) * RATES.storycraftDay; // Add-ons extras += Number(state.droneDays || 0) * RATES.dronePerDay; extras += Number(state.btsDays || 0) * RATES.btsPerDay; extras += Number(state.retouchBundles || 0) * RATES.retouchBundle10; // Travel if (state.travel) travel = RATES.travelFee; // Date multipliers (apply to creative only) let adj = 0; if (state.date) { const d = new Date(state.date + "T12:00:00"); if (isHoliday(d)) adj += MULTIPLIERS.holiday; else if (isWeekend(d)) adj += MULTIPLIERS.weekend; const du = daysUntil(state.date); if (du > 0 && du < 5 && !state.rush) { // set rush true if within 5 days setState((p) => ({ ...p, rush: true })); } } if (state.rush) adj += MULTIPLIERS.rush; const creativeBase = creativePhoto + creativeVideo + cdFee; const adjustedCreative = Math.round(creativeBase * (1 + adj)); adjDelta = adjustedCreative - creativeBase; // Licensing (buyout applies to photo+video only) if (state.license === "buyout") usage = Math.round((creativePhoto + creativeVideo) * 0.40); const total = adjustedCreative + extras + travel + usage; const deposit = Math.round(total * 0.50); return { creativePhoto, creativeVideo, cdFee, extras, travel, adjDelta, usage, total, deposit, flags }; }; const pricing = computePricing(); const handleServiceToggle = (service) => { setState((prev) => ({ ...prev, services: prev.services.includes(service) ? prev.services.filter((s) => s !== service) : [...prev.services, service], })); }; const handleSubmitEstimate = async () => { if (!state.clientName || !state.clientEmail) { alert("Please enter your name and email."); return; } if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.clientEmail)) { alert("Please enter a valid email address."); return; } if (!state.agreeMsa) { alert("Please agree to the MSA and Licensing Terms."); return; } setLoading(true); const b44 = getBase44(); try { // Create a project (if Base44 SDK exists) let project = null; if (b44?.entities?.Project?.create) { const payload = { project_name: `${state.services.join(", ")} - ${state.clientName}`, brand_id: user?.id || null, brand_name: state.clientName, sku: state.services.join(","), city: state.shootLocation, shoot_date: state.date || null, hours: state.photoHours || state.videoHours, quote_total: pricing.total, deposit_amount: pricing.deposit, balance_amount: pricing.total - pricing.deposit, quote_breakdown: { services: state.services, license: state.license, headshots: state.services.includes("headshots") ? { mode: state.headMode, location: state.headLoc, people: state.headCount, studioHours: state.studioHours } : null, photo: (state.services.some(s => ["storyPhoto","arch","portraitCampaign"].includes(s))) ? { days: state.photoDays, hoursPerDay: state.photoHours, imagesNeeded: state.photoImages, studioHours: state.photoStudioHours, extraPhotogs: state.extraPhotogs } : null, video: (state.services.some(s => ["storyVideo","commVideo"].includes(s))) ? { days: state.videoDays, hoursPerDay: state.videoHours, deliverables: state.videoDeliverables || null } : null, addons: { cdBase: state.cdBase, cdDays: state.cdDays, droneDays: state.droneDays, btsDays: state.btsDays, retouchBundles: state.retouchBundles }, pricing: { creativePhoto: pricing.creativePhoto, creativeVideo: pricing.creativeVideo, cdFee: pricing.cdFee, extras: pricing.extras, travel: pricing.travel, adjDelta: pricing.adjDelta, usage: pricing.usage, total: pricing.total, }, notes: state.notes, }, status: "deposit_pending", }; project = await b44.entities.Project.create(payload); } // Send email (if Base44 email integration exists) if (b44?.integrations?.Core?.SendEmail) { await b44.integrations.Core.SendEmail({ to: state.clientEmail, subject: "Your Worthe Artists Project — Estimate & Next Steps", body: `Hi ${state.clientName},\n\n` + `Thanks for building your estimate with Worthe Artists.\n\n` + `Estimated Investment: ${formatMoney(pricing.total)}\n` + `Deposit Due (50%): ${formatMoney(pricing.deposit)}\n\n` + `Services: ${state.services.join(", ") || "—"}\n` + (state.license === "buyout" ? "License: Exclusive Buyout (+40%)\n" : "License: Limited (2-year web/social)\n") + `\nWe’ll review scope and confirm availability within 2 business days.\n` + `When you’re ready, pay the deposit here: ${QBO_PAYMENT_LINK}\n\n` + `Best,\nWorthe Artists Team`, }); } // Success → Step 3 setStep(3); } catch (err) { console.error("Submit error:", err); alert("Sorry, something went wrong. Please try again or email info@wortheartists.com"); } setLoading(false); }; const canProceed = state.services.length > 0; const canSubmit = !!state.clientName && !!state.clientEmail && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.clientEmail) && state.agreeMsa; // UI return ( <div className="min-h-screen bg-white py-12"> <div className="max-w-5xl mx-auto px-6 lg:px-12"> {/* Steps */} <div className="flex items-center gap-3 mb-12"> {[1,2,3].map((n, i) => ( <React.Fragment key={n}> <div className={`flex items-center gap-3 ${step >= n ? "opacity-100" : "opacity-40"}`}> <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold ${ step >= n ? "bg-black text-white" : "bg-[#EAEAEA] text-[#707070]" }`}>{n}</div> <span className="text-sm font-medium text-black hidden sm:inline"> {n===1 ? "Configure" : n===2 ? "Your Details" : "Confirmation"} </span> </div> {n<3 && <div className="flex-1 h-[2px] bg-[#EAEAEA]"></div>} </React.Fragment> ))} </div> {/* STEP 1 */} {step === 1 && ( <div className="space-y-8"> {/* Client Type + Date */} <div className="grid md:grid-cols-2 gap-6"> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Client Type</h3> <div className="grid grid-cols-3 gap-3"> {["corporate","commercial","nonprofit"].map((type) => ( <label key={type} className={`flex items-center justify-center p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 ${ state.clientType === type ? "border-black bg-black/5" : "border-[#E7E7E7] hover:border-black/20" }`}> <input type="radio" name="clientType" value={type} checked={state.clientType === type} onChange={(e) => setState({ ...state, clientType: e.target.value })} className="hidden" /> <span className="text-sm font-semibold text-black capitalize">{type}</span> </label> ))} </div> </div> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <Label htmlFor="date" className="text-black mb-2 block">Preferred Start Date</Label> <Input id="date" type="date" value={state.date || ""} onChange={(e) => setState({ ...state, date: e.target.value })} className="bg-white border-[#DCDCDC] text-black h-12 mb-4" /> <label className="flex items-center gap-3 cursor-pointer mb-3"> <Checkbox checked={state.rush} onCheckedChange={(checked)=>setState({...state, rush: checked})} className="border-black/20" /> <span className="text-sm text-black">Rush (< 5 days) <span className="text-[#707070]">(+10%)</span></span> </label> <label className="flex items-center gap-3 cursor-pointer"> <Checkbox checked={state.travel} onCheckedChange={(checked)=>setState({...state, travel: checked})} className="border-black/20" /> <span className="text-sm text-black">Beyond 120 miles <span className="text-[#707070]">(+$1,975)</span></span> </label> <p className="text-xs text-[#707070] mt-3">Weekend (+15%) and holidays (+25%) apply automatically.</p> </div> </div> {/* Services + Licensing */} <div className="grid md:grid-cols-2 gap-6"> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Core Services</h3> <div className="grid grid-cols-2 gap-3"> {[ { value: "storyPhoto", label: "Story Day — Photo" }, { value: "storyVideo", label: "Story Day — Video" }, { value: "headshots", label: "Headshots" }, { value: "arch", label: "Architectural / Interiors" }, { value: "portraitCampaign", label: "Portrait Campaign" }, { value: "commVideo", label: "Commercial Video Campaign" }, ].map((s) => ( <label key={s.value} className={`flex items-center p-3 rounded-xl border-2 cursor-pointer transition-all duration-200 ${ state.services.includes(s.value) ? "border-black bg-black/5" : "border-[#E7E7E7] hover:border-black/20" }`}> <input type="checkbox" checked={state.services.includes(s.value)} onChange={()=>handleServiceToggle(s.value)} className="hidden" /> <span className="text-sm font-medium text-black">{s.label}</span> </label> ))} </div> <p className="text-xs text-[#707070] mt-3">Photo day includes 25 edited images. Video deliverables are custom scoped.</p> </div> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Licensing</h3> <div className="space-y-3"> {[ { value: "limited", label: "Limited — 2-year web/social (included)" }, { value: "buyout", label: "Exclusive Buyout (+40%)" }, ].map((lic) => ( <label key={lic.value} className={`flex items-center p-4 rounded-xl border-2 cursor-pointer transition-all duration-200 ${ state.license === lic.value ? "border-black bg-black/5" : "border-[#E7E7E7] hover:border-black/20" }`}> <input type="radio" name="license" value={lic.value} checked={state.license === lic.value} onChange={(e)=>setState({...state, license: e.target.value})} className="hidden" /> <span className="text-sm font-medium text-black">{lic.label}</span> </label> ))} </div> <p className="text-xs text-[#707070] mt-3"> Limited covers owned web/social. Print/OOH/Broadcast or paid media can be added in scope. </p> </div> </div> {/* Headshots */} {state.services.includes("headshots") && ( <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Headshots</h3> <div className="grid md:grid-cols-2 gap-4 mb-4"> {[ { value: "individual", label: "Individual (Studio Special $450)" }, { value: "group", label: "Group / Team (Day Rate + per person)" }, ].map((mode)=>( <label key={mode.value} className={`flex items-center p-4 rounded-xl border-2 cursor-pointer transition-all ${ state.headMode === mode.value ? "border-black bg-black/5" : "border-[#E7E7E7] hover:border-black/20" }`}> <input type="radio" name="headMode" value={mode.value} checked={state.headMode === mode.value} onChange={(e)=>setState({...state, headMode: e.target.value})} className="hidden" /> <span className="text-sm font-medium text-black">{mode.label}</span> </label> ))} </div> <div className="grid md:grid-cols-2 gap-4 mb-4"> {[ { value: "studio", label: "Our Studio" }, { value: "onlocation", label: "On Location" }, ].map((loc)=>( <label key={loc.value} className={`flex items-center p-4 rounded-xl border-2 cursor-pointer transition-all ${ state.headLoc === loc.value ? "border-black bg-black/5" : "border-[#E7E7E7] hover:border-black/20" }`}> <input type="radio" name="headLoc" value={loc.value} checked={state.headLoc === loc.value} onChange={(e)=>setState({...state, headLoc: e.target.value})} className="hidden" /> <span className="text-sm font-medium text-black">{loc.label}</span> </label> ))} </div> <div className="grid md:grid-cols-2 gap-4"> <div> <Label htmlFor="headCount" className="text-black mb-2 block"># of People</Label> <Input id="headCount" type="number" min="1" value={state.headCount} onChange={(e)=>setState({...state, headCount: parseInt(e.target.value)||1})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Group: $5,995 base day + $175 per person.</p> </div> {state.headLoc === "studio" && ( <div> <Label htmlFor="studioHours" className="text-black mb-2 block">Studio Rental Hours</Label> <Input id="studioHours" type="number" min="0" value={state.studioHours} onChange={(e)=>setState({...state, studioHours: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">$135/hr for multi-person sessions.</p> </div> )} </div> </div> )} {/* Photo Options */} {state.services.some(s => ["storyPhoto","arch","portraitCampaign"].includes(s)) && ( <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Photo Day Options</h3> <div className="grid md:grid-cols-3 gap-4 mb-4"> <div> <Label htmlFor="photoDays" className="text-black mb-2 block">How many photo days?</Label> <Input id="photoDays" type="number" min="1" max="10" value={state.photoDays} onChange={(e)=>setState({...state, photoDays: parseInt(e.target.value)||1})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Day rate: $5,995 (incl. 25 images/day)</p> </div> <div> <Label htmlFor="photoHours" className="text-black mb-2 block">Expected hours per day</Label> <Input id="photoHours" type="number" min="1" max="16" value={state.photoHours} onChange={(e)=>setState({...state, photoHours: parseInt(e.target.value)||8})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Over 8 hrs billed at $350/hr.</p> </div> <div> <Label htmlFor="photoImages" className="text-black mb-2 block">Total edited images needed</Label> <Input id="photoImages" type="number" min="1" value={state.photoImages} onChange={(e)=>setState({...state, photoImages: parseInt(e.target.value)||25})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">$60/image beyond included.</p> </div> </div> <div className="grid md:grid-cols-2 gap-4"> <div> <Label htmlFor="photoStudioHours" className="text-black mb-2 block">Studio rental (hours)</Label> <Input id="photoStudioHours" type="number" min="0" value={state.photoStudioHours} onChange={(e)=>setState({...state, photoStudioHours: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">$135/hr if needed.</p> </div> <div> <Label htmlFor="extraPhotogs" className="text-black mb-2 block">Additional photographers (per day)</Label> <Input id="extraPhotogs" type="number" min="0" max="10" value={state.extraPhotogs} onChange={(e)=>setState({...state, extraPhotogs: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Each additional billed at ½ × photo day rate/day.</p> </div> </div> </div> )} {/* Video Options */} {state.services.some(s => ["storyVideo","commVideo"].includes(s)) && ( <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Video Day Options</h3> <div className="grid md:grid-cols-3 gap-4"> <div> <Label htmlFor="videoDays" className="text-black mb-2 block">How many video days?</Label> <Input id="videoDays" type="number" min="1" max="10" value={state.videoDays} onChange={(e)=>setState({...state, videoDays: parseInt(e.target.value)||1})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Starts at $5,995/day.</p> </div> <div> <Label htmlFor="videoHours" className="text-black mb-2 block">Expected hours per day</Label> <Input id="videoHours" type="number" min="1" max="16" value={state.videoHours} onChange={(e)=>setState({...state, videoHours: parseInt(e.target.value)||8})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Over 8 hrs billed at $350/hr.</p> </div> <div> <Label htmlFor="videoDeliverables" className="text-black mb-2 block">Deliverables</Label> <select id="videoDeliverables" value={state.videoDeliverables} onChange={(e)=>setState({...state, videoDeliverables: e.target.value})} className="w-full bg-white border border-[#DCDCDC] rounded-xl h-12 px-3 text-black" > <option value="">Select…</option> <option value="15sec">15 sec</option> <option value="30sec">30 sec</option> <option value="60sec">60 sec</option> <option value="3-5min">3–5 mins</option> <option value="10-15min">10–15 mins</option> <option value="20-30min">20–30 mins</option> <option value="45min+">45 mins+</option> </select> <p className="text-xs text-[#707070] mt-1">Priced via custom quote.</p> </div> </div> </div> )} {/* Add-ons */} <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Add-ons & Upsells</h3> <div className="grid md:grid-cols-2 gap-6"> <div className="space-y-4"> <label className="flex items-center gap-3 cursor-pointer"> <Checkbox checked={state.cdBase} onCheckedChange={(c)=>setState({...state, cdBase: c})} className="border-black/20" /> <span className="text-sm text-black">Creative Direction — Base add-on (${RATES.storycraftBaseAddon.toLocaleString()})</span> </label> <div> <Label htmlFor="cdDays" className="text-black mb-2 block">Creative Direction days (${RATES.storycraftDay.toLocaleString()}/day)</Label> <Input id="cdDays" type="number" min="0" max="10" value={state.cdDays} onChange={(e)=>setState({...state, cdDays: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="droneDays" className="text-black mb-2 block">Drone capture (per shoot day)</Label> <Input id="droneDays" type="number" min="0" max="10" value={state.droneDays} onChange={(e)=>setState({...state, droneDays: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> <p className="text-xs text-[#707070] mt-1">Requires airspace/weather clearance.</p> </div> </div> <div className="space-y-4"> <div> <Label htmlFor="btsDays" className="text-black mb-2 block">BTS photo/video (per day)</Label> <Input id="btsDays" type="number" min="0" max="10" value={state.btsDays} onChange={(e)=>setState({...state, btsDays: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="retouchBundles" className="text-black mb-2 block">Retouching bundles (# of 10-image packs)</Label> <Input id="retouchBundles" type="number" min="0" value={state.retouchBundles} onChange={(e)=>setState({...state, retouchBundles: parseInt(e.target.value)||0})} className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="notes" className="text-black mb-2 block">Notes / objectives / links</Label> <Textarea id="notes" placeholder="Goals, references, mood link(s)…" value={state.notes} onChange={(e)=>setState({...state, notes: e.target.value})} className="bg-white border-[#DCDCDC] text-black min-h-[88px]" /> </div> </div> </div> </div> {/* Investment Summary */} <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-8"> <h3 className="text-2xl font-bold text-black mb-6" style={{ fontFamily: "'Gilda Display', serif" }}>Investment Summary</h3> <div className="space-y-3 mb-6"> <div className="flex justify-between text-sm"><span className="text-[#707070]">Creative (photo + video)</span><span className="text-black font-medium">{formatMoney(pricing.creativePhoto + pricing.creativeVideo)}</span></div> <div className="flex justify-between text-sm"><span className="text-[#707070]">Creative Direction</span><span className="text-black font-medium">{formatMoney(pricing.cdFee)}</span></div> <div className="flex justify-between text-sm"><span className="text-[#707070]">Extras (studio, overtime, add-ons)</span><span className="text-black font-medium">{formatMoney(pricing.extras)}</span></div> <div className="flex justify-between text-sm"><span className="text-[#707070]">Travel</span><span className="text-black font-medium">{formatMoney(pricing.travel)}</span></div> <div className="flex justify-between text-sm"><span className="text-[#707070]">Availability / Rush Adj.</span><span className="text-black font-medium">{formatMoney(pricing.adjDelta)}</span></div> <div className="flex justify-between text-sm"><span className="text-[#707070]">Licensing</span><span className="text-black font-medium">{formatMoney(pricing.usage)}</span></div> <hr className="border-[#EAEAEA]" /> <div className="flex justify-between items-center"> <span className="text-black font-bold">Estimated Investment</span> <span className="text-black font-bold text-[clamp(28px,3vw,42px)]" style={{ fontFamily: "'Gilda Display', serif" }}>{formatMoney(pricing.total)}</span> </div> <p className="text-xs text-[#374151]">Deposit due to reserve dates: <strong>{formatMoney(pricing.deposit)}</strong> (50%). Balance due upon delivery.</p> </div> {pricing.flags.length > 0 && ( <div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-xl p-3 mb-6 text-[#92400E] text-xs"> {pricing.flags.join(" ")} </div> )} <div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-xl p-3 mb-6 text-[#92400E] text-xs"> <strong>Licensing explainer:</strong> Limited license grants non-exclusive, 2-year use on your owned web + social channels. Exclusive Buyout (+40%) grants exclusive, unlimited usage across media/geographies; production/expenses excluded. Extended/paid media, print/OOH/broadcast can be added to scope. </div> <Button onClick={() => setStep(2)} disabled={!canProceed} className="w-full bg-black text-white hover:bg-[#333333] h-14 rounded-xl text-[16px] font-semibold mt-2" > Send My Estimate → </Button> <p className="text-sm text-[#707070] text-center mt-3"> We'll reply within <strong>2 business days</strong> with availability. </p> </div> </div> )} {/* STEP 2 */} {step === 2 && ( <div className="space-y-8"> <div className="grid md:grid-cols-2 gap-6"> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6 space-y-4"> <div> <Label htmlFor="clientName" className="text-black mb-2 block">Full Name</Label> <Input id="clientName" type="text" value={state.clientName} onChange={(e)=>setState({...state, clientName: e.target.value})} placeholder="Jane Doe" className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="clientEmail" className="text-black mb-2 block">Email</Label> <Input id="clientEmail" type="email" value={state.clientEmail} onChange={(e)=>setState({...state, clientEmail: e.target.value})} placeholder="you@company.com" className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="clientPhone" className="text-black mb-2 block">Phone (optional)</Label> <Input id="clientPhone" type="text" value={state.clientPhone} onChange={(e)=>setState({...state, clientPhone: e.target.value})} placeholder="(555) 555-5555" className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <label className="flex items-center gap-3 cursor-pointer"> <Checkbox checked className="border-black/20" onCheckedChange={()=>{}} /> <span className="text-sm text-black">Email me a copy of this estimate</span> </label> </div> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6 space-y-4"> <div> <Label htmlFor="clientCompany" className="text-black mb-2 block">Company</Label> <Input id="clientCompany" type="text" value={state.clientCompany} onChange={(e)=>setState({...state, clientCompany: e.target.value})} placeholder="Acme Inc." className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <div> <Label htmlFor="shootLocation" className="text-black mb-2 block">Shoot Location (city/address)</Label> <Input id="shootLocation" type="text" value={state.shootLocation} onChange={(e)=>setState({...state, shootLocation: e.target.value})} placeholder="City / Address" className="bg-white border-[#DCDCDC] text-black h-12" /> </div> <label className="flex items-start gap-3 cursor-pointer"> <Checkbox checked={state.agreeMsa} onCheckedChange={(c)=>setState({...state, agreeMsa: c})} className="border-black/20 mt-1" /> <span className="text-sm text-black"> I agree to the <a href={MSA_URL} target="_blank" rel="noopener" className="underline">Master Services Agreement</a> and{" "} <a href={LICENSING_URL} target="_blank" rel="noopener" className="underline">Licensing Terms</a>. </span> </label> {state.license === "buyout" && ( <div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-xl p-3 text-[#92400E] text-xs"> You selected <strong>Exclusive Buyout (+40%).</strong> This grants exclusive, unlimited usage. I confirm I am authorized to approve licensing on behalf of my company. </div> )} </div> </div> <div className="flex gap-4 flex-wrap"> <Button onClick={()=>setStep(1)} className="bg-transparent border-2 border-black/20 text-black hover:bg-black/5 h-14 px-8 rounded-xl text-[16px] font-semibold"> Back </Button> <Button onClick={handleSubmitEstimate} disabled={!canSubmit || loading} className="flex-1 bg-black text-white hover:bg-[#333333] h-14 rounded-xl text-[16px] font-semibold"> {loading ? "Processing..." : "Submit Estimate"} </Button> <Button onClick={()=>window.open(CALENDLY_LINK,"_blank")} className="bg-[#F4F4F5] border border-[#E5E7EB] text-black hover:bg-[#E5E7EB] h-14 px-8 rounded-xl text-[16px] font-semibold"> Book a 15-min discovery call </Button> </div> <p className="text-sm text-[#707070] text-center">After submitting, you may optionally proceed to pay the deposit to hold your date.</p> </div> )} {/* STEP 3 */} {step === 3 && ( <div className="space-y-8"> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-8 text-center"> <div className="text-[#10B981] font-bold text-xl mb-2">Thank you — your estimate has been sent.</div> <p className="text-[#707070] mb-6">Our producer will review and confirm availability within <strong>2 business days</strong>.</p> </div> <div className="grid md:grid-cols-2 gap-6"> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Next Steps</h3> <Button onClick={()=>window.open(QBO_PAYMENT_LINK,"_blank")} className="w-full bg-black text-white hover:bg-[#333333] h-14 rounded-xl text-[16px] font-semibold"> Pay 50% deposit & hold date </Button> <p className="text-xs text-[#707070] text-center mt-3">Deposit link opens QuickBooks (ACH / Card).</p> </div> <div className="bg-[#FBFBFB] border border-[#E7E7E7] rounded-2xl p-6"> <h3 className="text-xl font-bold text-black mb-4" style={{ fontFamily: "'Gilda Display', serif" }}>Prefer to chat first?</h3> <Button onClick={()=>window.open(CALENDLY_LINK,"_blank")} className="w-full bg-transparent border-2 border-black/20 text-black hover:bg-black/5 h-14 rounded-xl text-[16px] font-semibold"> Book a 15-min discovery call </Button> </div> </div> </div> )} </div> </div> ); } </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <footer role="contentinfo" data-section="footer" > <div class="block-container fb-block-outer-wrap js-fb-block-outer-wrap block-container-type--footer" id="block-container-OE9x1O" data-idhash="bl-mb9fkul9" data-blockkey="footer-details-1-lye3psul" > <div class="block-container__block" > <div class="fb-block-outer js-fb-block-outer"> <div class="fb-block-padding-wrap fb-block-padding-wrap--boxed" style="" > <div class="fb-block-subpadding-wrap"> <div class="fb-block-wrap"> <div class="fb-block js-fb-block fb-block--OE9x1O fb-block--gridWithGaps"> <div class="fb-block__elements fb-block__footer-elements"> <div class="fb-block__block-sizer"></div> <div class="fb-element fb-element--text fb-element--mvaligned-center fb-element--el-mb9fkulc fb-element--m-highest" data-uuid="0QAzlE" > <div class="fb-element__content"> <div class="fb-element-type-text element-text valign-d-center valign-t-center valign-m-center" style="--border-radius: 0; border: none; --background-color: inherit; --opacity: 1; ;" > <div class="text__text"> <h6>Find us here</h6> </div> </div> </div> </div> <div class="fb-element fb-element--text fb-element--mvaligned-center fb-element--el-mb9fkuld" data-uuid="lewjmm" > <div class="fb-element__content"> <div class="fb-element-type-text element-text valign-d-center valign-t-center valign-m-center" style="--border-radius: 0; border: none; --background-color: inherit; --opacity: 1; ;" > <div class="text__text"> <p class="ql-paragraph-1"><span data-default-color="var(--primary-paragraphs)" style="color: var(--primary-paragraphs);">Seattle, New Orleans, DC</span></p> </div> </div> </div> </div> <div class="fb-element fb-element--text fb-element--mvaligned-center fb-element--el-mb9fkule" data-uuid="3eAJ6b" > <div class="fb-element__content"> <div class="fb-element-type-text element-text valign-d-center valign-t-center valign-m-center" style="--border-radius: 0; border: none; --background-color: inherit; --opacity: 1; ;" > <div class="text__text"> <h6 class="ql-align-desktop-right"><span data-default-color="var(--primary-headings)" style="color: var(--primary-headings);">Contact us</span></h6> </div> </div> </div> </div> <div class="fb-element fb-element--text fb-element--mvaligned-center fb-element--el-mb9fkulf" data-uuid="8RA8Pb" > <div class="fb-element__content"> <div class="fb-element-type-text element-text valign-d-center valign-t-center valign-m-center" style="--border-radius: 0; border: none; --background-color: inherit; --opacity: 1; ;" > <div class="text__text"> <p class="ql-align-desktop-right ql-paragraph-1"><span style="color: var(--primary-paragraphs);">(504) 317-4600</span></p><p class="ql-align-desktop-right ql-paragraph-1"><span style="color: var(--primary-paragraphs);" data-default-color="var(--primary-paragraphs)">info@wortheartists.com</span></p> </div> </div> </div> </div> <div class="fb-element fb-element--line fb-element--mvaligned-center fb-element--el-mb9fkulg fb-element--m-lowest" data-uuid="6eAaql" > <div class="fb-element__content"> <div class="fb-element-type-line valign-d-center valign-t-center valign-m-center halign-d-center halign-t-center halign-m-center"> <div class="fb-element-type-line__line" style=" --color: var(--primary-details); --width: 100%; --height: 1px; --width-tablet: 100%; --height-tablet: 1px; --width-mobile: 100%; --height-mobile: 1px; opacity: 1; " ></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </footer> <div class="footer-badge"> <div class="footer-badge__content" style=""> <a class="footer-badge__link" target="_blank" rel="noopener noreferrer" href="https://pixieset.com/?utm_source=pixieset&utm_medium=ugc&utm_content=website"><svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd"> <path class="strokable" stroke-width=".5" d="M.25.25h19.5v19.5H.25z" /> <path class="fillable" d="M9.591 10.067v2.447c0 .529.058.857.174.985.157.182.394.273.712.273h.323v.23H7.2v-.23h.316c.355 0 .61-.116.762-.347.083-.128.124-.432.124-.91V7.086c0-.529-.056-.857-.167-.985-.161-.182-.401-.273-.719-.273H7.2V5.6h3.08c.75 0 1.344.077 1.777.232.434.155.8.416 1.097.784.297.368.446.803.446 1.307 0 .686-.226 1.244-.678 1.673-.453.43-1.092.644-1.918.644a5.41 5.41 0 0 1-.657-.043 8.56 8.56 0 0 1-.756-.13zm0-.353c.22.041.414.072.583.093.17.02.314.03.434.03.43 0 .8-.165 1.112-.498.311-.332.467-.763.467-1.292 0-.363-.074-.7-.223-1.013a1.54 1.54 0 0 0-.632-.7 1.848 1.848 0 0 0-.929-.232c-.21 0-.481.04-.812.118v3.494z" /> </g> </svg></a> </div> </div> </div> </div> <script> var sentryConfig = { dsn: 'https://dab2873be32f4034ad111643c52c98c0@sentry.io/1215049', environment: 'production', release: 'PW@master-28287', // Performance Monitoring tracesSampleRate: 0.0, // Traces Sample Rate (0.0 to 1.0) // Session Replay replaysSessionSampleRate: 0.0, // Session Replay Sample Rate (0.0 to 1.0) replaysOnErrorSampleRate: 0.0, // Session Replay (for Sessions w/ Errors) Sample Rate (0.0 to 1.0) ignoreErrors: [ 'window.fd', // Challenge timed-out. '[Cloudflare Turnstile] Error: 1106', // Potential bots. '[Cloudflare Turnstile] Error: 300', '[Cloudflare Turnstile] Error: 600', // Axios ignored messages. 'Request failed with status code 422', 'Network Error', 'Request aborted' ], ignoreUrls: ['/googleapis\.com/', '/pagead2\.googlesyndication\.com', '/jquery\/dist\/jquery\.js/', '/tiny-cookie\/tiny-cookie\.js/', '/slick-carousel\/slick\/slick\.js/', 'addthis' ], denyUrls: [ // Chrome extensions '/extensions\//i', '/^chrome:\/\//i', ], initialScope: { tags: { theme: "flex" } }, beforeSend(event) { try { // Resize Observer ignore if (event.exception?.values?.[0]?.value.startsWith('ResizeObserver loop')) return null; const frames = event.exception?.values?.[0]?.stacktrace?.frames; if (!frames || !frames.length) return event; // Ignore slick errors const framesFromSlick = frames.findIndex((frame) => { return frame?.filename && frame.filename.toLowerCase().includes('slick'); }); if (framesFromSlick !== -1) { return null; } // Ignore quill errors const framesFromQuill = frames.findIndex((frame) => { return frame?.filename && frame.filename.toLowerCase().includes('quill'); }); if (framesFromQuill !== -1) { return null; } } catch (e) { console.error('Error in the beforeSend', e); // Silence is gold } return event; }, }; </script> <script> const cookieBannerOptions = { enable: true, message: "We use cookies to optimize your experience, personalize advertisements, and analyze traffic. You can accept or reject all non-essential cookies, or click \u201cManage\u201d to customize your preferences.", linkText: "Learn more", linkUrl: '', ctaMessage: "Accept All", declineMessage: "Decline All", }; </script> <script src="https://assets-pw.pixieset.com/assets/client/js/manifest.v-8653371e.js"></script> <script src="https://assets-pw.pixieset.com/assets/client/js/vendor.v-8056ca14.js"></script> <script src="https://assets-pw.pixieset.com/assets/client/js/index.v-500ab596.js"></script> <script src="https://assets-pw.pixieset.com/assets/client/js/themes/flex_theme.v-513ba721.js"></script> <link rel="modulepreload" as="script" href="https://assets-pw.pixieset.com/assets/flex-app/flex-indexClient-CSyqHdgF.js" /><link rel="modulepreload" as="script" href="https://assets-pw.pixieset.com/assets/flex-app/flex-chunk-faro-C8yH8ECo.js" /><link rel="modulepreload" as="script" href="https://assets-pw.pixieset.com/assets/flex-app/flex-chunk-debugSharedHelpers-CL-Jwf10.js" /><script type="module" src="https://assets-pw.pixieset.com/assets/flex-app/flex-indexClient-CSyqHdgF.js"></script> <script id="js-payload-pw" class="js-dom-cleanup" type="application/json"> {"s":{"t":{"tk":"flex"},"fblks":[]},"p":{"type":0,"blks":[],"fblks":[],"navUrl":"\/test-page\/"}} </script> <script src="https://assets-pw.pixieset.com/assets/client/js/init-pw.v-49cf9085.js"></script> <!-- Flodesk universal loader (once) --> <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n].q = w[n].q || []).push(arguments); }; w[n] = w[n] || fn; var f = d.getElementsByTagName(t)[0]; var v = '?v=' + Math.floor(new Date().getTime() / (120 * 1000)) * 60; var sm = d.createElement(t); sm.async = true; sm.type = 'module'; sm.src = h + s + '.mjs' + v; f.parentNode.insertBefore(sm, f); var sn = d.createElement(t); sn.async = true; sn.noModule = true; sn.src = h + s + '.js' + v; f.parentNode.insertBefore(sn, f); })(window, document, 'script', 'https://assets.flodesk.com', '/universal', 'fd'); </script> <!-- Flodesk form init (site-wide popup OR conditionally inline) --> <script> (function initFlodesk() { // OPTIONAL: Only run this form on certain pages. // Example: show on homepage and /newsletter only. var path = location.pathname.replace(/\/+$/, ''); // trim trailing slash var shouldShow = (path === '' || path === '/' || path === '/newsletter'); function onFdReady(cb){ if (window.fd) cb(); else setTimeout(function(){ onFdReady(cb); }, 120); } onFdReady(function () { if (shouldShow) { // Default: initialize your form (popup or inline per your Flodesk form settings) window.fd('form', { formId: '691df168ac210f42801835db' }); // If you create a second Flodesk form later, add another init here with its formId // and a different `shouldShow` condition. } }); })(); </script> <!-- Crisp chat (site-wide) --> <script type="text/javascript"> window.$crisp=[]; window.CRISP_WEBSITE_ID="97ee7a29-8b76-413c-91b2-76d1cc82dace"; (function() { var d=document,s=d.createElement("script"); s.src="https://client.crisp.chat/l.js"; s.async=1; d.getElementsByTagName("head")[0].appendChild(s); })(); // Optional: move bubble to the left if you add more widgets // $crisp.push(["config", "position:reverse", true]); </script> </body> </html>