import { Head } from '@inertiajs/react';
import { ButtonLink } from '@/components/site/button';
import Card from '@/components/site/card';
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, Strong } 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 StatCard from '@/components/site/stat-card';
import { company, consultationUrl } from '@/data/site';
import { clients, services } from '@/routes';

const milestones = [
    {
        year: '1985',
        icon: 'domain',
        title: 'Awal Berdiri & Fondasi Industri',
        description: `Didirikan di Jakarta oleh ${company.notary}. Berawal dari aktivitas trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel).`,
        note: { icon: 'oil_barrel', label: 'Oil & Gas • Steel Procurement' },
    },
    {
        year: '2002',
        icon: 'precision_manufacturing',
        title: 'Evolusi Teknologi Informasi (TI)',
        description:
            'Bertransformasi menjadi konsultan Sistem Informasi dan TI, memusatkan fokus pada perancangan, pembangunan, dan implementasi aplikasi bisnis otomatis.',
        note: { icon: 'data_object', label: 'Automated Business Applications' },
        featured: true,
    },
    {
        year: 'KINI',
        icon: 'hub',
        title: 'Era Solusi Terintegrasi & ERP Modern',
        description:
            'Mengembangkan sistem operasional bisnis yang terotomasi (automated) dan tailor-fit sesuai alur unik klien, didukung ekosistem ERP enterprise teruji dan integrasi sesuai kebutuhan.',
        note: { icon: 'verified', label: 'Odoo ERP • Modul Tailor-Fit' },
    },
];

const statements = [
    {
        icon: 'visibility',
        label: 'Visi Resmi PT Probindo Artika Jaya',
        text: 'Menjadi perusahaan konsultan dibidang sistem informasi dan informasi teknologi yang dapat diandalkan dalam hal desain, pembangunan dan implementasi fully-automated dan tailor-fit applications untuk setiap kebutuhan klien.',
        footer: {
            icon: 'check_circle',
            label: 'Fokus Keandalan, Custom-Engineered Architecture, Bebas Keterikatan Template Statis.',
        },
    },
    {
        icon: 'flag',
        label: 'Misi Resmi PT Probindo Artika Jaya',
        text: 'Membantu klien untuk mengoptimalkan proses bisnisnya, tidak hanya dengan mengotomatisasi sistem informasi yang ada tetapi juga memberikan solusi yang dapat mempercepat proses perencanaan, pengambilan keputusan dan analisis performansi proses bisnis yang telah dilakukannya.',
        footer: {
            icon: 'insights',
            label: 'Akselerasi Pengambilan Keputusan Strategis & Analisis Kinerja Terukur.',
        },
    },
];

const pillars = [
    {
        icon: 'lightbulb',
        title: 'Inovasi & Invention',
        description:
            'Karakter dinamis yang melekat kuat untuk selalu menjawab dinamika tantangan baru alur bisnis klien melalui terobosan metode rekayasa teknologi terkini.',
        footer: 'Karakter Dinamis',
    },
    {
        icon: 'security',
        title: 'Proven Technology',
        description:
            'Menguasai dan menerapkan teknologi yang telah teruji stabilitas dan keandalannya di lapangan produksi, sehingga secara konsisten meminimalkan risiko operasional bisnis.',
        footer: 'Stabilitas Teruji',
    },
    {
        icon: 'architecture',
        title: 'Tailor-Fit Architecture',
        description:
            'Menyesuaikan sistem secara presisi dengan alur kerja riil organisasi. Kami menolak pendekatan template kaku generik yang justru membebani workflow pengguna.',
        footer: 'Presisi Operasional',
    },
    {
        icon: 'published_with_changes',
        title: 'End-to-End Commitment',
        description:
            'Pendampingan paripurna dari analisis proses awal, instalasi software, pelatihan intensif pengguna, hingga kepastian SLA pemeliharaan berkelanjutan dan audit tahunan.',
        footer: 'Siklus Paripurna',
    },
];

const industries = [
    {
        src: '/images/probindo/industry-oil-gas.jpg',
        alt: 'Ruang instrumentasi kilang dan anjungan minyak lepas pantai',
        eyebrow: 'Sektor Energi',
        title: 'Minyak & Gas Bumi',
        description:
            'Kontrol inventaris material kritis, kepatuhan keselamatan, dan integrasi rantai pengadaan hulu-hilir.',
    },
    {
        src: '/images/probindo/industry-steel.jpg',
        alt: 'Pabrik pengolahan baja dengan mesin fabrikasi presisi',
        eyebrow: 'Heavy Industry',
        title: 'Fabrikasi & Pengolahan Baja',
        description:
            'Otomasi BOM (Bill of Materials) multi-level, penjejakan batch produksi, dan akuntansi biaya pabrikasi.',
    },
    {
        src: '/images/probindo/industry-logistics.jpg',
        alt: 'Gudang distribusi otomatis dengan pemindai barcode',
        eyebrow: 'Logistics & Hub',
        title: 'Manufaktur & Rantai Pasok',
        description:
            'Sinkronisasi gudang multi-cabang real-time, cross-docking otomatis, dan monitoring delivery order terpusat.',
    },
    {
        src: '/images/probindo/industry-corporate.jpg',
        alt: 'Ruang rapat eksekutif dengan dasbor enterprise',
        eyebrow: 'Corporate & Services',
        title: 'Korporasi & Komersial',
        description:
            'Integrasi e-Faktur DJP, pelaporan laba-rugi multi-entitas konsolidasi, dan otomasi siklus approval bisnis.',
    },
];

export default function About() {
    return (
        <>
            <Head title="Tentang Kami" />

            <PageHero
                badge="Est. 1985 • IT & Automated Systems Consultant"
                title={
                    <>
                        Menjadi Mitra Terpercaya, Memberdayakan{' '}
                        <Highlight>Inovasi Teknologi</Highlight> untuk
                        Pertumbuhan Anda
                    </>
                }
                description={
                    <>
                        PT Probindo Artika Jaya (PAJ) hadir sebagai konsultan
                        teknologi informasi dan perancang aplikasi bisnis
                        otomatis (<Strong>automated &amp; tailor-fit</Strong>)
                        untuk mendukung efisiensi korporasi di Indonesia.
                    </>
                }
            >
                <div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-12">
                    <ImageCard
                        src="/images/probindo/about-team.jpg"
                        alt="Tim konsultan PAJ berkolaborasi di ruang kendali teknologi"
                        eyebrow="Integritas & Rekayasa Sistem"
                        title="Keahlian Mendalam Rancang Bangun Arsitektur ERP & Otomasi Enterprise"
                        description={`Beroperasi di bawah akta resmi ${company.notary} dengan dedikasi lebih dari tiga dekade melayani spektrum korporasi nasional.`}
                        className="min-h-[360px] lg:col-span-8 lg:min-h-[440px]"
                    />
                    <div className="grid grid-cols-2 gap-4 lg:col-span-4 lg:grid-cols-1">
                        <StatCard
                            value="39+"
                            unit="Tahun"
                            label="Heritage • Pengalaman"
                            description={`Didirikan pada tahun ${company.founded} di Jakarta oleh ${company.notary}.`}
                        />
                        <StatCard
                            value="100+"
                            unit="Enterprise"
                            label="Klien • Portofolio"
                            description="Solusi tailor-fit terpercaya untuk migas, industri baja, manufaktur, dan korporasi nasional."
                        />
                        <Card className="col-span-2 flex items-center justify-between lg:col-span-1">
                            <div className="flex flex-col">
                                <span className="font-display text-on-surface text-3xl font-bold">
                                    Official
                                </span>
                                <span className="text-primary font-mono text-xs font-semibold tracking-wider uppercase">
                                    Odoo Partner
                                </span>
                            </div>
                            <IconTile icon="verified_user" size="md" />
                        </Card>
                    </div>
                </div>
            </PageHero>

            <Section>
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="split"
                        eyebrow="Evolusi & Ketahanan"
                        title="Rekam Jejak & Transformasi Perusahaan"
                        description="Dari perdagangan komoditas strategis nasional hingga menjadi pilar konsultan otomasi proses bisnis digital enterprise terdepan."
                    />
                    <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
                        {milestones.map((milestone) => (
                            <Card
                                key={milestone.year}
                                interactive
                                className={
                                    milestone.featured
                                        ? 'border-primary-container/50 flex flex-col'
                                        : 'flex flex-col'
                                }
                            >
                                {milestone.featured && (
                                    <div className="from-primary-container via-primary to-primary-container absolute -top-px right-8 left-8 h-1 rounded-full bg-gradient-to-r" />
                                )}
                                <div className="mb-4 flex items-center justify-between">
                                    <span className="border-outline-variant/40 bg-surface-container-high font-display text-primary rounded border px-3 py-1 text-lg font-extrabold tracking-wider">
                                        {milestone.year}
                                    </span>
                                    <IconTile
                                        icon={milestone.icon}
                                        groupHover
                                    />
                                </div>
                                <h3 className="font-display text-on-surface mb-2 text-xl font-semibold">
                                    {milestone.title}
                                </h3>
                                <p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
                                    {milestone.description}
                                </p>
                                <div className="border-outline-variant/30 bg-surface-container-lowest text-on-surface-variant mt-auto flex items-center gap-2 rounded-lg border p-2.5 text-sm">
                                    <Icon
                                        name={milestone.note.icon}
                                        className="text-primary text-base"
                                    />
                                    {milestone.note.label}
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Section>

            <Section id="visi-misi" tone="muted">
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="center"
                        eyebrow="Arah Fundamental"
                        title="Visi & Misi PT Probindo Artika Jaya"
                        description="Pernyataan komitmen institusional resmi yang mengarahkan setiap perancangan arsitektur dan penjaminan kualitas sistem bagi para mitra kami."
                    />
                    <div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-2">
                        {statements.map((statement) => (
                            <Card
                                key={statement.label}
                                padding="lg"
                                interactive
                                className="flex flex-col justify-between overflow-hidden lg:p-10"
                            >
                                <Glow className="-top-12 -right-12 h-40 w-40 blur-2xl" />
                                <div className="relative flex flex-col gap-4">
                                    <div className="flex items-center justify-between gap-4">
                                        <span className="border-primary/40 bg-primary-container/10 text-primary rounded-full border px-3 py-1 font-mono text-[11px] font-bold tracking-wider uppercase">
                                            {statement.label}
                                        </span>
                                        <IconTile
                                            icon={statement.icon}
                                            size="md"
                                        />
                                    </div>
                                    <blockquote className="border-primary/60 font-display text-on-surface my-2 border-l-2 pl-4 text-lg leading-relaxed font-medium italic lg:text-xl">
                                        “{statement.text}”
                                    </blockquote>
                                </div>
                                <div className="border-outline-variant/30 text-on-surface-variant mt-4 flex items-center gap-2 border-t pt-6 text-sm">
                                    <Icon
                                        name={statement.footer.icon}
                                        className="text-primary text-base"
                                    />
                                    {statement.footer.label}
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Section>

            <Section>
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        eyebrow="Karakter & Nilai Inti"
                        title="Filosofi Kompetensi Kami"
                        description={
                            <>
                                Meramu Inovasi, Penemuan (
                                <Strong>Invention</Strong>), dan Penguasaan
                                Teknologi Teruji (
                                <Strong>Proven Technology</Strong>).
                            </>
                        }
                    />
                    <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
                        {pillars.map((pillar) => (
                            <FeatureCard key={pillar.title} {...pillar} />
                        ))}
                    </div>
                </div>
            </Section>

            <Section tone="muted">
                <div className="flex flex-col gap-12">
                    <SectionHeader
                        align="split"
                        eyebrow="Cakupan Keahlian Industri"
                        title="Sektor Industri yang Kami Layani"
                        aside={
                            <ButtonLink
                                href={clients()}
                                variant="ghost"
                                size="inline"
                                trailingIcon="arrow_forward"
                            >
                                Lihat Portofolio Klien Resmi
                            </ButtonLink>
                        }
                    />
                    <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
                        {industries.map((industry) => (
                            <ImageCard key={industry.title} {...industry} />
                        ))}
                    </div>
                </div>
            </Section>

            <Section tone="raised" className="py-12 lg:py-12">
                <Card className="flex flex-col items-center justify-between gap-6 lg:flex-row">
                    <div className="flex items-center gap-4">
                        <IconTile icon="verified_user" size="lg" />
                        <div className="flex flex-col">
                            <span className="font-display text-on-surface text-lg font-bold">
                                Legalitas Resmi &amp; Kepatuhan Pajak Terpadu
                            </span>
                            <p className="text-on-surface-variant text-sm">
                                Terdaftar di Kemenkumham RI, {company.notary} (
                                {company.founded}), beroperasi dari Software
                                Engineering Center di Bintaro dan Business
                                Development Center di Plaza Simatupang.
                            </p>
                        </div>
                    </div>
                    <div className="flex w-full shrink-0 items-center justify-end gap-6 lg:w-auto">
                        <div className="flex flex-col text-right">
                            <span className="text-primary font-mono text-[11px] font-bold uppercase">
                                Kantor Operasional
                            </span>
                            <span className="font-display text-on-surface text-lg font-semibold">
                                Jakarta Selatan
                            </span>
                        </div>
                        <div className="bg-outline-variant/60 hidden h-10 w-px sm:block" />
                        <div className="flex flex-col text-right">
                            <span className="text-primary font-mono text-[11px] font-bold uppercase">
                                Standardisasi
                            </span>
                            <span className="font-display text-on-surface text-lg font-semibold">
                                Enterprise SLA
                            </span>
                        </div>
                    </div>
                </Card>
            </Section>

            <CtaBanner
                badge="Konsultasi Teknis & Audit Infrastruktur"
                title="Siap Mengoptimalkan Sistem & Otomasi Bisnis Anda?"
                description="Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap melakukan evaluasi proses bisnis, audit arsitektur sistem eksisting, atau solusi implementasi Odoo ERP yang tepat sasaran."
                actions={
                    <>
                        <ButtonLink href={consultationUrl} icon="send">
                            Jadwalkan Konsultasi IT
                        </ButtonLink>
                        <ButtonLink
                            href={services()}
                            variant="secondary"
                            icon="layers"
                        >
                            Pelajari 8 Jasa Kami
                        </ButtonLink>
                    </>
                }
            />
        </>
    );
}