"use client"; import * as React from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowRight, ArrowLeft, Check, Calendar, Building2, Mail, Phone, Sparkles, Clock, ShieldCheck, } from "lucide-react"; import { services, company } from "@/lib/content"; import { Reveal } from "@/components/ui-stratops/reveal"; import { cn } from "@/lib/utils"; import { useToast } from "@/hooks/use-toast"; type FormData = { name: string; role: string; organisation: string; email: string; phone: string; serviceIds: string[]; timeframe: string; context: string; }; const steps = [ { id: 0, label: "You", description: "Who you are" }, { id: 1, label: "Need", description: "What you're solving" }, { id: 2, label: "When", description: "Timing & context" }, { id: 3, label: "Confirm", description: "Review & send" }, ]; const timeframes = [ "Immediately — next 30 days", "1–3 months", "3–6 months", "Exploratory — defining the problem", ]; export function DiscoverySection() { const { toast } = useToast(); const [step, setStep] = React.useState(0); const [submitted, setSubmitted] = React.useState(false); const [form, setForm] = React.useState({ name: "", role: "", organisation: "", email: "", phone: "", serviceIds: [], timeframe: "", context: "", }); const update = (patch: Partial) => setForm((f) => ({ ...f, ...patch })); const toggleService = (id: string) => setForm((f) => ({ ...f, serviceIds: f.serviceIds.includes(id) ? f.serviceIds.filter((s) => s !== id) : [...f.serviceIds, id], })); const canNext = () => { if (step === 0) return form.name.trim() && form.email.trim() && form.organisation.trim(); if (step === 1) return form.serviceIds.length > 0; if (step === 2) return form.timeframe.trim(); return true; }; const next = () => { if (!canNext()) return; if (step < steps.length - 1) setStep((s) => s + 1); }; const back = () => setStep((s) => Math.max(0, s - 1)); const submit = (e: React.FormEvent) => { e.preventDefault(); if (!canNext()) return; // Demo submission: explicitly labelled setSubmitted(true); toast({ title: "Discovery request received", description: "This is a demo form. In production, this would route to info@stratopsadvisory.co.za and notify the founders.", }); }; return (
{/* Left — pitch */}
Book a session

Ready to{" "} transform?

Tell us where your business needs to go. We'll show you the shortest, most compliant route to get there — starting with a free, no-obligation discovery session.

    {[ { icon: Clock, label: "60-minute discovery call — free" }, { icon: ShieldCheck, label: "POPIA-aligned, NDA on request" }, { icon: Sparkles, label: "Founder-led — no account managers" }, ].map(({ icon: Icon, label }) => (
  • {label}
    • ))}

Prefer email?

{company.primaryEmail}

{company.region}

{/* Right — multi-step form */}
{submitted ? (

Discovery request received

Thanks, {form.name.split(" ")[0] || "there"}. This is a demo form — in production your request would route to{" "} {company.primaryEmail}{" "} and one of the founders would respond within one business day.

) : ( {/* Stepper */}
{steps.map((s, i) => ( ))}
{/* Step 1: You */} {step === 0 && ( Your details update({ name: v })} placeholder="e.g. Thandi Mokoena" />
update({ role: v })} placeholder="e.g. COO" /> update({ organisation: v })} placeholder="Organisation name" />
update({ email: v })} placeholder="name@company.co.za" /> update({ phone: v })} placeholder="+27 ..." /> )} {/* Step 2: Need */} {step === 1 && ( What do you need help with?

Pick one or more service lines — we'll match the right partner.

{services.map((s) => { const active = form.serviceIds.includes(s.id); const Icon = s.icon; return ( ); })} )} {/* Step 3: When */} {step === 2 && ( When do you need this?
{timeframes.map((tf) => ( ))}