import { Link, useParams, Navigate } from 'react-router-dom';
import {
ArrowRight, ArrowLeft, Check, TrendingUp, Target, BarChart3,
Zap, DollarSign, Users, Gauge,
} from 'lucide-react';
import {
ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid,
} from 'recharts';
// ─── Brand colors (mirrors LandingPage) ───
const COLORS = {
bg: '#0a0f1a',
cardBg: 'rgba(255,255,255,0.04)',
green: '#22c55e',
blue: '#3b82f6',
amber: '#f59e0b',
};
interface IndustryMetric {
label: string;
value: string;
sub: string;
icon: React.ElementType;
}
interface IndustryUseCase {
title: string;
desc: string;
}
interface IndustryData {
slug: string;
name: string;
tagline: string;
headline: string;
subhead: string;
metrics: IndustryMetric[];
useCases: IndustryUseCase[];
chartLabel: string;
chart: { month: string; baseline: number; withCC: number }[];
checklist: string[];
}
const INDUSTRIES: Record<string, IndustryData> = {
'home-services': {
slug: 'home-services',
name: 'Home Services',
tagline: 'HVAC · Plumbing · Electrical · Landscaping',
headline: 'Run every truck like a profit center',
subhead:
'Home service companies live and die by booked-call rate, average ticket, and technician utilization. Command Center pulls your CRM, ads, and books into one forecast so you know this week — not next quarter — whether you will hit your number.',
metrics: [
{ label: 'Booked-call rate', value: '+18%', sub: 'avg. lift after cascading goals rollout', icon: Target },
{ label: 'Average ticket', value: '+$212', sub: 'from real-time upsell coaching signals', icon: DollarSign },
{ label: 'Tech utilization', value: '87%', sub: 'vs. 71% industry median', icon: Gauge },
{ label: 'Forecast accuracy', value: '±4%', sub: 'weekly revenue landing forecast', icon: TrendingUp },
],
useCases: [
{ title: 'Dispatch-to-revenue visibility', desc: 'See how today\u2019s call board translates into this month\u2019s landing number, by trade and by tech.' },
{ title: 'Seasonal demand forecasting', desc: 'Model shoulder-season dips before they hit cash flow and shift ad spend into the right zip codes early.' },
{ title: 'Membership program tracking', desc: 'Track maintenance agreement attach rate as a cascading goal for every CSR and technician.' },
],
chartLabel: 'Monthly revenue vs. baseline ($K)',
chart: [
{ month: 'Jan', baseline: 310, withCC: 310 },
{ month: 'Feb', baseline: 295, withCC: 318 },
{ month: 'Mar', baseline: 330, withCC: 365 },
{ month: 'Apr', baseline: 355, withCC: 410 },
{ month: 'May', baseline: 372, withCC: 448 },
{ month: 'Jun', baseline: 390, withCC: 486 },
],
checklist: [
'Connect ServiceTitan, Housecall Pro, or your CRM in minutes',
'Booked-call rate and average ticket as live KPIs',
'Per-technician scorecards tied to the company forecast',
'Ad spend recommendations by service line and zip',
],
},
roofing: {
slug: 'roofing',
name: 'Roofing',
tagline: 'Residential · Commercial · Storm restoration',
headline: 'From lead to shingle, know your landing number',
subhead:
'Roofing margins swing with material costs, crew availability, and storm cycles. Command Center forecasts your close rate, backlog burn-down, and gross margin per square — so you can commit to jobs you can actually staff and price.',
metrics: [
{ label: 'Close rate', value: '+9pts', sub: 'with rep-level cascading targets', icon: Target },
{ label: 'Gross margin / square', value: '+6.4%', sub: 'from material cost drift alerts', icon: DollarSign },
{ label: 'Backlog visibility', value: '10 wks', sub: 'forward crew-loading forecast', icon: BarChart3 },
{ label: 'Storm-surge response', value: '48 hrs', sub: 'to re-forecast after weather events', icon: Zap },
],
useCases: [
{ title: 'Storm-cycle revenue modeling', desc: 'Re-forecast pipeline within hours of a hail event and rank markets by expected insurance claim volume.' },
{ title: 'Material cost drift alerts', desc: 'Catch shingle and underlayment price creep before it eats the margin you quoted three weeks ago.' },
{ title: 'Crew capacity planning', desc: 'See backlog burn-down against crew availability so sales never commits to a date production can\u2019t hit.' },
],
chartLabel: 'Quarterly gross margin trend (%)',
chart: [
{ month: 'Q1 \u201924', baseline: 24, withCC: 24 },
{ month: 'Q2 \u201924', baseline: 23, withCC: 26 },
{ month: 'Q3 \u201924', baseline: 25, withCC: 29 },
{ month: 'Q4 \u201924', baseline: 24, withCC: 30 },
{ month: 'Q1 \u201925', baseline: 23, withCC: 31 },
{ month: 'Q2 \u201925', baseline: 24, withCC: 32 },
],
checklist: [
'Insurance vs. retail job mix tracked separately',
'Margin-per-square as a first-class KPI',
'Supplier price drift monitoring',
'Crew-loading forecast tied to sales pipeline',
],
},
remodeling: {
slug: 'remodeling',
name: 'Remodeling',
tagline: 'Kitchen & bath · Whole-home · Design-build',
headline: 'Long projects, short feedback loops',
subhead:
'Remodelers get surprised at the end of 12-week projects. Command Center tracks slippage, change-order capture, and design-to-build conversion continuously — so a project that\u2019s drifting off budget shows up in week 2, not week 11.',
metrics: [
{ label: 'Change-order capture', value: '+31%', sub: 'billable scope changes actually invoiced', icon: DollarSign },
{ label: 'Slippage detection', value: 'Wk 2', sub: 'vs. end-of-project surprises', icon: Gauge },
{ label: 'Design→build conversion', value: '+12pts', sub: 'with pipeline-stage forecasting', icon: Target },
{ label: 'Referral pipeline', value: '38%', sub: 'of new revenue tracked to past clients', icon: Users },
],
useCases: [
{ title: 'Project margin tracking', desc: 'Live budget-vs-actual per project, rolled up to a company landing number your bookkeeper doesn\u2019t have to rebuild.' },
{ title: 'Change-order discipline', desc: 'Every scope change gets a dollar value and a status — no more free work discovered at final invoice.' },
{ title: 'Design-phase pipeline', desc: 'Forecast build revenue from design contracts signed today, 4\u20136 months ahead of the crews.' },
],
chartLabel: 'Project margin: quoted vs. delivered (%)',
chart: [
{ month: 'Jan', baseline: 18, withCC: 18 },
{ month: 'Feb', baseline: 16, withCC: 19 },
{ month: 'Mar', baseline: 17, withCC: 21 },
{ month: 'Apr', baseline: 15, withCC: 22 },
{ month: 'May', baseline: 17, withCC: 24 },
{ month: 'Jun', baseline: 16, withCC: 25 },
],
checklist: [
'Budget-vs-actual per project, updated continuously',
'Change-order pipeline with capture-rate KPI',
'Design-to-build conversion forecasting',
'Client referral revenue attribution',
],
},
};
export function IndustryPage() {
const { slug } = useParams<{ slug: string }>();
const data = slug ? INDUSTRIES[slug] : undefined;
if (!data) {
return <Navigate to="/" replace />;
}
return (
<div className="min-h-screen text-white" style={{ background: COLORS.bg }}>
{/* Nav */}
<header className="z-50 pt-3 px-4">
<nav
className="max-w-6xl mx-auto rounded-full border border-white/10 backdrop-blur-xl pl-5 pr-2.5 h-14 flex items-center justify-between shadow-xl shadow-black/30"
style={{ background: 'rgba(10,16,28,0.7)' }}
>
<Link to="/" className="flex items-center gap-2.5">
<div
className="w-7 h-7 rounded-lg flex items-center justify-center font-black text-[11px]"
style={{ background: COLORS.green }}
>
CC
</div>
<span className="font-bold text-sm tracking-tight">Command Center</span>
</Link>
<div className="flex items-center gap-2">
<Link
to="/auth/login"
className="text-sm text-white/70 hover:text-white transition-colors px-3 py-2 min-h-[44px] flex items-center"
>
Log in
</Link>
<Link
to="/auth/signup"
className="px-5 py-2.5 rounded-full text-sm font-semibold transition-all hover:opacity-90 min-h-[44px] flex items-center"
style={{ background: COLORS.green }}
>
Start free trial
</Link>
</div>
</nav>
</header>
{/* Hero */}
<section className="pt-16 pb-12 px-6">
<div className="max-w-6xl mx-auto">
<Link to="/" className="inline-flex items-center gap-1 text-sm text-white/50 hover:text-white transition-colors mb-6">
<ArrowLeft size={14} /> Back to home
</Link>
<div
className="text-xs font-semibold uppercase tracking-wider mb-3"
style={{ color: COLORS.blue }}
>
{data.tagline}
</div>
<h1 className="text-4xl md:text-5xl font-black mb-4 max-w-3xl">{data.headline}</h1>
<p className="text-lg text-white/60 leading-relaxed max-w-3xl mb-8">{data.subhead}</p>
<div className="flex flex-wrap gap-3">
<Link
to="/auth/signup"
className="px-6 py-3 rounded-full text-sm font-semibold flex items-center gap-2 transition-all hover:opacity-90"
style={{ background: COLORS.green }}
>
Start free trial <ArrowRight size={16} />
</Link>
<Link
to="/#demo"
className="px-6 py-3 rounded-full text-sm font-semibold border border-white/20 hover:border-white/40 transition-colors"
>
Book a demo
</Link>
</div>
</div>
</section>
{/* Metrics */}
<section className="py-12 px-6" style={{ background: 'rgba(255,255,255,0.02)' }}>
<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4">
{data.metrics.map((m) => {
const Icon = m.icon;
return (
<div
key={m.label}
className="p-5 rounded-2xl border border-white/10"
style={{ background: COLORS.cardBg }}
>
<Icon size={18} style={{ color: COLORS.green }} className="mb-3" />
<div className="text-2xl font-black">{m.value}</div>
<div className="text-sm font-semibold text-white/80 mt-1">{m.label}</div>
<div className="text-xs text-white/50 mt-1">{m.sub}</div>
</div>
);
})}
</div>
</section>
{/* Chart + checklist */}
<section className="py-16 px-6">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center">
<div>
<h2 className="text-2xl md:text-3xl font-black mb-3">
What {data.name.toLowerCase()} operators see
</h2>
<p className="text-white/60 mb-6">
Illustrative example of the operating picture Command Center builds for {data.name.toLowerCase()} companies.
</p>
<ul className="space-y-3">
{data.checklist.map((item) => (
<li key={item} className="flex items-start gap-3 text-sm text-white/80">
<Check size={16} style={{ color: COLORS.green }} className="mt-0.5 shrink-0" />
{item}
</li>
))}
</ul>
</div>
<div
className="p-5 rounded-2xl border border-white/10"
style={{ background: COLORS.cardBg }}
>
<div className="text-sm font-semibold text-white/70 mb-4">{data.chartLabel}</div>
<div className="h-64">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={data.chart} margin={{ top: 5, right: 5, bottom: 0, left: -20 }}>
<defs>
<linearGradient id="ccGreen" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor={COLORS.green} stopOpacity={0.35} />
<stop offset="100%" stopColor={COLORS.green} stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid stroke="rgba(255,255,255,0.06)" vertical={false} />
<XAxis dataKey="month" tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fill: 'rgba(255,255,255,0.5)', fontSize: 12 }} axisLine={false} tickLine={false} />
<Tooltip
contentStyle={{ background: '#111827', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 8 }}
labelStyle={{ color: '#fff' }}
/>
<Area type="monotone" dataKey="baseline" name="Baseline" stroke="rgba(255,255,255,0.35)" fill="transparent" strokeDasharray="4 4" />
<Area type="monotone" dataKey="withCC" name="With Command Center" stroke={COLORS.green} fill="url(#ccGreen)" strokeWidth={2} />
</AreaChart>
</ResponsiveContainer>
</div>
</div>
</div>
</section>
{/* Use cases */}
<section className="py-12 px-6" style={{ background: 'rgba(255,255,255,0.02)' }}>
<div className="max-w-6xl mx-auto">
<h2 className="text-2xl md:text-3xl font-black mb-8 text-center">
How {data.name.toLowerCase()} teams use Command Center
</h2>
<div className="grid md:grid-cols-3 gap-6">
{data.useCases.map((uc) => (
<div
key={uc.title}
className="p-6 rounded-2xl border border-white/10"
style={{ background: COLORS.cardBg }}
>
<h3 className="font-bold text-lg mb-2">{uc.title}</h3>
<p className="text-sm text-white/60 leading-relaxed">{uc.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* Other industries */}
<section className="py-12 px-6">
<div className="max-w-6xl mx-auto">
<h3 className="text-lg font-bold mb-4 text-white/70">Also built for</h3>
<div className="flex flex-wrap gap-3">
{Object.values(INDUSTRIES)
.filter((i) => i.slug !== data.slug)
.map((i) => (
<Link
key={i.slug}
to={`/industries/${i.slug}`}
className="px-5 py-2.5 rounded-full text-sm font-semibold border border-white/15 hover:border-white/40 transition-colors flex items-center gap-2"
>
{i.name} <ArrowRight size={14} style={{ color: COLORS.green }} />
</Link>
))}
</div>
</div>
</section>
{/* CTA */}
<section className="py-16 px-6 text-center" style={{ background: 'rgba(34,197,94,0.06)' }}>
<div className="max-w-3xl mx-auto">
<h2 className="text-3xl font-black mb-4">See your landing number this week</h2>
<p className="text-white/60 mb-8">
Connect your CRM and books, and Command Center builds your first forecast in under an hour.
</p>
<Link
to="/auth/signup"
className="inline-flex items-center gap-2 px-8 py-3.5 rounded-full font-semibold transition-all hover:opacity-90"
style={{ background: COLORS.green }}
>
Start free trial <ArrowRight size={16} />
</Link>
</div>
</section>
<footer className="py-8 px-6 border-t border-white/10 text-center text-sm text-white/40">
© {new Date().getFullYear()} Command Center. All rights reserved.
</footer>
</div>
);
}
export default IndustryPage;