digraph FrontendArchitecture {
    // Graph settings
    rankdir=TB
    compound=true
    splines=ortho
    node [shape=box, style="rounded,filled", fontname="Helvetica", fontsize=11]
    edge [fontname="Helvetica", fontsize=9]

    label="AMAR Mascotas - Frontend Architecture (Next.js)\n\n"
    labelloc="t"
    fontsize=16
    fontname="Helvetica-Bold"

    // Next.js Core Cluster
    subgraph cluster_nextjs {
        label="Next.js 13+ (App Router)"
        style="rounded,filled"
        fillcolor="#E3F2FD"
        color="#1565C0"

        app_router [label="App Router\n/app/*", fillcolor="#BBDEFB"]
        layout [label="Layout Components\n(RootLayout, etc)", fillcolor="#BBDEFB"]
        middleware [label="Middleware\n(Auth redirect)", fillcolor="#BBDEFB"]
    }

    // Public Frontend Cluster
    subgraph cluster_public {
        label="Public Frontend (/(frontend))"
        style="rounded,filled"
        fillcolor="#E8F5E9"
        color="#2E7D32"

        home [label="Home Page\n/", fillcolor="#C8E6C9"]
        services_page [label="Services Catalog\n/servicios", fillcolor="#C8E6C9"]
        cart_page [label="Cart\n/carrito", fillcolor="#C8E6C9"]
        login_page [label="Login/Register\n/login", fillcolor="#C8E6C9"]
        profile_page [label="User Profile\n/perfil", fillcolor="#C8E6C9"]
        pets_page [label="My Pets\n/mascotas", fillcolor="#C8E6C9"]
        requests_page [label="My Requests\n/solicitudes", fillcolor="#C8E6C9"]
    }

    // Backoffice Cluster
    subgraph cluster_backoffice {
        label="Backoffice (/(backoffice)/admin)"
        style="rounded,filled"
        fillcolor="#FFF3E0"
        color="#E65100"

        admin_dash [label="Dashboard\n/admin", fillcolor="#FFE0B2"]
        admin_visits [label="Visits Management\n/admin/visits", fillcolor="#FFE0B2"]
        admin_pets [label="Pets Overview\n/admin/pets", fillcolor="#FFE0B2"]
        admin_requests [label="Service Requests\n/admin/solicitudes", fillcolor="#FFE0B2"]
        admin_calendar [label="Calendar View\n/admin/calendario", fillcolor="#FFE0B2"]
    }

    // Components Cluster
    subgraph cluster_components {
        label="Shared Components (/components)"
        style="rounded,filled"
        fillcolor="#F3E5F5"
        color="#7B1FA2"

        sidebar [label="Sidebar\nNavigation", fillcolor="#E1BEE7"]
        navbar [label="NavbarBackoffice\nTop Bar", fillcolor="#E1BEE7"]
        visits_section [label="VisitsSection\n(List + Actions)", fillcolor="#E1BEE7"]
        drawer [label="VisitsDrawer\n(Side Panel)", fillcolor="#E1BEE7"]
        tables [label="DataTable\nComponents", fillcolor="#E1BEE7"]
        forms [label="Form Components\n(Pet, Visit, etc)", fillcolor="#E1BEE7"]
    }

    // Services Layer Cluster
    subgraph cluster_services {
        label="Services Layer (/services)"
        style="rounded,filled"
        fillcolor="#FFEBEE"
        color="#C62828"

        http_service [label="HttpService\n(Axios wrapper)", fillcolor="#FFCDD2"]
        auth_api [label="authAPI\n(login/register)", fillcolor="#FFCDD2"]
        visits_api [label="visitsAPI\n(CRUD visits)", fillcolor="#FFCDD2"]
        orders_api [label="OrdersAPI\n(service requests)", fillcolor="#FFCDD2"]
        petowners_api [label="petOwnersAPI\n(clients)", fillcolor="#FFCDD2"]
        vets_api [label="VeterinariansAPI\n(professionals)", fillcolor="#FFCDD2"]
        services_api [label="servicesAPI\n(catalog)", fillcolor="#FFCDD2"]
        cart_api [label="CartAPI\n(shopping)", fillcolor="#FFCDD2"]
    }

    // State Management Cluster
    subgraph cluster_state {
        label="State Management (/redux, /contexts)"
        style="rounded,filled"
        fillcolor="#E0F7FA"
        color="#00838F"

        redux_store [label="Redux Store\n(Global State)", fillcolor="#B2EBF2"]
        auth_slice [label="Auth Slice\n(user, token)", fillcolor="#B2EBF2"]
        visits_slice [label="Visits Slice\n(visit data)", fillcolor="#B2EBF2"]
        cart_slice [label="Cart Slice\n(items)", fillcolor="#B2EBF2"]
        auth_context [label="AuthContext\n(Provider)", fillcolor="#B2EBF2"]
    }

    // Backend API Cluster (external)
    subgraph cluster_backend {
        label="Django Backend API"
        style="rounded,filled"
        fillcolor="#ECEFF1"
        color="#455A64"

        api_mascotas [label="/mascotas/api/v1/\n(Pets, Vets, Visits)", fillcolor="#CFD8DC"]
        api_productos [label="/productos/\n(Services, Prices)", fillcolor="#CFD8DC"]
        api_solicitudes [label="/solicitudes/\n(Requests)", fillcolor="#CFD8DC"]
        api_auth [label="/api/token/\n(JWT Auth)", fillcolor="#CFD8DC"]
        api_payments [label="/payments/\n(MercadoPago)", fillcolor="#CFD8DC"]
    }

    // User Types
    subgraph cluster_users {
        label="User Types"
        style="rounded,filled"
        fillcolor="#FCE4EC"
        color="#AD1457"

        petowner_user [label="PetOwner\n(Cliente)", shape=ellipse, fillcolor="#F8BBD9"]
        vet_user [label="Veterinarian\n(Profesional)", shape=ellipse, fillcolor="#F8BBD9"]
        admin_user [label="Admin/Staff\n(Interno)", shape=ellipse, fillcolor="#F8BBD9"]
    }

    // Relationships - Router
    app_router -> layout [color="#1565C0"]
    app_router -> middleware [color="#1565C0"]

    // Public pages
    home -> services_page [color="#2E7D32"]
    services_page -> cart_page [color="#2E7D32"]
    cart_page -> login_page [label="if not auth", color="#2E7D32", style=dashed]
    login_page -> profile_page [color="#2E7D32"]
    profile_page -> pets_page [color="#2E7D32"]
    profile_page -> requests_page [color="#2E7D32"]

    // Backoffice pages
    admin_dash -> admin_visits [color="#E65100"]
    admin_dash -> admin_pets [color="#E65100"]
    admin_dash -> admin_requests [color="#E65100"]
    admin_dash -> admin_calendar [color="#E65100"]

    // Components used by pages
    admin_visits -> visits_section [color="#7B1FA2", style=dashed]
    admin_visits -> drawer [color="#7B1FA2", style=dashed]
    admin_dash -> sidebar [color="#7B1FA2", style=dashed]
    admin_dash -> navbar [color="#7B1FA2", style=dashed]

    // Services to APIs
    http_service -> auth_api [color="#C62828"]
    http_service -> visits_api [color="#C62828"]
    http_service -> orders_api [color="#C62828"]
    http_service -> petowners_api [color="#C62828"]
    http_service -> vets_api [color="#C62828"]
    http_service -> services_api [color="#C62828"]
    http_service -> cart_api [color="#C62828"]

    // Services to Backend
    auth_api -> api_auth [label="POST /api/token/", color="#455A64"]
    visits_api -> api_mascotas [label="CRUD /vet-visits/", color="#455A64"]
    orders_api -> api_solicitudes [label="CRUD /service-requests/", color="#455A64"]
    petowners_api -> api_mascotas [label="CRUD /pet-owners/", color="#455A64"]
    vets_api -> api_mascotas [label="GET /veterinarians/", color="#455A64"]
    services_api -> api_productos [label="GET /services/", color="#455A64"]
    cart_api -> api_productos [label="CRUD /cart/", color="#455A64"]

    // State connections
    auth_slice -> redux_store [color="#00838F"]
    visits_slice -> redux_store [color="#00838F"]
    cart_slice -> redux_store [color="#00838F"]
    auth_context -> redux_store [color="#00838F", style=dashed]

    // User access paths
    petowner_user -> home [label="public access", color="#AD1457"]
    petowner_user -> profile_page [label="authenticated", color="#AD1457", style=dashed]
    vet_user -> admin_dash [label="backoffice", color="#AD1457"]
    admin_user -> admin_dash [label="full access", color="#AD1457"]

    // API routing through HttpService
    http_service -> api_auth [label="JWT refresh", color="#455A64", style=dashed]
}