import { Head } from '@inertiajs/react';
import { useState } from 'react';
import { 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 Glow from '@/components/site/glow';
import Icon from '@/components/site/icon';
import IconTile from '@/components/site/icon-tile';
import ImageCard from '@/components/site/image-card';
import PageHero, { Highlight } from '@/components/site/page-hero';
import Section from '@/components/site/section';
import SectionHeader from '@/components/site/section-header';
import CtaBanner from '@/components/site/sections/cta-banner';
import { company, consultationUrl, officeAddress, offices } from '@/data/site';
import { cn } from '@/lib/utils';
import { contact } from '@/routes';

type Sector = 'energy' | 'steel' | 'corporate';

const filters: { value: Sector | 'all'; label: string }[] = [
    { value: 'all', label: 'Semua Sektor (5)' },
    { value: 'energy', label: 'Migas & Energi' },
    { value: 'steel', label: 'Baja & Manufaktur' },
    { value: 'corporate', label: 'Holding & BUMN' },
];

const heroStats = [
    { value: '100+', caption: 'Proyek Enterprise & BUMN' },
    { value: '40+ Thn', caption: 'Integritas Reputasi (Est. 1985)' },
    { value: '99.8%', caption: 'Tingkat Retensi & Kepuasan' },
    { value: '0%', caption: 'Vendor Lock-in Terbuka' },
];

type IndustrySector = {
    sector: Sector;
    icon: string;
    code: string;
    tag: string;
    title: string;
    description: string;
    details: { label: string; text: string }[];
    footnote: string;
    wide?: boolean;
};

const industrySectors: IndustrySector[] = [
    {
        sector: 'energy',
        icon: 'local_fire_department',
        code: 'SEKTOR 01 // MIGAS & ENERGI',
        tag: 'Hulu - Hilir & Offshore',
        title: 'Minyak, Gas & Energi (Oil & Gas Infrastructure)',
        description:
            'Arsitektur penanganan aset berisiko tinggi dengan validasi berlapis untuk menjaga kontinuitas suplai serta kepatuhan ketat audit operasional SKK Migas.',
        details: [
            {
                label: 'Karakteristik Kebutuhan Sistem',
                text: 'Inventory tracing material kritis, kepatuhan keselamatan kilang kerja, otomatisasi pengadaan & logistik kapal lepas pantai, serta sinkronisasi telemetri multi-site.',
            },
            {
                label: 'Solusi yang Diimplementasikan',
                text: 'Tailor-fit ERP supply chain, specialized barcode asset tracking, customized multi-tiered approval pipeline dengan verifikasi digital.',
            },
        ],
        footnote: 'Kepatuhan Operasi: ISO 9001 / SKK Migas',
        wide: true,
    },
    {
        sector: 'steel',
        icon: 'precision_manufacturing',
        code: 'SEKTOR 02 // METALURGI',
        tag: 'Heavy Steel',
        title: 'Fabrikasi & Pengolahan Baja',
        description:
            'Otomasi perhitungan yield peleburan presisi tinggi dan integrasi rantai produksi dari bahan mentah hingga sertifikat mutu akhir.',
        details: [
            {
                label: 'Fitur Utama Arsitektur',
                text: 'Modul spesifik BOM multi-level, manajemen heat-treatment baja, pencatatan scrap & yield otomatis, serta verifikasi sertifikat material uji (Mill Test Cert).',
            },
            {
                label: 'Paket Solusi PAJ',
                text: 'SCADA to ERP bridge engine, custom manufacturing execution modules & Quality Assurance Tracker.',
            },
        ],
        footnote: 'Presisi BOM: 99.9% Akurasi',
    },
    {
        sector: 'steel',
        icon: 'local_shipping',
        code: 'SEKTOR 03 // LOGISTIK',
        tag: 'Supply Chain',
        title: 'Manufaktur & Logistik Terpadu',
        description:
            'Sinkronisasi rantai pasok multi-gudang secara real-time dengan algoritma penilaian persediaan akurat.',
        details: [
            {
                label: 'Spesifikasi Sistem',
                text: 'Multi-warehouse inventory, otomatisasi replenishment dinamis, cross-docking tracking, barcode/RFID scanner terintegrasi, dan valuasi FIFO/Average otomatis.',
            },
            {
                label: 'Solusi PAJ',
                text: 'Odoo Custom Supply Chain Suite, live dispatch scheduling, dan mobile warehouse barcode system.',
            },
        ],
        footnote: 'Latency Tracking: < 0.8 Detik',
    },
    {
        sector: 'corporate',
        icon: 'account_balance',
        code: 'SEKTOR 04 // ENTERPRISE & BUMN',
        tag: 'Financial Core',
        title: 'Korporasi Swasta, Holding & BUMN Nasional',
        description:
            'Arsitektur sentralisasi keuangan grup dengan keselarasan regulasi perpajakan Indonesia, dirancang untuk auditabilitas instan dan tata kelola korporat terbuka.',
        details: [
            {
                label: 'Karakteristik & Kepatuhan',
                text: 'Konsolidasi neraca multi-company, otomasi e-Faktur Pajak DJP terintegrasi langsung tanpa input berulang, eliminasi resiko denda fiskal, dan audit trail lengkap.',
            },
            {
                label: 'Jenis Solusi PAJ',
                text: 'Odoo ERP Enterprise Financials, dedicated DJP e-Faktur API Bridge, multi-currency ledger, dan Executive Boardroom C-Suite Dashboard.',
            },
        ],
        footnote: 'Integrasi Resmi: DJP e-Faktur Ready',
        wide: true,
    },
];

const caseStudies = [
    {
        icon: 'anchor',
        title: 'Otomasi Siklus Supply Chain & Logistik Migas Lepas Pantai',
        client: 'Klien Eksplorasi & Pengeboran Lepas Pantai',
        challenge:
            'Tingginya waktu tunggu suku cadang kritis rig pengeboran akibat proses pengadaan birokratis dan ketidakcocokan inventaris antar kapal suplai.',
        solution:
            'Implementasi tailor-fit inventory hub dengan offline sync capability di kapal kru dan otomatisasi persetujuan anggaran berjenjang.',
        results: [
            ['Waktu Pengadaan Material', '-65%'],
            ['Keterlambatan Kapal Kerja', 'Nol Insiden'],
            ['Kepatuhan Audit SKK', '100% Lolos'],
        ],
    },
    {
        icon: 'factory',
        title: 'Integrasi ERP Manufaktur Fabrikasi Baja & Uji Mutu',
        client: 'Produsen Baja Konstruksi & Pipa Berat',
        challenge:
            'Perhitungan estimasi bahan baku sering meleset akibat kompleksitas pemotongan baja (cutting optimization) dan sertifikat mill test manual.',
        solution:
            'Engine kustom integrasi SCADA mesin potong plasma dengan modul ERP Bill of Materials dan repository digital sertifikasi mutu.',
        results: [
            ['Akurasi Perhitungan BOM', '99.9% Presisi'],
            ['Traceability Serial Leburan', 'Instan < 5 Detik'],
            ['Reduksi Scrap Material', '-18.4%'],
        ],
    },
    {
        icon: 'account_balance_wallet',
        title: 'Transformasi Multi-Company Odoo & Integrasi e-Faktur DJP',
        client: 'Holding Grup Distribusi & Ritel Nasional',
        challenge:
            'Penerbitan 15.000+ faktur pajak per bulan dilakukan via input ganda terpisah yang memicu keterlambatan pelaporan SPT bulanan hingga 2 pekan.',
        solution:
            'Implementasi Odoo ERP terpusat dengan direct bridge connector DJP Pajak otomatis, QR Code approval, dan auto-reconciliation perbankan.',
        results: [
            ['Rekonsiliasi Pajak Bulanan', '2 Hari (Dulu 14 Hari)'],
            ['Kesalahan Entri Faktur', '0% (Zero Error)'],
            ['Penerbitan Laporan Holding', 'Otomatis H+1'],
        ],
    },
];

const reasons = [
    {
        icon: 'handshake',
        title: 'Hubungan Jangka Panjang (SCSR)',
        description:
            'Pemeliharaan berkesinambungan dan program Special CSR berkala memastikan sistem Anda senantiasa relevan mengikuti ekspansi kapasitas bisnis.',
    },
    {
        icon: 'lock_open',
        title: 'Bebas Keterikatan Vendor',
        description:
            'Full source code handover & arsitektur modular mandiri. PAJ memberikan kebebasan mutlak bagi klien atas kepemilikan aset perangkat lunaknya.',
    },
    {
        icon: 'gavel',
        title: 'Kepatuhan Regulasi Nasional',
        description:
            'Kepatuhan langsung sistem akuntansi terhadap peraturan Ditjen Pajak (DJP e-Faktur terintegrasi), standar audit PSAK, dan peraturan kementerian terkait.',
    },
    {
        icon: 'support_agent',
        title: 'SLA Tanggap Darurat Khusus',
        description:
            'Dukungan teknis dedicated tingkat lead architect dengan target mitigasi masalah kritis cepat demi menjaga uptime operasional industri non-stop.',
    },
];

const testimonials = [
    {
        initials: 'DO',
        quote: 'Keahlian teknis tim PAJ dalam memahami proses rolling baja dan pemetaan sertifikat heat treatment sangat luar biasa. Sistem berjalan stabil tanpa kendala berarti selama lebih dari 6 tahun operasional.',
        role: 'Direktur Operasional',
        organization: 'Manufaktur Baja & Fabrikasi Logam',
    },
    {
        initials: 'HI',
        quote: 'Integrasi Odoo dengan bridging DJP Faktur memangkas beban kerja departemen akuntansi kami secara drastis. Yang paling berharga adalah transparansi arsitekturnya, tidak ada ketergantungan yang menyulitkan.',
        role: 'Head of Enterprise IT',
        organization: 'Holding Korporasi & Ritel Nasional',
    },
    {
        initials: 'ML',
        quote: 'Di industri migas, keandalan sistem material tracing adalah penentu keselamatan kerja rig. PAJ merancang alur verifikasi logistik yang sangat presisi dan mampu bertahan di koneksi satelit minim.',
        role: 'Manajer Logistik & Rantai Pasok',
        organization: 'Konsorsium Migas Lepas Pantai',
    },
];

export default function Clients() {
    return (
        <>
            <Head title="Klien & Portofolio" />

            <PageHero
                align="center"
                badge="Kemitraan Strategis & Portofolio Klien // PT Probindo Artika Jaya"
                title={
                    <>
                        Kepercayaan Industri Terkemuka,{' '}
                        <Highlight>Rekam Jejak 40+ Tahun</Highlight>{' '}
                        Transformasi Digital
                    </>
                }
                description="“Kami mengucapkan terima kasih atas kepercayaan dan dukungan Anda sebagai klien kami. Sebagai tim konsultan IT di PT Probindo Artika Jaya (PAJ), kami berkomitmen untuk menyediakan solusi teknologi informasi yang berkualitas tinggi, tailor-fit, dan memberikan nilai tambah nyata bagi kesinambungan bisnis Anda.”"
            >
                <Card className="grid w-full max-w-5xl grid-cols-2 gap-4 md:grid-cols-4">
                    {heroStats.map((stat) => (
                        <div
                            key={stat.caption}
                            className="bg-surface-container flex flex-col items-center justify-center rounded-lg p-4 text-center"
                        >
                            <span className="font-display text-headline-lg text-primary font-bold">
                                {stat.value}
                            </span>
                            <span className="text-on-surface-variant mt-1 text-xs font-semibold">
                                {stat.caption}
                            </span>
                        </div>
                    ))}
                </Card>
            </PageHero>

            <Section>
                <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
                    <div className="flex flex-col gap-6 lg:col-span-5">
                        <Eyebrow icon="verified_user">
                            Warisan Teknis Sejak 1985
                        </Eyebrow>
                        <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold">
                            Fondasi Rekayasa Industri Menuju Otomasi Mutakhir
                        </h2>
                        <p className="text-on-surface-variant text-base leading-relaxed">
                            Berakar kuat dari kiprah awal perseroan pada sektor
                            perdagangan migas dan baja berat di era 1980-an, PAJ
                            berevolusi penuh pada 2002 menjadi sentra konsultan
                            sistem informasi terpadu. Pemahaman mendalam
                            mengenai dinamika lapangan, kepatuhan fiskal
                            nasional, serta kompleksitas supply chain menjadikan
                            solusi PAJ berakar pada kenyataan operasional, bukan
                            sekadar perangkat lunak generik.
                        </p>
                        <Card padding="sm" className="flex items-start gap-4">
                            <IconTile icon="hub" tone="solid" />
                            <div>
                                <h3 className="font-display text-on-surface text-lg font-semibold">
                                    Special CSR (SCSR) Architecture
                                </h3>
                                <p className="text-on-surface-variant mt-1 text-sm">
                                    Sistem pendampingan kapasitas berkelanjutan
                                    memastikan kapabilitas internal klien
                                    meningkat secara mandiri tanpa jebakan
                                    lisensi tertutup.
                                </p>
                            </div>
                        </Card>
                    </div>
                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-7">
                        <ImageCard
                            src="/images/probindo/clients-operations-center.jpg"
                            alt="Pusat operasi rekayasa dengan monitor telemetri industri"
                            eyebrow="Heavy Industry Matrix"
                            title="Migas & Fabrikasi Metalurgi"
                        />
                        <ImageCard
                            src="/images/probindo/clients-erp-dashboard.jpg"
                            alt="Dasbor ERP enterprise dengan sinkronisasi pajak DJP"
                            eyebrow="Enterprise Core"
                            title="Holding Multinasional & BUMN"
                            className="sm:translate-y-8"
                        />
                    </div>
                </div>
            </Section>

            <SectorPortfolio />

            <Section>
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        eyebrow="Impact Stories // Rekam Jejak Unggulan"
                        title="Studi Kasus Efisiensi & Keberhasilan Terukur"
                        description="Bukti nyata transformasi arsitektur digital teruji di lingkungan operasional bertekanan tinggi dengan metodologi PAJ."
                    />
                    <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
                        {caseStudies.map((study, index) => (
                            <Card
                                key={study.title}
                                padding="none"
                                className="flex flex-col overflow-hidden"
                            >
                                <div className="bg-surface-container flex flex-col gap-3 p-6">
                                    <div className="flex items-center justify-between">
                                        <span className="text-primary font-mono text-xs font-bold">
                                            STUDI KASUS 0{index + 1}
                                        </span>
                                        <Icon
                                            name={study.icon}
                                            className="text-on-surface-variant text-xl"
                                        />
                                    </div>
                                    <h3 className="font-display text-on-surface text-lg leading-snug font-bold">
                                        {study.title}
                                    </h3>
                                    <span className="text-highlight text-xs font-semibold">
                                        {study.client}
                                    </span>
                                </div>
                                <div className="flex flex-1 flex-col justify-between gap-6 p-6">
                                    <div className="space-y-4">
                                        <DetailBlock
                                            label="Tantangan Klien"
                                            text={study.challenge}
                                        />
                                        <DetailBlock
                                            label="Solusi Arsitektur PAJ"
                                            text={study.solution}
                                        />
                                    </div>
                                    <div className="bg-surface-container-high flex flex-col gap-2 rounded-lg p-4">
                                        <span className="text-highlight font-mono text-[11px] font-bold">
                                            DAMPAK TERVERIFIKASI:
                                        </span>
                                        {study.results.map(
                                            ([metric, result]) => (
                                                <div
                                                    key={metric}
                                                    className="flex items-baseline justify-between gap-3"
                                                >
                                                    <span className="text-on-surface text-sm">
                                                        {metric}
                                                    </span>
                                                    <span className="text-primary shrink-0 font-mono text-sm font-bold">
                                                        {result}
                                                    </span>
                                                </div>
                                            ),
                                        )}
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Section>

            <Section tone="muted">
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="center"
                        eyebrow="Nilai Inti Kemitraan"
                        title="Mengapa Mitra Korporasi Memilih PAJ Sejak 1985"
                        description="Komitmen arsitektur terbuka dan pendampingan tanpa henti menciptakan relasi kemitraan yang melintasi dekade."
                    />
                    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                        {reasons.map((reason) => (
                            <FeatureCard
                                key={reason.title}
                                iconTone="solid"
                                {...reason}
                            />
                        ))}
                    </div>
                </div>
            </Section>

            <Section>
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="split"
                        eyebrow="Suara Mitra Kami"
                        title="Testimoni & Pernyataan Kepercayaan"
                        description="Apresiasi nyata atas komitmen tanpa henti dari tim konsultan teknis PT Probindo Artika Jaya."
                    />
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                        {testimonials.map((testimonial) => (
                            <Card
                                key={testimonial.initials}
                                className="flex flex-col justify-between gap-6"
                            >
                                <div className="space-y-4">
                                    <div
                                        className="text-primary flex"
                                        aria-label="Rating 5 dari 5"
                                    >
                                        {Array.from({ length: 5 }, (_, i) => (
                                            <Icon key={i} name="star" filled />
                                        ))}
                                    </div>
                                    <blockquote className="text-on-surface text-base italic">
                                        “{testimonial.quote}”
                                    </blockquote>
                                </div>
                                <div className="flex items-center gap-3">
                                    <div className="bg-surface-container text-primary flex h-10 w-10 items-center justify-center rounded-full font-mono font-bold">
                                        {testimonial.initials}
                                    </div>
                                    <div>
                                        <div className="text-on-surface text-sm font-bold">
                                            {testimonial.role}
                                        </div>
                                        <span className="text-on-surface-variant text-sm">
                                            {testimonial.organization}
                                        </span>
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Section>

            <Section tone="muted">
                <Card
                    padding="lg"
                    className="flex flex-col items-center justify-between gap-10 lg:flex-row lg:p-12"
                >
                    <div className="max-w-xl">
                        <Eyebrow>Reliability Index &amp; Audit Trail</Eyebrow>
                        <h2 className="font-display text-headline-lg text-on-surface mt-3 mb-4 font-bold">
                            Stabilitas Operasional di Atas Standar Industri
                        </h2>
                        <p className="text-on-surface-variant mb-6 text-base leading-relaxed">
                            Setiap sistem yang dibangun oleh tim insinyur PAJ
                            melalui protokol verifikasi beban puncak (stress
                            test), audit kepatuhan tahunan, serta program
                            pemeliharaan terstruktur guna memastikan ketiadaan
                            downtime tidak terencana.
                        </p>
                        <div className="grid grid-cols-2 gap-4">
                            {[
                                ['99.98%', 'System Availability'],
                                ['< 15 Mnt', 'Mitigasi Respon Krisis'],
                            ].map(([value, label]) => (
                                <div
                                    key={label}
                                    className="bg-surface-container rounded-lg p-4"
                                >
                                    <span className="text-headline-md text-primary font-mono font-bold">
                                        {value}
                                    </span>
                                    <span className="text-on-surface-variant mt-1 block text-xs font-semibold">
                                        {label}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                    <RetentionGauge />
                </Card>
            </Section>

            <CtaBanner
                badge="Konsultasi Teknis & Audit Infrastruktur"
                title="Siap Menjadi Mitra Transformasi Digital Berikutnya?"
                description="Diskusikan tantangan arsitektur sistem dan otomasi proses bisnis Anda bersama Lead Architect PAJ. Kami siap menghadirkan solusi tailor-fit yang terukur."
                actions={
                    <>
                        <ButtonLink
                            href={consultationUrl}
                            icon="event_available"
                        >
                            Jadwalkan Diskusi Teknis
                        </ButtonLink>
                        <ButtonLink
                            href={`${contact.url()}#lokasi`}
                            variant="secondary"
                            icon="apartment"
                        >
                            Lihat Lokasi Kantor PAJ
                        </ButtonLink>
                    </>
                }
            />

            <Section tone="muted">
                <Card
                    padding="lg"
                    className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12 lg:p-10"
                >
                    <div className="flex flex-col gap-4 lg:col-span-4">
                        <img
                            src={company.logo}
                            alt={company.name}
                            className="h-12 w-auto self-start object-contain"
                        />
                        <h2 className="font-display text-on-surface text-lg font-bold">
                            Kantor Operasional &amp; IT Consultant Desk
                        </h2>
                        <p className="text-on-surface-variant text-sm">
                            Pusat koordinasi rekayasa sistem informasi, audit
                            kode, dan deployment infrastruktur terpadu.
                        </p>
                        <div className="text-on-surface mt-2 flex flex-col gap-2 font-mono text-sm">
                            {offices.map((office) => (
                                <a
                                    key={office.name}
                                    href={office.phone.href}
                                    className="hover:text-primary flex items-center gap-2"
                                >
                                    <Icon
                                        name="call"
                                        className="text-primary text-base"
                                    />
                                    {office.phone.label}
                                </a>
                            ))}
                            <a
                                href={`mailto:${company.email.busdev}`}
                                className="hover:text-primary flex items-center gap-2"
                            >
                                <Icon
                                    name="mail"
                                    className="text-primary text-base"
                                />
                                {company.email.busdev}
                            </a>
                        </div>
                    </div>
                    <div className="relative flex min-h-56 items-center overflow-hidden rounded-xl bg-neutral-900 p-4 lg:col-span-8">
                        <img
                            src="/images/probindo/clients-hero-bg.jpg"
                            alt=""
                            loading="lazy"
                            className="absolute inset-0 h-full w-full object-cover"
                        />
                        <div className="relative z-10 grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
                            {offices.map((office) => (
                                <div
                                    key={office.name}
                                    className="bg-surface-container-lowest/90 rounded-xl p-4 shadow-lg backdrop-blur-md"
                                >
                                    <span className="text-primary mb-1 block font-mono text-[11px] font-bold uppercase">
                                        {office.name}
                                    </span>
                                    <p className="text-on-surface text-sm font-medium">
                                        {officeAddress(office)}
                                    </p>
                                </div>
                            ))}
                        </div>
                    </div>
                </Card>
            </Section>
        </>
    );
}

function DetailBlock({ label, text }: { label: string; text: string }) {
    return (
        <div className="bg-surface-container rounded-lg p-4">
            <span className="text-primary mb-1 block font-mono text-[11px] font-bold uppercase">
                {label}
            </span>
            <p className="text-on-surface-variant text-sm">{text}</p>
        </div>
    );
}

function SectorPortfolio() {
    const [filter, setFilter] = useState<Sector | 'all'>('all');
    const visible = (sector: Sector) => filter === 'all' || filter === sector;

    return (
        <Section tone="muted">
            <div className="flex flex-col gap-12">
                <SectionHeader
                    align="split"
                    eyebrow="Klasifikasi Sektor Portofolio"
                    title="Sektor Industri Teruji & Karakteristik Sistem"
                    aside={
                        <div
                            role="group"
                            aria-label="Filter sektor"
                            className="border-outline-variant/40 bg-surface-container-low flex flex-wrap items-center gap-2 rounded-xl border p-1.5"
                        >
                            {filters.map((option) => (
                                <button
                                    key={option.value}
                                    type="button"
                                    aria-pressed={filter === option.value}
                                    onClick={() => setFilter(option.value)}
                                    className={cn(
                                        'cursor-pointer rounded-lg px-4 py-2 text-xs font-semibold transition-all',
                                        filter === option.value
                                            ? 'bg-primary-container text-white shadow-md'
                                            : 'bg-surface-container text-on-surface-variant hover:text-on-surface',
                                    )}
                                >
                                    {option.label}
                                </button>
                            ))}
                        </div>
                    }
                />

                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                    {industrySectors.map((item) => (
                        <Card
                            key={item.code}
                            padding="lg"
                            interactive
                            className={cn(
                                'flex flex-col justify-between overflow-hidden',
                                item.wide && 'lg:col-span-2',
                                !visible(item.sector) && 'hidden',
                            )}
                        >
                            {item.wide && (
                                <Glow className="-top-12 -right-12 h-48 w-48 blur-3xl" />
                            )}
                            <div className="relative">
                                <div className="mb-6 flex items-center justify-between gap-3">
                                    <span className="bg-surface-container text-primary inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-[11px] font-semibold">
                                        <Icon
                                            name={item.icon}
                                            className="text-sm"
                                        />
                                        {item.code}
                                    </span>
                                    <span className="text-on-surface-variant font-mono text-[11px] font-semibold">
                                        {item.tag}
                                    </span>
                                </div>
                                <h3
                                    className={cn(
                                        'font-display text-on-surface mb-3 font-bold',
                                        item.wide
                                            ? 'text-headline-md lg:text-headline-lg'
                                            : 'text-headline-md',
                                    )}
                                >
                                    {item.title}
                                </h3>
                                <p className="text-on-surface-variant mb-6 text-base leading-relaxed">
                                    {item.description}
                                </p>
                                <div
                                    className={cn(
                                        'mb-6 grid grid-cols-1 gap-4',
                                        item.wide && 'sm:grid-cols-2',
                                    )}
                                >
                                    {item.details.map((detail) => (
                                        <DetailBlock
                                            key={detail.label}
                                            {...detail}
                                        />
                                    ))}
                                </div>
                            </div>
                            <div className="relative flex items-center justify-between gap-3 pt-2">
                                <span className="text-on-surface-variant font-mono text-xs">
                                    {item.footnote}
                                </span>
                                <Icon
                                    name="arrow_forward"
                                    className="text-primary text-xl transition-transform group-hover:translate-x-2"
                                />
                            </div>
                        </Card>
                    ))}

                    <Card
                        padding="lg"
                        interactive
                        className={cn(
                            'flex flex-col items-start justify-between gap-6 md:col-span-2 md:flex-row md:items-center lg:col-span-3',
                            !visible('corporate') && 'hidden',
                        )}
                    >
                        <div className="max-w-3xl">
                            <span className="bg-surface-container text-primary mb-3 inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-[11px] font-semibold">
                                <Icon name="storefront" className="text-sm" />
                                SEKTOR 05 // KOMERSIAL &amp; DISTRIBUSI
                            </span>
                            <h3 className="font-display text-headline-md text-on-surface mb-2 font-bold">
                                Sektor Komersial, Ritel Distribusi &amp;
                                Penyedia Jasa
                            </h3>
                            <p className="text-on-surface-variant text-base">
                                Multi-channel sales pipeline, quotation
                                bertingkat dengan otorisasi matriks harga,
                                automated customer invoicing, rekonsiliasi
                                perbankan otomatis, dan verifikasi batasan
                                kredit (credit limit) secara ketat dan otomatis.
                            </p>
                        </div>
                        <div className="flex shrink-0 flex-col items-start gap-2 md:items-end">
                            <span className="text-highlight font-mono text-[11px] font-bold uppercase">
                                Hasil Implementasi
                            </span>
                            <span className="text-headline-sm text-primary font-mono font-bold">
                                100% Real-time AR/AP
                            </span>
                            <span className="text-on-surface-variant text-sm">
                                Zero duplicate entry data
                            </span>
                        </div>
                    </Card>
                </div>
            </div>
        </Section>
    );
}

function RetentionGauge() {
    return (
        <div className="bg-surface-container flex w-full flex-col items-center justify-center rounded-xl p-6 lg:w-96">
            <span className="text-on-surface-variant mb-4 font-mono text-[11px] font-semibold uppercase">
                Indeks Kemitraan Berkelanjutan
            </span>
            <div className="relative flex h-48 w-48 items-center justify-center">
                <svg
                    aria-hidden="true"
                    className="absolute inset-0 -rotate-90"
                    viewBox="0 0 100 100"
                >
                    <circle
                        className="stroke-surface-container-highest fill-none"
                        cx="50"
                        cy="50"
                        r="42"
                        strokeWidth="8"
                    />
                    <circle
                        className="stroke-primary-container fill-none"
                        cx="50"
                        cy="50"
                        r="42"
                        strokeDasharray="264"
                        strokeDashoffset="1"
                        strokeLinecap="round"
                        strokeWidth="8"
                    />
                </svg>
                <div className="flex flex-col items-center">
                    <span className="font-display text-headline-xl text-on-surface font-bold">
                        99.8%
                    </span>
                    <span className="text-highlight text-xs font-semibold">
                        Tingkat Retensi
                    </span>
                </div>
            </div>
            <p className="text-on-surface-variant mt-4 text-center text-sm">
                Mayoritas mitra memperpanjang kontrak pemeliharaan dan audit
                berkala melampaui siklus 5 tahunan.
            </p>
        </div>
    );
}