import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Phone, ShieldCheck, Building2, Warehouse, ShoppingBag, Hospital, ChevronRight, Clock, Star, LineChart } from "lucide-react";/**
* CCTV Focus UK – Commercial Landing Mock
* Brand palette: blue (#1e40af), white (#ffffff), silver/grey (#e5e7eb / #9ca3af)
* Sections:
* - Sticky header CTA
* - Hero with 3-field lead form + callback SLA + trust badges
* - Sector grid (Offices, Retail, Warehousing, Healthcare)
* - Proof tiles (mini case studies)
* - Risk Score micro-commitment (3-question quiz with progress)
* - How it works (3 steps)
* - Footer CTA
*
* Notes:
* - Pure Tailwind (no external UI deps) + framer-motion for subtle motion
* - Form is functional (client-side only) with minimal UX validation
*/const brand = {
blue: "#1e40af", // Tailwind blue-800
silver: "#e5e7eb", // gray-200
silverDark: "#9ca3af", // gray-400
};function StickyCTA() {
return ((null);function validate() {
if (!name.trim() || !email.trim() || !phone.trim()) {
return "Please complete all three fields.";
}
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
return "Please enter a valid work email.";
}
if (!/^[0-9+()\-\s]{7,}$/.test(phone)) {
return "Please enter a valid phone number.";
}
return null;
}function handleSubmit(e: React.FormEvent) {
e.preventDefault();
const err = validate();
if (err) return setError(err);
setError(null);
onSubmit({ name, email, phone });
}return (
);
}function SectorGrid() {
const sectors = [
{ title: "Offices", icon: Building2, points: ["Visitor & car park monitoring", "GDPR-compliant retention", "Staff safety"] },
{ title: "Retail", icon: ShoppingBag, points: ["Reduce shrinkage", "HD evidence for incidents", "Lone-worker support"] },
{ title: "Warehousing", icon: Warehouse, points: ["Perimeter & loading bay", "ANPR for gates", "Health & safety"] },
{ title: "Healthcare", icon: Hospital, points: ["CQC-compliant oversight", "Restricted areas", "Incident review tools"] },
];
return (
);
}function ProgressBar({ step }: { step: number }) {
const pct = (step / 3) * 100;
return (
{open && (
)}
);
}export default function App() {
const [modalOpen, setModalOpen] = useState(false);
const [prefill, setPrefill] = useState({});function handleLeadSubmit(data: any) {
setPrefill(data);
setModalOpen(true); // Kick off the Risk Score quiz (FITD + endowed progress)
}return (
{/* HERO CONTENT */}
{/* FOOTER CTA */}
Get my risk survey setModalOpen(false)} prefill={prefill} />
);
}
);
}function TrustBadges() {
return (
{sectors.map(({ title, icon: Icon, points }) => (
))}
);
}function ProofTiles() {
const tiles = [
{ kpi: "-32%", label: "shrinkage in 90 days", blurb: "Regional retail chain after camera reposition & analytics." },
{ kpi: "6.5 mo", label: "ROI payback", blurb: "Warehouse gate ANPR + perimeter alerts." },
{ kpi: "4.9★", label: "Google rating", blurb: "Consistent aftercare & remote support." },
];
return (
{tiles.map(t => (
))}
);
}function HowItWorks() {
const steps = [
{ n: 1, title: "Site survey", copy: "Engineer visit or video walk-through to assess risks & coverage." },
{ n: 2, title: "Plan & quote", copy: "You’ll receive a clear plan, camera map & price range." },
{ n: 3, title: "Install & aftercare", copy: "Certified install, training, and ongoing monitoring options." },
];
return ({t.kpi}
{t.label}
{t.blurb}
How it works
{steps.map(s => (
))}
Step {s.n}
{s.title}
{s.copy}
);
}function RiskScoreModal({ open, onClose, prefill }: { open: boolean; onClose: () => void; prefill: any }) {
const [step, setStep] = useState(1);
const [answers, setAnswers] = useState({ siteType: "", camsOnSite: "", pain: "" });function next() { setStep(s => Math.min(3, s + 1)); }
function back() { setStep(s => Math.max(1, s - 1)); }function done() {
// In production: submit answers + prefill to backend; then route to calendar
onClose();
alert(`Thanks ${prefill?.name || ""}! Step 1/3 complete. We’ll tailor your plan next.`);
}return (
Quick Risk Score
{["Office","Retail","Warehouse","Healthcare","Other"].map(o => (
))}
{["Yes","No"].map(o => (
))}
setAnswers(a=>({...a, pain:e.target.value}))} className="w-full rounded-xl border border-gray-300 px-3 py-2" placeholder="e.g., theft in loading bay, vandalism, health & safety" />
)}Step {step} of 3
{step < 3 ? (
) : (
)}
CCTV Focus UK
Commercial Security
Stop shrinkage & safety incidents before they start.
Enterprise-grade CCTV for Offices, Retail, Warehousing & Healthcare — designed, installed and maintained across the West Midlands.
Solutions by sector
Results our clients care about
Ready for a tailored plan?
Book a free risk survey — we’ll call within 15 minutes (Mon–Fri 8–6).