import { Head } from '@inertiajs/react'; import { useState } from 'react'; import { Button, ButtonLink } from '@/components/site/button'; import Card from '@/components/site/card'; import Eyebrow from '@/components/site/eyebrow'; import FeatureCard from '@/components/site/feature-card'; import Icon from '@/components/site/icon'; import IconTile from '@/components/site/icon-tile'; import ImageCard from '@/components/site/image-card'; import PageHero from '@/components/site/page-hero'; import RichText from '@/components/site/rich-text'; import Section from '@/components/site/section'; import SectionHeader from '@/components/site/section-header'; import CtaBanner from '@/components/site/sections/cta-banner'; import { clientsContent } from '@/content/clients'; import type { ProjectSector } from '@/data/projects'; import { projectsBySector, projectsInProgram, yearRange, } from '@/data/projects'; import { company, consultationUrl, officeAddress, offices } from '@/data/site'; import { useContent } from '@/hooks/use-locale'; import { cn } from '@/lib/utils'; import { contact } from '@/routes'; type Content = typeof clientsContent.id; export default function Clients() { const t = useContent(clientsContent); return ( <> } description={t.hero.description} > {t.hero.stats.map((stat) => (
{stat.value} {stat.caption}
))}
{t.heritage.eyebrow}

{t.heritage.title}

{t.heritage.description}

{t.heritage.scsrTitle}

{t.heritage.scsrText}

{t.heritage.images.map((image, index) => ( ))}
{t.reasons.items.map((reason) => ( ))}
{t.reliability.eyebrow}

{t.reliability.title}

{t.reliability.description}

{t.reliability.metrics.map(([value, label]) => (
{value} {label}
))}
{t.cta.primary} {t.cta.secondary} } />
{company.name}

{t.office.title}

{t.office.description}

{offices.map((office) => (
{office.name}

{officeAddress(office)}

))}
); } const PREVIEW_COUNT = 8; function SectorPortfolio({ t }: { t: Content }) { const sectors: ProjectSector[] = ['government', 'private', 'soe']; const [sector, setSector] = useState('government'); const [expanded, setExpanded] = useState(false); const items = projectsBySector(sector); const visible = expanded ? items : items.slice(0, PREVIEW_COUNT); const selectSector = (next: ProjectSector) => { setSector(next); setExpanded(false); }; return (
{sectors.map((option) => ( ))}
} />

{t.portfolio.description}

    {visible.map((project) => (
  • {project.year}
    {project.title} {project.scope && ( {project.scope} )} {project.client}
    {project.program === 'erp' && ( {t.portfolio.erpBadge} )}
    • ))}
{items.length > PREVIEW_COUNT && ( )}
); } const RELATED_PREVIEW = 4; function FeaturedPrograms({ t }: { t: Content }) { return (
{t.cases.items.map((item, index) => { const related = projectsInProgram(item.program); const remaining = related.length - RELATED_PREVIEW; return (
{t.cases.label} 0{index + 1}

{item.title}

{item.client}

{item.summary}

{related.length} {t.cases.projects}
{yearRange(related)}
{t.cases.related}
    {related .slice(0, RELATED_PREVIEW) .map((project) => (
  • {project.year} {project.title}
    • ))}
{remaining > 0 && ( {t.cases.more.replace( '{count}', String(remaining), )} )}
); })}
); } /** Hidden until real client testimonials are added to the content file. */ function Testimonials({ t }: { t: Content }) { if (t.testimonials.items.length === 0) { return null; } return (
{t.testimonials.items.map((testimonial) => (
{Array.from({ length: 5 }, (_, i) => ( ))}
“{testimonial.quote}”
{testimonial.initials}
{testimonial.role}
{testimonial.organization}
))}
); } function RetentionGauge({ t }: { t: Content }) { return (
{t.reliability.gaugeLabel}
99.8% {t.reliability.gaugeCaption}

{t.reliability.gaugeNote}

); }