import { useState, useEffect } from "react"; const PLANS = [ { id: "starter", name: "Starter", price: 0, period: "forever", credits: 10, tagline: "Test the waters", features: ["Basic supplier profile", "10 lead credits included", "Browse anonymized lead feed", "Email notifications for matching leads"] }, { id: "growth", name: "Growth", price: 149, period: "/mo", credits: 30, tagline: "For active suppliers", popular: true, features: ["Everything in Starter", "30 lead credits/month", "Directory listing included", "Company logo on profile", "Priority in search results", "Monthly market report"] }, { id: "pro", name: "Pro", price: 399, period: "/mo", credits: 100, tagline: "Dominate your market", features: ["Everything in Growth", "100 lead credits/month", "Verified supplier badge", "Featured in newsletter", "Custom brand color listing", "Quarterly strategy call", "Auto-unlock hot leads"] }, ]; const ADDONS = [ { id: "directory", name: "Directory Listing", description: "Appear in the Padelnomics supplier directory", price: 49, period: "/mo", boost: "+120% discoverability", icon: "📍", includedIn: ["growth", "pro"] }, { id: "logo", name: "Logo Display", description: "Show your company logo on your listing and lead responses", price: 29, period: "/mo", boost: "+40% more clicks", icon: "🏷", includedIn: ["growth", "pro"] }, { id: "highlight", name: "Highlighted Listing", description: "Stand out with a colored background in search results", price: 39, period: "/mo", boost: "+65% more views", icon: "✦", includedIn: [] }, { id: "verified", name: "Verified Badge", description: "Earn trust with a verified supplier checkmark", price: 49, period: "/mo", boost: "+55% more inquiries", icon: "✓", includedIn: ["pro"] }, { id: "sticky_week", name: "Sticky Top — 1 Week", description: "Pin your listing to the top of the directory for 7 days", price: 79, period: "one-time", boost: "2× more views", icon: "📌", includedIn: [] }, { id: "sticky_month", name: "Sticky Top — 1 Month", description: "Pin to the top for 30 days", price: 199, period: "one-time", boost: "6× more views", icon: "🔝", includedIn: [] }, { id: "newsletter", name: "Newsletter Feature", description: "Featured in our weekly newsletter to 2,400+ padel entrepreneurs", price: 99, period: "/mo", boost: "+120 impressions/wk", icon: "📨", includedIn: ["pro"] }, { id: "brand_color", name: "Custom Brand Color", description: "Replace default highlight with your brand color", price: 59, period: "/mo", boost: "+80% brand recall", icon: "🎨", includedIn: ["pro"] }, ]; const CREDIT_PACKS = [ { amount: 25, price: 99, perCredit: "€3.96" }, { amount: 50, price: 179, perCredit: "€3.58", popular: true }, { amount: 100, price: 329, perCredit: "€3.29" }, { amount: 250, price: 749, perCredit: "€3.00" }, ]; const CATEGORIES = ["Court Construction", "Court Surfaces", "Lighting Systems", "Steel Structures", "Glass Walls", "Flooring", "Full Turnkey", "Consulting", "Architecture", "Financing"]; export default function App() { const [step, setStep] = useState(1); const [plan, setPlan] = useState("growth"); const [addons, setAddons] = useState(new Set()); const [credits, setCredits] = useState(null); const [form, setForm] = useState({ company: "", name: "", email: "", country: "", categories: [] }); const [anim, setAnim] = useState(true); useEffect(() => { setAnim(false); const t = setTimeout(() => setAnim(true), 50); return () => clearTimeout(t); }, [step]); const toggle = (id) => { if (ADDONS.find(a => a.id === id).includedIn.includes(plan)) return; setAddons(p => { const n = new Set(p); n.has(id) ? n.delete(id) : n.add(id); return n; }); }; const incl = (id) => ADDONS.find(a => a.id === id).includedIn.includes(plan); const active = (id) => incl(id) || addons.has(id); const monthly = () => { let t = PLANS.find(p => p.id === plan).price; addons.forEach(id => { const a = ADDONS.find(x => x.id === id); if (a?.period === "/mo" && !a.includedIn.includes(plan)) t += a.price; }); return t; }; const oneTime = () => { let t = 0; addons.forEach(id => { const a = ADDONS.find(x => x.id === id); if (a?.period === "one-time" && !a.includedIn.includes(plan)) t += a.price; }); if (credits) t += CREDIT_PACKS.find(p => p.amount === credits)?.price || 0; return t; }; const totalCr = () => { let c = PLANS.find(p => p.id === plan).credits; if (credits) c += credits; return c; }; const vis = () => { let m = 1; ["directory","logo","highlight","verified","newsletter","brand_color","sticky_week","sticky_month"].forEach((id, i) => { if (active(id)) m += [0.5,0.3,0.6,0.4,0.8,0.5,0.8,2.0][i]; }); return m; }; const $ = { bg: "#FFFFFF", soft: "#F8FAFC", muted: "#F1F5F9", border: "#E2E8F0", borderDark: "#CBD5E1", text: "#0F172A", sub: "#334155", dim: "#64748B", faint: "#94A3B8", blue: "#1D4ED8", blueLight: "#3B82F6", bluePale: "#DBEAFE", blueGhost: "#EFF6FF", blueDark: "#1E40AF", green: "#16A34A", greenPale: "#DCFCE7", gold: "#D97706", goldPale: "#FEF3C7", }; const font = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"; const mono = "'JetBrains Mono', 'SF Mono', monospace"; return (
{/* Header */}
P
padelnomics

Supplier Platform

Get discovered by padel entrepreneurs. Unlock verified leads. Grow your business.

{/* Progress */}
{["Plan", "Boost", "Credits", "Account"].map((label, i) => { const n = i + 1, on = step === n, done = step > n; return (
done && setStep(n)} style={{ display: "flex", alignItems: "center", gap: "7px", cursor: done ? "pointer" : "default", padding: "6px 14px", borderRadius: "999px", background: on ? $.blueGhost : "transparent", border: `1.5px solid ${on ? $.blue : done ? $.blueLight : $.border}` }}>
{done ? "✓" : n}
{label}
{i < 3 &&
n ? $.blue : $.border }} />}
); })}
{/* STEP 1 */} {step === 1 && (
{PLANS.map(p => { const sel = plan === p.id; return (
setPlan(p.id)} style={{ position: "relative", background: sel ? $.blueGhost : $.bg, border: `2px solid ${sel ? $.blue : $.border}`, borderRadius: "16px", padding: "26px 22px", cursor: "pointer", boxShadow: sel ? "0 4px 20px rgba(29,78,216,0.10)" : "0 1px 3px rgba(0,0,0,0.04)" }}> {p.popular &&
Most Popular
}
{p.tagline}
{p.name}
{p.price === 0 ? "Free" : `€${p.price}`} {p.price > 0 && {p.period}}
⚡ {p.credits} credits{p.id !== "starter" ? "/mo" : ""}
{p.features.map((f, i) =>
✓{f}
)}
{sel && ✓}
); })}
)} {/* STEP 2 */} {step === 2 && (

Boost your visibility

Add-ons to maximize your reach. Items in your plan show as included.

{ADDONS.map(a => { const inc = incl(a.id), act = active(a.id); return (
toggle(a.id)} style={{ background: act ? $.blueGhost : $.bg, border: `1.5px solid ${act ? (inc ? $.blueLight : $.blue) : $.border}`, borderRadius: "14px", padding: "16px", cursor: inc ? "default" : "pointer", opacity: inc ? 0.6 : 1, position: "relative", boxShadow: "0 1px 3px rgba(0,0,0,0.04)" }}> {inc &&
Included
}
{act && ✓}
{a.icon}{a.name}

{a.description}

€{a.price}{a.period} {a.boost}
); })}
Your visibility multiplier
3 ? $.gold : $.blue }}>{vis().toFixed(1)}×vs. basic profile
3 ? `linear-gradient(90deg, ${$.blue}, ${$.gold})` : $.blue, borderRadius: "999px", transition: "width 0.4s ease-out" }} />
)} {/* STEP 3 */} {step === 3 && (

Need more lead credits?

Your plan includes {PLANS.find(p => p.id === plan).credits} credits{plan !== "starter" ? "/mo" : ""}. Buy extra at volume discount.

How credits work
{[["🏠", "Small project", "2-court residential", "5–8 credits"], ["🏢", "Medium project", "4–6 court club", "15–25 credits"], ["🏟", "Large project", "8+ court complex", "30–40 credits"]].map(([e, l, d, c]) => (
{e}
{l}
{d}
{c}
))}
{CREDIT_PACKS.map(pk => { const sel = credits === pk.amount; return (
setCredits(sel ? null : pk.amount)} style={{ position: "relative", background: sel ? $.blueGhost : $.bg, border: `2px solid ${sel ? $.blue : $.border}`, borderRadius: "14px", padding: "20px", cursor: "pointer", textAlign: "center", boxShadow: sel ? "0 4px 16px rgba(29,78,216,0.10)" : "0 1px 3px rgba(0,0,0,0.04)" }}> {pk.popular &&
Best Value
}
{pk.amount}
credits
€{pk.price}
{pk.perCredit}/credit
); })}
You can always buy more later. Skip to start with plan credits only.
)} {/* STEP 4 */} {step === 4 && (

Create your account

{[["company", "Company name", "e.g. PadelCourt GmbH"], ["name", "Your name", "Full name"], ["email", "Email", "you@company.com"]].map(([k, l, p]) => (
setForm(f => ({ ...f, [k]: e.target.value }))} style={{ width: "100%", background: $.bg, border: `1.5px solid ${$.border}`, borderRadius: "10px", padding: "11px 14px", fontSize: "14px", color: $.text, fontFamily: font, outline: "none", boxSizing: "border-box" }} onFocus={e => e.target.style.borderColor = $.blue} onBlur={e => e.target.style.borderColor = $.border} />
))}
{CATEGORIES.map(cat => { const a = form.categories.includes(cat); return ; })}
{/* Summary */}
Order Summary
{PLANS.find(p => p.id === plan).name}{PLANS.find(p => p.id === plan).price === 0 ? "Free" : `€${PLANS.find(p => p.id === plan).price}/mo`}
Includes {PLANS.find(p => p.id === plan).credits} credits{plan !== "starter" ? "/mo" : ""}
{addons.size > 0 &&
Add-ons
{Array.from(addons).map(id => { const a = ADDONS.find(x => x.id === id); return
{a.icon} {a.name}€{a.price}{a.period}
; })}
} {credits &&
Extra Credits
⚡ {credits} credits€{CREDIT_PACKS.find(p => p.amount === credits)?.price}
}
Total credits⚡ {totalCr()}
Visibility boost 3 ? $.gold : $.blue }}>{vis().toFixed(1)}×
Monthly€{monthly()}
{oneTime() > 0 &&
Due today (one-time)€{oneTime()}
}
{monthly() > 0 ? "Cancel anytime. No lock-in." : "No credit card required."}
)}
); }