import Sidebar from "@/components/layout/Sidebar";
import TopBar from "@/components/layout/TopBar";
import Image from "next/image";

export default function EcosystemPage() {
  const breadcrumbItems = [
    { label: "ASSETX", href: "/" },
    { label: "Ecosystem" },
  ];

  return (
    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900 flex">
      <Sidebar />
      <div className="flex-1 min-w-0 flex flex-col md:ml-[240px] pt-14 md:pt-0">
        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-4 md:px-8 py-3 md:py-6">
          <TopBar breadcrumbItems={breadcrumbItems} />
        </div>

        <div className="flex-1 px-4 md:px-8 py-4 md:py-8 bg-[#F3F4F6] dark:bg-gray-900 flex items-center justify-center">
          {/* Coming Soon Card */}
          <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 md:p-16 max-w-2xl w-full">
            <div className="flex flex-col items-center gap-8 text-center">
              {/* Icon */}
              <div className="relative w-24 h-24 opacity-40">
                <Image
                  src="/icons/navigation/icon-ecosystem.svg"
                  alt="Ecosystem"
                  fill
                  className="object-contain brightness-[0.45] dark:brightness-100 dark:invert"
                />
              </div>

              {/* Title */}
              <div className="flex flex-col gap-3">
                <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
                  Ecosystem Coming Soon
                </h1>
                <p className="text-body-default text-text-secondary dark:text-gray-400 leading-relaxed max-w-md">
                  We&apos;re building something exciting! The Ecosystem page will be available soon with powerful features and integrations.
                </p>
              </div>

              {/* Features Preview */}
              <div className="flex flex-col gap-3 w-full mt-4">
                <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center gap-3">
                  <div className="w-2 h-2 rounded-full bg-[#10b981]" />
                  <span className="text-body-small text-text-primary dark:text-white">
                    Protocol Integrations
                  </span>
                </div>
                <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center gap-3">
                  <div className="w-2 h-2 rounded-full bg-[#10b981]" />
                  <span className="text-body-small text-text-primary dark:text-white">
                    Partner Networks
                  </span>
                </div>
                <div className="bg-bg-subtle dark:bg-gray-700 rounded-xl p-4 flex items-center gap-3">
                  <div className="w-2 h-2 rounded-full bg-[#10b981]" />
                  <span className="text-body-small text-text-primary dark:text-white">
                    Cross-chain Bridges
                  </span>
                </div>
              </div>

              {/* CTA */}
              <p className="text-caption-small text-text-tertiary dark:text-gray-500 mt-4">
                Stay tuned for updates 🚀
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}