import { Form, 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 { Field, Honeypot, SelectInput, TextArea, TextInput, } from '@/components/site/form-field'; import Icon from '@/components/site/icon'; import IconTile from '@/components/site/icon-tile'; 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 StepCard from '@/components/site/step-card'; import { common, serviceOptions } from '@/content/common'; import { contactContent } from '@/content/contact'; import { officeAddress } from '@/data/site'; import { useContent } from '@/hooks/use-locale'; import { useSiteInfo } from '@/hooks/use-site-info'; import { cn } from '@/lib/utils'; import { store } from '@/routes/consultations'; type Content = typeof contactContent.id; export default function Contact() { const site = useSiteInfo(); const t = useContent(contactContent); return ( <> } >

{t.hero.assurances.map((item) => (

{item.label} {item.value}

))}

{t.hero.highlights.map((item) => (

{item.label} {item.value}

))}

{t.location.access.map((point) => (

{point.title}

{point.description}

))}

{t.steps.items.map((step, index) => ( ))}

{t.faq.items.map((faq) => (

{faq.question}

{faq.answer}

))}

{t.faq.urgentTitle}

{t.faq.urgentText}

{t.faq.whatsapp} ({site.whatsapp.label}) {t.faq.phone} ({site.phone.label})

); } function CardLabel({ children }: { children: string }) { return ( {children} ); } function OfficeCard({ t }: { t: Content }) { const site = useSiteInfo(); return (

{t.offices.label}

{t.offices.title}

{site.offices.map((office) => (

{office.name} {officeAddress(office)} {t.offices.tel} {office.phone}

))}

{t.offices.hoursLabel} {t.offices.hoursDays} {t.offices.hoursTime}

{t.offices.visitLabel} {t.offices.visitStatus} {t.offices.visitNote}

); } function ChannelsCard({ t }: { t: Content }) { const site = useSiteInfo(); const channels = [ { icon: 'call', label: t.channels.phone, value: site.phone.label, href: site.phone.href, }, { icon: 'chat', label: t.channels.whatsapp, value: site.whatsapp.label, href: `${site.whatsapp.href}?text=${encodeURIComponent(t.channels.whatsappMessage)}`, badge: t.channels.whatsappBadge, }, { icon: 'mail', label: t.channels.email, value: site.email.busdev, href: `mailto:${site.email.busdev}`, }, { icon: 'headset_mic', label: t.channels.support, value: site.email.support, href: `mailto:${site.email.support}`, badge: t.channels.supportBadge, }, ]; return (

{t.channels.label}

{t.channels.title}

{channels.map((channel) => { const external = channel.href.startsWith('http'); return (

{channel.label} {channel.value}

{channel.badge ? ( {channel.badge} ) : ( )} ); })}

); } function IncidentLineCard({ t }: { t: Content }) { return (

{t.incident.badge}

{t.incident.title}

{t.incident.slaLabel}

{t.incident.slaValue}

); } /** * Full consultation request form. * * TODO: submissions are not sent anywhere yet; wire this to a Laravel * endpoint before going live. */ function ConsultationRequestForm({ t }: { t: Content }) { const shared = useContent(common); const [submitted, setSubmitted] = useState(false); const form = t.form; return (

{form.eyebrow}

{form.title}

{form.description}

setSubmitted(true)} className="relative flex flex-col gap-6 pt-6" > {({ processing, errors }) => ( <>

({ value: label, label, }), )} required />

{form.timeline}

{form.timelines.map((timeline, index) => ( {timeline.label} {timeline.note} ))}

</Field>

{Object.keys(errors).length > 0 && (
                            <ul
                                role="alert"
                                className="border-primary/40 text-primary flex flex-col gap-1 rounded-lg border p-3 text-sm"
                            >
                                {Object.values(errors).map((message) => (
                                    <li key={message}>{message}</li>
                                ))}
                            </ul>
                        )}

<Button
                            type="submit"
                            size="block"
                            trailingIcon="arrow_forward"
                            disabled={processing}
                        >
                            {form.submit}
                        </Button>

{submitted && (
                            <div
                                role="status"
                                className="border-primary/40 bg-surface-container-high text-on-surface flex items-center gap-3 rounded-lg border p-4"
                            >
                                <Icon
                                    name="check_circle"
                                    className="text-primary text-2xl"
                                />
                                <div>
                                    <span className="font-bold">
                                        {form.successTitle}
                                    </span>
                                    <p className="text-on-surface-variant text-sm">
                                        {form.successMessage}
                                    </p>
                                </div>
                            </div>
                        )}

<div className="text-on-surface-variant flex items-center justify-center gap-2 pt-2 text-center font-mono text-[11px]">
                            <Icon
                                name="lock"
                                className="text-primary text-sm"
                            />
                            {form.privacy}
                        </div>
                    </>
                )}
            </Form>
        </Card>
    );
}

function OfficeMap({ t }: { t: Content }) {
    const site = useSiteInfo();
    return (
        <div className="bg-surface-container relative flex min-h-96 w-full flex-col justify-end overflow-hidden rounded-2xl p-4 shadow-xl sm:p-6 lg:min-h-[480px]">
            <img
                src="/images/probindo/map-jakarta.png"
                alt={t.location.mapAlt}
                loading="lazy"
                className="absolute inset-0 h-full w-full object-cover dark:brightness-75 dark:hue-rotate-180 dark:invert"
            />
            <div className="from-surface via-surface/40 absolute inset-0 bg-gradient-to-t to-transparent" />
            <div className="relative mt-40 grid grid-cols-1 gap-4 md:grid-cols-2">
                {site.offices.map((office) => (
                    <div
                        key={office.name}
                        className="border-outline-variant/40 bg-surface-container/95 flex flex-col gap-3 rounded-xl border p-5 shadow-2xl backdrop-blur-md"
                    >
                        <div className="flex items-center gap-3">
                            <IconTile icon={office.icon} tone="solid" />
                            <div>
                                <span className="text-primary font-mono text-[11px] font-semibold uppercase">
                                    {office.district}
                                </span>
                                <h3 className="font-display text-on-surface text-lg font-bold">
                                    {office.name}
                                </h3>
                            </div>
                        </div>
                        <p className="text-on-surface-variant text-sm leading-relaxed">
                            {officeAddress(office)}
                        </p>
                        {office.maps_url && (
                            <ButtonLink
                                href={office.maps_url}
                                variant="secondary"
                                size="sm"
                                icon="directions"
                                className="self-start"
                            >
                                {t.location.directions}
                            </ButtonLink>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
}