import React, { useState, useMemo } from 'react'; import { Crown, Briefcase, Code, Users, Headphones, MapPin, X, ChevronRight, Sparkles, Target, Building2, UserCircle2, Rocket, GraduationCap, ShieldCheck, TrendingUp, MessageSquare, Handshake, DollarSign, Megaphone, Wrench, Smartphone, Activity, HeartHandshake, ClipboardCheck, BookOpen, Settings2, Plus } from 'lucide-react'; // ---------- Data ---------- const PHASE_META = { current: { label: 'Current', color: 'bg-forest text-cream', dot: 'bg-forest' }, 1: { label: 'Phase 1', color: 'bg-rust/15 text-rust', dot: 'bg-rust' }, 2: { label: 'Phase 2', color: 'bg-gold/20 text-amber-700', dot: 'bg-gold' }, 3: { label: 'Phase 3', color: 'bg-ink/10 text-ink', dot: 'bg-ink' }, 4: { label: 'Phase 4', color: 'bg-ink/5 text-ink-light', dot: 'bg-ink-light' }, }; const ORG = { id: 'ceo', name: 'Bharat Golchha', role: 'Founder, CEO & CTO', status: 'current', icon: Crown, location: 'Kathmandu HQ', reportsTo: 'Board / Investors', responsibilities: [ 'Company strategy & product vision', 'Technical architecture & engineering leadership', 'Fundraising & investor relations', 'Senior hiring & strategic partnerships', 'Enterprise product direction', ], focus: ['Vision', 'Architecture', 'Capital', 'Hiring'], notes: 'Gradually delegate day-to-day GTM and ops execution to focus on product, fundraising, and high-leverage technical decisions.', children: [ { id: 'pe', name: 'Product & Engineering', role: 'Department', status: 'department', icon: Code, children: [ { id: 'kush', name: 'Kush Agrawal', role: 'Full Stack Developer', status: 'current', icon: Code, location: 'Kathmandu HQ', reportsTo: 'CEO/CTO', responsibilities: ['Build frontend & backend features', 'Bug fixes & integrations', 'Performance improvements', 'Help review junior dev work'], focus: ['Full-stack', 'Integrations', 'Quality'], notes: 'Can grow into Senior Full Stack Developer or Engineering Lead.', }, { id: 'sheneeza', name: 'Sheneeza', role: 'Junior Developer', status: 'current', icon: Code, location: 'Kathmandu HQ', reportsTo: 'CEO/CTO; mentored by Kush', responsibilities: ['Component development & bug fixes', 'QA support', 'Internal tools', 'Documentation & regression testing'], focus: ['Frontend', 'QA', 'Docs'], notes: 'Path to Full Stack Developer with consistent feature ownership.', }, { id: 'qa', name: 'QA Automation Engineer', role: 'Open Role', status: 'future', phase: 3, icon: ShieldCheck, location: 'Ktm or Remote Nepal', reportsTo: 'CEO/CTO or Eng Lead', responsibilities: ['Regression testing', 'Automated test coverage', 'Release QA', 'Bug triage'], focus: ['Test Automation', 'Reliability'], }, { id: 'devops', name: 'DevOps / Infra Engineer', role: 'Open Role', status: 'future', phase: 3, icon: Settings2, location: 'Remote', reportsTo: 'CEO/CTO', responsibilities: ['Reliability & monitoring', 'CI/CD pipelines', 'Cloud cost optimization', 'Incident response'], focus: ['Infra', 'CI/CD', 'Observability'], }, { id: 'mobile', name: 'Mobile Engineer', role: 'Open Role', status: 'future', phase: 4, icon: Smartphone, location: 'Ktm or Remote', reportsTo: 'CEO/CTO or Eng Lead', responsibilities: ['iOS/Android improvements', 'React Native/Expo delivery', 'Mobile-specific UX'], focus: ['Mobile', 'RN/Expo'], }, ], }, { id: 'coo', name: 'Akaassh Jatia', role: 'Co-founder & COO', status: 'current', icon: Briefcase, location: 'Kathmandu HQ', reportsTo: 'CEO', responsibilities: [ 'Business operations & execution rhythm', 'Finance/admin oversight', 'GTM coordination & vendor management', 'Hiring process & operational planning', ], focus: ['Ops', 'Finance', 'People', 'GTM Ops'], notes: 'Should become the internal operating system of the company.', children: [ { id: 'cos', name: "Founder's Associate / Chief of Staff", role: 'Open Role', status: 'future', phase: 1, icon: UserCircle2, location: 'Kathmandu HQ', reportsTo: 'CEO/COO', responsibilities: ['Founder leverage', 'Cross-functional projects', 'Investor & board prep', 'Strategic research'], focus: ['Leverage', 'Strategy', 'Execution'], }, { id: 'finance', name: 'Finance & Admin Lead', role: 'Open Role', status: 'future', phase: 2, icon: DollarSign, location: 'Kathmandu HQ', reportsTo: 'COO', responsibilities: ['Bookkeeping & reporting', 'Vendor & payroll mgmt', 'Compliance coordination', 'Budgeting support'], focus: ['Finance', 'Admin', 'Compliance'], }, { id: 'people', name: 'People & Talent Coordinator', role: 'Open Role', status: 'future', phase: 2, icon: Users, location: 'Kathmandu HQ', reportsTo: 'COO', responsibilities: ['Recruiting pipeline', 'Onboarding & culture', 'Performance cycles', 'HR ops'], focus: ['Recruiting', 'Culture', 'HR Ops'], }, { id: 'legal', name: 'Legal / Compliance Advisor', role: 'Fractional', status: 'future', phase: 2, icon: ShieldCheck, location: 'Remote', reportsTo: 'COO', responsibilities: ['Contracts & MSAs', 'Privacy/DPA review', 'Regulatory guidance', 'IP & trademark'], focus: ['Legal', 'Compliance', 'Contracts'], }, ], }, { id: 'gtm', name: 'Growth, Community & GTM', role: 'Department', status: 'department', icon: Rocket, children: [ { id: 'harris', name: 'Harris', role: 'Community Outreach Lead', status: 'current', icon: MessageSquare, location: 'Kathmandu / Hybrid', reportsTo: 'COO → later Head of Growth', responsibilities: ['Community engagement & ambassador programs', 'Student/founder/creator outreach', 'Events & user feedback loops', 'Discord/WhatsApp/LinkedIn activation'], focus: ['Community', 'Ambassadors', 'Events'], }, { id: 'growth', name: 'Founding Growth Lead', role: 'Open Role', status: 'future', phase: 1, icon: TrendingUp, location: 'Ktm preferred · Remote SA OK', reportsTo: 'CEO', responsibilities: ['Growth strategy & acquisition experiments', 'Activation funnels & launch campaigns', 'Lifecycle marketing & referral loops', 'Onboarding metrics & reporting'], focus: ['Acquisition', 'Activation', 'Lifecycle'], notes: 'Critical Phase 1 hire — converts Springbase from "discovered randomly" to "repeatedly tried and adopted."', }, { id: 'content', name: 'Content & Social Lead', role: 'Open Role', status: 'future', phase: 1, icon: BookOpen, location: 'Ktm preferred · Remote OK', reportsTo: 'Founding Growth Lead', responsibilities: ['Short-form content & demos', 'Founder-led content support', 'Newsletters & SEO articles', 'Customer stories & comparisons'], focus: ['Content', 'Social', 'SEO'], notes: 'Can start as contractor before going full-time.', }, { id: 'partnerships', name: 'Partnerships Lead', role: 'Open Role', status: 'future', phase: 2, icon: Handshake, location: 'Ktm · Remote India/MENA later', reportsTo: 'Head of Growth or COO', responsibilities: ['University & ecosystem partnerships', 'Agency & creator partnerships', 'Reseller & referral channels', 'Community collaborations'], focus: ['Partnerships', 'Channels', 'Pilots'], }, { id: 'sales', name: 'Sales / Account Executive', role: 'Open Role', status: 'future', phase: 2, icon: Target, location: 'Remote OK · Ktm preferred', reportsTo: 'Head of Growth', responsibilities: ['Qualify inbound leads & run demos', 'Close team subscriptions', 'SMB pipeline management', 'Enterprise pilot support'], focus: ['Sales', 'Demos', 'Pipeline'], }, { id: 'perf', name: 'Performance Marketing Specialist', role: 'Open Role', status: 'future', phase: 3, icon: Megaphone, location: 'Remote', reportsTo: 'Head of Growth', responsibilities: ['Paid acquisition & retargeting', 'Landing page testing', 'Campaign analytics & CAC tracking', 'Meta/Google/LinkedIn experiments'], focus: ['Paid Ads', 'CAC', 'LP Testing'], notes: 'Do not hire too early — only after activation and retention are clear.', }, ], }, { id: 'cs', name: 'Customer Success & Support', role: 'Department', status: 'department', icon: HeartHandshake, children: [ { id: 'cs-lead', name: 'Customer Success Lead', role: 'Open Role', status: 'future', phase: 2, icon: HeartHandshake, location: 'Kathmandu HQ', reportsTo: 'COO → later CEO', responsibilities: ['Onboarding playbooks', 'Account health & retention', 'Expansion revenue', 'Customer advocacy programs'], focus: ['Retention', 'Expansion', 'Onboarding'], }, { id: 'support', name: 'Product Support Specialist', role: 'Open Role', status: 'future', phase: 2, icon: Headphones, location: 'Ktm or Remote', reportsTo: 'Customer Success Lead', responsibilities: ['Tier-1/2 support tickets', 'Bug triage & escalation', 'Help center content', 'Live chat coverage'], focus: ['Support', 'Triage', 'Docs'], }, { id: 'impl', name: 'Implementation Specialist', role: 'Open Role', status: 'future', phase: 3, icon: Wrench, location: 'Ktm or Remote', reportsTo: 'Customer Success Lead', responsibilities: ['Team & enterprise rollouts', 'Recipe/workflow setup', 'Integration configuration', 'Training sessions'], focus: ['Implementation', 'Training', 'Workflows'], }, { id: 'support-ops', name: 'Support Ops / QA Analyst', role: 'Open Role', status: 'future', phase: 3, icon: ClipboardCheck, location: 'Ktm or Remote', reportsTo: 'Customer Success Lead', responsibilities: ['Support metrics & SLAs', 'QA on support quality', 'Tooling & automation', 'Knowledge base hygiene'], focus: ['Support Ops', 'QA', 'Tooling'], }, ], }, ], }; // ---------- Card ---------- function NodeCard({ node, onClick, depth = 0 }) { const Icon = node.icon || UserCircle2; const isCurrent = node.status === 'current'; const isFuture = node.status === 'future'; const isDept = node.status === 'department'; const baseShadow = '0 18px 48px rgba(28, 25, 23, 0.08)'; const cardClasses = isDept ? 'min-h-[76px] bg-gradient-to-br from-cream-dark to-white text-ink border-ink/35 border-2 shadow-[0_18px_48px_rgba(28,25,23,0.08)] cursor-default' : isCurrent ? 'bg-gradient-to-br from-white to-cream-dark text-ink border-forest/30 hover:border-forest cursor-pointer' : isFuture ? 'bg-cream/40 text-ink border-warm-border border-dashed hover:border-rust hover:bg-cream cursor-pointer' : 'bg-white text-ink border-warm-border hover:shadow-xl cursor-pointer'; const phaseBadge = node.phase ? PHASE_META[node.phase] : isCurrent ? PHASE_META.current : null; return ( ); } // ---------- Side Panel ---------- function SidePanel({ node, onClose }) { if (!node) return null; const Icon = node.icon || UserCircle2; const isCurrent = node.status === 'current'; const phaseBadge = node.phase ? PHASE_META[node.phase] : isCurrent ? PHASE_META.current : null; return ( <>

{isCurrent ? 'Team Member' : 'Open / Future Role'}

{phaseBadge && ( {phaseBadge.label} )}

{node.name}

{node.role}

LOCATION

{node.location || '—'}

REPORTS TO

{node.reportsTo || '—'}

{node.focus && (

FOCUS AREAS

{node.focus.map((f) => ( {f} ))}

)} {node.responsibilities && (

CORE RESPONSIBILITIES

)} {node.notes && (

NOTE

{node.notes}

)}

); } // ---------- Tree renderer ---------- function Branch({ node, onSelect }) { const hasChildren = node.children && node.children.length > 0; return (

{hasChildren && (

{node.children.map((child) => ( ))}

)}

); } // ---------- App ---------- export default function SpringbaseOrgChart() { const [selected, setSelected] = useState(null); const [filter, setFilter] = useState('all'); // all | current | future const filterNode = (node) => { if (filter === 'all') return node; const keep = (n) => { if (n.status === 'department') { const kids = (n.children || []).map(keep).filter(Boolean); return kids.length ? { ...n, children: kids } : null; } if (filter === 'current' && n.status === 'current') return n; if (filter === 'future' && n.status === 'future') return n; return null; }; if (node.status === 'current' && filter === 'current') { return { ...node, children: (node.children || []).map(keep).filter(Boolean) }; } if (filter === 'future') { return { ...node, children: (node.children || []).map(keep).filter(Boolean) }; } return { ...node, children: (node.children || []).map(keep).filter(Boolean) }; }; const tree = useMemo(() => filterNode(ORG), [filter]); const stats = useMemo(() => { let current = 0, future = 0; const walk = (n) => { if (n.status === 'current') current++; if (n.status === 'future') future++; (n.children || []).forEach(walk); }; walk(ORG); return { current, future }; }, []); return (

{/* Header */}

Springbase · Organization

Org Chart & Phased Hiring Plan

From founder-led build mode to a focused growth org. Click any node to inspect responsibilities, location, and focus areas.

{/* Stats + Legend */}

{stats.current} Current

{stats.future} Open / Future

{[ { k: 'all', l: 'All' }, { k: 'current', l: 'Current Team' }, { k: 'future', l: 'Hiring Plan' }, ].map((f) => ( ))}

{/* Phase Legend */}

PHASE LEGEND

{Object.entries(PHASE_META).map(([k, v]) => (

{v.label}{k === 'current' ? ' · shipping' : k === '1' ? ' · 0–4 mo' : k === '2' ? ' · 4–8 mo' : k === '3' ? ' · 8–12 mo' : ' · 12 mo+'}

))}

{/* Tree */}

{tree && }

{/* Footer */}

setSelected(null)} />

); }