import type { ComponentProps, ReactNode } from 'react' import { ArrowRight } from 'lucide-react' import { DeliveryPipelineIllustration } from '@/components/illustrations/delivery-pipeline' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { cn } from '@/lib/utils' export type ProcessStep = { title: string description: string } export type ProcessSectionOneProps = ComponentProps<'section'> & { eyebrow?: string heading?: string description?: string steps?: readonly ProcessStep[] action?: { label: string; href: string } illustration?: ReactNode } const defaultSteps: readonly ProcessStep[] = [ { title: 'Align on the outcome', description: 'We turn goals, constraints, and customer context into a focused delivery plan.', }, { title: 'Build in visible sprints', description: 'You see working progress every week and can shape decisions before they become costly.', }, { title: 'Launch with confidence', description: 'Quality checks, documentation, and handoff are part of delivery rather than an afterthought.', }, ] export function ProcessSectionOne({ className, eyebrow = 'How we work', heading = 'A clear path from the first conversation to a confident launch', description = 'A practical delivery model for service teams, studios, and product partners that keeps clients close to the work.', steps = defaultSteps, action = { label: 'Plan a project', href: '#contact' }, illustration = , ...props }: ProcessSectionOneProps) { return (

{eyebrow}

{heading}

{description}

{illustration}

{String(index + 1).padStart(2, '0')}

{step.title}

{step.description}

) } export default ProcessSectionOne

{heading}

{step.title}