/* eslint-disable @next/next/no-img-element */
/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import React from "react";
import Breadcrumb from "../../components/Breadcrumb";
import OurBrands from "@/components/OurBrands";
import {
    ShoppingCart,
    Server,
    Database,
    ShieldCheck,
    Globe,
    BarChart3,
} from "lucide-react";

export default function WimrawEnterpriseCommerce() {
    const breadcrumbData = [
        { name: "Who We Are", href: "#" },
        { name: "Overview", href: "/overview" },
    ];

    const pageTitle = "Your Imginations We Make Reality.";
    const description =
        "Wimraw is a global organization dedicated to innovation across IT, AI, Robotics, and Media.";

    return (
        <>
            <Breadcrumb
                breadcrumbs={breadcrumbData}
                pageTitle={pageTitle}
                description={description}
            />

            <div className="bg-white text-black font-sans">

                {/* ================= HERO ================= */}
                <section className="pt-40 pb-28 border-b border-gray-200">
                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">

                        <div>
                            <div className="text-xs uppercase tracking-wider text-gray-500 mb-6">
                                Enterprise E-Commerce Development
                            </div>

                            <h1 className="text-4xl md:text-5xl font-semibold leading-tight mb-8">
                                Digital Commerce Platforms Engineered for Scale
                            </h1>

                            <p className="text-lg text-gray-600 mb-10 leading-relaxed max-w-xl">
                                We design and deliver secure, scalable, and performance-driven
                                e-commerce ecosystems for enterprise brands operating across
                                global markets.
                            </p>

                            <button className="px-6 py-3 bg-black text-white rounded-md text-sm hover:bg-gray-800 transition">
                                Engage Commerce Experts
                            </button>
                        </div>

                        <div>
                            <img
                                src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=900&q=80"
                                alt="Ecommerce dashboard"
                                className="rounded-md border border-gray-200 shadow-lg"
                            />
                        </div>
                    </div>
                </section>

                {/* ================= SERVICES ================= */}
                <section id="services" className="py-24 bg-black border-b border-gray-800">
                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">

                        <div>
                            <img
                                src="https://images.unsplash.com/photo-1523475496153-3d6cc3000e7e?auto=format&fit=crop&w=900&q=80"
                                alt="Development team"
                                className="rounded-md border border-gray-800 shadow-lg"
                            />
                        </div>

                        <div>
                            <h2 className="text-3xl font-semibold text-white mb-6">
                                Comprehensive E-Commerce Services
                            </h2>

                            <div className="space-y-6 text-sm text-gray-300">
                                <Service icon={<ShoppingCart size={18} />} text="Custom Shopify & Magento Development" />
                                <Service icon={<Database size={18} />} text="Platform Migration & Re-Architecture" />
                                <Service icon={<Globe size={18} />} text="Multi-Store & Global Commerce Enablement" />
                                <Service icon={<ShieldCheck size={18} />} text="PCI Compliance & Payment Integration" />
                                <Service icon={<Server size={18} />} text="ERP, CRM & Logistics Integration" />
                                <Service icon={<BarChart3 size={18} />} text="Performance Optimization & CRO" />
                            </div>
                        </div>

                    </div>
                </section>

                {/* ================= PLATFORMS ================= */}
                <section id="platforms" className="py-24 bg-[#111827] border-b border-gray-800 text-center">
                    <h2 className="text-3xl font-semibold text-white mb-12">
                        Commerce Platforms We Specialize In
                    </h2>

                    <div className="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-10 items-center">
                        <Platform name="Shopify Plus" />
                        <Platform name="Magento 2" />
                        <Platform name="WooCommerce" />
                        <Platform name="Headless Commerce" />
                    </div>
                </section>

                {/* ================= CASE STUDY ================= */}
                <section id="case" className="py-24 border-b border-gray-200 bg-white">
                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-16 items-center">

                        <div>
                            <h2 className="text-3xl font-semibold mb-6">
                                Enterprise Case Study
                            </h2>

                            <p className="text-gray-600 mb-6 leading-relaxed">
                                Delivered a scalable B2B commerce platform for a global
                                manufacturing brand handling over 100,000+ concurrent users
                                and multi-region transactions.
                            </p>

                            <ul className="space-y-3 text-sm text-gray-700">
                                <li>• 45% increase in conversion rate</li>
                                <li>• 60% improvement in page load speed</li>
                                <li>• Seamless SAP integration</li>
                                <li>• Zero downtime migration</li>
                            </ul>
                        </div>

                        <div>
                            <img
                                src="https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=900&q=80"
                                alt="Case study dashboard"
                                className="rounded-md border border-gray-200 shadow-lg"
                            />
                        </div>
                    </div>
                </section>
                
                {/* Our Brands */}
                <OurBrands />

            </div>
        </>
    );
}

/* ================= COMPONENTS ================= */

const Service = ({ icon, text }: any) => (
    <div className="flex items-center gap-3">
        <div className="text-blue-500">{icon}</div>
        <div>{text}</div>
    </div>
);

const Platform = ({ name }: any) => (
    <div className="border border-gray-700 py-6 rounded-md text-white font-medium hover:border-white transition">
        {name}
    </div>
);