import { Head } from '@inertiajs/react';
import { useState } from 'react';
import type { FormEvent } from 'react';
import { Button, ButtonLink } from '@/components/site/button';
import Card from '@/components/site/card';
import Eyebrow from '@/components/site/eyebrow';
import {
    Field,
    SelectInput,
    TextArea,
    TextInput,
} from '@/components/site/form-field';
import Icon from '@/components/site/icon';
import IconTile from '@/components/site/icon-tile';
import PageHero, { Strong } from '@/components/site/page-hero';
import Section from '@/components/site/section';
import SectionHeader from '@/components/site/section-header';
import StepCard from '@/components/site/step-card';
import { company, officeAddress, offices, serviceOptions } from '@/data/site';
import { cn } from '@/lib/utils';

const whatsappMessage =
    'Halo Lead Consultant PT Probindo Artika Jaya, saya ingin berkonsultasi mengenai kebutuhan sistem IT/ERP.';

const assurances = [
    {
        icon: 'schedule',
        label: 'SLA Respon Inquiry',
        value: '< 2 Jam Hari Kerja',
    },
];

const highlights = [
    {
        icon: 'bolt',
        label: 'Respon Cepat',
        value: '< 2 Jam untuk Inquiry Enterprise',
    },
    {
        icon: 'assignment_turned_in',
        label: 'GAP Analysis Awal',
        value: 'Gratis & Bebas Komitmen',
    },
    {
        icon: 'gavel',
        label: 'Perjanjian Kerahasiaan',
        value: 'NDA Terpadu & Terjamin Hukum',
    },
    {
        icon: 'travel_explore',
        label: 'Cakupan Deployment',
        value: 'Nasional (On-Premise & Cloud)',
    },
];

const channels = [
    {
        icon: 'call',
        label: 'Telepon Kantor Resmi (PABX)',
        value: company.phone.label,
        href: company.phone.href,
        trailing: 'arrow_outward',
    },
    {
        icon: 'chat',
        label: 'Hotline WhatsApp Enterprise',
        value: company.whatsapp.label,
        href: `${company.whatsapp.href}?text=${encodeURIComponent(whatsappMessage)}`,
        badge: 'Chat Langsung',
    },
    {
        icon: 'mail',
        label: 'Korespondensi, RFI & Tender',
        value: company.email.busdev,
        href: `mailto:${company.email.busdev}`,
        trailing: 'arrow_outward',
    },
    {
        icon: 'headset_mic',
        label: 'Helpdesk Dukungan Klien Aktif',
        value: company.email.support,
        href: `mailto:${company.email.support}`,
        badge: 'Ticketing 24/7',
    },
];

const industryOptions = [
    { value: 'migas', label: 'Sektor Minyak, Gas & Energi Terbarukan' },
    { value: 'baja', label: 'Fabrikasi & Pengolahan Baja / Heavy Metals' },
    { value: 'manufaktur', label: 'Manufaktur, Supply Chain & Logistik' },
    {
        value: 'holding',
        label: 'Korporasi Holding & Badan Usaha Milik Negara (BUMN)',
    },
    { value: 'retail', label: 'Komersial, Distribusi & Ritel Skala Besar' },
    { value: 'finansial', label: 'Jasa Finansial, Perbankan & Asuransi' },
    { value: 'lainnya', label: 'Sektor Lainnya / Multi-Divisional' },
];

const timelines = [
    { value: 'immediate', label: 'Segera', note: '< 1 Bulan' },
    { value: 'quarter', label: '1 – 3 Bulan', note: 'Q1 - Q2' },
    { value: 'midterm', label: 'Semester Depan', note: 'Q3 - Q4' },
    { value: 'feasibility', label: 'Eksplorasi', note: 'Studi Kelayakan' },
];

const accessPoints = [
    {
        icon: 'directions_car',
        title: 'Akses Tol JORR',
        description:
            'Langsung terhubung dengan Gerbang Tol Veteran & Cipete, memudahkan kunjungan delegasi antar-kota dan bandara Soekarno-Hatta (35 menit).',
    },
    {
        icon: 'train',
        title: 'Stasiun MRT Fatmawati & Lebak Bulus',
        description:
            'Hanya 5–8 menit dari stasiun MRT utama jalur Bundaran HI–Lebak Bulus, efisien untuk pertemuan tatap muka tim arsitektur sistem.',
    },
    {
        icon: 'meeting_room',
        title: 'Executive Presentation Suite',
        description:
            'Dilengkapi ruang presentasi arsitektur berteknologi tinggi untuk simulasi live demo ERP, load balancing review, dan workshop tim lintas divisi.',
    },
];

const onboardingSteps = [
    {
        title: 'Respon Cepat & GAP Review',
        badge: '1 - 2 Jam',
        description:
            'Lead Consultant PAJ menelaah parameter awal industri Anda dan menyusun agenda sesi pendalaman awal sesuai fokus kendala sistem Anda.',
        footer: { icon: 'verified', label: 'Bebas Biaya Awal' },
    },
    {
        title: 'NDA & Briefing Teknis',
        badge: 'H+1 Sesi',
        description:
            'Penandatanganan Perjanjian Kerahasiaan (NDA) resmi agar korporasi leluasa mendiskusikan workflow rahasia, struktur akuntansi, dan logistik.',
        footer: { icon: 'lock_clock', label: 'Legal Binding 100%' },
    },
    {
        title: 'Discovery & Cetak Biru',
        badge: 'Minggu Ke-1',
        description:
            'Penyusunan arsitektur sistem komprehensif, pemetaan modul tailor-fit vs standar Odoo ERP, linimasa milestone, dan estimasi TCO investasi.',
        footer: { icon: 'architecture', label: 'Blue-Print Arsitektur' },
    },
    {
        title: 'Live Demo & PoC Uji Coba',
        badge: 'Proof-of-Concept',
        description:
            'Simulasi alur transaksi riil atau uji coba automasi dengan sampel data operasional untuk memvalidasi kelayakan sebelum implementasi massal.',
        footer: { icon: 'play_circle', label: 'Simulasi Riil Enterprise' },
    },
];

const faqs = [
    {
        question:
            'Apakah sesi konsultasi awal dan audit GAP dikenakan biaya konsultan?',
        answer: 'Tidak. Diskusi penjajakan kebutuhan awal, penelaahan GAP proses bisnis, dan penyusunan proposal rekomendasi arsitektur awal bersifat gratis dan tanpa komitmen awal. Biaya jasa profesional baru dihitung saat kontrak kerja sama (MoU/SPK) disetujui kedua belah pihak.',
    },
    {
        question:
            'Bagaimana jika alur bisnis perusahaan kami sangat unik dan tidak didukung oleh modul standar Odoo ERP?',
        answer: 'Inilah keahlian inti PT Probindo Artika Jaya sejak 1985. Tim arsitek kami berpengalaman merekayasa modul tailor-fit bespoke yang diintegrasikan mulus dengan core Odoo, termasuk integrasi mesin timbang pabrik baja, sistem flow meter migas, maupun protokol e-Faktur DJP.',
    },
    {
        question:
            'Apakah tim teknis dan konsultan PAJ dapat melakukan sesi analisis onsite di lokasi operasional pabrik atau kilang kami di luar Jakarta?',
        answer: 'Tentu. Tim PAJ secara rutin melakukan site audit, observasi workflow operasional lantai pabrik, dan pelatihan pengguna langsung di lokasi klien (Cilegon, Balikpapan, Surabaya, Medan, hingga remote site migas di seluruh Nusantara) dengan standar K3 migas/industri yang ketat.',
    },
    {
        question:
            'Berapa lama estimasi waktu implementasi penuh dari tahap analisis hingga Go-Live?',
        answer: 'Tergantung kompleksitas modul dan skala pengguna. Implementasi Odoo ERP standar terintegrasi berkisar antara 2 – 4 bulan, sedangkan sistem enterprise kompleks multi-entitas holding dengan puluhan modul custom tailor-fit biasanya membutuhkan linimasa bertahap 4 – 8 bulan dengan pendekatan peluncuran bertahap (phased roll-out).',
    },
];

export default function Contact() {
    return (
        <>
            <Head title="Kontak & Konsultasi" />

            <PageHero
                badge="Hubungi Kami // Konsultasi Resmi IT & Arsitektur Sistem"
                title="Diskusikan Transformasi & Otomasi Sistem Bisnis Bersama Lead Consultant PAJ"
                description={
                    <>
                        Mulai dari rekayasa proses bisnis, instalasi sistem{' '}
                        <Strong>tailor-fit</Strong>, audit SCSR, hingga
                        implementasi <Strong>Odoo ERP</Strong>. Kami siap
                        membantu memetakan solusi presisi yang adaptif terhadap
                        pertumbuhan enterprise Anda sejak 1985.
                    </>
                }
            >
                <div className="flex flex-col gap-6">
                    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:max-w-3xl">
                        {assurances.map((item) => (
                            <Card
                                key={item.label}
                                padding="sm"
                                className="flex items-center gap-3"
                            >
                                <IconTile icon={item.icon} tone="solid" />
                                <div className="flex flex-col">
                                    <span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
                                        {item.label}
                                    </span>
                                    <span className="font-display text-on-surface text-lg font-semibold">
                                        {item.value}
                                    </span>
                                </div>
                            </Card>
                        ))}
                    </div>
                    <Card className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        {highlights.map((item) => (
                            <div
                                key={item.label}
                                className="flex items-start gap-3"
                            >
                                <Icon
                                    name={item.icon}
                                    className="text-primary mt-0.5 text-2xl"
                                />
                                <div className="flex flex-col">
                                    <span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
                                        {item.label}
                                    </span>
                                    <span className="text-on-surface text-sm font-semibold">
                                        {item.value}
                                    </span>
                                </div>
                            </div>
                        ))}
                    </Card>
                </div>
            </PageHero>

            <Section>
                <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
                    <div className="flex flex-col gap-6 lg:col-span-5">
                        <OfficeCard />
                        <ChannelsCard />
                        <IncidentLineCard />
                    </div>
                    <div id="audit-form" className="lg:col-span-7">
                        <ConsultationRequestForm />
                    </div>
                </div>
            </Section>

            <Section id="lokasi" tone="muted">
                <div className="flex flex-col gap-10">
                    <SectionHeader
                        align="split"
                        eyebrow="Kantor & Fasilitas Riset Sistem"
                        title="Dua Lokasi Kantor PAJ di Jakarta Selatan"
                        description="Sebagian besar tim kami berbasis di Software Engineering Center Bintaro, sementara Business Development Center di Plaza Simatupang melayani pertemuan kemitraan."
                    />
                    <OfficeMap />
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                        {accessPoints.map((point) => (
                            <Card
                                key={point.title}
                                className="flex items-start gap-4"
                            >
                                <IconTile
                                    icon={point.icon}
                                    size="md"
                                    tone="neutral"
                                />
                                <div className="flex flex-col">
                                    <span className="font-display text-on-surface text-lg font-bold">
                                        {point.title}
                                    </span>
                                    <p className="text-on-surface-variant pt-1 text-sm leading-relaxed">
                                        {point.description}
                                    </p>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Section>

            <Section>
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="center"
                        eyebrow="Protokol Konsultasi Enterprise"
                        title="Tahapan Transparan Setelah Anda Menghubungi Kami"
                        description="Kami mengeliminasi ketidakpastian implementasi IT melalui tahapan rekayasa berstruktur jelas, terikat kerahasiaan hukum, dan terukur."
                    />
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
                        {onboardingSteps.map((step, index) => (
                            <StepCard
                                key={step.title}
                                step={String(index + 1).padStart(2, '0')}
                                {...step}
                            />
                        ))}
                    </div>
                </div>
            </Section>

            <Section tone="muted" size="narrow">
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="center"
                        eyebrow="Tanya Jawab Umum"
                        title="Pertanyaan Seputar Konsultasi & Penugasan PAJ"
                        description="Jawaban ringkas terkait model kerja sama teknis, audit, dan penugasan onsite."
                    />
                    <div className="space-y-4">
                        {faqs.map((faq) => (
                            <Card
                                key={faq.question}
                                className="flex items-start gap-4"
                            >
                                <Icon
                                    name="help"
                                    className="text-primary mt-0.5 text-2xl"
                                />
                                <div className="flex flex-col gap-2">
                                    <h3 className="font-display text-on-surface text-lg font-bold">
                                        {faq.question}
                                    </h3>
                                    <p className="text-on-surface-variant text-base leading-relaxed">
                                        {faq.answer}
                                    </p>
                                </div>
                            </Card>
                        ))}
                    </div>
                    <div className="bg-surface-container-high flex flex-col items-center gap-4 rounded-2xl p-8 text-center">
                        <h3 className="font-display text-on-surface text-xl font-bold">
                            Butuh Tanggapan Mendesak Hari Ini?
                        </h3>
                        <p className="text-on-surface-variant max-w-xl text-base">
                            Hubungi Hotline WhatsApp Konsultan Enterprise kami
                            untuk respon instan atau jadwalkan pertemuan daring
                            langsung dengan arsitek sistem PAJ.
                        </p>
                        <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
                            <ButtonLink
                                href={company.whatsapp.href}
                                size="sm"
                                icon="chat"
                            >
                                WhatsApp Konsultan ({company.whatsapp.label})
                            </ButtonLink>
                            <ButtonLink
                                href={company.phone.href}
                                variant="secondary"
                                size="sm"
                                icon="call"
                            >
                                Telepon Kantor ({company.phone.label})
                            </ButtonLink>
                        </div>
                    </div>
                </div>
            </Section>
        </>
    );
}

function CardLabel({ children }: { children: string }) {
    return (
        <span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
            {children}
        </span>
    );
}

function OfficeCard() {
    return (
        <Card padding="lg">
            <div className="pb-4">
                <CardLabel>Kantor Operasional</CardLabel>
                <h3 className="font-display text-on-surface text-lg font-bold">
                    Lokasi Kantor PAJ
                </h3>
            </div>
            <div className="flex flex-col gap-3">
                {offices.map((office) => (
                    <div
                        key={office.name}
                        className="bg-surface-container flex items-start gap-3 rounded-lg p-3.5"
                    >
                        <IconTile icon={office.icon} tone="neutral" />
                        <div className="flex flex-col gap-1 text-sm">
                            <span className="text-on-surface font-bold">
                                {office.name}
                            </span>
                            <span className="text-on-surface-variant leading-relaxed">
                                {officeAddress(office)}
                            </span>
                            <a
                                href={office.phone.href}
                                className="text-on-surface hover:text-primary font-mono font-semibold"
                            >
                                Tel. {office.phone.label}
                            </a>
                        </div>
                    </div>
                ))}
            </div>
            <div className="border-outline-variant/30 mt-4 grid grid-cols-2 gap-4 border-t pt-4 text-sm">
                <div className="flex flex-col">
                    <CardLabel>Jam Operasional</CardLabel>
                    <span className="text-on-surface font-semibold">
                        Senin – Jumat
                    </span>
                    <span className="text-on-surface-variant">
                        08:30 – 17:30 WIB
                    </span>
                </div>
                <div className="flex flex-col">
                    <CardLabel>Status Kunjungan</CardLabel>
                    <span className="text-highlight inline-flex items-center gap-1.5 font-semibold">
                        <span className="bg-primary h-2 w-2 rounded-full" />
                        Open for Scheduled Audits
                    </span>
                    <span className="text-on-surface-variant">
                        Harap konfirmasi H-1
                    </span>
                </div>
            </div>
        </Card>
    );
}

function ChannelsCard() {
    return (
        <Card padding="lg" className="flex flex-col gap-5">
            <div>
                <CardLabel>Korespondensi Langsung</CardLabel>
                <h3 className="font-display text-on-surface text-lg font-bold">
                    Saluran Komunikasi Resmi
                </h3>
            </div>
            <div className="space-y-3">
                {channels.map((channel) => {
                    const external = channel.href.startsWith('http');

                    return (
                        <a
                            key={channel.label}
                            href={channel.href}
                            target={external ? '_blank' : undefined}
                            rel={external ? 'noopener noreferrer' : undefined}
                            className="group bg-surface-container hover:bg-surface-container-high flex items-center justify-between gap-3 rounded-lg p-3.5 transition-colors"
                        >
                            <div className="flex items-center gap-3">
                                <Icon
                                    name={channel.icon}
                                    className="text-primary text-2xl transition-transform group-hover:scale-110"
                                />
                                <div className="flex flex-col">
                                    <CardLabel>{channel.label}</CardLabel>
                                    <span className="text-on-surface font-semibold">
                                        {channel.value}
                                    </span>
                                </div>
                            </div>
                            {channel.badge ? (
                                <span className="bg-surface-container-high text-on-surface group-hover:bg-primary-container shrink-0 rounded px-2 py-0.5 font-mono text-[11px] transition-colors group-hover:text-white">
                                    {channel.badge}
                                </span>
                            ) : (
                                <Icon
                                    name={channel.trailing ?? 'arrow_outward'}
                                    className="text-on-surface-variant group-hover:text-on-surface text-lg transition-colors"
                                />
                            )}
                        </a>
                    );
                })}
            </div>
        </Card>
    );
}

function IncidentLineCard() {
    return (
        <Card
            padding="lg"
            className="from-primary-container/15 via-surface-container-low to-surface-container-low dark:from-primary-container/40 overflow-hidden bg-gradient-to-br"
        >
            <div className="flex items-center gap-3 pb-3">
                <span className="bg-primary h-3 w-3 animate-ping rounded-full" />
                <span className="text-primary font-mono text-[11px] font-bold tracking-wide">
                    SPECIAL CUSTOMER SERVICE REPRESENTATIVE (SCSR)
                </span>
            </div>
            <h3 className="font-display text-on-surface mb-2 text-lg font-bold">
                Dedicated Incident Line 24/7
            </h3>
            <p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
                Jalur khusus tier-1 untuk klien dengan kontrak pemeliharaan
                &amp; infrastruktur <Strong>mission-critical</Strong> (Sektor
                Migas, Pengolahan Baja, dan Korporasi Holding).
            </p>
            <div className="bg-surface-container-lowest flex items-center justify-between gap-3 rounded-lg p-3">
                <div className="flex items-center gap-2">
                    <Icon name="timer" className="text-primary text-lg" />
                    <span className="text-on-surface font-mono text-[11px] font-semibold">
                        SLA WAKTU TANGGAP INSIDEN KRITIS
                    </span>
                </div>
                <span className="font-display text-primary text-lg font-bold">
                    &lt; 15 Menit
                </span>
            </div>
        </Card>
    );
}

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

    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setSubmitted(true);
        event.currentTarget.reset();
    };

    return (
        <Card padding="lg" className="shadow-xl lg:p-10">
            <div className="border-outline-variant/30 border-b pb-6">
                <Eyebrow icon="quick_reference">
                    Sesi Audit &amp; Permintaan Tender
                </Eyebrow>
                <h2 className="font-display text-headline-lg text-on-surface pt-2 font-bold">
                    Formulir Konsultasi &amp; Audit Arsitektur Sistem
                </h2>
                <p className="text-on-surface-variant pt-2 text-base">
                    Isi rincian kebutuhan sistem Anda di bawah ini. Lead
                    Consultant PAJ akan menganalisis parameter awal dan
                    menjadwalkan presentasi arsitektur terarah.
                </p>
            </div>

            <form className="flex flex-col gap-6 pt-6" onSubmit={handleSubmit}>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <Field id="full-name" label="Nama Lengkap & Gelar" required>
                        <TextInput
                            id="full-name"
                            name="name"
                            placeholder="Contoh: Ir. Hendra Prasetyo, M.T."
                            required
                        />
                    </Field>
                    <Field
                        id="company-name"
                        label="Nama Perusahaan / Instansi / BUMN"
                        required
                    >
                        <TextInput
                            id="company-name"
                            name="company"
                            placeholder="PT Petro Nusantara Energy"
                            required
                        />
                    </Field>
                    <Field id="job-title" label="Jabatan / Divisi" required>
                        <TextInput
                            id="job-title"
                            name="job_title"
                            placeholder="VP Information Technology / GM Finance"
                            required
                        />
                    </Field>
                    <Field
                        id="work-email"
                        label="Email Resmi Perusahaan"
                        required
                    >
                        <TextInput
                            id="work-email"
                            name="email"
                            type="email"
                            placeholder="hendra@petronusantara.co.id"
                            required
                        />
                    </Field>
                    <Field
                        id="phone-number"
                        label="Nomor WhatsApp / Telepon Langsung"
                        required
                    >
                        <TextInput
                            id="phone-number"
                            name="phone"
                            type="tel"
                            placeholder="+62 812 XXXX XXXX"
                            required
                        />
                    </Field>
                    <Field
                        id="industry-sector"
                        label="Klasifikasi Sektor Industri"
                        required
                    >
                        <SelectInput
                            id="industry-sector"
                            name="industry"
                            placeholder="Pilih Sektor Industri Anda"
                            options={industryOptions}
                            required
                        />
                    </Field>
                </div>

                <Field
                    id="service-focus"
                    label="Pilar Kebutuhan / Fokus Jasa PAJ"
                    required
                >
                    <SelectInput
                        id="service-focus"
                        name="service"
                        placeholder="Pilih Layanan Utama yang Dibutuhkan"
                        options={serviceOptions}
                        required
                    />
                </Field>

                <fieldset className="flex flex-col gap-2">
                    <legend className="text-on-surface pb-2 font-mono text-xs font-medium">
                        Estimasi Linimasa Kebutuhan Implementasi
                    </legend>
                    <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                        {timelines.map((timeline, index) => (
                            <label
                                key={timeline.value}
                                className={cn(
                                    'border-outline-variant/60 bg-surface-container-lowest text-on-surface hover:bg-surface-container-high flex cursor-pointer flex-col rounded-lg border p-3 transition-colors',
                                    'has-checked:border-primary-container has-checked:bg-primary-container has-checked:text-white',
                                    'has-focus-visible:ring-primary has-focus-visible:ring-2',
                                )}
                            >
                                <input
                                    type="radio"
                                    name="timeline"
                                    value={timeline.value}
                                    defaultChecked={index === 0}
                                    className="sr-only"
                                />
                                <span className="text-xs font-bold">
                                    {timeline.label}
                                </span>
                                <span className="text-sm opacity-80">
                                    {timeline.note}
                                </span>
                            </label>
                        ))}
                    </div>
                </fieldset>

                <Field
                    id="project-details"
                    label="Ringkasan Kebutuhan atau Kendala Sistem Saat Ini"
                >
                    <TextArea
                        id="project-details"
                        name="details"
                        rows={4}
                        placeholder="Jelaskan secara ringkas tantangan operasional, sistem lama yang digunakan (SAP/Oracle/Legacy), integrasi khusus yang diinginkan, atau estimasi jumlah pengguna (users)..."
                    />
                </Field>

                <div className="bg-surface-container-lowest flex items-start gap-3 rounded-lg p-3.5">
                    <input
                        id="nda-consent"
                        name="nda"
                        type="checkbox"
                        required
                        className="mt-0.5 h-4 w-4 shrink-0"
                    />
                    <label
                        htmlFor="nda-consent"
                        className="text-on-surface-variant cursor-pointer text-sm"
                    >
                        Saya menyetujui penandatanganan{' '}
                        <Strong>Non-Disclosure Agreement (NDA)</Strong> sebelum
                        pertukaran data teknis &amp; flow diagram operasional
                        korporasi.
                    </label>
                </div>

                <Button type="submit" size="block" trailingIcon="arrow_forward">
                    Kirim Permohonan Konsultasi Teknis
                </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">
                                Permohonan Berhasil Dikirimkan!
                            </span>
                            <p className="text-on-surface-variant text-sm">
                                Lead Consultant PAJ akan mengonfirmasi via
                                email/telepon resmi dalam kurun waktu kurang
                                dari 2 jam kerja.
                            </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" />
                    Data dan kerahasiaan proses bisnis Anda dilindungi melalui
                    perjanjian kerahasiaan (NDA) dan kepatuhan hukum Indonesia.
                </div>
            </form>
        </Card>
    );
}

function OfficeMap() {
    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="Peta wilayah Jakarta Selatan"
                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">
                {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>
                        <ButtonLink
                            href={office.mapsUrl}
                            variant="secondary"
                            size="sm"
                            icon="directions"
                            className="self-start"
                        >
                            Buka Petunjuk Arah
                        </ButtonLink>
                    </div>
                ))}
            </div>
        </div>
    );
}