/* ── PRICING PAGE — Simple, honest pricing + comparison ─────────── */ function PricingPage() { const [billing, setBilling] = useState("monthly"); // Toggle slider sizing — measure the active button so the gradient pill // matches its real width (the "Annual SAVE 20%" button is wider than "Monthly"). const btnRefs = useRef({ monthly: null, yearly: null }); const toggleRef = useRef(null); const [sliderPos, setSliderPos] = useState({ left: 4, width: 0 }); useEffect(() => { const btn = btnRefs.current[billing]; if (btn) setSliderPos({ left: btn.offsetLeft, width: btn.offsetWidth }); }, [billing]); useEffect(() => { const onResize = () => { const btn = btnRefs.current[billing]; if (btn) setSliderPos({ left: btn.offsetLeft, width: btn.offsetWidth }); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, [billing]); const PLANS = [ { name: "Starter", audience: "Solo agents & small teams getting started", price: 499, features: ["Up to 500 leads", "1 integration source", "Booking Calendar", "1 Booking Link", "Basic dashboard", "2 team members"], cta: "Get Started", featured: false }, { name: "Growth", audience: "Growing teams with multiple lead sources", price: 2499, features: ["Unlimited leads", "All 4 integrations", "Lead analysis & reporting", "5 Booking Links", "5 team members"], cta: "Get Started", featured: false }, { name: "Pro", audience: "Teams wanting automated email follow-ups", price: 4999, features: ["Everything in Growth", "Email Automation (3 flows)", "CSV data export", "10 Booking Links", "10 team members"], cta: "Get Started", featured: false }, { name: "Business", audience: "High-volume orgs with WhatsApp-first comms", price: 8999, features: ["Everything in Pro", "WhatsApp Automation (5 flows)", "Customisable WA templates", "Custom booking domain", "Unlimited Booking Links", "20 team members"], cta: "Get Started", featured: true }, { name: "Enterprise", audience: "Full automation stack, unlimited scale", price: 14999, features: ["Everything in Business", "SMS Automation (4 flows)", "Unlimited team members", "API access", "Priority support & onboarding"], cta: "Contact us", featured: false }, ]; const priceFor = (p) => billing === "yearly" ? Math.round(p.price * 0.8) : p.price; // Comparison table const TABLE = [ { group: "CRM", rows: [ { feature: "Leads", vals: ["500", "Unlimited", "Unlimited", "Unlimited", "Unlimited"] }, { feature: "Pipeline board", vals: [true, true, true, true, true] }, { feature: "Lead analysis", vals: [false, true, true, true, true] }, { feature: "Customisable dashboard",vals: [false, true, true, true, true] }, { feature: "CSV export", vals: [false, false, true, true, true] }, { feature: "API access", vals: [false, false, false, false, true] }, ], }, { group: "Integrations", rows: [ { feature: "Integration sources", vals: ["1", "All 4", "All 4", "All 4", "All 4"] }, ], }, { group: "Booking", rows: [ { feature: "Booking Calendar", vals: [true, true, true, true, true] }, { feature: "Booking Links", vals: ["1", "5", "10", "Unlimited", "Unlimited"] }, { feature: "Custom booking domain", vals: [false, false, false, true, true] }, ], }, { group: "Automation", rows: [ { feature: "Email automation", vals: [false, false, true, true, true] }, { feature: "WhatsApp automation", vals: [false, false, false, true, true] }, { feature: "SMS automation", vals: [false, false, false, false, true] }, ], }, { group: "Team", rows: [ { feature: "Team members", vals: ["2", "5", "10", "20", "Unlimited"] }, { feature: "Priority support", vals: [false, false, false, false, true] }, ], }, ]; const FAQS = [ { q: "What happens after my 15-day trial?", a: "Your workspace stays active in read-only mode for 30 days, so nothing is lost. Pick a plan whenever you're ready — or export your data anytime. It's yours." }, { q: "Can I change my plan later?", a: "Yes. Upgrade or downgrade from your billing settings at any time. Pro-rated automatically; no calls with sales required." }, { q: "How is the seat limit enforced?", a: "Each plan includes the listed team members. Add more seats from settings at ₹299/seat (Growth), ₹499/seat (Pro+). No surprise charges." }, { q: "Are automation flows included or billed separately?", a: "All listed flows are included with no extra cost. You can build unlimited custom flows on top via n8n or webhooks on every plan." }, { q: "Can I cancel anytime?", a: "Yes — cancel from settings in one click. We'll keep your data available for export for 60 days after cancellation." }, { q: "Is there a setup fee?", a: "No setup fee, ever. Migration assistance is free on Growth and above. Enterprise gets a dedicated onboarding manager." }, ]; const [openFaq, setOpenFaq] = useState(0); return (
{/* ════════ HERO ════════ */}
Start now to capture your sales

Choose the plan that fits your team. Change or cancel anytime — no contracts, no hidden fees.

{/* Billing toggle */}
{["monthly", "annual"].map(b => { const val = b === "annual" ? "yearly" : b; return ( ); })}
{/* ════════ PLAN CARDS ════════ */}
{PLANS.map((p, i) => (
{p.featured && ( Best fit )}

{p.name}

₹ {priceFor(p).toLocaleString("en-IN")} /mo
{billing === "yearly" && (

billed yearly · ₹{(priceFor(p) * 12).toLocaleString("en-IN")}/yr

)}

{p.audience}

{p.cta}
    {p.features.map(f => (
  • {f}
    • ))}
))}
{/* ════════ COMPARISON TABLE ════════ */}

Compare plans
{/* Header row */}

Feature

{PLANS.map((p) => (
{p.featured && }

{p.name}

₹{priceFor(p).toLocaleString("en-IN")}/mo

))}
{/* Groups + rows */} {TABLE.map((g, gi) => (

{g.group}

{g.rows.map((row, ri) => (

{row.feature}

{row.vals.map((v, vi) => { const featured = PLANS[vi].featured; return (
{v === true ? ( ) : v === false ? ( ) : ( {v} )}
); })}
))}
))}
{/* ════════ FAQ ════════ */}

FAQS
{FAQS.map((it, i) => { const isOpen = openFaq === i; return (

{it.a}

); })}
{/* ════════ STILL NOT SURE CTA ════════ */}

Talk to our team. We'll help you pick the right fit and get you set up in under 20 minutes.

); } Object.assign(window, { PricingPage });