<x-filament-panels::page>

    <!-- HEADER -->
    <div class="mb-8">
        <h1 class="text-4xl font-bold tracking-tight">
            CRI Digital Manufacturing IIoT Platform
        </h1>
        <p class="text-lg text-gray-600 mt-2">
            Complete visibility, traceability, and control across the manufacturing operations.
        </p>
    </div>

    <!-- BANNER -->
    {{-- <div class="w-full overflow-hidden rounded-2xl shadow mb-10"> --}}
    <div class="w-full overflow-hidden rounded-xl shadow">
        <img
            src="{{ asset('images/iiot-banner.jpg') }}"
            alt="CRI Digital Manufacturing IIoT"
            class="w-full h-72 object-cover"
        >
    </div>

    <!-- INTRO -->
    <div class="max-w-4xl mb-10">
        <p class="text-lg text-gray-700 mb-4">
            CRI Digital Manufacturing IIoT is built to deliver
            <strong>end-to-end traceability, real-time insights, and operational transparency</strong>
            across plants, lines, and production processes.
        </p>

        <p class="text-lg text-gray-700">
            The platform ensures <strong>right quality and on-time delivery</strong> by enabling
            complete tracking of materials, production orders, and finished goods—helping teams
            make faster, data-driven decisions with confidence.
        </p>
    </div>

    <!-- KEY PILLARS -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
        <div class="bg-white rounded-xl border p-6 shadow-sm">
            <h3 class="text-lg font-semibold mb-2">🔍 Traceability</h3>
            <p class="text-gray-600">
                Track materials, batches, and serials from input to dispatch.
            </p>
        </div>

        <div class="bg-white rounded-xl border p-6 shadow-sm">
            <h3 class="text-lg font-semibold mb-2">✅ Quality Assurance</h3>
            <p class="text-gray-600">
                Validate process data and ensure first-time-right production.
            </p>
        </div>

        <div class="bg-white rounded-xl border p-6 shadow-sm">
            <h3 class="text-lg font-semibold mb-2">⏱ On-Time Delivery</h3>
            <p class="text-gray-600">
                Identify delays early and meet production commitments.
            </p>
        </div>

        <div class="bg-white rounded-xl border p-6 shadow-sm">
            <h3 class="text-lg font-semibold mb-2">📊 Real-Time Insights</h3>
            <p class="text-gray-600">
                Monitor performance and take quick corrective actions.
            </p>
        </div>
    </div>

    <!-- SUPPORT -->
    <div class="bg-white rounded-xl border p-6 shadow-sm">
        <h2 class="text-2xl font-semibold mb-3">24×7 Support</h2>
        <p class="text-gray-700 mb-2">
            Our dedicated IIoT support team is available round-the-clock to ensure
            uninterrupted operations and quick issue resolution.
        </p>
        <p class="text-lg font-medium text-gray-900 flex flex-wrap items-center gap-2">
            📞 Support Landline: <span class="font-semibold">0422 711 7179</span>
        </p>
        <p class="text-lg font-medium text-gray-900 flex flex-wrap items-center gap-2">
            <img
                src="https://www.zoho.com/favicon.ico"
                alt="Zoho"
                class="w-5 h-5"
            >

            <span>Zoho Support:</span>

            <a
                href="https://join.zoho.in"
                target="_blank"
                rel="noopener noreferrer"
                class="font-semibold text-blue-600 hover:underline"
            >
                https://join.zoho.in
            </a>
        </p>
    </div>

</x-filament-panels::page>
