"use client";

import React from "react";
import { PageLayout } from "@/components/templates/PageLayout";
import {
  Squares2X2Icon,
  ServerIcon,
  DevicePhoneMobileIcon,
  ShieldCheckIcon,
  WifiIcon,
  GlobeAltIcon,
} from "@heroicons/react/24/outline";
import { ServiceHeroCard } from "@/features/catalog/components/common/ServiceHeroCard";
import { FeatureCard } from "@/features/catalog/components/common/FeatureCard";

export function CatalogHomeView() {
  return (
    <div className="min-h-screen bg-slate-50">
      <PageLayout icon={<></>} title="" description="">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Squares2X2Icon className="h-4 w-4" />
              Services Catalog
            </div>
            <h1 className="text-5xl font-bold text-gray-900 mb-6 leading-tight">
              Choose Your Perfect
              <br />
              <span className="text-blue-600">Connectivity Solution</span>
            </h1>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
              Discover high-speed internet, mobile data/voice options, and secure VPN services.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
            <ServiceHeroCard
              title="Internet Service"
              description="Ultra-high-speed fiber internet with speeds up to 10Gbps."
              icon={<ServerIcon className="h-10 w-10" />}
              features={[
                "Up to 10Gbps speeds",
                "Fiber optic technology",
                "Multiple access modes",
                "Professional installation",
              ]}
              href="/catalog/internet"
              color="blue"
            />
            <ServiceHeroCard
              title="SIM & eSIM"
              description="Data, SMS, and voice plans with both physical SIM and eSIM options."
              icon={<DevicePhoneMobileIcon className="h-10 w-10" />}
              features={[
                "Physical SIM & eSIM",
                "Data + SMS + Voice plans",
                "Family discounts",
                "Multiple data options",
              ]}
              href="/catalog/sim"
              color="green"
            />
            <ServiceHeroCard
              title="VPN Service"
              description="Secure remote access solutions for business and personal use."
              icon={<ShieldCheckIcon className="h-10 w-10" />}
              features={[
                "Secure encryption",
                "Multiple locations",
                "Business & personal",
                "24/7 connectivity",
              ]}
              href="/catalog/vpn"
              color="purple"
            />
          </div>

          <div className="bg-white rounded-2xl p-10 border border-gray-200 shadow-sm">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-gray-900 mb-3">Why Choose Our Services?</h2>
              <p className="text-base text-gray-600 max-w-2xl mx-auto leading-relaxed">
                Personalized recommendations based on your location and account eligibility.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <FeatureCard
                icon={<WifiIcon className="h-8 w-8 text-blue-600" />}
                title="Location-Based Plans"
                description="Internet plans tailored to your house type and infrastructure"
              />
              <FeatureCard
                icon={<GlobeAltIcon className="h-8 w-8 text-purple-600" />}
                title="Seamless Integration"
                description="Manage all services from a single account"
              />
            </div>
          </div>
        </div>
      </PageLayout>
    </div>
  );
}

export default CatalogHomeView;
