import { useState } from "react"; const GOLD = "#c9a84c"; const GOLD_DARK = "#a8872d"; const questions = [ { id: "property_type", question: "What type of property are you looking to sell?", options: ["Single-family home", "Condo or townhouse", "Waterfront / boating access", "Vacant land", "Investment / rental property"], }, { id: "location", question: "Where is the property located?", options: ["Fort Myers", "Cape Coral", "Naples / Bonita Springs", "Estero / Bonita Beach", "Other Southwest Florida"], }, { id: "timeline", question: "When are you hoping to sell?", options: ["ASAP — within 30 days", "1 to 3 months", "3 to 6 months", "6 to 12 months", "Just exploring for now"], }, { id: "situation", question: "What best describes your current situation?", options: ["I own it free and clear", "I have a mortgage", "It's a rental — currently tenanted", "It's vacant", "Going through a life event (divorce, estate, relocation)"], }, { id: "motivation", question: "What matters most to you in the sale?", options: ["Top dollar — price is everything", "Speed — I need to close fast", "Smooth process — minimal stress", "Flexibility on timing", "I want expert guidance throughout"], }, ]; function getResult(answers) { const { timeline, motivation, situation } = answers; const fast = timeline === "ASAP — within 30 days" || motivation === "Speed — I need to close fast"; const premium = motivation === "Top dollar — price is everything"; const complex = situation === "It's a rental — currently tenanted" || situation === "Going through a life event (divorce, estate, relocation)"; if (fast) { return { tag: "Fast-Track Seller", headline: "You're a strong candidate for a fast-track listing.", body: "Based on what you've shared, speed is the priority. I have a proven process to get your home priced right, staged for photos, and in front of qualified buyers quickly. Let's talk this week.", cta: "Book a Strategy Call", ctaLink: "https://outlook.office365.com/owa/calendar/[email protected]/bookings/?utm_source=seller-funnel&utm_medium=quiz-result&utm_campaign=seller-qualification", }; } if (premium) { return { tag: "Premium Seller", headline: "You're positioned to maximize your sale price.", body: "You want top dollar — and that's exactly what a strategic listing plan delivers. I'll walk you through a custom market analysis and a step-by-step approach to get you the strongest possible offer.", cta: "Get Your Free Home Value", ctaLink: "https://value.notquite7footrealtor.com/?utm_source=seller-funnel&utm_medium=quiz-result&utm_campaign=seller-qualification", }; } if (complex) { return { tag: "Complex Situation", headline: "Your situation calls for a tailored plan.", body: "Every detail matters here. Whether it's tenants, timing, or a life transition, I've navigated these before and know how to protect your interests while getting your property sold. Let's map it out together.", cta: "Book a Strategy Call", ctaLink: "https://outlook.office365.com/owa/calendar/[email protected]/bookings/?utm_source=seller-funnel&utm_medium=quiz-result&utm_campaign=seller-qualification", }; } return { tag: "Seller Strategy Ready", headline: "Let's build your 90-day selling plan.", body: "You're in a great position to plan a well-executed sale. I'll put together a custom strategy based on your timeline and goals so you can sell with confidence and clarity.", cta: "Download the Seller Strategy Guide", ctaLink: "https://guide.notquite7footrealtor.com/?utm_source=seller-funnel&utm_medium=quiz-result&utm_campaign=seller-qualification", }; } const totalSteps = questions.length; export default function SellerFunnel() { const [step, setStep] = useState(0); // 0 = intro, 1-5 = questions, 6 = calculating, 7 = result const [answers, setAnswers] = useState({}); const [selected, setSelected] = useState(null); const [result, setResult] = useState(null); const progress = step === 0 ? 0 : step > totalSteps ? 100 : Math.round((step / totalSteps) * 100); function startFunnel() { setStep(1); setSelected(null); } function handleSelect(option) { setSelected(option); } function handleNext() { if (!selected) return; const q = questions[step - 1]; const newAnswers = { ...answers, [q.id]: selected }; setAnswers(newAnswers); setSelected(null); if (step < totalSteps) { setStep(step + 1); } else { setStep(totalSteps + 1); setTimeout(() => { setResult(getResult(newAnswers)); setStep(totalSteps + 2); }, 2200); } } const styles = { wrap: { fontFamily: "var(--font-sans)", maxWidth: 560, margin: "0 auto", padding: "2rem 1rem" }, tag: { display: "inline-block", background: GOLD, color: "#fff", fontSize: 11, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", padding: "3px 10px", borderRadius: 4, marginBottom: 12 }, h1: { fontSize: 26, fontWeight: 500, color: "var(--color-text-primary)", margin: "0 0 10px", lineHeight: 1.3 }, sub: { fontSize: 15, color: "var(--color-text-secondary)", margin: "0 0 28px", lineHeight: 1.6 }, btn: { display: "inline-block", background: GOLD, color: "#fff", border: "none", borderRadius: 6, padding: "13px 28px", fontSize: 15, fontWeight: 500, cursor: "pointer", transition: "background 0.15s" }, progressWrap: { height: 4, background: "var(--color-background-secondary)", borderRadius: 2, marginBottom: 28, overflow: "hidden" }, progressBar: { height: "100%", background: GOLD, borderRadius: 2, transition: "width 0.4s ease" }, stepLabel: { fontSize: 12, color: "var(--color-text-tertiary)", marginBottom: 10 }, question: { fontSize: 20, fontWeight: 500, color: "var(--color-text-primary)", margin: "0 0 20px", lineHeight: 1.4 }, optionList: { listStyle: "none", padding: 0, margin: "0 0 24px" }, option: (active) => ({ padding: "13px 16px", marginBottom: 10, borderRadius: 8, border: active ? `1.5px solid ${GOLD}` : "1px solid var(--color-border-tertiary)", background: active ? "rgba(201,168,76,0.08)" : "var(--color-background-primary)", color: active ? GOLD_DARK : "var(--color-text-primary)", fontSize: 15, cursor: "pointer", transition: "all 0.15s", fontWeight: active ? 500 : 400, }), nextBtn: (disabled) => ({ width: "100%", padding: "14px", background: disabled ? "var(--color-background-secondary)" : GOLD, color: disabled ? "var(--color-text-tertiary)" : "#fff", border: "none", borderRadius: 8, fontSize: 15, fontWeight: 500, cursor: disabled ? "not-allowed" : "pointer", transition: "background 0.15s", }), calcWrap: { textAlign: "center", padding: "60px 20px" }, calcLabel: { fontSize: 16, color: "var(--color-text-secondary)", marginTop: 20 }, dot: (i, active) => ({ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: active ? GOLD : "var(--color-border-tertiary)", margin: "0 4px", transition: "background 0.4s", }), resultCard: { background: "var(--color-background-primary)", border: `1px solid var(--color-border-tertiary)`, borderRadius: 12, padding: "28px 24px" }, resultTag: { display: "inline-block", background: "rgba(201,168,76,0.12)", color: GOLD_DARK, fontSize: 11, fontWeight: 500, letterSpacing: "0.08em", textTransform: "uppercase", padding: "3px 10px", borderRadius: 4, marginBottom: 14 }, resultHeadline: { fontSize: 22, fontWeight: 500, color: "var(--color-text-primary)", margin: "0 0 12px", lineHeight: 1.35 }, resultBody: { fontSize: 15, color: "var(--color-text-secondary)", lineHeight: 1.7, margin: "0 0 24px" }, ctaBtn: { display: "block", textAlign: "center", background: GOLD, color: "#fff", borderRadius: 8, padding: "14px 20px", fontSize: 15, fontWeight: 500, textDecoration: "none", marginBottom: 14 }, secondaryLink: { display: "block", textAlign: "center", fontSize: 14, color: "var(--color-text-secondary)", textDecoration: "underline", marginTop: 8 }, divider: { border: "none", borderTop: "1px solid var(--color-border-tertiary)", margin: "24px 0" }, contactLine: { fontSize: 13, color: "var(--color-text-tertiary)", textAlign: "center" }, }; function CalcDots() { const [tick, setTick] = useState(0); useState(() => { const t = setInterval(() => setTick(n => n + 1), 500); return () => clearInterval(t); }, []); return ( ); } return (